@hyphen/hyphen-components 6.12.0 → 6.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.12.0",
+  "version": "6.14.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -86,7 +86,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@storybook/addon-a11y": "^9.1.3",
@@ -105,7 +105,7 @@
     "@types/react-modal": "^3.16.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chromatic": "^13.1.3",
+    "chromatic": "^13.3.4",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",

package/src/components/Alert/Alert.constants.ts

@@ -1,7 +1,6 @@
 import { IconName } from '../../types';
 import { AlertVariant } from './Alert.types';
 
-// eslint-disable-next-line import/prefer-default-export
 export const ALERT_VARIANTS: AlertVariant[] = [
   'info',
   'success',

package/src/components/Alert/Alert.stories.tsx

@@ -1,30 +1,96 @@
 import { Alert } from './Alert';
 import { AlertVariant } from './Alert.types';
 import { Button } from '../Button/Button';
+import { ALERT_VARIANTS } from './Alert.constants';
 
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { useState } from 'react';
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Alert',
   component: Alert,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ALERT_VARIANTS,
+      description: 'The type/color of the alert to show',
+    },
+    title: {
+      control: 'text',
+      description: 'The title for the alert',
+    },
+    message: {
+      control: 'text',
+      description:
+        'The text message to be rendered in the alert (deprecated, use children instead)',
+    },
+    hasIcon: {
+      control: 'boolean',
+      description:
+        'Whether the alert has an icon that corresponds to its variant',
+    },
+    isCompact: {
+      control: 'boolean',
+      description: 'Renders a version of the alert with smaller padding',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom class to apply to the alert',
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback when alert is closed',
+    },
+  },
+  args: {
+    variant: 'default',
+    hasIcon: false,
+    isCompact: false,
+  },
 };
 
 export default meta;
+type Story = StoryObj<typeof Alert>;
 
-export const Overview = () => (
-  <Alert
-    title="Contact Created"
-    message="The contact was saved on December 3, 2020 at 6:10pm PDT"
-    variant="success"
-    isClosable
-    hasIcon
-  />
-);
+export const Overview: Story = {
+  args: {
+    title: 'Contact Created',
+    variant: 'success',
+    hasIcon: true,
+    children: 'The contact was saved on December 3, 2020 at 6:10pm PDT',
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    title: 'Contact Created',
+    variant: 'success',
+    hasIcon: true,
+    isCompact: true,
+    children: 'The contact was saved on December 3, 2020 at 6:10pm PDT',
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    title: 'Custom Content',
+    variant: 'info',
+    hasIcon: true,
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <p>
+        This alert uses <strong>children</strong> for custom content. You can
+        include any JSX content here, including <a href="/#">links</a>,{' '}
+        <code>code snippets</code>, and more.
+      </p>
+    </Alert>
+  ),
+};
 
-export const Variants = () =>
-  (() => {
+export const Variants: Story = {
+  render: () => {
     const variants: AlertVariant[] = [
       'default',
       'info',
@@ -41,62 +107,51 @@ export const Variants = () =>
       <>
         {variants.map((variant: AlertVariant) => (
           <Alert
-            message={message(variant)}
             key={variant}
             title={variant.charAt(0).toUpperCase() + variant.slice(1)}
             variant={variant}
             hasIcon
             className="m-bottom-md"
-          />
+          >
+            {message(variant)}
+          </Alert>
         ))}
       </>
     );
-  })();
+  },
+  parameters: {
+    controls: { disable: true },
+  },
+};
 
