@hyphen/hyphen-components 7.9.0 → 8.0.0

package/src/components/Badge/Badge.test.tsx

@@ -1,48 +1,82 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Badge, BadgeSize, BadgeVariant } from './Badge';
+import {
+  Badge,
+  BadgeHue,
+  BadgeRadius,
+  BadgeSemanticColor,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 
 export const BADGE_VARIANTS: BadgeVariant[] = [
-  'default',
-  'secondary',
-  'danger',
+  'solid',
+  'soft',
+  'surface',
   'outline',
-  'light-grey',
-  'dark-grey',
-  'inverse',
+];
+
+export const BADGE_HUES: BadgeHue[] = [
+  'grey',
+  'blue',
   'green',
   'yellow',
-  'blue',
   'red',
   'purple',
   'orange',
-  'hyphen',
+  'brand',
 ];
 
+export const BADGE_SEMANTIC_COLORS: Record<BadgeSemanticColor, BadgeHue> = {
+  danger: 'red',
+  success: 'green',
+  warning: 'yellow',
+  info: 'blue',
+};
+
+export const BADGE_RADII: BadgeRadius[] = ['none', 'sm', 'md', 'lg', 'full'];
+
 export const BADGE_SIZES: BadgeSize[] = ['sm', 'md', 'lg'];
 
+/**
+ * Badge wraps bare text in a label span, so the element rendering the text is not the
+ * badge root. Climb to the root the same way Button's tests do.
+ */
+const getBadge = (text: string): HTMLElement =>
+  screen.getByText(text).closest('.badge') as HTMLElement;
+
 describe('Badge', () => {
   test('Badge correctly renders with base props', () => {
-    render(<Badge message="hello" />);
-    const badge = screen.getByText('hello');
+    render(<Badge>hello</Badge>);
+    const badge = getBadge('hello');
     expect(badge).toBeInTheDocument();
-    expect(badge.getAttribute('class')).toContain('default');
+    expect(badge.getAttribute('class')).toContain('soft');
   });
 
-  test('it applies the default variant when none is provided', () => {
+  test('it applies the default variant, color and radius when none are provided', () => {
     render(<Badge>Badge</Badge>);
-    const badge = screen.getByText('Badge');
+    const badge = getBadge('Badge');
+
+    expect(badge.getAttribute('class')).toContain('soft');
+    expect(badge.getAttribute('class')).toContain('color-grey');
+    expect(badge.getAttribute('class')).toContain('radius-full');
+  });
+
+  test('it renders falsy but valid children such as 0', () => {
+    render(<Badge>{0}</Badge>);
 
-    expect(badge.getAttribute('class')).toContain('default');
-    expect(badge.getAttribute('class')).not.toContain('light-grey');
+    expect(screen.getByText('0')).toBeInTheDocument();
+    expect(getBadge('0')).toBeInTheDocument();
   });
 
   describe('Variants', () => {
     BADGE_VARIANTS.map((variant) =>
       describe(`${variant}`, () => {
         test(`it has a ${variant} class applied to it`, () => {
-          render(<Badge variant={variant} message={`${variant} Badge`} />);
-          const badge = screen.getByText(`${variant} Badge`);
+          render(<Badge variant={variant}>{`${variant} Badge`}</Badge>);
+          const badge = getBadge(`${variant} Badge`);
 
           expect(badge.getAttribute('class')).toContain(variant);
         });
@@ -50,12 +84,137 @@ describe('Badge', () => {
     );
   });
 
+  describe('Colors', () => {
+    BADGE_HUES.map((color) =>
+      describe(`${color}`, () => {
+        test(`it has a color-${color} class applied to it`, () => {
+          render(<Badge color={color}>{`${color} Badge`}</Badge>);
+          const badge = getBadge(`${color} Badge`);
+
+          expect(badge.getAttribute('class')).toContain(`color-${color}`);
+        });
+      })
+    );
+
+    describe('semantic aliases', () => {
+      (
+        Object.entries(BADGE_SEMANTIC_COLORS) as [BadgeSemanticColor, BadgeHue][]
+      ).map(([semanticColor, hue]) =>
+        test(`${semanticColor} resolves to the ${hue} hue`, () => {
+          render(<Badge color={semanticColor}>{`${semanticColor} Badge`}</Badge>);
+          const badge = getBadge(`${semanticColor} Badge`);
+
+          expect(badge.getAttribute('class')).toContain(`color-${hue}`);
+          expect(badge.getAttribute('class')).not.toContain(
+            `color-${semanticColor}`
+          );
+        })
+      );
+    });
+
+    test('it does not forward color to Box as a font color utility class', () => {
+      render(<Badge color="danger">badge</Badge>);
+      const badge = getBadge('badge');
+
+      expect(badge.getAttribute('class')).not.toContain('font-color');
+    });
+  });
+
+  describe('Radius', () => {
+    BADGE_RADII.map((radius) =>
+      describe(`${radius}`, () => {
+        test(`it has a radius-${radius} class applied to it`, () => {
+          render(<Badge radius={radius}>{`${radius} Badge`}</Badge>);
+          const badge = getBadge(`${radius} Badge`);
+
+          expect(badge.getAttribute('class')).toContain(`radius-${radius}`);
+        });
+      })
+    );
+
+    test('it does not forward radius to Box as a border radius utility class', () => {
+      render(<Badge radius="sm">badge</Badge>);
+      const badge = getBadge('badge');
+
+      expect(badge.getAttribute('class')).not.toContain('br-sm');
+    });
+  });
+
+  describe('Nested graphics', () => {
+    test('it wraps bare text in a label element', () => {
+      render(<Badge>Verified</Badge>);
+      const label = screen.getByText('Verified');
+
+      expect(label.tagName).toBe('SPAN');
+      expect(label.getAttribute('class')).toContain('label');
+      expect(label.closest('.badge')).toBeInTheDocument();
+    });
+
+    test('it does not wrap element children', () => {
+      render(
+        <Badge>
+          <Icon name="star" />
+        </Badge>
+      );
+      const icon = screen.getByTestId('icon-testid--star');
+
+      expect(icon.closest('.badge')).toBeInTheDocument();
+      expect(icon.parentElement?.getAttribute('class')).not.toContain('label');
+    });
+
+    test('it renders a leading icon before the label', () => {
+      render(
+        <Badge>
+          <Icon name="c-check" />
+          Verified
+        </Badge>
+      );
+      const badge = getBadge('Verified');
+
+      expect(screen.getByTestId('icon-testid--c-check')).toBeInTheDocument();
+      expect(badge.firstElementChild).toBe(
+        screen.getByTestId('icon-testid--c-check')
+      );
+      expect(badge.lastElementChild).toBe(screen.getByText('Verified'));
+    });
+
+    test('it renders a trailing icon after the label', () => {
+      render(
+        <Badge>
+          Favorite
+          <Icon name="star" />
+        </Badge>
+      );
+      const badge = getBadge('Favorite');
+
+      expect(badge.firstElementChild).toBe(screen.getByText('Favorite'));
+      expect(badge.lastElementChild).toBe(
+        screen.getByTestId('icon-testid--star')
+      );
+    });
+
+    test('it renders a nested Spinner', () => {
+      render(
+        <Badge color="danger">
+          <Spinner />
+          Delete
+        </Badge>
+      );
+      const badge = getBadge('Delete');
+
+      expect(screen.getByTestId('spinner-testid')).toBeInTheDocument();
+      expect(badge.firstElementChild).toContainElement(
+        screen.getByTestId('spinner-testid')
+      );
+    });
+  });
+
   describe('Sizes', () => {
     BADGE_SIZES.map((size) =>
       describe(`${size}`, () => {
         test(`it has a ${size} class applied to it`, () => {
-          render(<Badge size={size} message={`${size} Badge`} />);
-          const badge = screen.getByText(`${size} Badge`);
+          render(<Badge size={size}>{`${size} Badge`}</Badge>);
+          const badge = getBadge(`${size} Badge`);
 
           expect(badge.getAttribute('class')).toContain(`size-${size}`);
         });
@@ -76,7 +235,7 @@ describe('Badge', () => {
         </Badge>
       );
 
-      const badge = screen.getByText('badge');
+      const badge = getBadge('badge');
 
       expect(badge.getAttribute('class')).toContain('size-sm');
       expect(badge.getAttribute('class')).toContain('size-md-tablet');

package/src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, forwardRef } from 'react';
+import React, { Children, ReactNode, forwardRef } from 'react';
 import classNames from 'classnames';
 import { ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
@@ -7,33 +7,65 @@ import { Box, BoxProps } from '../Box/Box';
 
 export type BadgeSize = 'sm' | 'md' | 'lg';
 
-export type BadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'danger'
-  | 'outline'
-  | 'light-grey'
-  | 'dark-grey'
-  | 'inverse'
+export type BadgeVariant = 'solid' | 'soft' | 'surface' | 'outline';
+
+export type BadgeHue =
+  | 'grey'
+  | 'blue'
   | 'green'
   | 'yellow'
-  | 'blue'
   | 'red'
   | 'purple'
   | 'orange'
-  | 'hyphen';
+  | 'brand';
+
+export type BadgeSemanticColor = 'danger' | 'success' | 'warning' | 'info';
+
+export type BadgeColor = BadgeHue | BadgeSemanticColor;
+
+export type BadgeRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 
-export interface BadgeProps extends BoxProps {
+/**
+ * Semantic color names resolve to a hue, so `color="danger"` and `color="red"` render identically.
+ * Retheming a semantic color is a change here rather than at every call site.
+ */
+const BADGE_COLOR_ALIASES: Record<BadgeSemanticColor, BadgeHue> = {
+  danger: 'red',
+  success: 'green',
+  warning: 'yellow',
+  info: 'blue',
+};
+
+/**
+ * Wraps bare text in an element so the stylesheet can tell a label from a nested graphic.
+ * Text nodes are invisible to `:first-child` / `:last-child`, so without this an icon could
+ * not be identified as leading or trailing.
+ */
+const renderBadgeChildren = (children: ReactNode) =>
+  Children.map(children, (child) =>
+    typeof child === 'string' || typeof child === 'number' ? (
+      <span className={styles.label}>{child}</span>
+    ) : (
+      child
+    )
+  );
+
+export interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
   /**
-   * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.
+   * The color of the badge. Accepts a hue, or one of the semantic names
+   * (`danger`, `success`, `warning`, `info`) which map onto `red`, `green`, `yellow` and `blue`.
    */
-  message?: string | ReactNode;
+  color?: BadgeColor;
+  /**
+   * The roundness of the badge's corners.
+   */
+  radius?: BadgeRadius;
   /**
    * The size of the badge.
    */
   size?: BadgeSize | ResponsiveProp<BadgeSize>;
   /**
-   * The type/color of the badge to show.
+   * The visual style of the badge. Use `color` to set its color.
    */
   variant?: BadgeVariant;
 }
@@ -42,8 +74,9 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
   (
     {
       className = '',
-      message = '',
-      variant = 'default',
+      color = 'grey',
+      radius = 'full',
+      variant = 'soft',
       size = 'md',
       children,
       ...restProps
@@ -54,13 +87,15 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       (c) => styles[c]
     );
 
+    const hue = BADGE_COLOR_ALIASES[color as BadgeSemanticColor] ?? color;
+
     const badgeClasses: string = classNames(
       styles.badge,
       className,
       responsiveClasses,
-      {
-        [styles[variant]]: variant,
-      }
+      styles[variant],
+      styles[`color-${hue}`],
+      styles[`radius-${radius}`]
     );
 
     return (
@@ -72,7 +107,7 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
         direction="row"
         {...restProps}
       >
-        {children || message}
+        {renderBadgeChildren(children)}
       </Box>
     );
   }

package/src/components/Drawer/Drawer.mdx

@@ -67,12 +67,11 @@ When `placement` is set to `top` or `bottom`, the `width` prop is ignored and th
 
 In cases where content in the drawer is supplemental to content on the main area of the page, use `hideOverlay` to allow for interaction between the areas (e.g. copy-and-paste text from main area into a form in the drawer).
 
-<Alert
-  variant="warning"
-  title="Focus Management"
-  hasIcon
-  message="If you decide to use `hideOverlay`, then you must also manage focus. Focus and page scrolling will not be locked if `hideOverlay` is true. Also, the 'Esc' key button will no longer automatically close the Drawer."
-/>
+<Alert variant="warning" title="Focus Management" hasIcon>
+  If you decide to use `hideOverlay`, then you must also manage focus. Focus and
+  page scrolling will not be locked if `hideOverlay` is true. Also, the 'Esc' key
+  button will no longer automatically close the Drawer.
+</Alert>
 
 <Canvas withSource="open" of={Stories.HiddenOverlay} />
 
@@ -81,11 +80,10 @@ In cases where content in the drawer is supplemental to content on the main area
 
 By default the first focusable element will receive focus when the drawer opens, but you can provide a ref to focus instead.
 
-<Alert
-  hasIcon
-  message="Without the initialFocusRef prop, the drawer will automatically focus on the first focusable element in it's children."
-  variant="info"
-/>
+<Alert hasIcon variant="info">
+  Without the initialFocusRef prop, the drawer will automatically focus on the
+  first focusable element in it's children.
+</Alert>
 
 <Canvas withSource="open" of={Stories.InitialFocusRef} />
 
@@ -93,10 +91,10 @@ By default the first focusable element will receive focus when the drawer opens,
 
 Render the Drawer within a containing div using `containerRef`.
 
-<Alert
-  hasIcon
-  message="When choosing to use a Drawer within a containing div, use dangerouslyBypassScrollLock to allow the content outside of the containing div to remain interactive."
-  variant="info"
-/>
+<Alert hasIcon variant="info">
+  When choosing to use a Drawer within a containing div, use
+  dangerouslyBypassScrollLock to allow the content outside of the containing div
+  to remain interactive.
+</Alert>
 
 <Canvas withSource="open" of={Stories.ContainedDrawer} />

package/src/components/Formik/Formik.stories.tsx

@@ -10,7 +10,7 @@ import { FormikTextareaInput } from './FormikTextareaInput/FormikTextareaInput';
 import { FormikSwitch } from './FormikSwitch/FormikSwitch';
 import { Button } from '../Button/Button';
 import { Box } from '../Box/Box';
-import { FormikTimePickerNative } from './FormikTimePickerNative/FormikTimePickerNative';
+import { FormikTimePicker } from './FormikTimePicker/FormikTimePicker';
 import { FormikSelectInputInset } from './FormikSelectInputInset/FormikSelectInputInset';
 import { FormikTextareaInputInset } from './FormikTextareaInputInset/FormikTextareaInputInset';
 import { FormikTextInputInset } from './FormikTextInputInset/FormikTextInputInset';
@@ -49,7 +49,6 @@ type FormValues = {
   colors2: string;
   sizes: string | null;
   timePicker: string | null;
-  timePickerNative: string | null;
   dateInput: Date | undefined;
   message: string;
   country: string;
@@ -207,7 +206,6 @@ export const FormikForm = () =>
             colors2: '',
             sizes: null,
             timePicker: null,
-            timePickerNative: null,
             dateInput: new Date(2017, 4, 21),
             message: '',
             country: '',
@@ -306,10 +304,10 @@ export const FormikForm = () =>
                   isRequired
                 />
                 <Field
-                  label="Select Time With Native Select"
+                  label="Select Time"
                   name="timePicker"
                   id="timePicker"
-                  component={FormikTimePickerNative}
+                  component={FormikTimePicker}
                   isRequired
                 />
                 <Field

package/src/components/Formik/FormikTimePicker/FormikTimePicker.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import selectEvent from 'react-select-event';
 import { Formik, Form, Field, FormikValues, getIn, setIn } from 'formik';
 import { FormikTimePicker } from './FormikTimePicker';
 
 const testLabelName = 'test select';
 
-type Option = { value: string; label: string };
 const handleValidation = (testValueKey: string) => (values: FormikValues) =>
   getIn(values, testValueKey)?.length > 1
     ? {}
@@ -17,10 +15,9 @@ const renderForm = (
   props: {
     placeholder?: string;
     hideLabel?: boolean;
-    isMulti?: boolean;
     isRequired?: unknown;
     isDisabled?: boolean;
-    onChange?: jest.Mock<void, [any]>; // eslint-disable-line
+    onChange?: jest.Mock<void, [React.ChangeEvent<HTMLSelectElement>]>; // eslint-disable-line
     interval?: number;
   },
   testValueKey = testLabelName
@@ -33,7 +30,7 @@ const renderForm = (
     onSubmit={() => {}} // eslint-disable-line
   >
     {() => (
-      <Form>
+      <Form noValidate>
         <Field
           label={testValueKey}
           name={testValueKey}
@@ -93,62 +90,39 @@ describe('FormikTimePicker', () => {
 
     describe('Single select, pre-selected', () => {
       test('it renders with value pre-selected', () => {
-        render(
-          renderForm(
-            { label: '12:00 AM', value: '2020-10-23T04:30:00.120Z' },
-            {}
-          )
-        );
+        const initialValue = new Date(2020, 0, 1, 0, 0, 0, 120).toISOString();
+        const expectedValue = new Date();
+        expectedValue.setHours(0, 0, 0, 0);
 
-        expect(screen.getByText('12:00 AM')).toBeInTheDocument();
-      });
-    });
-
-    describe('Multi select, no selection', () => {
-      test('it renders input with a label, and with a default placeholder', () => {
-        render(renderForm(undefined, { isMulti: true }));
+        render(renderForm(initialValue, {}));
 
-        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
-        expect(screen.getByText('HH:MM')).toBeInTheDocument();
+        expect(screen.getByLabelText(testLabelName)).toHaveValue(
+          expectedValue.toISOString()
+        );
       });
     });
 
-    describe('Multi select, with multiple items selected', () => {
-      test('it renders input with a label, and with two items selected', () => {
-        render(
-          renderForm(
-            [
-              { label: '12:00 AM', value: '2020-10-23T04:30:00.120Z' },
-              { label: '12:15 AM', value: '2020-10-23T04:45:00.120Z' },
-            ],
-            { isMulti: true }
-          )
-        );
-
-        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
-        expect(screen.queryByText('HH:MM')).toBeNull();
-        expect(screen.getByText('12:00 AM')).toBeInTheDocument();
-        expect(screen.getByText('12:15 AM')).toBeInTheDocument();
+    describe('Is Required', () => {
+      test('it sets aria-required on the input', () => {
+        render(renderForm(undefined, { isRequired: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
       });
     });
 
     describe('Is Disabled', () => {
       test('it disables the input', () => {
-        const { container } = render(
-          renderForm(undefined, { isDisabled: true })
-        );
-
-        const disabledInput = container.querySelector(
-          '.react-select__control[aria-disabled="true"]'
-        );
+        render(renderForm(undefined, { isDisabled: true }));
 
-        expect(disabledInput).toBeInTheDocument();
+        expect(screen.getByLabelText(testLabelName)).toBeDisabled();
       });
     });
 
     describe('Is Invalid, with a helpful message', () => {
       test('it renders the helpful message', async () => {
-        const { getByText } = render(renderForm([], { isRequired: true }));
+        const { getByText } = render(
+          renderForm(undefined, { isRequired: true })
+        );
         const submitButton = getByText('submit');
 
         fireEvent.click(submitButton);
@@ -178,34 +152,17 @@ describe('FormikTimePicker', () => {
   describe('Callback Handling', () => {
     describe('onChange', () => {
       test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
-        let value: Option | undefined;
+        let value: string | undefined;
         const mockedHandleChange = jest.fn((event) => {
-          value = event.target.value;
+          event.persist();
         });
 
-        const { getByLabelText, container, getByText } = render(
+        const { getByLabelText } = render(
           renderForm(value, { onChange: mockedHandleChange })
         );
         const selectInput = getByLabelText(testLabelName);
-        /**
-         * This class is specific to react-select, combined with our custom classNamePrefix prop.
-         * While this is an implementation detail there appears to be
-         * no clearer path to test our own component which depends on react-select
-         */
-        const selectInputWrapper = container.querySelector(
-          '.react-select__control'
-        );
-
-        fireEvent.focus(selectInput);
-        if (selectInputWrapper) {
-          fireEvent.mouseDown(selectInputWrapper);
-        }
-        const option = await waitFor(() => getByText('12:00 AM'), {
-          container,
-        });
-        fireEvent.click(option);
+        fireEvent.change(selectInput, { target: { value: 'hello' } });
         expect(mockedHandleChange).toHaveBeenCalledTimes(1);
-        expect(value?.label).toEqual('12:00 AM');
       });
 
       test('it fires onChange callback on change', async () => {
@@ -215,10 +172,20 @@ describe('FormikTimePicker', () => {
           renderForm(undefined, { onChange: mockedHandleChange })
         );
 
-        await selectEvent.select(getByLabelText(testLabelName), '12:00 AM');
+        await fireEvent.change(getByLabelText(testLabelName));
 
         expect(mockedHandleChange).toBeCalledTimes(1);
       });
+
+      test('it uses Formik onChange when no custom callback is provided', () => {
+        render(renderForm(undefined, {}));
+        const select = screen.getByLabelText(testLabelName);
+        const option = screen.getByText('12:15 AM') as HTMLOptionElement;
+
+        fireEvent.change(select, { target: { value: option.value } });
+
+        expect(select).toHaveValue(option.value);
+      });
     });
   });
 });

package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx

@@ -21,7 +21,6 @@ export interface FormikTimePickerProps
 export const FormikTimePicker: FC<FormikTimePickerProps> = ({
   field: { name, onBlur, onChange: formikOnChange, value },
   form: { touched, errors },
-  options,
   onChange,
   ...props
 }) => (
@@ -32,6 +31,5 @@ export const FormikTimePicker: FC<FormikTimePickerProps> = ({
     onChange={onChange ?? formikOnChange}
     value={value}
     error={getIn(touched, name) && getIn(errors, name)}
-    options={options}
   />
 );

package/src/components/Table/Table.stories.tsx

@@ -903,19 +903,19 @@ export const ComponentAsColumnHeader = () =>
     const columnConfig: ColumnType[] = [
       { heading: 'ID', dataKey: 'id' },
       { heading: 'Color', dataKey: 'color' },
-      { heading: <Badge message="Status" />, dataKey: 'status' },
+      { heading: <Badge>Status</Badge>, dataKey: 'status' },
     ];
     const tableData = [
       {
         id: 1,
         color: 'red',
-        status: <Badge variant="red">danger</Badge>,
+        status: <Badge color="danger">danger</Badge>,
       },
-      { id: 2, color: 'blue', status: <Badge variant="blue">info</Badge> },
+      { id: 2, color: 'blue', status: <Badge color="info">info</Badge> },
       {
         id: 3,
         color: 'green',
-        status: <Badge variant="green">success</Badge>,
+        status: <Badge color="success">success</Badge>,
       },
     ];
     return <Table rowKey="id" columns={columnConfig} rows={tableData} />;