@hyphen/hyphen-components 2.9.0

package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FormikValues,
+  FieldAttributes,
+  getIn,
+} from 'formik';
+import { TimePicker, TimePickerProps } from '../../TimePicker/TimePicker';
+
+export interface FormikTimePickerProps
+  extends Omit<TimePickerProps, 'onChange'> {
+  field: FieldAttributes<HTMLSelectElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: TimePickerProps['onChange'];
+}
+
+export const FormikTimePicker: FC<FormikTimePickerProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  options,
+  onChange,
+  ...props
+}) => (
+  <TimePicker
+    {...props}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+    options={options}
+  />
+);

package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.test.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik, Form, Field, FormikValues, getIn, setIn } from 'formik';
+import { FormikTimePickerNative } from './FormikTimePickerNative';
+
+const testLabelName = 'test select';
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)?.length > 1
+    ? {}
+    : setIn({}, testValueKey, 'input is required');
+
+const renderForm = (
+  initialValue: any, // eslint-disable-line
+  props: {
+    placeholder?: string;
+    hideLabel?: boolean;
+    isRequired?: unknown;
+    isDisabled?: boolean;
+    onChange?: jest.Mock<void, [React.ChangeEvent<HTMLSelectElement>]>; // eslint-disable-line
+    interval?: number;
+  },
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+    onSubmit={() => {}} // eslint-disable-line
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          component={FormikTimePickerNative}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikTimePickerNative', () => {
+  describe('States', () => {
+    describe('Hidden label, with a placeholder', () => {
+      test('it renders input without a visual label, and with a placeholder', () => {
+        render(
+          renderForm(undefined, {
+            placeholder: 'Test Placeholder',
+            hideLabel: true,
+          })
+        );
+        expect(screen.queryByText(testLabelName)).toBeNull();
+        expect(screen.getByText('Test Placeholder')).toBeInTheDocument();
+      });
+    });
+
+    describe('No Aria-labelledby', () => {
+      test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
+        render(renderForm(undefined, { hideLabel: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        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', () => {
+        render(renderForm(undefined, {}));
+
+        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
+        expect(screen.getByText('HH:MM')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(renderForm(undefined, {}));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('Single select, pre-selected', () => {
+      test('it renders with value pre-selected', () => {
+        render(renderForm('2020-10-23T04:30:00.120Z', {}));
+
+        expect(screen.getByText('12:00 AM')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Required', () => {
+      test('it sets aria-required on the input', () => {
+        render(renderForm(undefined, { isRequired: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        render(renderForm(undefined, { isDisabled: true }));
+
+        expect(screen.getByLabelText(testLabelName)).toBeDisabled();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', async () => {
+        const { getByText } = render(
+          renderForm(undefined, { isRequired: true })
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('it renders the error message from nested object', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: [] } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
+        let value: string | undefined;
+        const mockedHandleChange = jest.fn((event) => {
+          event.persist();
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const selectInput = getByLabelText(testLabelName);
+        fireEvent.change(selectInput, { target: { value: 'hello' } });
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+      });
+
+      test('it fires onChange callback on change', async () => {
+        const mockedHandleChange = jest.fn();
+
+        const { getByLabelText } = render(
+          renderForm(undefined, { onChange: mockedHandleChange })
+        );
+
+        await fireEvent.change(getByLabelText(testLabelName));
+
+        expect(mockedHandleChange).toBeCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FormikValues,
+  FieldAttributes,
+  getIn,
+} from 'formik';
+import {
+  TimePickerNative,
+  TimePickerNativeProps,
+} from '../../TimePickerNative/TimePickerNative';
+
+export interface FormikTimePickerNativeProps
+  extends Omit<TimePickerNativeProps, 'onChange'> {
+  field: FieldAttributes<HTMLTextAreaElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange: TimePickerNativeProps['onChange'];
+}
+
+export const FormikTimePickerNative: FC<FormikTimePickerNativeProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  ...props
+}) => (
+  <TimePickerNative
+    {...props}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);

package/src/components/Formik/FormikToggle/FormikToggle.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { Formik, Form, Field, getIn, setIn, FormikValues } from 'formik';
+import { FormikToggle } from './FormikToggle';
+
+const testLabelName = 'test checkbox';
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)
+    ? {}
+    : setIn({}, testValueKey, 'Checkbox is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    onSubmit={props.handleSubmit} // eslint-disable-line
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          component={FormikToggle}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('CheckboxInput', () => {
+  describe('States', () => {
+    describe('With default props', () => {
+      test('renders not disabled, checked, or invalid by default', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+
+        expect(checkbox.checked).toBe(false);
+        expect(checkbox.disabled).toBe(false);
+        expect(checkbox.getAttribute('aria-invalid')).toBe('false');
+      });
+    });
+
+    describe('With initial value true', () => {
+      test('input is rendered checked when instantiated with isChecked true', () => {
+        const { getByLabelText } = render(renderForm(true, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toEqual(true);
+      });
+    });
+
+    describe('With initial value false', () => {
+      test('input is rendered unchecked when instantiated with isChecked false', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toEqual(false);
+      });
+    });
+
+    describe('Disabled', () => {
+      test('input is rendered with the disabled attrbute when isDisabled is true', () => {
+        const { getByLabelText } = render(
+          renderForm(false, { isDisabled: true })
+        );
+        const checkbox = getByLabelText(testLabelName);
+        expect(checkbox).toBeDisabled();
+      });
+    });
+
+    describe('Correctly supplies aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        expect(getByLabelText(testLabelName)).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('With Error', () => {
+      test('correctly renders the checkbox with an error message underneath', async () => {
+        const { getByText } = render(renderForm(false, { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('Checkbox is required')).toBeInTheDocument()
+        );
+      });
+
+      test('correctly renders the toggle with an error message from nested object', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: false } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('Checkbox is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", () => {
+        let value = false;
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.checked;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const checkbox = getByLabelText(testLabelName);
+
+        act(() => {
+          fireEvent.click(checkbox);
+        });
+
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toBe(true);
+      });
+
+      test('Standard Formik onChange modifies the target value', async () => {
+        const { getByLabelText, getByText, queryByText } = render(
+          renderForm(false, { isRequired: true })
+        );
+        const submitButton = getByText('submit');
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toBe(false);
+
+        fireEvent.click(submitButton);
+        // expect(mockedHandleSubmit).toHaveBeenCalledTimes(0);
+        await waitFor(() =>
+          expect(getByText('Checkbox is required')).toBeInTheDocument()
+        );
+
+        act(() => {
+          fireEvent.click(checkbox);
+        });
+        expect(checkbox.checked).toBe(true);
+        await waitFor(() =>
+          expect(queryByText('Checkbox is required')).not.toBeInTheDocument()
+        );
+      });
+    });
+  });
+});

package/src/components/Formik/FormikToggle/FormikToggle.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import { Toggle } from '../../Toggle/Toggle';
+
+export interface FormikToggleProps {
+  field: FieldAttributes<HTMLTextAreaElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  id: string;
+  label: string;
+}
+
+export const FormikToggle: React.FC<FormikToggleProps> = ({
+  field: {
+    name,
+    onBlur, // eslint-disable-line no-unused-vars
+    onChange, // eslint-disable-line no-unused-vars
+    value,
+  },
+  form: { touched, errors },
+  ...props
+}) => (
+  <Toggle
+    error={getIn(touched, name) && getIn(errors, name)}
+    isChecked={value}
+    onBlur={onBlur}
+    onChange={onChange} // eslint-disable-line
+    {...props}
+  />
+);

package/src/components/Heading/Heading.constants.ts

@@ -0,0 +1,19 @@
+export type HEADING_LEVELS_TYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export const HEADING_LEVELS: HEADING_LEVELS_TYPE[] = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]; // eslint-disable-line import/prefer-default-export
+
+export const HEADING_DEFAULT_SIZE_MAP = {
+  h1: '3xl',
+  h2: '2xl',
+  h3: 'xl',
+  h4: 'lg',
+  h5: 'md',
+  h6: 'sm',
+};

package/src/components/Heading/Heading.mdx

@@ -0,0 +1,35 @@
+import { Heading } from './Heading';
+
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as Stories from './Heading.stories';
+
+<Meta of={Stories} />
+
+# Heading
+
+Use `Headings` as labels for pages or sections of a page that make up an interface. `Headings` can label an entire page, or sections of related content.
+The `Heading` component allows you to specify an appropriate semantic element (h1-h6) and independently set its size so that it is appropriate for the surrounding content.
+If no size is specified, a default size will be applied.
+
+## Props
+
+<Canvas of={Stories.Levels} />
+
+<ArgTypes of={Heading} />
+
+## Sizes
+
+The default size of the Heading can overridden as so that it's appropriate for its surrounding context.
+
+<Canvas of={Stories.Sizes} />
+
+The `size` prop accepts an object where the properties correspond to [breakpoint tokens](?path=/docs/foundation-design-tokens--docs#breakpoints).
+
+<Canvas of={Stories.ResponsiveSizes} />
+
+## Colors
+
+The variant of the heading is inherited from its parent, but can be set to brand variant as well.
+
+<Canvas of={Stories.Colors} />

package/src/components/Heading/Heading.module.scss

@@ -0,0 +1,5 @@
+.heading {
+  line-height: var(--size-line-height-heading);
+  font-family: var(--assets-font-family-brand);
+  font-weight: var(--size-font-weight-semibold);
+}

package/src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,90 @@
+import { Heading } from './Heading';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Components/Heading',
+  component: Heading,
+};
+
+export default meta;
+
+export const Levels = () => (
+  <>
+    <Heading as="h1">h1 Heading</Heading>
+    <Heading as="h2">h2 Heading</Heading>
+    <Heading as="h3">h3 Heading</Heading>
+    <Heading as="h4">h4 Heading</Heading>
+    <Heading as="h5">h5 Heading</Heading>
+    <Heading as="h6">h6 Heading</Heading>
+  </>
+);
+
+export const Sizes = () => (
+  <>
+    <Heading as="h3" size="sm">
+      sm 16px
+    </Heading>
+    <Heading as="h3" size="md">
+      md 20px
+    </Heading>
+    <Heading as="h3" size="lg">
+      lg 24px
+    </Heading>
+    <Heading as="h3" size="xl">
+      xl 32px
+    </Heading>
+    <Heading as="h3" size="2xl">
+      2xl 40px
+    </Heading>
+    <Heading as="h3" size="3xl">
+      3xl 48px
+    </Heading>
+    <Heading as="h3" size="4xl">
+      4xl 56px
+    </Heading>
+    <Heading as="h3" size="5xl">
+      5xl 64px
+    </Heading>
+    <Heading as="h3" size="6xl">
+      6xl 72px
+    </Heading>
+  </>
+);
+
+export const ResponsiveSizes = () => (
+  <>
+    <Heading
+      as="h3"
+      size={{ base: 'sm', tablet: 'lg', desktop: 'xl', hd: '3xl' }}
+    >
+      New Developer Operations Platform
+    </Heading>
+  </>
+);
+
+export const Colors = () => (
+  <>
+    <Heading as="h3" color="base">
+      base
+    </Heading>
+    <Heading as="h3" color="secondary">
+      secondary
+    </Heading>
+    <Heading as="h3" color="inverse">
+      inverse
+    </Heading>
+    <Heading as="h3" color="disabled">
+      disabled
+    </Heading>
+    <Heading as="h3" color="success">
+      success
+    </Heading>
+    <Heading as="h3" color="warn">
+      warn
+    </Heading>
+    <Heading as="h3" color="danger">
+      danger
+    </Heading>
+  </>
+);

package/src/components/Heading/Heading.test.tsx

@@ -0,0 +1,67 @@
+//import '@testing-library/jest-dom';
+
+import { FONT_COLOR_OPTIONS, HEADING_SIZE_OPTIONS } from '../../lib/tokens';
+import { render, screen } from '@testing-library/react';
+
+import { HEADING_LEVELS } from './Heading.constants';
+import { Heading } from './Heading';
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+
+const headingComponentLevels = HEADING_LEVELS.map((level) => (
+  <Heading as={level} key={uuid()}>
+    {level}
+  </Heading>
+));
+
+const headingComponentSizes = HEADING_SIZE_OPTIONS.map((fontSize) => (
+  <Heading size={fontSize} key={uuid()}>
+    {fontSize}
+  </Heading>
+));
+
+const headingComponentColors = FONT_COLOR_OPTIONS.map((color) => (
+  <Heading color={color} key={uuid()}>
+    {color}
+  </Heading>
+));
+
+describe('Heading', () => {
+  test('it adds className', () => {
+    render(<Heading className="test-class">Hello World</Heading>);
+    expect(screen.getByText('Hello World').classList).toContain('test-class');
+  });
+
+  describe('Levels', () => {
+    headingComponentLevels.forEach((headingComponent, index) => {
+      test(`it renders the specified html heading ${HEADING_LEVELS[index]}`, () => {
+        render(headingComponent);
+        expect(
+          document.getElementsByTagName(HEADING_LEVELS[index])[0]
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    headingComponentSizes.forEach((headingComponent, index) => {
+      test(`it renders the specified size ${HEADING_SIZE_OPTIONS[index]}`, () => {
+        render(headingComponent);
+        expect(
+          screen.getByText(HEADING_SIZE_OPTIONS[index]).classList
+        ).toContain(`heading-${HEADING_SIZE_OPTIONS[index]}`);
+      });
+    });
+  });
+
+  describe('Colors', () => {
+    headingComponentColors.forEach((headingComponent, index) => {
+      test(`it renders the specified variant ${FONT_COLOR_OPTIONS[index]}`, () => {
+        render(headingComponent);
+        expect(screen.getByText(FONT_COLOR_OPTIONS[index]).classList).toContain(
+          `font-color-${FONT_COLOR_OPTIONS[index]}`
+        );
+      });
+    });
+  });
+});