@hyphen/hyphen-components 2.9.0

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

@@ -0,0 +1,460 @@
+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';
+
+describe('Button', () => {
+  describe('html button type', () => {
+    test('is set to button', () => {
+      render(<Button>Button</Button>);
+      const testBtn = screen.getByRole('button');
+      expect(testBtn.getAttribute('type')).toBe('button');
+    });
+
+    test('is set to "submit" if specified', () => {
+      render(<Button type="submit">Submit Button</Button>);
+
+      const testBtn = screen.getByRole('button');
+      expect(testBtn.getAttribute('type')).toBe('submit');
+    });
+
+    test('is set to "reset" if specified', () => {
+      render(<Button type="reset">Reset Button</Button>);
+
+      const testBtn = screen.getByRole('button');
+      expect(testBtn.getAttribute('type')).toBe('reset');
+    });
+
+    test('is not set if "as" prop is an anchor tag', () => {
+      render(
+        <Button as="a" href="https://www.hyphen.ai">
+          link button
+        </Button>
+      );
+      const testBtn = screen.getByText('link button').parentElement;
+      expect(testBtn).not.toHaveAttribute('type');
+    });
+  });
+
+  describe('with Icon', () => {
+    test('Renders an icon prefix if specified', () => {
+      render(<Button iconPrefix="alarm">Alarm Button</Button>);
+      expect(screen.getByTestId('prefixIcon')).toBeInTheDocument();
+    });
+
+    test('Renders an icon suffix if specified', () => {
+      render(<Button iconSuffix="alarm">Alarm Button</Button>);
+      expect(screen.getByTestId('suffixIcon')).toBeInTheDocument();
+    });
+
+    test('Renders icon prefix and suffix if specified', () => {
+      render(
+        <Button iconPrefix="alarm" iconSuffix="check">
+          Suffix Prefix Icon Button
+        </Button>
+      );
+      expect(screen.getByTestId('prefixIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('suffixIcon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Sizes', () => {
+    BUTTON_SIZES.map((size) =>
+      describe(`${BUTTON_SIZES}`, () => {
+        test(`it has a ${size} class applied to it`, () => {
+          render(<Button size={size}>{`${size} Button`}</Button>);
+
+          const btn = screen.getByText(`${size} Button`).closest('button');
+
+          expect(btn?.getAttribute('class')).toContain(`size-${size}`);
+        });
+      })
+    );
+
+    test('It applies responsive classes', () => {
+      render(
+        <Button size={{ base: 'lg', tablet: 'sm', desktop: 'md', hd: 'lg' }}>
+          button
+        </Button>
+      );
+
+      const btn = screen.getByText('button').closest('button');
+
+      expect(btn?.getAttribute('class')).toContain('size-lg');
+      expect(btn?.getAttribute('class')).toContain('size-sm-tablet');
+      expect(btn?.getAttribute('class')).toContain('size-md-desktop');
+      expect(btn?.getAttribute('class')).toContain('size-lg-hd');
+    });
+  });
+
+  describe('Variants', () => {
+    BUTTON_VARIANTS.map((variant) =>
+      describe(`${BUTTON_VARIANTS}`, () => {
+        test(`it has a ${variant} class applied to it`, () => {
+          render(<Button variant={variant}>{`${variant} Button`}</Button>);
+
+          const btn = screen.getByText(`${variant} Button`).closest('button');
+
+          expect(btn?.getAttribute('class')).toContain(variant);
+        });
+      })
+    );
+  });
+
+  describe('Callback Handling', () => {
+    describe('onClick', () => {
+      test('it fires onClick callback', () => {
+        const mockedHandleClick = jest.fn();
+
+        render(<Button onClick={mockedHandleClick}>Click</Button>);
+
+        const buttonElement = screen.getByText('Click').closest('button');
+        if (buttonElement) {
+          fireEvent.click(buttonElement);
+        }
+
+        expect(mockedHandleClick).toBeCalledTimes(1);
+      });
+
+      test('it does not fire function if onClick callback not provided', () => {
+        const mockedHandleClick = jest.fn();
+
+        render(<Button>Click</Button>);
+
+        const buttonElement = screen.getByText('Click').closest('button');
+        if (buttonElement) {
+          fireEvent.click(buttonElement);
+        }
+
+        expect(mockedHandleClick).toBeCalledTimes(0);
+      });
+
+      test('it prevents default event behavior if specified by onClick', async () => {
+        const mockedHandleClick = jest.fn((event) => event.preventDefault());
+        const mockedNavigate = jest.fn(() => null);
+
+        render(
+          <Button navigate={mockedNavigate} onClick={mockedHandleClick}>
+            Click
+          </Button>
+        );
+        const buttonElement = screen.getByText('Click').closest('button');
+        if (buttonElement) {
+          fireEvent.click(buttonElement);
+        }
+
+        expect(mockedHandleClick).toBeCalledTimes(1);
+        expect(mockedNavigate).not.toBeCalled();
+      });
+    });
+
+    describe('onFocus', () => {
+      test('it fires onFocus callback', () => {
+        const mockedHandleFocus = jest.fn();
+
+        render(<Button onFocus={mockedHandleFocus}>Focus</Button>);
+
+        const buttonElement = screen.getByText('Focus').closest('button');
+        if (buttonElement) {
+          fireEvent.focus(buttonElement);
+        }
+
+        expect(mockedHandleFocus).toBeCalledTimes(1);
+      });
+
+      test('it does not fire function of onFocus callback not provided', () => {
+        const mockedHandleFocus = jest.fn();
+
+        render(<Button>Focus</Button>);
+
+        const buttonElement = screen.getByText('Focus').closest('button');
+        if (buttonElement) {
+          fireEvent.focus(buttonElement);
+        }
+
+        expect(mockedHandleFocus).toBeCalledTimes(0);
+      });
+    });
+
+    describe('onBlur', () => {
+      test('it fires onBlur callback', () => {
+        const mockedHandleBlur = jest.fn();
+
+        render(<Button onBlur={mockedHandleBlur}>Blur</Button>);
+
+        const buttonElement = screen.getByText('Blur').closest('button');
+        if (buttonElement) {
+          fireEvent.blur(buttonElement);
+        }
+
+        expect(mockedHandleBlur).toBeCalledTimes(1);
+      });
+
+      test('it does not fire onBlur callback if not provided', () => {
+        const mockedHandleBlur = jest.fn();
+
+        render(<Button>Blur</Button>);
+
+        const buttonElement = screen.getByText('Blur').closest('button');
+        if (buttonElement) {
+          fireEvent.blur(buttonElement);
+        }
+
+        expect(mockedHandleBlur).toBeCalledTimes(0);
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Default', () => {
+      test('it renders the button with simple text', () => {
+        render(<Button>Button!</Button>);
+        const buttonElement = screen.getByText('Button!');
+
+        expect(buttonElement).toBeInTheDocument();
+      });
+
+      test('it renders the button with nested dom nodes', () => {
+        render(
+          <Button>
+            <div className="buttonLoadingIndicator">
+              <div>Im a nested dom node!</div>
+            </div>
+          </Button>
+        );
+        const buttonElement = screen.getByText('Im a nested dom node!');
+
+        expect(buttonElement).toBeInTheDocument();
+      });
+
+      test('it does not have a disabled attribute', () => {
+        render(<Button>Not Disabled Button</Button>);
+
+        expect(
+          screen.getByText('Not Disabled Button').closest('button')
+        ).not.toBeDisabled();
+      });
+
+      test('it renders an empty button when no children are passed', () => {
+        render(<Button />);
+        const buttonElement = screen.getByRole('button');
+
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement.innerText).toBe(undefined);
+      });
+    });
+
+    describe('Full Width', () => {
+      test('it has a fullWidth class applied to it', () => {
+        render(<Button fullWidth>Full Width Button</Button>);
+
+        const fullWidthBtn = screen
+          .getByText('Full Width Button')
+          .closest('button');
+
+        expect(fullWidthBtn?.getAttribute('class')).toContain('full-width');
+      });
+    });
+
+    describe('Custom ClassName', () => {
+      test('if a ClassName is provided, its added to the button', () => {
+        render(<Button className="custom-class">Custom ClassName</Button>);
+
+        const customClassNameBtn = screen
+          .getByText('Custom ClassName')
+          .closest('button');
+
+        expect(customClassNameBtn?.getAttribute('class')).toContain(
+          'custom-class'
+        );
+      });
+    });
+
+    describe('Disabled', () => {
+      test('it has a disabled attribute', () => {
+        render(<Button isDisabled>Disabled Button</Button>);
+
+        expect(
+          screen.getByText('Disabled Button').closest('button')
+        ).toBeDisabled();
+      });
+    });
+
+    describe('Loading', () => {
+      test('it renders the spinning loading indicator', () => {
+        render(<Button isLoading>Button is loading</Button>);
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+      });
+
+      test('it renders the grey spinning indicator if button variant is secondary', () => {
+        render(
+          <Button isLoading variant="secondary">
+            Button is loading
+          </Button>
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+      });
+
+      test('it keeps the button text in the dom so the button width does not change', () => {
+        render(<Button isLoading>Button is loading</Button>);
+        expect(screen.getByText('Button is loading')).toBeInTheDocument();
+      });
+
+      test('it renders white spinning indicator when button is primary', () => {
+        render(
+          <Button variant="primary" isLoading>
+            Button is loading
+          </Button>
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+      });
+
+      test('it renders white spinning indicator when button is danger', () => {
+        render(
+          <Button variant="danger" isLoading>
+            Button is loading
+          </Button>
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Disabled and Loading', () => {
+      test('it has a disabled attribute', () => {
+        render(
+          <Button isDisabled isLoading>
+            Disabled and Loading Button
+          </Button>
+        );
+
+        expect(
+          screen.getByText('Disabled and Loading Button').closest('button')
+        ).toBeDisabled();
+      });
+    });
+
+    describe('Color Variations', () => {
+      test('Renders button with default variant neutral', () => {
+        render(<Button>primary</Button>);
+
+        expect(screen.getByText('primary').closest('button')).toHaveClass(
+          'primary'
+        );
+      });
+
+      const variants = [
+        'primary',
+        'secondary',
+        'tertiary',
+        'danger',
+      ] as ButtonVariant[];
+      variants.forEach((variant) => {
+        test(`It renders component with variant: ${variant} when passed`, () => {
+          render(<Button variant={variant}>{variant}</Button>);
+          expect(screen.getByText(variant).closest('button')).toHaveClass(
+            variant
+          );
+        });
+      });
+    });
+
+    describe('Anchor', () => {
+      test('it renders an anchor tag if as prop `a` is passed', () => {
+        render(
+          <Button href="http://hyphen.ai" as="a">
+            hey there
+          </Button>
+        );
+        const buttonElement = screen.getByRole('link');
+
+        expect(buttonElement).toBeInTheDocument();
+      });
+
+      test('it does not have a button type attribute if as prop `a` is passed', () => {
+        render(
+          <Button href="http://hyphen.ai" as="a">
+            hey there
+          </Button>
+        );
+        const buttonElement = screen.getByRole('link');
+
+        expect(buttonElement.getAttribute('type')).toBe(null);
+      });
+
+      test('it renders a target attribute if one is passed, the element is an anchor, and there is a href', () => {
+        render(
+          <Button href="http://hyphen.ai" as="a" target="_blank">
+            hey there
+          </Button>
+        );
+        const buttonElement = screen.getByRole('link');
+
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveAttribute('target');
+      });
+
+      test('it does not render a target attribute if the element is not an anchor', () => {
+        render(
+          <Button href="http://hyphen.ai" target="_blank">
+            hey there
+          </Button>
+        );
+        const buttonElement = screen.getByRole('button');
+
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).not.toHaveAttribute('target');
+      });
+
+      test('it does not render a target attribute if the element does not have an href', () => {
+        render(
+          <Button as="a" target="_blank">
+            hey there
+          </Button>
+        );
+        const buttonElement = screen.getByText('hey there');
+
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).not.toHaveAttribute('target');
+      });
+    });
+  });
+
+  describe('React Router', () => {
+    it('fires navigate callback when included', () => {
+      const mockedNavigate = jest.fn(() => {});
+      render(
+        <Button as="a" navigate={mockedNavigate} href="/">
+          react router link
+        </Button>
+      );
+
+      const anchorElement = screen.getByText('react router link').closest('a');
+      if (anchorElement) {
+        fireEvent.click(anchorElement);
+      }
+
+      expect(mockedNavigate).toBeCalledTimes(1);
+    });
+
+    it('does not fire navigate callback if target is _blank', () => {
+      const mockedNavigate = jest.fn(() => {});
+      render(
+        <Button as="a" navigate={mockedNavigate} href="/" target="_blank">
+          react router link
+        </Button>
+      );
+
+      const anchorElement = screen.getByText('react router link').closest('a');
+      if (anchorElement) {
+        fireEvent.click(anchorElement);
+      }
+
+      expect(mockedNavigate).toBeCalledTimes(0);
+    });
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,241 @@
+import { IconName, ResponsiveProp } from '../../types';
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FocusEvent,
+  MouseEvent,
+  ReactNode,
+  createElement,
+  forwardRef,
+} from 'react';
+
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
+import classNames from 'classnames';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import { getElementType } from '../../lib/getElementType';
+import { handleReactRouterClick } from '../../lib/reactRouterClickHandler';
+import styles from './Button.module.scss';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface BaseButtonProps {
+  /**
+   * Contents of the button.
+   */
+  children?: ReactNode;
+  /**
+   * Additional ClassNames to add to button.
+   */
+  className?: string;
+  /**
+   * Button takes up the full width of its parent container.
+   */
+  fullWidth?: boolean;
+  /**
+   * Name of the icon to include before the button text
+   */
+  iconPrefix?: IconName;
+  /**
+   * Name of the icon to include after the button text
+   */
+  iconSuffix?: IconName;
+  /**
+   * A unique identifier for the button.
+   */
+  id?: string;
+  /**
+   * URL to navigate to when clicked. Passing this attribute automatically
+   * renders an anchor <a> tag, NOT a <button> element.
+   */
+  href?: string;
+  /**
+   * Disables the button, making it inoperable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Replaces the button text with a loading indicator and disables the button.
+   */
+  isLoading?: boolean;
+  /**
+   * Prop reserved for when component is wrapped by `<Link>` from react-router.
+   */
+  navigate?: () => void;
+  /**
+   * Callback when Button is pressed.
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /**
+   * Callback when focus leaves Button.
+   */
+  onBlur?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /**
+   * Callback when Button receives focus.
+   */
+  onFocus?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /**
+   * Specify the tabIndex of the button.
+   */
+  tabIndex?: number;
+  /**
+   * Useful when using button as an anchor tag.
+   */
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+  /**
+   * The size of the button.
+   */
+  size?: ButtonSize | ResponsiveProp<ButtonSize>;
+  /**
+   * The color variant of the button
+   */
+  variant?: ButtonVariant;
+  /**
+   * ref - currently cannot be typed due to limitations of using the `as` prop
+   */
+}
+
+export type AnchorButtonProps = { as: 'a' } & BaseButtonProps &
+  Omit<
+    React.DetailedHTMLProps<
+      AnchorHTMLAttributes<HTMLAnchorElement>,
+      HTMLAnchorElement
+    >,
+    'ref'
+  >;
+
+export type NormalButtonProps = { as?: 'button' } & BaseButtonProps &
+  Omit<
+    React.DetailedHTMLProps<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    'ref'
+  >;
+
+export type ButtonProps = NormalButtonProps | AnchorButtonProps;
+
+export const Button = forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  ButtonProps
+>(
+  (
+    {
+      children = undefined,
+      as = 'button',
+      className = '',
+      fullWidth = false,
+      id = undefined,
+      href = undefined,
+      iconPrefix = undefined,
+      iconSuffix = undefined,
+      isDisabled = false,
+      isLoading = false,
+      navigate = undefined,
+      onClick = undefined,
+      onFocus = undefined,
+      onBlur = undefined,
+      tabIndex = undefined,
+      target = undefined,
+      type = undefined,
+      size = 'md',
+      variant = 'primary',
+      ...restProps
+    },
+    ref
+  ) => {
+    const disabled = isLoading || isDisabled;
+
+    const responsiveClasses = generateResponsiveClasses('size', size).map(
+      (c) => styles[c]
+    );
+
+    const buttonClasses = classNames(
+      'hyphen-components__variables__form-control',
+      styles.button,
+      className,
+      responsiveClasses,
+      {
+        [styles.loading]: isLoading,
+        [styles[variant]]: variant,
+        [styles['full-width']]: fullWidth,
+      }
+    );
+
+    const handleClick = handleReactRouterClick;
+
+    const handleFocus = (
+      event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>
+    ) => {
+      if (onFocus) onFocus(event);
+    };
+
+    const handleBlur = (
+      event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>
+    ) => {
+      if (onBlur) onBlur(event);
+    };
+
+    const buttonContent =
+      iconPrefix || iconSuffix ? (
+        <Box display="inline-flex" direction="row" alignItems="center" gap="xs">
+          {isLoading && <Spinner className={styles['spinner-wrapper']} />}
+          {iconPrefix && (
+            <Icon
+              className={styles.label}
+              name={iconPrefix}
+              aria-hidden="true"
+              focusable="false"
+              data-testid="prefixIcon"
+              size={size === 'md' ? 'sm' : size}
+            />
+          )}
+          {children && <span className={styles.label}>{children}</span>}
+          {iconSuffix && (
+            <Icon
+              className={styles.label}
+              name={iconSuffix}
+              aria-hidden="true"
+              focusable="false"
+              data-testid="suffixIcon"
+              size={size === 'md' ? 'sm' : size}
+            />
+          )}
+        </Box>
+      ) : (
+        <>
+          {isLoading && <Spinner className={styles['spinner-wrapper']} />}
+          {(() => {
+            if (children) {
+              return <span className={styles.label}>{children}</span>;
+            }
+            return null;
+          })()}
+        </>
+      );
+
+    const buttonElement = getElementType(Button, { as });
+
+    return createElement(
+      buttonElement,
+      {
+        id,
+        href,
+        className: buttonClasses,
+        disabled,
+        target: as === 'a' && href ? target : null,
+        onBlur: handleBlur,
+        onClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+          handleClick(event, onClick, target, navigate),
+        onFocus: handleFocus,
+        ref,
+        type: type || (as !== 'a' && !href ? 'button' : undefined),
+        tabIndex,
+        ...restProps,
+      },
+      buttonContent
+    );
+  }
+);