-export const Closable = () => {
-  const [isAlertTwoShowing, setAlertTwoShowing] = useState(true);
-  const [isAlertThreeShowing, setAlertThreeShowing] = useState(true);
+export const ClosableAlert = () => {
+  const [isAlertShowing, setIsAlertShowing] = useState(true);
 
   return (
     <>
-      <Alert
-        title="Won't Close"
-        message="Closable, but with no onClose callback so nothing happens when clicked."
-        variant="warning"
-        isClosable
-        className="m-bottom-md"
-      />
-      {isAlertTwoShowing ? (
+      {isAlertShowing ? (
         <Alert
           title="Closable"
-          message="This one works!"
           variant="info"
-          isClosable
-          onClose={() => setAlertTwoShowing(false)}
+          onClose={() => setIsAlertShowing(false)}
           className="m-bottom-md"
-        />
+        >
+          Try closing me.
+        </Alert>
       ) : (
         <div className="m-bottom-md">
-          <Button onClick={() => setAlertTwoShowing(true)} size="sm">
-            Give me the second alert back!
-          </Button>
-        </div>
-      )}
-      {isAlertThreeShowing ? (
-        <Alert
-          message="With custom close text!"
-          variant="info"
-          isClosable
-          onClose={() => setAlertThreeShowing(false)}
-          closeText="Close me!"
-        />
-      ) : (
-        <div className="m-bottom-md">
-          <Button onClick={() => setAlertThreeShowing(true)} size="sm">
-            Give me the third alert back!
+          <Button onClick={() => setIsAlertShowing(true)} size="sm">
+            Give me the alert back!
           </Button>
         </div>
       )}
     </>
   );
 };
+
+export const Closable: Story = {
+  render: () => ClosableAlert(),
+  parameters: {
+    controls: { disable: true },
+  },
+};

package/src/components/Alert/Alert.test.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Alert } from './Alert';
 import { ALERT_VARIANTS } from './Alert.constants';
 
@@ -111,77 +111,13 @@ describe('Alert', () => {
     });
   });
 
-  describe('Closable Alert', () => {
-    test('It renders a close icon if `isClosable` prop is passed', () => {
-      const message = 'I am closable!';
-      const { rerender } = render(<Alert message={message} />);
-
-      const noCloseButton = screen.queryByTestId('alert-close-icon-test-id');
-      expect(noCloseButton).not.toBeInTheDocument();
-
-      rerender(<Alert message={message} isClosable />);
-      const closeButton = screen.queryByTestId('alert-close-icon-test-id');
-      expect(closeButton).toBeInTheDocument();
-    });
-
-    test('It renders with custom close text if closeText prop is passed', () => {
-      const message = 'I am closable too!';
-      render(<Alert message={message} isClosable closeText="Close me!" />);
-
-      const closeButton = screen.queryByText('Close me!');
-      expect(closeButton).toBeInTheDocument();
-    });
-
-    test('It fires a callback if onClose prop is passed', () => {
-      const message = 'I am closable too!';
-      const mockOnClose = jest.fn();
-
-      const { rerender } = render(
-        <Alert message={message} isClosable onClose={mockOnClose} />
-      );
-
-      const closeButton = screen.queryByTestId('alert-close-icon-test-id');
-      if (closeButton) fireEvent.click(closeButton);
-      expect(mockOnClose).toBeCalledTimes(1);
-      mockOnClose.mockReset();
-
-      rerender(
-        <Alert
-          message={message}
-          isClosable
-          onClose={mockOnClose}
-          closeText="close"
-        />
-      );
-      const closeButtonSpan = screen.getByText('close');
-      if (closeButtonSpan) {
-        fireEvent.click(closeButtonSpan); // 1
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // 2
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // 3
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
-      }
-      expect(mockOnClose).toBeCalledTimes(3);
-      mockOnClose.mockReset();
-
-      rerender(<Alert message={message} isClosable closeText="close" />);
-      const closeButtonNotClickable = screen.getByText('close');
-      if (closeButtonNotClickable) {
-        fireEvent.click(closeButtonSpan); // No-op
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // No-op
-        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
-      }
-      expect(mockOnClose).toBeCalledTimes(0);
-    });
-  });
-
   describe('Compact', () => {
     test('It renders with the compact class when isCompact prop is true', () => {
       const message = 'Hello world!';
       render(<Alert message={message} isCompact />);
 
       const alert = screen.getByRole('alert');
-      expect(alert).toHaveClass('p-xs');
+      expect(alert).toHaveClass('p-md');
     });
   });
 });

