@hyphen/hyphen-components 2.18.0 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -66,11 +66,13 @@
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
     "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-themes": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.3.5",
     "@storybook/theming": "^8.2.9",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.1.2",

package/src/components/Modal/Modal.stories.tsx

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
 import { Modal } from './Modal';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';
+import { userEvent, within, expect } from '@storybook/test';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -10,6 +11,7 @@ const meta: Meta<typeof Modal> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Modal>;
 
 export const BasicUsage = () => {
   const {
@@ -17,8 +19,11 @@ export const BasicUsage = () => {
     handleOpen: openModal,
     handleClose: closeModal,
   } = useOpenClose();
+
+  const ref = useRef(null);
+
   return (
-    <div>
+    <div id="modalContainer" ref={ref}>
       <Button variant="primary" onClick={openModal}>
         Show Modal
       </Button>
@@ -26,6 +31,7 @@ export const BasicUsage = () => {
         ariaLabelledBy="titleBasic"
         isOpen={isModalOpen}
         onDismiss={closeModal}
+        containerRef={ref}
       >
         <Modal.Header
           id="titleBasic"
@@ -34,16 +40,29 @@ export const BasicUsage = () => {
         />
         <Modal.Body>Modal content</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={closeModal}>
+          <Button variant="secondary" onClick={closeModal} shadow="sm">
             Cancel
           </Button>
-          <Button variant="primary">Primary Action</Button>
+          <Button variant="primary" shadow="sm">
+            Primary Action
+          </Button>
         </Modal.Footer>
       </Modal>
     </div>
   );
 };
 
+export const OpenModal: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<BasicUsage />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Show Modal'));
+
+    await expect(canvas.getByText('Modal content')).toBeInTheDocument();
+  },
+};
+
 export const BodyAndFooter = () => {
   const {
     isOpen: isModalOpen,
@@ -113,10 +132,12 @@ export const WithoutHeader = () => {
       >
         <Modal.Body>Modal content</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={closeModal}>
+          <Button variant="secondary" onClick={closeModal} shadow="sm">
             Cancel
           </Button>
-          <Button variant="primary">Primary Action</Button>
+          <Button variant="primary" shadow="sm">
+            Primary Action
+          </Button>
         </Modal.Footer>
       </Modal>
     </div>
@@ -147,10 +168,12 @@ export const FullscreenMobile = () => {
         />
         <Modal.Body>Modal content</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={closeModal}>
+          <Button variant="secondary" onClick={closeModal} shadow="sm">
             Cancel
           </Button>
-          <Button variant="primary">Primary Action</Button>
+          <Button variant="primary" shadow="sm">
+            Primary Action
+          </Button>
         </Modal.Footer>
       </Modal>
     </div>
@@ -184,7 +207,12 @@ export const MaxWidth = () => {
         />
         <Modal.Body>Modal body content</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" ref={ref} onClick={closeModal}>
+          <Button
+            variant="secondary"
+            ref={ref}
+            onClick={closeModal}
+            shadow="sm"
+          >
             Cancel
           </Button>
         </Modal.Footer>

package/src/components/Modal/Modal.test.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Modal } from './Modal';
 
 describe('Modal', () => {
   test('renders its children', () => {
     const { getByText } = render(
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       <Modal isOpen onDismiss={() => {}} ariaLabel="testDefault">
         test modal
       </Modal>
@@ -15,7 +14,6 @@ describe('Modal', () => {
 
   test('it open and closes based on isOpen prop', () => {
     const { queryByText, getByText, rerender } = render(
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       <Modal isOpen={false} onDismiss={() => {}} ariaLabel="testIsOpen">
         test modal
       </Modal>
@@ -24,7 +22,6 @@ describe('Modal', () => {
     expect(queryByText('test modal')).toBe(null);
 
     rerender(
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       <Modal isOpen onDismiss={() => {}} ariaLabel="testIsOpen">
         test modal
       </Modal>
@@ -35,9 +32,7 @@ describe('Modal', () => {
 
   test('Subcomponents', () => {
     const { getByText } = render(
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       <Modal isOpen onDismiss={() => {}} ariaLabel="testSubcomponents">
-        {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
         <Modal.Header
           id="titleFooterBody"
           title="The Modal Title"
@@ -55,27 +50,39 @@ describe('Modal', () => {
     ).toBeInTheDocument();
   });
 
-  test('onDismiss', async () => {
-    const mockOnDismiss = jest.fn();
-    const { getByTestId } = render(
-      <Modal isOpen onDismiss={mockOnDismiss} ariaLabel="testSubcomponents">
-        <Modal.Header
-          id="titleFooterBody"
-          title="The Modal Title"
-          onDismiss={mockOnDismiss}
-        />
-        <Modal.Body>Modal body content</Modal.Body>
-        <Modal.Footer>This is content in the modal footer</Modal.Footer>
+  test('applies maxWidth styles', () => {
+    const { getByLabelText } = render(
+      <Modal
+        isOpen
+        onDismiss={() => {}}
+        ariaLabel="testMaxWidth"
+        maxWidth="500px"
+      >
+        test modal
       </Modal>
     );
 
-    const closeButton = getByTestId('icon-testid--remove').closest('button');
-    expect(closeButton).toBeInTheDocument();
+    expect(getByLabelText('testMaxWidth').parentElement).toHaveStyle(
+      'max-width: 500px'
+    );
+  });
 
-    if (closeButton) {
-      await fireEvent.click(closeButton);
-    }
+  test('applies aria-labelledby attribute', () => {
+    const { getByLabelText } = render(
+      <Modal
+        isOpen
+        onDismiss={() => {}}
+        ariaLabelledBy="modalTitle"
+        ariaLabel="testAriaLabelledBy"
+      >
+        <h1 id="modalTitle">Modal Title</h1>
+        test modal
+      </Modal>
+    );
 
-    expect(mockOnDismiss).toHaveBeenCalledTimes(1);
+    expect(getByLabelText('testAriaLabelledBy')).toHaveAttribute(
+      'aria-labelledby',
+      'modalTitle'
+    );
   });
 });

package/src/components/Modal/Modal.tsx

@@ -117,6 +117,8 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
       }
     );
 
+    if (!isOpen) return null;
+
     const parentElement = containerRef?.current
       ? (containerRef.current as HTMLElement)
       : undefined;
@@ -137,13 +139,15 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
               onRequestClose={onDismiss}
               ariaHideApp={false}
               parentSelector={parentElement ? () => parentElement : undefined}
+              style={{ content: { ...maxWidthCss.styles } }}
               {...restProps}
             >
               <Box
                 aria-label={ariaLabel}
                 aria-labelledby={ariaLabelledBy}
-                style={{ ...maxWidthCss.styles }}
                 height="100"
+                padding={{ base: '2xl', tablet: '4xl' }}
+                gap="3xl"
               >
                 {children}
               </Box>

package/src/components/Modal/components/ModalBody/ModalBody.test.tsx

@@ -8,13 +8,31 @@ describe('ModalBody', () => {
     expect(getByText('test modal')).toBeInTheDocument();
   });
 
-  test('xl padding class is applied by default', () => {
-    const { container } = render(<ModalBody>test modal</ModalBody>);
-    expect(container.children[0].classList).toContain('p-xl');
-  });
-
   test('flex-auto class is applied by default', () => {
     const { container } = render(<ModalBody>test modal</ModalBody>);
     expect(container.children[0].classList).toContain('flex-auto');
   });
+
+  test('applies custom overflow value', () => {
+    const { container } = render(
+      <ModalBody overflow="hidden">test modal</ModalBody>
+    );
+    expect(container.children[0].classList).toContain('overflow-hidden');
+  });
+
+  test('applies custom height value', () => {
+    const { container } = render(
+      <ModalBody height="200px">test modal</ModalBody>
+    );
+    expect((container.children[0] as HTMLElement).style.height).toBe('200px');
+  });
+
+  test('applies additional props to Box component', () => {
+    const { container } = render(
+      <ModalBody data-testid="modal-body">test modal</ModalBody>
+    );
+    expect(container.children[0].getAttribute('data-testid')).toBe(
+      'modal-body'
+    );
+  });
 });

package/src/components/Modal/components/ModalBody/ModalBody.tsx

@@ -6,13 +6,11 @@ export type ModalBodyProps = BoxProps;
 export const ModalBody: FC<ModalBodyProps> = ({
   children,
   flex = 'auto',
-  padding = 'xl',
   overflow = 'auto',
   height = '100',
   ...restProps
 }) => (
   <Box
-    padding={padding}
     flex={flex}
     overflow={overflow}
     height={height}

package/src/components/Modal/components/ModalFooter/ModalFooter.test.tsx

@@ -8,25 +8,61 @@ describe('ModalFooter', () => {
     expect(getByText('test modal')).toBeInTheDocument();
   });
 
-  test('xl padding class is applied by default', () => {
-    const { container } = render(<ModalFooter>test modal</ModalFooter>);
-    expect(container.children[0].classList).toContain('p-xl');
-  });
-
   test('row direction class is applied by default', () => {
     const { container } = render(<ModalFooter>test modal</ModalFooter>);
-    expect(container.children[0].classList).toContain('flex-direction-row');
+    expect(container.firstChild).toHaveClass('flex-direction-row');
   });
 
   test('align-items center class is applied by default', () => {
     const { container } = render(<ModalFooter>test modal</ModalFooter>);
-    expect(container.children[0].classList).toContain('align-items-center');
+    expect(container.firstChild).toHaveClass('align-items-center');
   });
 
   test('justify content flex-end class is applied by default', () => {
     const { container } = render(<ModalFooter>test modal</ModalFooter>);
-    expect(container.children[0].classList).toContain(
-      'justify-content-flex-end'
+    expect(container.firstChild).toHaveClass('justify-content-flex-end');
+  });
+
+  test('applies custom padding', () => {
+    const { container } = render(
+      <ModalFooter padding="lg">test modal</ModalFooter>
+    );
+    expect(container.firstChild).toHaveStyle('padding: lg');
+  });
+
+  test('applies custom direction', () => {
+    const { container } = render(
+      <ModalFooter direction="column">test modal</ModalFooter>
+    );
+    expect(container.firstChild).toHaveClass('flex-direction-column');
+  });
+
+  test('applies custom alignItems', () => {
+    const { container } = render(
+      <ModalFooter alignItems="flex-start">test modal</ModalFooter>
+    );
+    expect(container.firstChild).toHaveClass('align-items-flex-start');
+  });
+
+  test('applies custom justifyContent', () => {
+    const { container } = render(
+      <ModalFooter justifyContent="center">test modal</ModalFooter>
+    );
+    expect(container.firstChild).toHaveClass('justify-content-center');
+  });
+
+  test('applies custom gap', () => {
+    const { container } = render(
+      <ModalFooter gap="lg">test modal</ModalFooter>
+    );
+    expect(container.firstChild).toHaveClass('g-lg');
+  });
+
+  test('applies custom styles', () => {
+    const customStyle = { backgroundColor: 'red' };
+    const { container } = render(
+      <ModalFooter style={customStyle}>test modal</ModalFooter>
     );
+    expect(container.firstChild).toHaveStyle('background-color: red');
   });
 });

package/src/components/Modal/components/ModalFooter/ModalFooter.tsx

@@ -1,30 +1,23 @@
 import React, { FC } from 'react';
 import { Box, BoxProps } from '../../../Box/Box';
 
-export type ModalFooterProps = Omit<
-  BoxProps,
-  'as' | 'background' | 'borderColor' | 'borderWidth' | 'radius'
->;
+export type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
 
 export const ModalFooter: FC<ModalFooterProps> = ({
   children,
-  padding = 'xl',
+  padding,
   direction = 'row',
   alignItems = 'center',
   justifyContent = 'flex-end',
-  background = 'secondary',
-  gap = 'sm',
+  gap = 'md',
   style,
   ...restProps
 }) => (
   <Box
-    background={background}
     padding={padding}
     direction={direction}
     alignItems={alignItems}
     justifyContent={justifyContent}
-    borderWidth="sm 0 0 0"
-    borderColor="default"
     gap={gap}
     style={{
       flexShrink: 0,

package/src/components/Modal/components/ModalHeader/ModalHeader.test.tsx

@@ -19,11 +19,30 @@ describe('ModalHeader', () => {
     const mockOnDismiss = jest.fn();
     render(<ModalHeader id="modal" onDismiss={mockOnDismiss} />);
     fireEvent.click(screen.getByLabelText('close'));
-    expect(mockOnDismiss).toBeCalledTimes(1);
+    expect(mockOnDismiss).toHaveBeenCalledTimes(1);
   });
 
-  test('xl padding class is applied by default', () => {
-    const { container } = render(<ModalHeader id="modal" />);
-    expect(container.children[0].classList).toContain('p-xl');
+  test('does not render title if not provided', () => {
+    const { queryByText } = render(<ModalHeader id="modal" />);
+    expect(queryByText('modal title')).toBeNull();
+  });
+
+  test('does not render close button if onDismiss is not set', () => {
+    render(<ModalHeader id="modal" />);
+    expect(screen.queryByLabelText('close')).toBeNull();
+  });
+
+  test('renders with correct id for title', () => {
+    const { getByText } = render(
+      <ModalHeader id="modal-title" title="modal title" />
+    );
+    expect(getByText('modal title').id).toBe('modal-title');
+  });
+
+  test('renders with correct styles', () => {
+    const { container } = render(
+      <ModalHeader id="modal" title="modal title" />
+    );
+    expect(container.firstChild).toHaveStyle('flex-shrink: 0');
   });
 });

package/src/components/Modal/components/ModalHeader/ModalHeader.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box } from '../../../Box/Box';
-import { Icon } from '../../../Icon/Icon';
-import styles from '../../Modal.module.scss';
+import { Button } from '../../../Button/Button';
 
 export type ModalHeaderProps = {
   /**
@@ -28,12 +27,10 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
 
   return (
     <Box
-      padding="xl"
       direction="row"
       alignItems="center"
       justifyContent={justifyContentValue}
-      borderWidth="0 0 sm 0"
-      borderColor="default"
+      gap="3xl"
       style={{
         flexShrink: 0,
       }}
@@ -44,14 +41,13 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
         </Box>
       )}
       {onDismiss && (
-        <button
+        <Button
           aria-label="close"
-          type="button"
-          className={styles['modal-close']}
+          variant="tertiary"
           onClick={onDismiss}
-        >
-          <Icon name="remove" />
-        </button>
+          iconPrefix="remove"
+          size="sm"
+        />
       )}
     </Box>
   );

package/src/components/Table/Table.module.scss

@@ -10,7 +10,8 @@
     left: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(255 255 255 / 50%);
+    background: var(--color-background-primary);
+    opacity: 0.5;
   }
 
   .scroll-container {

package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss

@@ -7,7 +7,7 @@
   border-bottom-style: solid;
   border-width: 0 0 var(--size-border-width-sm) 0;
   background-color: var(--color-background-primary);
-  color: var(--color-font-primary);
+  color: var(--color-font-secondary);
   font-size: var(--size-font-size-sm);
   font-weight: var(--size-font-weight-bold);
   padding: var(--size-spacing-md)