Analytics - alternating colour on table (#4184)

* new color on table * turn analytics flag off * safer css * fix test * fix linting
yldio · Mar 5, 2024 · 7a3399e · 7a3399e
1 parent 864a700
commit 7a3399e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/flags/src/index.ts b/packages/flags/src/index.ts
@@ -8,6 +8,7 @@ export type Flags = Partial<Record<Flag, boolean | undefined>>;
 let overrides: Flags = {
   // flags already live in prod:
   // can also be used to manually disable a flag in development:
+  ANALYTICS: false,
   DISPLAY_EVENTS: false,
 };
 

diff --git a/packages/react-components/src/organisms/LeadershipMembershipTable.tsx b/packages/react-components/src/organisms/LeadershipMembershipTable.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 import { Card } from '../atoms';
-import { charcoal, steel } from '../colors';
+import { charcoal, neutral200, steel } from '../colors';
 import { perRem, tabletScreen } from '../pixels';
 
 const container = css({
   display: 'grid',
-  padding: `${32 / perRem}em ${24 / perRem}em ${15 / perRem}em`,
+  paddingTop: `${32 / perRem}em`,
 });
 
 const gridTitleStyles = css({
@@ -25,16 +25,18 @@ const rowTitleStyles = css({
 
 const rowStyles = css({
   display: 'grid',
-  paddingTop: `${20 / perRem}em`,
-  paddingBottom: 0,
+  padding: `${20 / perRem}em ${24 / perRem}em 0`,
   borderBottom: `1px solid ${steel.rgb}`,
   ':first-of-type': {
     borderBottom: 'none',
   },
+  ':nth-of-type(2n+3)': {
+    background: neutral200.rgb,
+  },
   ':last-child': {
     borderBottom: 'none',
     marginBottom: 0,
-    paddingBottom: 0,
+    paddingBottom: `${15 / perRem}em`,
   },
   [`@media (min-width: ${tabletScreen.min}px)`]: {
     gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',

diff --git a/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx b/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
@@ -2,11 +2,20 @@ import { StaticRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { network } from '@asap-hub/routing';
 import { findParentWithStyle } from '@asap-hub/dom-test-utils';
+import { renderHook } from '@testing-library/react-hooks';
+import { useFlags } from '@asap-hub/react-context';
 
 import MainNavigation from '../MainNavigation';
 
 it('renders the navigation items', () => {
+  const {
+    result: { current },
+  } = renderHook(useFlags);
+
+  current.enable('ANALYTICS');
+
   const { getAllByRole } = render(<MainNavigation userOnboarded={true} />);
+
   expect(
     getAllByRole('listitem').map((item) => {
       expect(item).toHaveStyle('opacity:');