@hyphen/hyphen-components 2.9.0

package/src/components/SelectInputNative/SelectInputNative.test.tsx

@@ -0,0 +1,341 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { BreakpointSize } from '../../types';
+import { SelectInputNative } from './SelectInputNative';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+function getByTextWithMarkup(text: string) {
+  // eslint-disable-next-line
+  // @ts-ignore
+  return (content, element) => {
+    const hasText = (node: Element) => node.textContent === text;
+    const elementHasText = hasText(element);
+    // eslint-disable-next-line
+    // @ts-ignore
+    const childrenDontHaveText = Array.from(element.children).every(
+      (child) => !hasText(child as Element)
+    );
+
+    return elementHasText && childrenDontHaveText;
+  };
+}
+
+describe('SelectInputNative', () => {
+  describe('Callback Handling', () => {
+    test('it fires onChange callback on change', async () => {
+      const mockedHandleChange = jest.fn();
+
+      const { getByLabelText } = render(
+        <SelectInputNative
+          id="testId"
+          onChange={mockedHandleChange}
+          placeholder="Test Placeholder"
+          label="onchange test"
+          options={selectOptions}
+          value={null}
+        />
+      );
+
+      await fireEvent.change(getByLabelText('onchange test'));
+
+      expect(mockedHandleChange).toBeCalledTimes(1);
+    });
+
+    test('it fires onFocus callback on focus', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleFocus = jest.fn();
+
+      render(
+        <SelectInputNative
+          id="testId"
+          onChange={mockedHandleChange}
+          onFocus={mockedHandleFocus}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+          value={null}
+          label="onfocus test"
+        />
+      );
+      const select = screen.getByLabelText('onfocus test');
+      fireEvent.focus(select);
+
+      expect(mockedHandleFocus).toBeCalledTimes(1);
+    });
+
+    test('it fires onBlur callback on blur', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleBlur = jest.fn();
+
+      render(
+        <SelectInputNative
+          id="testId"
+          onChange={mockedHandleChange}
+          onBlur={mockedHandleBlur}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+          value={null}
+          label="onblur test"
+        />
+      );
+
+      const select = screen.getByLabelText('onblur test');
+      fireEvent.blur(select);
+
+      expect(mockedHandleBlur).toBeCalledTimes(1);
+    });
+  });
+
+  describe('States', () => {
+    describe('Hidden label, with a placeholder', () => {
+      test('it renders input without a visual label, and with a placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            label="hidden label"
+            hideLabel
+            onChange={mockedHandleChange}
+            placeholder="Test Placeholder"
+            options={selectOptions}
+            value={null}
+          />
+        );
+        expect(screen.queryByText('hidden label')).toBeNull();
+        expect(screen.getByText('Test Placeholder')).toBeInTheDocument();
+      });
+    });
+
+    test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
+      const mockedHandleChange = jest.fn();
+
+      render(
+        <SelectInputNative
+          id="testInput"
+          label="hidden label"
+          hideLabel
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value={null}
+        />
+      );
+      const inputElement = screen.getByLabelText('hidden label');
+      expect(inputElement).not.toHaveAttribute('aria-labelledby');
+    });
+
+    describe('With a label, and no custom placeholder', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value={selectOptions[1].value}
+          />
+        );
+
+        expect(screen.getByLabelText('Select Label')).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label correct id, when a label is provided', () => {
+        render(
+          <SelectInputNative
+            id="testInput"
+            label="test label"
+            options={selectOptions}
+            value={null}
+            onChange={() => null}
+          />
+        );
+        const inputElement = screen.getByLabelText('test label');
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          'testInputLabel'
+        );
+        expect(document.getElementById('testInputLabel')).toBeInTheDocument();
+      });
+    });
+
+    // @TODO -- This test doesn't do what we need at this time. Need to find a way to check for the selected value
+    // but react doesnt use the select attr in options.
+    /* eslint-disable */
+    // describe('Single select, pre-selected', () => {
+    //   test('it renders with value pre-selected', () => {
+    //     const mockedHandleChange = jest.fn();
+
+    //     const { debug } = render(
+    //       <SelectInputNative
+    //         id="testId"
+    //         onChange={mockedHandleChange}
+    //         label="Select Label"
+    //         options={selectOptions}
+    //         value={selectOptions[2].value}
+    //       />,
+    //     );
+    //     const selectElement = screen.getByLabelText('Select Label');
+    //     const option = screen.getByText('Vanilla');
+
+    //     expect(option).toHaveAttribute('selected', true);
+    //   });
+    // });
+    /* eslint-enable */
+
+    describe('Is Required', () => {
+      test('it sets the required and aria-required properties on the input', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Required Select"
+            options={selectOptions}
+            isRequired
+            value={selectOptions[0].value}
+          />
+        );
+
+        const inputElement = screen.getByLabelText('Required Select');
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+        expect(inputElement).toHaveAttribute('required');
+      });
+
+      test('it renders an asterisk in the label by default', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            isRequired
+            value={selectOptions[0].value}
+          />
+        );
+
+        expect(
+          screen.getByText(getByTextWithMarkup('Select Label *'))
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            label="disabled test"
+            options={selectOptions}
+            isDisabled
+            value={null}
+          />
+        );
+        const select = screen.getByLabelText('disabled test');
+        expect(select).toBeDisabled();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            error="Helpful message"
+            value={null}
+          />
+        );
+
+        expect(screen.getByText('Helpful message')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const mockedHandleChange = jest.fn();
+    const sizes = ['sm', 'md', 'lg'] as ('sm' | 'md' | 'lg')[];
+
+    const breakpoints: BreakpointSize[] = ['tablet', 'desktop', 'hd'];
+
+    sizes.forEach((size) => {
+      test(`it has a ${size} class applied to it`, () => {
+        render(
+          <SelectInputNative
+            id="testId"
+            onChange={mockedHandleChange}
+            options={selectOptions}
+            value={selectOptions[0].value}
+            size={size}
+            label="size test"
+          />
+        );
+        const select = screen.getByLabelText('size test');
+        const selectParent = select.closest('div');
+        expect(selectParent?.getAttribute('class')).toContain(size);
+      });
+
+      breakpoints.forEach((breakpoint) => {
+        test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
+          render(
+            <SelectInputNative
+              id="testId"
+              onChange={mockedHandleChange}
+              options={selectOptions}
+              value={selectOptions[0].value}
+              size={{ [breakpoint]: size }}
+              label="size test"
+            />
+          );
+          const select = screen.getByLabelText('size test');
+          const selectParent = select.closest('div');
+
+          expect(selectParent?.getAttribute('class')).toContain(
+            `size-${size}-${breakpoint}`
+          );
+        });
+      });
+    });
+
+    test('It applies responsive classes when multiple are applied', () => {
+      render(
+        <SelectInputNative
+          id="testId"
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value={selectOptions[0].value}
+          size={{
+            base: 'sm',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'sm',
+          }}
+          label="size test"
+        />
+      );
+      const select = screen.getByLabelText('size test');
+      const selectParent = select.closest('div');
+
+      expect(selectParent?.getAttribute('class')).toContain('size-sm');
+      expect(selectParent?.getAttribute('class')).toContain('size-md-tablet');
+      expect(selectParent?.getAttribute('class')).toContain('size-lg-desktop');
+      expect(selectParent?.getAttribute('class')).toContain('size-sm-hd');
+    });
+  });
+});

