refactor: use presentational values for colorScheme

utilitywarehouse · Jun 24, 2024 · 85c8338 · 85c8338
1 parent 1e32bc3
commit 85c8338
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 23 deletions.
diff --git a/packages/web-ui/src/Alert/Alert.props.ts b/packages/web-ui/src/Alert/Alert.props.ts
@@ -1,11 +1,12 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { COLOR_SCHEME } from '../types';
 
 export interface AlertProps extends ComponentPropsWithoutRef<'div'> {
   /**
    * Sets the colour scheme.
    * @default info
    */
-  colorScheme?: 'info' | 'success' | 'warning' | 'error';
+  colorScheme?: COLOR_SCHEME.cyan | COLOR_SCHEME.red | COLOR_SCHEME.green | COLOR_SCHEME.gold;
   /**
    * Sets the function to be called when the alert is dismissed and shows the dismiss icon.
    */

diff --git a/packages/web-ui/src/Alert/Alert.stories.tsx b/packages/web-ui/src/Alert/Alert.stories.tsx
@@ -2,8 +2,14 @@ import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Alert } from './Alert';
 import { Flex } from '../Flex';
+import { COLOR_SCHEME } from '../types';
 
-const colorSchemes = ['info', 'warning', 'error', 'success'] as const;
+const colorSchemes = [
+  COLOR_SCHEME.cyan,
+  COLOR_SCHEME.red,
+  COLOR_SCHEME.green,
+  COLOR_SCHEME.gold,
+] as const;
 
 const meta: Meta<typeof Alert> = {
   title: 'Web UI / Components / Alert',
@@ -18,7 +24,7 @@ const meta: Meta<typeof Alert> = {
     text: 'Alert text purus odio, maximus tincidunt aliquet posuere, mollis ut mauris.',
     linkText: 'Alert link',
     linkHref: '#',
-    colorScheme: 'info',
+    colorScheme: COLOR_SCHEME.cyan,
   },
 };
 

diff --git a/packages/web-ui/src/Alert/Alert.tsx b/packages/web-ui/src/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PropsWithSx } from '../types';
+import { COLOR_SCHEME, PropsWithSx } from '../types';
 import { AlertProps } from './Alert.props';
 import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES, px, withGlobalPrefix } from '../utils';
 import clsx from 'clsx';
@@ -79,10 +79,10 @@ const StyledElement = styled('div')({
 });
 
 const AlertIcon = ({ colorScheme }: { colorScheme: AlertProps['colorScheme'] }) => {
-  if (colorScheme === 'info') {
+  if (colorScheme === COLOR_SCHEME.cyan) {
     return <InformationMediumContainedIcon />;
   }
-  if (colorScheme === 'success') {
+  if (colorScheme === COLOR_SCHEME.green) {
     return <TickMediumContainedIcon />;
   }
   return <WarningMediumContainedIcon />;
@@ -100,7 +100,7 @@ export const Alert = React.forwardRef<
   (
     {
       className,
-      colorScheme = 'info',
+      colorScheme = COLOR_SCHEME.cyan,
       direction = 'column',
       children,
       onDismiss,

diff --git a/packages/web-ui/src/Alert/AlertLink.tsx b/packages/web-ui/src/Alert/AlertLink.tsx
@@ -16,16 +16,16 @@ const StyledElement = styled(TextLink)({
   color: 'var(--alert-link-color)',
   textDecorationColor: 'var(--alert-link-color)',
   alignSelf: 'flex-start',
-  [colorSchemeParentSelector(COLOR_SCHEME.info)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.cyan)]: {
     '--alert-link-color': colors.cyan700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.success)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.green)]: {
     '--alert-link-color': colors.green700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.warning)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.gold)]: {
     '--alert-link-color': colors.gold700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.error)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.red)]: {
     '--alert-link-color': colors.red700,
   },
 });

diff --git a/packages/web-ui/src/Alert/AlertText.tsx b/packages/web-ui/src/Alert/AlertText.tsx
@@ -12,16 +12,16 @@ const componentClassName = withGlobalPrefix(componentName);
 
 const StyledElement = styled(Text)({
   color: 'var(--alert-text-color)',
-  [colorSchemeParentSelector(COLOR_SCHEME.info)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.cyan)]: {
     '--alert-text-color': colors.cyan900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.success)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.green)]: {
     '--alert-text-color': colors.green900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.warning)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.gold)]: {
     '--alert-text-color': colors.gold900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.error)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.red)]: {
     '--alert-text-color': colors.red900,
   },
 });

diff --git a/packages/web-ui/src/Alert/AlertTitle.tsx b/packages/web-ui/src/Alert/AlertTitle.tsx
@@ -14,16 +14,16 @@ const componentClassName = withGlobalPrefix(componentName);
 const StyledElement = styled(Text)({
   fontWeight: fontWeights.secondary.semibold,
   color: 'var(--alert-text-color)',
-  [colorSchemeParentSelector(COLOR_SCHEME.info)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.cyan)]: {
     '--alert-text-color': colors.cyan900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.success)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.green)]: {
     '--alert-text-color': colors.green900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.warning)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.gold)]: {
     '--alert-text-color': colors.gold900,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.error)]: {
+  [colorSchemeParentSelector(COLOR_SCHEME.red)]: {
     '--alert-text-color': colors.red900,
   },
 });

diff --git a/packages/web-ui/src/types/color.ts b/packages/web-ui/src/types/color.ts
@@ -12,8 +12,4 @@ export enum COLOR_SCHEME {
   green = 'green',
   gold = 'gold',
   grey = 'grey',
-  error = 'error',
-  info = 'info',
-  warning = 'warning',
-  success = 'success',
 }