@hyphen/hyphen-components 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Button/Button.mdx

@@ -4,7 +4,7 @@ import { Box } from '../Box/Box';
 
 import * as Stories from './Button.stories';
 
-<Meta of={Stories} />
+<Meta of={Stories} title="Components/Button" component={Button} />
 
 # Button
 
@@ -18,6 +18,12 @@ Actions almost always occur on the same page.
 
 <ArgTypes of={Button} />
 
+## As Child
+
+Apply the `asChild` prop to apply the button styles to a child element.
+
+<Canvas of={Stories.AsChild} />
+
 ## Variants
 
 The `variant` prop determines which color visual weight to render.
@@ -70,9 +76,3 @@ The interface should make it clear why the button is disabled and what needs to
 
 <Canvas of={Stories.Disabled} />
 
-## As an Anchor
-
-You can render an anchor tag with the style of a button by using the `as` prop. You
-can render buttons as one of `button`, `a`, and `input`.
-
-<Canvas of={Stories.Anchor} />

package/src/components/Button/Button.module.scss

@@ -58,6 +58,7 @@
     --button-size-lg-border-radius,
     var(--INTERNAL_form-control-size-lg-border-radius)
   );
+  gap: var(--size-spacing-lg);
   padding: var(
       --button-size-lg-padding-vertical,
       var(--INTERNAL_form-control-size-lg-padding)
@@ -89,6 +90,7 @@
   line-height: 1;
   font-family: var(--assets-font-family-body);
   display: inline-flex;
+  gap: var(--size-spacing-sm);
   align-items: center;
   justify-content: center;
   position: relative;
@@ -103,6 +105,7 @@
     text-decoration: none;
   }
 