package/src/components/Alert/Alert.tsx

@@ -1,4 +1,12 @@
-import React, { FC, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import React, {
+  FC,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+  useCallback,
+  useMemo,
+  memo,
+} from 'react';
 import classNames from 'classnames';
 import { Box } from '../Box/Box';
 import { Icon } from '../Icon/Icon';
@@ -11,25 +19,16 @@ export interface AlertProps {
    * Custom class to apply to the alert.
    */
   className?: string;
-  /**
-   * Custom text to use as a close button.
-   */
-  closeText?: string;
   /**
    * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
    */
   hasIcon?: boolean;
-  /**
-   * Whether the alert can be closed by the user. If `true` it will render
-   * the 'close' icon on the right hand side of the alert.
-   */
-  isClosable?: boolean;
   /**
    * Renders a version of the alert with smaller padding.
    */
   isCompact?: boolean;
   /**
-   * The text message or ReactNode to be rendered in the alert.
+   * @deprecated Use children instead. The text message or ReactNode to be rendered in the alert.
    */
   message?: string | ReactNode;
   /**
@@ -56,12 +55,12 @@ export interface AlertProps {
    */
   [x: string]: any; // eslint-disable-line
 }
-export const Alert: FC<AlertProps> = ({
+
+const AlertComponent: FC<AlertProps> = ({
+  children,
   className = '',
-  closeText = '',
   hasIcon = false,
   isCompact = false,
-  isClosable = false,
   message = '',
   onClose = undefined,
   render = undefined,
@@ -69,29 +68,44 @@ export const Alert: FC<AlertProps> = ({
   variant = 'default',
   ...restProps
 }) => {
-  const handleClose = (
-    event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>
-  ): void => {
-    if (!onClose) return;
-
-    onClose(event);
-  };
+  const handleClose = useCallback(
+    (
+      event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>
+    ): void => {
+      if (!onClose) return;
 
-  const renderAlertIcon = (): ReactNode => (
-    <Box fontSize="md" className={styles[`alert__icon__${variant}`]}>
-      <Icon
-        name={ALERT_ICONS_MAP[variant].icon}
-        data-testid={`alert-icon-${variant}-test-id`}
-      />
-    </Box>
+      onClose(event);
+    },
+    [onClose]
   );
 
-  const renderCloseIcon = (): ReactNode => {
-    const handleCloseKeyPress = (
-      event: KeyboardEvent<HTMLSpanElement>
-    ): void => {
+  const handleCloseKeyPress = useCallback(
+    (event: KeyboardEvent<HTMLSpanElement>): void => {
       if (event.keyCode === 13) handleClose(event);
-    };
+    },
+    [handleClose]
+  );
+
+  const alertContainerClasses = useMemo(
+    () => classNames(styles[`alert__${variant}`], styles.alert, className),
+    [variant, className]
+  );
+
+  const alertIcon = useMemo(() => {
+    if (!hasIcon) return null;
+
+    return (
+      <Box fontSize="md" className={styles[`alert__icon__${variant}`]}>
+        <Icon
+          name={ALERT_ICONS_MAP[variant].icon}
+          data-testid={`alert-icon-${variant}-test-id`}
+        />
+      </Box>
+    );
+  }, [hasIcon, variant]);
+
+  const closeIcon = useMemo(() => {
+    if (!onClose) return null;
 
     return (
       <Box
@@ -105,19 +119,35 @@ export const Alert: FC<AlertProps> = ({
           onKeyUp={handleCloseKeyPress}
           aria-label="dismiss"
         >
-          {closeText || (
-            <Icon name="remove" data-testid="alert-close-icon-test-id" />
-          )}
+          <Icon name="remove" data-testid="alert-close-icon-test-id" />
         </button>
       </Box>
     );
-  };
+  }, [onClose, handleClose, handleCloseKeyPress]);
 
-  const alertContainerClasses: string = classNames(
-    styles[`alert__${variant}`],
-    styles.alert,
-    className
-  );
+  const content = useMemo(() => {
+    if (render) {
+      return render();
+    }
+
+    return (
+      <Box display="block" childGap={message && title ? '2xs' : undefined}>
+        {title && (
+          <Box
+            as="h4"
+            fontSize="sm"
+            fontWeight="semibold"
+            className={styles['alert-heading']}
+          >
+            {title}
+          </Box>
+        )}
+        {children ??
+          (message &&
+            (typeof message === 'string' ? <p>{message}</p> : message))}
+      </Box>
+    );
+  }, [render, message, title, children]);
 
   return (
     <Box
@@ -125,34 +155,17 @@ export const Alert: FC<AlertProps> = ({
       gap="md"
       className={alertContainerClasses}
       direction="row"
-      padding={isCompact ? 'xs' : 'md'}
+      padding={isCompact ? 'md' : '2xl'}
       radius="md"
       role="alert"
       fontSize="sm"
       {...restProps}
     >
-      {hasIcon && renderAlertIcon()}
-      <div>
-        {render ? (
-          render()
-        ) : (
-          <Box display="block" childGap={message && title ? '2xs' : undefined}>
-            {title && (
-              <Box
-                as="h4"
-                fontSize="sm"
-                fontWeight="semibold"
-                className={styles['alert-heading']}
-              >
-                {title}
-              </Box>
-            )}
-            {message &&
-              (typeof message === 'string' ? <p>{message}</p> : message)}
-          </Box>
-        )}
-      </div>
-      {isClosable && renderCloseIcon()}
+      {alertIcon}
+      <div>{content}</div>
+      {closeIcon}
     </Box>
   );
 };
+
+export const Alert = memo(AlertComponent);

package/src/components/Badge/Badge.stories.tsx

@@ -1,42 +1,86 @@
-import { Meta } from '@storybook/react-vite';
 import { Badge, BadgeVariant } from './Badge';
 import React from 'react';
 import { Box } from '../Box/Box';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const BADGE_VARIANTS: BadgeVariant[] = [
+  'light-grey',
+  'dark-grey',
+  'inverse',
+  'purple',
+  'blue',
+  'green',
+  'yellow',
+  'red',
+  'hyphen',
+];
+
+const BADGE_SIZES = ['sm', 'md', 'lg'];
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
   component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: BADGE_VARIANTS,
+      description: 'The type/color of the badge to show',
+    },
+    size: {
+      control: 'select',
+      options: BADGE_SIZES,
+      description: 'The size of the badge',
+    },
+    message: {
+      control: 'text',
+      description:
+        'The text message to be rendered in the badge (deprecated, use children instead)',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom class to apply to the badge',
+    },
+    children: {
+      control: 'text',
+      description: 'Badge content (preferred over message)',
+    },
+  },
+  args: {
+    variant: 'light-grey',
+    size: 'md',
+    message: '',
+    className: '',
+    children: undefined,
+  },
 };
 
 export default meta;
 
-export const Overview = () => <Badge message="Hello world!" />;
-
-export const Variants = () => {
-  const variants = [
-    'light-grey',
-    'dark-grey',
-    'inverse',
-    'purple',
-    'blue',
-    'green',
-    'yellow',
-    'red',
-    'hyphen',
-  ] as BadgeVariant[];
-  return (
+type Story = StoryObj<typeof Badge>;
+
+export const Overview: Story = {
+  args: {
+    message: 'Hello world!',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
     <Box direction="row" gap="sm">
-      {variants.map((variant) => (
+      {BADGE_VARIANTS.map((variant) => (
         <Badge variant={variant} key={variant}>
           {variant}
         </Badge>
       ))}
     </Box>
-  );
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
 };
 
-export const Sizes = () => (
-  <>
+export const Sizes: Story = {
+  render: () => (
     <Box direction="column" alignItems="flex-start" gap="md">
       <Badge size="sm" message="Small" />
       <Badge size="md" message="Medium" />
@@ -51,5 +95,8 @@ export const Sizes = () => (
         Responsive
       </Badge>
     </Box>
-  </>
-);
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};