[ASAP-269] - component color fix (#4285)

yldio · May 24, 2024 · 5431ce1 · 5431ce1
1 parent 935e423
commit 5431ce1
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 69 deletions.
diff --git a/packages/react-components/src/atoms/Checkbox.tsx b/packages/react-components/src/atoms/Checkbox.tsx
@@ -1,47 +1,51 @@
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
 import { perRem } from '../pixels';
 import { fern, lead, pine, steel } from '../colors';
 import { noop } from '../utils';
 import { tickIcon } from '../icons';
 
-const checkboxStyles = css({
-  boxSizing: 'border-box',
-  width: `${24 / perRem}em`,
-  height: `${24 / perRem}em`,
-  marginRight: `${12 / perRem}em`,
-  marginTop: `${12 / perRem}em`,
-  marginBottom: `${12 / perRem}em`,
+const checkboxStyles = ({
+  primary500 = fern,
+  primary900 = pine,
+}: Theme['colors'] = {}) =>
+  css({
+    boxSizing: 'border-box',
+    width: `${24 / perRem}em`,
+    height: `${24 / perRem}em`,
+    marginRight: `${12 / perRem}em`,
+    marginTop: `${12 / perRem}em`,
+    marginBottom: `${12 / perRem}em`,
 
-  appearance: 'none',
-  outline: 'none',
-  borderRadius: 0,
-  borderStyle: 'solid',
-  borderWidth: `${1 / perRem}em`,
-  borderColor: steel.rgb,
+    appearance: 'none',
+    outline: 'none',
+    borderRadius: 0,
+    borderStyle: 'solid',
+    borderWidth: `${1 / perRem}em`,
+    borderColor: steel.rgb,
 
-  ':enabled:hover, :enabled:focus': {
-    borderColor: lead.rgb,
-  },
-  ':checked': {
-    borderColor: fern.rgb,
-    backgroundColor: fern.rgb,
-    '::before': {
-      content: `url(data:image/svg+xml;utf8,${encodeURIComponent(
-        renderToStaticMarkup(tickIcon),
-      )})`,
-      display: 'flex',
-      justifyContent: 'center',
-      lineHeight: `${24 / perRem}em`,
+    ':enabled:hover, :enabled:focus': {
+      borderColor: lead.rgb,
     },
+    ':checked': {
+      borderColor: primary500.rgba,
+      backgroundColor: primary500.rgba,
+      '::before': {
+        content: `url(data:image/svg+xml;utf8,${encodeURIComponent(
+          renderToStaticMarkup(tickIcon),
+        )})`,
+        display: 'flex',
+        justifyContent: 'center',
+        lineHeight: `${24 / perRem}em`,
+      },
 
-    ':hover, :focus': {
-      borderColor: pine.rgb,
-      backgroundColor: pine.rgb,
+      ':hover, :focus': {
+        borderColor: primary900.rgba,
+        backgroundColor: primary900.rgba,
+      },
     },
-  },
-});
+  });
 
 interface CheckboxProps {
   readonly id?: string;
@@ -53,7 +57,6 @@ interface CheckboxProps {
 const Checkbox: React.FC<CheckboxProps> = ({
   id,
   groupName,
-
   enabled = true,
   checked = false,
   onSelect = noop,
@@ -64,7 +67,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
     checked={checked}
     disabled={!enabled}
     onChange={() => onSelect()}
-    css={checkboxStyles}
+    css={({ colors }) => checkboxStyles(colors)}
     type="checkbox"
   />
 );

diff --git a/packages/react-components/src/atoms/Tag.tsx b/packages/react-components/src/atoms/Tag.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 import { steel, mint, tin, neutral900, pine, charcoal } from '../colors';
 import { crossSmallIcon } from '../icons';
 import { perRem } from '../pixels';
@@ -29,13 +29,17 @@ const highlightStyles = css({
   backgroundColor: mint.rgb,
 });
 
-const hoverStyles = css({
-  ':hover': {
-    backgroundColor: mint.rgb,
-    borderColor: pine.rgb,
-    color: pine.rgb,
-  },
-});
+const hoverStyles = ({
+  primary100 = mint,
+  primary900 = pine,
+}: Theme['colors'] = {}) =>
+  css({
+    ':hover': {
+      backgroundColor: primary100.rgba,
+      borderColor: primary900.rgba,
+      color: primary900.rgba,
+    },
+  });
 
 const disabledStyles = css({
   borderColor: tin.rgb,
@@ -96,10 +100,10 @@ const Tag: React.FC<TagProps> = ({
   <div css={containerStyles} title={title}>
     <ConditionalLinkWrapper href={enabled ? href : undefined}>
       <div
-        css={[
+        css={({ colors }) => [
           styles,
           ...(enabled
-            ? [highlight && highlightStyles, !!href && hoverStyles]
+            ? [highlight && highlightStyles, !!href && hoverStyles(colors)]
             : [disabledStyles]),
         ]}
       >

diff --git a/packages/react-components/src/atoms/__tests__/Checkbox.test.tsx b/packages/react-components/src/atoms/__tests__/Checkbox.test.tsx
@@ -1,8 +1,10 @@
 import { ComponentProps } from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@emotion/react';
 
 import Checkbox from '../Checkbox';
+import { color } from '../../colors';
 
 const props: ComponentProps<typeof Checkbox> = {
   groupName: '',
@@ -26,3 +28,26 @@ it('fires the select event', async () => {
   userEvent.click(getByRole('checkbox'));
   expect(handleChange.mock.calls.length).toBe(1);
 });
+
+it('uses ThemeProvider theme primaryColor', () => {
+  const testCheckedBackgroundColor = color(0, 106, 146);
+  const theme = {
+    colors: {
+      primary500: testCheckedBackgroundColor,
+    },
+  };
+  const { getByRole } = render(
+    <ThemeProvider theme={theme}>
+      <Checkbox {...props} checked />
+    </ThemeProvider>,
+  );
+
+  const checkbox = getByRole('checkbox');
+
+  const { backgroundColor: checkedBackgroundColor } = getComputedStyle(
+    checkbox,
+    ':checked',
+  );
+
+  expect(checkedBackgroundColor).toBe(testCheckedBackgroundColor.rgb);
+});
diff --git a/packages/react-components/src/organisms/OutputVersions.tsx b/packages/react-components/src/organisms/OutputVersions.tsx
@@ -1,5 +1,5 @@
 import { ResearchOutputVersion } from '@asap-hub/model';
-import { css, SerializedStyles, Theme } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 import { useState } from 'react';
 
 import { Button, Card, Headline2, Link, Paragraph, Pill } from '../atoms';
@@ -17,7 +17,7 @@ import { formatDateToTimezone } from '../date';
 import { externalLinkIcon } from '../icons';
 import { contentSidePaddingWithNavigation } from '../layout';
 import { mailToSupport, TECH_SUPPORT_EMAIL } from '../mail';
-import { defaultThemeVariant, ThemeVariant } from '../theme';
+import { ThemeVariant } from '../theme';
 
 const container = css({
   display: 'grid',
@@ -96,14 +96,6 @@ export const themeStyles: Record<ThemeVariant, SerializedStyles> = {
   dark: css({ stroke: paper.rgb, ':active': { stroke: paper.rgb } }),
 };
 
-const getSvgColors = (
-  colors: Theme['colors'],
-  themeVariant: ThemeVariant,
-): SerializedStyles =>
-  colors?.primary500
-    ? css({ stroke: colors.primary500.rgba })
-    : themeStyles[themeVariant];
-
 const mainStyles = css({
   padding: `${36 / perRem}em ${contentSidePaddingWithNavigation(8)} 0`,
   display: 'grid',
@@ -131,7 +123,6 @@ export type OutputVersionsProps = {
 };
 
 const OutputVersions: React.FC<OutputVersionsProps> = ({
-  themeVariant = defaultThemeVariant,
   versions,
   versionAction,
   app,
@@ -140,14 +131,12 @@ const OutputVersions: React.FC<OutputVersionsProps> = ({
   const [showMore, setShowMore] = useState(false);
   const displayShowMoreButton = versions.length > 5;
 
-  const iconsStyles = ({ colors }: Theme) =>
-    css({
-      position: 'relative',
-      top: '6px',
-      display: 'inline-flex',
-      alignSelf: 'center',
-      svg: getSvgColors(colors, themeVariant),
-    });
+  const iconsStyles = css({
+    position: 'relative',
+    top: '6px',
+    display: 'inline-flex',
+    alignSelf: 'center',
+  });
 
   return (
     <main css={versionAction && app === 'crn' ? [mainStyles] : []}>
@@ -214,11 +203,8 @@ const OutputVersions: React.FC<OutputVersionsProps> = ({
                     </p>
                     <span css={[titleStyles, rowTitleStyles]}>Link</span>
                     <p css={paragraphStyle}>
-                      <Link ellipsed href={link}>
-                        Output{' '}
-                        <span css={(theme) => iconsStyles(theme)}>
-                          {externalLinkIcon}
-                        </span>
+                      <Link ellipsed href={link} applyIconTheme>
+                        Output <span css={iconsStyles}>{externalLinkIcon}</span>
                       </Link>
                     </p>
                   </div>

diff --git a/packages/react-components/src/organisms/__tests__/OutputVersions.test.tsx b/packages/react-components/src/organisms/__tests__/OutputVersions.test.tsx
@@ -83,7 +83,7 @@ describe('theming', () => {
     const { getByTitle } = render(<OutputVersions {...baseProps} />);
     const icon = getByTitle('External Link');
     const { stroke } = getComputedStyle(icon.parentNode as Element);
-    expect(stroke).toBe(fern.rgb);
+    expect(stroke).toBe(fern.rgba);
   });
 
   it('uses theme primaryColor for the external icon svg', () => {