package/src/components/SelectInputNative/SelectInputNative.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import classNames from 'classnames';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import { ResponsiveProp } from '../../types';
+import { Box, BoxProps } from '../Box/Box';
+import { FormControl, FormControlProps } from '../FormControl/FormControl';
+import styles from './SelectInputNative.module.scss';
+
+export type SelectInputNativeSize = 'sm' | 'md' | 'lg';
+export interface SelectInputNativeProps extends BoxProps, FormControlProps {
+  /**
+   * List of options for the select input.
+   */
+  options: { value: string | number; label: string | number }[];
+  /**
+   * onChange callback from select element.
+   */
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  /**
+   * Value of selected option. Should match the value key in the option object.
+   */
+  value: string | number | null;
+  /**
+   * The input's 'name' attribute.
+   */
+  name?: string;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: React.ReactNode;
+  /**
+   * Size of the input. ('sm' | 'md' | 'lg')
+   */
+  size?: SelectInputNativeSize | ResponsiveProp<SelectInputNativeSize>;
+  /**
+   * Whether the input is autofocused on initial render.
+   */
+  autoFocus?: HTMLSelectElement['autofocus'];
+  /**
+   * Additional props to be spread.
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
+  autoFocus = false,
+  label,
+  hideLabel,
+  helpText,
+  error,
+  id,
+  isDisabled,
+  isRequired,
+  name,
+  value,
+  options,
+  onChange,
+  placeholder = 'Select...',
+  requiredIndicator = ' *',
+  size = 'md',
+  ...restProps
+}) => {
+  const placeholderOption = { value: '', label: placeholder };
+  const optionsWithPlaceholder = [{ ...placeholderOption }, ...options];
+
+  const responsiveClasses = generateResponsiveClasses('size', size);
+
+  const selectWrapperClasses = classNames(
+    'hyphen-components__variables__form-control',
+    styles['select-input-native-wrapper'],
+    ...responsiveClasses.map((className) => styles[className]),
+    {
+      [styles.disabled]: isDisabled,
+      [styles.error]: error,
+    }
+  );
+
+  return (
+    <FormControl
+      label={label}
+      hideLabel={hideLabel}
+      id={id}
+      error={error}
+      helpText={helpText}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      requiredIndicator={requiredIndicator}
+      {...restProps}
+    >
+      <Box className={selectWrapperClasses}>
+        <Box
+          as="select"
+          aria-label={label}
+          aria-labelledby={label && !hideLabel ? `${id}Label` : undefined}
+          aria-required={isRequired}
+          value={value ?? ''}
+          onChange={onChange}
+          color={!value ? 'disabled' : 'base'}
+          autoFocus={autoFocus}
+          disabled={isDisabled}
+          name={name}
+          id={id}
+          required={isRequired}
+        >
+          {optionsWithPlaceholder.map((option) => (
+            <Box
+              as="option"
+              key={option.value}
+              value={option.value}
+              disabled={option.value === ''}
+              hidden={option.value === ''}
+              color={option.value === '' ? 'disabled' : 'base'}
+            >
+              {option.label}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </FormControl>
+  );
+};

package/src/components/Spinner/Spinner.mdx

@@ -0,0 +1,29 @@
+import { Spinner } from './Spinner';
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs';
+import * as Stories from './Spinner.stories';
+
+<Meta of={Stories} />
+
+# Spinner
+
+Spinners are used to communicate a loading state to the user.
+They may be used in buttons, forms, containers, pages,
+and anywhere else a loading state is necessary.
+
+<Canvas isExpanded of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={Spinner} />
+
+## Variants
+
+Spinner will inherit the font color of its parent.
+
+<Canvas of={Stories.Color} />
+
+## Sizes
+
+Use the `size` prop on your Spinner based on what's a best fit for your layout
+
+<Canvas of={Stories.Sizes} />

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,16 @@
+.spinner {
+  svg {
+    display: inherit;
+    animation: spin 1.5s infinite linear;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,48 @@
+import { Box } from '../Box/Box';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { Spinner } from './Spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+};
+
+export default meta;
+
+export const Default = () => <Spinner />;
+
+export const Color = () => (
+  <Box display="block" childGap="md">
+    <Box>
+      <Spinner />
+    </Box>
+    <Box color="success">
+      <Spinner />
+    </Box>
+    <Box color="inverse">
+      <Spinner />
+    </Box>
+  </Box>
+);
+
+export const Sizes = () => (
+  <Box direction="row" childGap="md">
+    <Box direction="row" childGap="sm">
+      <Spinner size="sm" />
+      <div>sm</div>
+    </Box>
+    <Box direction="row" childGap="sm">
+      <Spinner size="md" />
+      <div>md</div>
+    </Box>
+    <Box direction="row" childGap="sm">
+      <Spinner size="lg" />
+      <div>lg</div>
+    </Box>
+    <Box direction="row" childGap="sm">
+      <Spinner size="xl" />
+      <div>xl</div>
+    </Box>
+  </Box>
+);

package/src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Spinner } from './Spinner';
+import { render } from '@testing-library/react';
+
+describe('Spinner', () => {
+  describe('States', () => {
+    describe('Default', () => {
+      test('Renders with default props', () => {
+        const defaultSize = '16';
+        const { getByTestId } = render(<Spinner />);
+        const svg = getByTestId('spinner-testid');
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute('width', defaultSize);
+        expect(svg).toHaveAttribute('height', defaultSize);
+      });
+    });
+
+    describe('Sizes', () => {
+      test('Renders with proper size when passed `sm` prop', () => {
+        const smallSize = '12';
+        const { getByTestId } = render(<Spinner size="sm" />);
+        const svg = getByTestId('spinner-testid');
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute('width', smallSize);
+        expect(svg).toHaveAttribute('height', smallSize);
+      });
+
+      test('Renders with proper size when passed `lg` prop', () => {
+        const largeSize = '24';
+        const { getByTestId } = render(<Spinner size="lg" />);
+        const svg = getByTestId('spinner-testid');
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute('width', largeSize);
+        expect(svg).toHaveAttribute('height', largeSize);
+      });
+
+      test('Renders with proper size when passed `xl` prop', () => {
+        const extraLargeSize = '30';
+        const { getByTestId } = render(<Spinner size="xl" />);
+        const svg = getByTestId('spinner-testid');
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute('width', extraLargeSize);
+        expect(svg).toHaveAttribute('height', extraLargeSize);
+      });
+    });
+  });
+});