+  &[aria-disabled='true'],
   &:disabled {
     opacity: 0.45;
     cursor: not-allowed;

package/src/components/Button/Button.stories.tsx

@@ -23,6 +23,14 @@ export const Default = () => (
   <Button onClick={() => alert('clicked')}>Button</Button>
 );
 
+export const AsChild = () => (
+  <Button asChild>
+    <a href="https://ux.hyphen.ai" target="_blank" rel="noreferrer">
+      I'm an anchor
+    </a>
+  </Button>
+);
+
 export const Variants = () => (
   <Box gap="md" style={{ backgroundColor: 'var(--background-primary)' }}>
     <Box gap="sm" direction="row" alignItems="flex-start">
@@ -66,7 +74,7 @@ export const FullWidth = () => (
 );
 
 export const Icons = () => (
-  <Box direction="row" gap="xs" alignItems="flex-start">
+  <Box direction="row" gap="md" alignItems="flex-start">
     <Button variant="primary" iconPrefix="mail">
       Email
     </Button>
@@ -85,7 +93,7 @@ export const IconButton = () => (
 );
 
 export const Loading = () => (
-  <Box direction="row" gap="sm">
+  <Box direction="row" gap="md">
     <Button isLoading>Primary Loading</Button>
     <Button variant="secondary" isLoading>
       Secondary Loading
@@ -97,7 +105,7 @@ export const Loading = () => (
 );
 
 export const Disabled = () => (
-  <Box direction="row" gap="sm">
+  <Box direction="row" gap="md">
     <Button variant="primary" isDisabled>
       Primary Disabled
     </Button>
@@ -111,7 +119,7 @@ export const Disabled = () => (
 );
 
 export const Shadow = () => (
-  <Box direction="row" gap="sm">
+  <Box direction="row" gap="md">
     <Button variant="secondary" shadow="xs">
       xs shadow
     </Button>
@@ -123,11 +131,3 @@ export const Shadow = () => (
     </Button>
   </Box>
 );
-
-export const Anchor = () => (
-  <Box direction="row" gap="sm">
-    <Button as="a" href="https://ux.hyphen.ai" target="_blank">
-      I'm an anchor tag
-    </Button>
-  </Box>
-);

package/src/components/Button/Button.test.tsx

@@ -1,43 +1,40 @@
+import React from 'react';
 import { BUTTON_SIZES, BUTTON_VARIANTS } from './Button.constants';
 import { Button, ButtonVariant } from './Button';
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import React from 'react';
-
 const renderButton = (props = {}) => render(<Button {...props} />);
 const getButton = (text: string): HTMLButtonElement =>
   screen.getByText(text).closest('button') as HTMLButtonElement;
-const getAnchor = (text: string): HTMLAnchorElement =>
-  screen.getByText(text).closest('a') as HTMLAnchorElement;
 
 describe('Button', () => {
-  describe('HTML Button Type', () => {
-    test('is set to button by default', () => {
-      renderButton({ children: 'Button' });
-      const testBtn = screen.getByRole('button');
-      expect(testBtn).toHaveAttribute('type', 'button');
-    });
-
-    test('is set to submit if specified', () => {
-      renderButton({ type: 'submit', children: 'Submit Button' });
-      const testBtn = screen.getByRole('button');
-      expect(testBtn).toHaveAttribute('type', 'submit');
+  describe('Disabled states', () => {
+    test('supports controlled isLoading state', () => {
+      const { rerender } = renderButton({
+        isLoading: true,
+        children: 'Loading Button',
+      });
+      const button = getButton('Loading Button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toBeDisabled();
+
+      rerender(<Button isLoading={false} children="Loading Button" />);
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toBeDisabled();
     });
 
-    test('is set to reset if specified', () => {
-      renderButton({ type: 'reset', children: 'Reset Button' });
-      const testBtn = screen.getByRole('button');
-      expect(testBtn).toHaveAttribute('type', 'reset');
-    });
-
-    test('is not set if as prop is an anchor tag', () => {
-      renderButton({
-        as: 'a',
-        href: 'https://www.hyphen.ai',
-        children: 'link button',
+    test('supports controlled isDisabled state', () => {
+      const { rerender } = renderButton({
+        isDisabled: true,
+        children: 'Disabled Button',
       });
-      const testBtn = screen.getByText('link button').parentElement;
-      expect(testBtn).not.toHaveAttribute('type');
+      const button = getButton('Disabled Button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toBeDisabled();
+
+      rerender(<Button isDisabled={false} children="Disabled Button" />);
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toBeDisabled();
     });
   });
 
@@ -107,6 +104,18 @@ describe('Button', () => {
         expect(mockedHandleClick).toHaveBeenCalledTimes(1);
       });
 
+      test('does not fire onClick callback when disabled', () => {
+        const mockedHandleClick = jest.fn();
+        renderButton({
+          onClick: mockedHandleClick,
+          children: 'Click',
+          isDisabled: true,
+        });
+        const buttonElement: HTMLButtonElement = getButton('Click');
+        fireEvent.click(buttonElement);
+        expect(mockedHandleClick).toHaveBeenCalledTimes(0);
+      });
+
       test('does not fire function if onClick callback not provided', () => {
         const mockedHandleClick = jest.fn();
         renderButton({ children: 'Click' });
@@ -139,6 +148,18 @@ describe('Button', () => {
         expect(mockedHandleFocus).toHaveBeenCalledTimes(1);
       });
 
+      test('does not fire onFocus callback when disabled', () => {
+        const mockedHandleFocus = jest.fn();
+        renderButton({
+          onFocus: mockedHandleFocus,
+          children: 'Focus',
+          isDisabled: true,
+        });
+        const buttonElement = getButton('Focus');
+        fireEvent.focus(buttonElement);
+        expect(mockedHandleFocus).toHaveBeenCalledTimes(0);
+      });
+
       test('does not fire function if onFocus callback not provided', () => {
         const mockedHandleFocus = jest.fn();
         renderButton({ children: 'Focus' });
@@ -157,6 +178,18 @@ describe('Button', () => {
         expect(mockedHandleBlur).toHaveBeenCalledTimes(1);
       });
 
+      test('does not fire onBlur callback when disabled', () => {
+        const mockedHandleBlur = jest.fn();
+        renderButton({
+          onBlur: mockedHandleBlur,
+          children: 'Blur',
+          isDisabled: true,
+        });
+        const buttonElement = getButton('Blur');
+        fireEvent.blur(buttonElement);
+        expect(mockedHandleBlur).toHaveBeenCalledTimes(0);
+      });
+
       test('does not fire onBlur callback if not provided', () => {
         const mockedHandleBlur = jest.fn();
         renderButton({ children: 'Blur' });
@@ -305,104 +338,87 @@ describe('Button', () => {
         });
       });
     });
+  });
 
-    describe('Anchor', () => {
-      test('renders an anchor tag if as prop `a` is passed', () => {
-        renderButton({
-          as: 'a',
-          href: 'http://hyphen.ai',
-          children: 'hey there',
-        });
-        const buttonElement = screen.getByRole('link');
-        expect(buttonElement).toBeInTheDocument();
-      });
-
-      test('does not have a button type attribute if as prop `a` is passed', () => {
-        renderButton({
-          as: 'a',
-          href: 'http://hyphen.ai',
-          children: 'hey there',
-        });
-        const buttonElement = screen.getByRole('link');
-        expect(buttonElement).not.toHaveAttribute('type');
-      });
+  describe('Role Attribute', () => {
+    test('applies role attribute', () => {
+      renderButton({ role: 'button', children: 'Button with Role' });
+      const buttonElement = getButton('Button with Role');
+      expect(buttonElement).toHaveAttribute('role', 'button');
+    });
+  });
+  describe('Aria Attributes', () => {
+    test('applies aria-label attribute', () => {
+      renderButton({ 'aria-label': 'Aria Label Button', children: 'Button' });
+      const buttonElement = getButton('Button');
+      expect(buttonElement).toHaveAttribute('aria-label', 'Aria Label Button');
+    });
 
-      test('renders a target attribute if one is passed, the element is an anchor, and there is a href', () => {
-        renderButton({
-          as: 'a',
-          href: 'http://hyphen.ai',
-          target: '_blank',
-          children: 'hey there',
-        });
-        const buttonElement = screen.getByRole('link');
-        expect(buttonElement).toHaveAttribute('target', '_blank');
-      });
+    test('applies aria-labelledby attribute', () => {
+      renderButton({ 'aria-labelledby': 'label-id', children: 'Button' });
+      const buttonElement = getButton('Button');
+      expect(buttonElement).toHaveAttribute('aria-labelledby', 'label-id');
+    });
+  });
 
-      test('does not render a target attribute if the element is not an anchor', () => {
-        renderButton({
-          href: 'http://hyphen.ai',
-          target: '_blank',
-          children: 'hey there',
-        });
-        const buttonElement = screen.getByRole('button');
-        expect(buttonElement).not.toHaveAttribute('target');
-      });
+  describe('Shadow Prop', () => {
+    test('applies shadow class when shadow prop is provided', () => {
+      renderButton({ shadow: 'lg', children: 'Shadow Button' });
+      const buttonElement = getButton('Shadow Button');
+      expect(buttonElement).toHaveClass('shadow-lg');
+    });
 
-      test('does not render a target attribute if the element does not have an href', () => {
-        renderButton({ as: 'a', target: '_blank', children: 'hey there' });
-        const buttonElement = screen.getByText('hey there');
-        expect(buttonElement).not.toHaveAttribute('target');
-      });
+    test('applies responsive shadow classes', () => {
+      renderButton({
+        shadow: { base: 'sm', tablet: 'md', desktop: 'lg' },
+        children: 'Responsive Shadow Button',
+      });
+      const buttonElement = getButton('Responsive Shadow Button');
+      expect(buttonElement).toHaveClass(
+        'shadow-sm',
+        'shadow-md-tablet',
+        'shadow-lg-desktop'
+      );
+    });
+  });
 
-      describe('Rel Attribute', () => {
-        test('applies rel attribute when target is _blank', () => {
-          renderButton({
-            as: 'a',
-            href: 'http://hyphen.ai',
-            target: '_blank',
-            children: 'Link with rel',
-          });
-          const anchorElement = getAnchor('Link with rel');
-          expect(anchorElement).toHaveAttribute('rel', 'noopener noreferrer');
-        });
+  describe('As Child', () => {
+    test('renders as a different component when asChild is true', () => {
+      renderButton({
+        asChild: true,
+        children: <a href="https://ux.hyphen.ai">Link Button</a>,
       });
+      const linkElement = screen.getByRole('link');
+      expect(linkElement).toBeInTheDocument();
+      expect(linkElement).toHaveAttribute('href', 'https://ux.hyphen.ai');
     });
   });
 
-  describe('React Router', () => {
-    test('fires navigate callback when included', () => {
-      const mockedNavigate = jest.fn();
-      renderButton({
-        as: 'a',
-        navigate: mockedNavigate,
-        href: '/',
-        children: 'react router link',
-      });
-      const anchorElement = getAnchor('react router link');
-      fireEvent.click(anchorElement);
-      expect(mockedNavigate).toHaveBeenCalledTimes(1);
+  describe('Button Type', () => {
+    test('renders with type button', () => {
+      renderButton({ children: 'Default Type Button', type: 'button' });
+      const buttonElement = getButton('Default Type Button');
+      expect(buttonElement).toHaveAttribute('type', 'button');
     });
 
-    test('does not fire navigate callback if target is _blank', () => {
-      const mockedNavigate = jest.fn();
-      renderButton({
-        as: 'a',
-        navigate: mockedNavigate,
-        href: '/',
-        target: '_blank',
-        children: 'react router link',
-      });
-      const anchorElement = getAnchor('react router link');
-      fireEvent.click(anchorElement);
-      expect(mockedNavigate).toHaveBeenCalledTimes(0);
+    test('renders with type submit when specified', () => {
+      renderButton({ type: 'submit', children: 'Submit Button' });
+      const buttonElement = getButton('Submit Button');
+      expect(buttonElement).toHaveAttribute('type', 'submit');
+    });
+
+    test('renders with type reset when specified', () => {
+      renderButton({ type: 'reset', children: 'Reset Button' });
+      const buttonElement = getButton('Reset Button');
+      expect(buttonElement).toHaveAttribute('type', 'reset');
     });
   });
 
-  describe('Role Attribute', () => {
-    test('applies role attribute', () => {
-      renderButton({ role: 'button', children: 'Button with Role' });
-      const buttonElement = getButton('Button with Role');
-      expect(buttonElement).toHaveAttribute('role', 'button');
+  describe('Button Ref', () => {
+    test('forwards ref to the button element', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderButton({ ref, children: 'Button with Ref' });
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     });
   });
 });