update Alert (#398)

.changeset/fluffy-chairs-bake.md

@@ -0,0 +1,7 @@
+---
+'@utilitywarehouse/web-ui': patch
+---
+
+`Alert` component fixes
+- Layout for `row` direction
+- Fix `colorScheme` prop type, updating from enum to string

.github/workflows/checks.yml

@@ -16,8 +16,8 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           version: 8
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/chromatic.yml

@@ -14,10 +14,10 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           version: 8
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/generate-colour-system.yml

@@ -29,8 +29,8 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           version: 8
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: 'https://registry.npmjs.org'

.github/workflows/release.yml

@@ -14,8 +14,8 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           version: 8
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

packages/web-ui/src/Alert/Alert.docs.mdx

@@ -22,10 +22,25 @@ The `colorScheme` prop will change the Alert colours.
 <Alert
   colorScheme="red"
   title="Something went wrong"
-  text="Please refresh your browser or come back later."
+  text="Please refresh your browser or come back later"
 />
 ```
 
+For now, we have adopted a presentational naming convention here, rather than
+associating semantics with the different colour schemes. This is only because
+we're not ready yet to properly define these semantics within the the colour
+system, across all components, and product applications.
+
+However you can imply some familiar semantics, which could be considered as
+`severity` or `tone`;
+
+- `cyan` -> `information`
+- `green` -> `success`
+- `gold` -> `warning`
+- `red` -> `error`
+
+<Canvas of={Stories.AlertColorSchemes} />
+
 ## Accessibility
 
 The `Alert` component should be used sparingly. It has an ARIA role of `alert`,

packages/web-ui/src/Alert/Alert.props.ts

@@ -1,12 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { COLOR_SCHEME } from '../types';
 
 export interface AlertProps extends ComponentPropsWithoutRef<'div'> {
   /**
    * Sets the colour scheme.
    * @default cyan
    */
-  colorScheme?: COLOR_SCHEME.cyan | COLOR_SCHEME.red | COLOR_SCHEME.green | COLOR_SCHEME.gold;
+  colorScheme?: 'cyan' | 'green' | 'gold' | 'red';
   /**
    * Sets the function to be called when the alert is closed.
    */

packages/web-ui/src/Alert/Alert.stories.tsx

@@ -2,15 +2,9 @@ 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';
 import { Button } from '../lab/Button';
 
-const colorSchemes = [
-  COLOR_SCHEME.cyan,
-  COLOR_SCHEME.red,
-  COLOR_SCHEME.green,
-  COLOR_SCHEME.gold,
-] as const;
+const colorSchemes = ['cyan', 'red', 'green', 'gold'] as const;
 
 const meta: Meta<typeof Alert> = {
   title: 'Web UI / Components / Alert',
@@ -25,7 +19,7 @@ const meta: Meta<typeof Alert> = {
     text: 'Alert text purus odio, maximus tincidunt aliquet posuere, mollis ut mauris.',
     linkText: 'Alert link',
     linkHref: '#',
-    colorScheme: COLOR_SCHEME.cyan,
+    colorScheme: 'cyan',
   },
 };
 
@@ -114,3 +108,29 @@ export const ToggleAlert: Story = {
     );
   },
 };
+
+export const AlertColorSchemes: Story = {
+  name: 'Alert ColorSchemes',
+  render: () => {
+    return (
+      <Flex direction="column" gap={2} width="fit-content">
+        <Alert
+          colorScheme="cyan"
+          direction="row"
+          text="Cyan colorScheme for informational messages"
+        />
+        <Alert
+          colorScheme="green"
+          direction="row"
+          text="Green colorScheme for positive or success messages"
+        />
+        <Alert colorScheme="gold" direction="row" text="Gold colorScheme for warning messages" />
+        <Alert
+          colorScheme="red"
+          direction="row"
+          text="Red colorScheme for errors and higher warnings"
+        />
+      </Flex>
+    );
+  },
+};

packages/web-ui/src/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { COLOR_SCHEME, PropsWithSx } from '../types';
+import { PropsWithSx } from '../types';
 import { AlertProps } from './Alert.props';
 import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES, px, withGlobalPrefix } from '../utils';
 import clsx from 'clsx';
@@ -72,7 +72,7 @@ export const Alert = React.forwardRef<
   (
     {
       className,
-      colorScheme = COLOR_SCHEME.cyan,
+      colorScheme = 'cyan',
       direction = 'column',
       children,
       onClose,
@@ -84,6 +84,13 @@ export const Alert = React.forwardRef<
     },
     ref
   ) => {
+    const icons = {
+      cyan: InformationMediumContainedIcon,
+      green: TickMediumContainedIcon,
+      gold: WarningMediumContainedIcon,
+      red: WarningMediumContainedIcon,
+    };
+    const AlertIcon = icons[colorScheme];
     const dataAttributeProps = { [DATA_ATTRIBUTES.colorscheme]: colorScheme };
     return (
       <StyledElement
@@ -99,12 +106,14 @@ export const Alert = React.forwardRef<
         {...dataAttributeProps}
         {...props}
       >
-        {colorScheme === COLOR_SCHEME.cyan ? <InformationMediumContainedIcon /> : null}
-        {colorScheme === COLOR_SCHEME.green ? <TickMediumContainedIcon /> : null}
-        {colorScheme === COLOR_SCHEME.gold ? <WarningMediumContainedIcon /> : null}
-        {colorScheme === COLOR_SCHEME.red ? <WarningMediumContainedIcon /> : null}
+        <AlertIcon />
 
-        <Flex direction={direction} gap={1} flex={1} align="start">
+        <Flex
+          direction={direction}
+          gap={1}
+          flex={1}
+          align={direction === 'row' ? 'center' : 'start'}
+        >
           {children ?? (
             <>
               {title ? <AlertTitle>{title}</AlertTitle> : null}

packages/web-ui/src/Alert/AlertButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled } from '../theme';
 import { colorSchemeParentSelector, px, withGlobalPrefix } from '../utils';
-import { COLOR_SCHEME, PropsWithSx } from '../types';
+import { PropsWithSx } from '../types';
 import clsx from 'clsx';
 import { UnstyledButton } from '../UnstyledButton';
 import type { UnstyledButtonProps } from '../UnstyledButton';
@@ -22,22 +22,22 @@ const StyledElement = styled(UnstyledButton)({
     borderRadius: px(4),
     boxShadow: '0 0 0 2px var(--alert-focus-color)',
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.cyan)]: {
+  [colorSchemeParentSelector('cyan')]: {
     '--alert-button-color': colors.cyan700,
     '--alert-button-color-hover': colors.cyan900,
     '--alert-focus-color': colors.cyan700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.green)]: {
+  [colorSchemeParentSelector('green')]: {
     '--alert-button-color': colors.green700,
     '--alert-button-color-hover': colors.green900,
     '--alert-focus-color': colors.green700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.gold)]: {
+  [colorSchemeParentSelector('gold')]: {
     '--alert-button-color': colors.gold700,
     '--alert-button-color-hover': colors.gold900,
     '--alert-focus-color': colors.gold700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.red)]: {
+  [colorSchemeParentSelector('red')]: {
     '--alert-button-color': colors.red700,
     '--alert-button-color-hover': colors.red900,
     '--alert-focus-color': colors.red700,

packages/web-ui/src/Alert/AlertLink.tsx

@@ -5,7 +5,7 @@ import type { TextLinkProps } from '../lab/TextLink';
 import { styled } from '../theme';
 import { fontWeights } from '../tokens';
 import { colorSchemeParentSelector, px, withGlobalPrefix } from '../utils';
-import { COLOR_SCHEME, PropsWithSx } from '../types';
+import { PropsWithSx } from '../types';
 import clsx from 'clsx';
 
 const componentName = 'AlertLink';
@@ -20,19 +20,23 @@ const StyledElement = styled(TextLink)({
     borderRadius: px(4),
     boxShadow: '0 0 0 2px var(--alert-focus-color)',
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.cyan)]: {
+  ':where(:visited)': {
+    color: 'var(--alert-link-color)',
+    textDecorationColor: 'var(--alert-link-color)',
+  },
+  [colorSchemeParentSelector('cyan')]: {
     '--alert-link-color': colors.cyan700,
     '--alert-focus-color': colors.cyan700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.green)]: {
+  [colorSchemeParentSelector('green')]: {
     '--alert-link-color': colors.green700,
     '--alert-focus-color': colors.green700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.gold)]: {
+  [colorSchemeParentSelector('gold')]: {
     '--alert-link-color': colors.gold700,
     '--alert-focus-color': colors.gold700,
   },
-  [colorSchemeParentSelector(COLOR_SCHEME.red)]: {
+  [colorSchemeParentSelector('red')]: {
     '--alert-link-color': colors.red700,
     '--alert-focus-color': colors.red700,
   },

packages/web-ui/src/types/color.ts

@@ -5,11 +5,3 @@ export const inverseBackgroundColors = ['purple', 'midnight'];
 export type InverseBackgroundColor = (typeof inverseBackgroundColors)[number];
 export const backgroundColors = [...neutralBackgroundColors, ...inverseBackgroundColors];
 export type BackgroundColor = (typeof backgroundColors)[number];
-
-export enum COLOR_SCHEME {
-  cyan = 'cyan',
-  red = 'red',
-  green = 'green',
-  gold = 'gold',
-  grey = 'grey',
-}

packages/web-ui/src/utils/css-selector-helpers.ts

@@ -1,4 +1,4 @@
-import { Breakpoints, COLOR_SCHEME } from '../types';
+import { Breakpoints } from '../types';
 import { DATA_ATTRIBUTES } from './data-attributes';
 
 export function classSelector(className: string) {
@@ -12,16 +12,16 @@ function colorSchemeSelector(color: string) {
   return `:where([${DATA_ATTRIBUTES.colorscheme}="${color}"])`;
 }
 
-export function colorSchemeParentSelector(colorScheme: COLOR_SCHEME) {
+export function colorSchemeParentSelector(colorScheme: string) {
   return `:where([${DATA_ATTRIBUTES.colorscheme}="${colorScheme}"] &)`;
 }
 
 export const COLORSCHEME_SELECTORS = {
-  cyan: colorSchemeSelector(COLOR_SCHEME.cyan),
-  red: colorSchemeSelector(COLOR_SCHEME.red),
-  green: colorSchemeSelector(COLOR_SCHEME.green),
-  gold: colorSchemeSelector(COLOR_SCHEME.gold),
-  grey: colorSchemeSelector(COLOR_SCHEME.grey),
+  cyan: colorSchemeSelector('cyan'),
+  red: colorSchemeSelector('red'),
+  green: colorSchemeSelector('green'),
+  gold: colorSchemeSelector('gold'),
+  grey: colorSchemeSelector('grey'),
 };
 
 export const DATA_ATTRIBUTE_SELECTORS = {