@hyphen/hyphen-components 2.9.0

package/src/components/CheckboxInput/components/CheckboxIcon.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, BoxProps } from '../../Box/Box';
+import { Icon } from '../../Icon/Icon';
+import { FontColor } from '../../../types';
+import { CheckboxProps } from './Checkbox'; // eslint-disable-line import/no-cycle
+
+export interface CheckboxIconProps extends BoxProps {
+  /**
+   * Custom className to be applied to root node of component.
+   */
+  className?: string;
+  /**
+   * Whether the input is in an error state. The icon will visually change accordingly.
+   */
+  error?: CheckboxProps['error'];
+  /**
+   * The checkbox input "checked" attribute.
+   */
+  isChecked?: CheckboxProps['isChecked'];
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: CheckboxProps['isDisabled'];
+  /**
+   * Whether the checkbox is rendered in an indeterminate state.
+   * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+   */
+  isIndeterminate?: CheckboxProps['isIndeterminate'];
+}
+
+export const CheckboxIcon: React.FC<CheckboxIconProps> = ({
+  className = undefined,
+  error = null,
+  isChecked = false,
+  isDisabled = false,
+  isIndeterminate = false,
+  ...restProps
+}) => {
+  let color: FontColor = 'base';
+  let name:
+    | 'checkbox-btn'
+    | 'checkbox-btn-checked'
+    | 'checkbox-btn-indeterminate' = 'checkbox-btn';
+
+  if (isChecked) name = 'checkbox-btn-checked';
+  else name = 'checkbox-btn';
+
+  if (isIndeterminate) name = 'checkbox-btn-indeterminate';
+
+  if (isChecked && isDisabled) {
+    color = 'disabled';
+  } else if (isChecked && !isDisabled) {
+    color = 'base';
+  } else if (isDisabled) {
+    color = 'disabled';
+  }
+
+  if (error) color = 'danger';
+  if (isDisabled && error) color = 'danger-disabled';
+
+  return (
+    <Box
+      className={className}
+      display="inline-block"
+      color={color}
+      {...restProps}
+    >
+      <Icon name={name} />
+    </Box>
+  );
+};

package/src/components/DateInput/DateInput.mdx

@@ -0,0 +1,61 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { DateInput } from './DateInput';
+import * as Stories from './DateInput.stories';
+
+<Meta of={Stories} />
+
+# DateInput
+
+Use a DateInput to allow users to select a date close to today and place that date in an input field.
+Avoid using this component if the user needs to enter a date that is many years in the past (i.e. birthday) or future.
+For entering these types of dates we recommend using the `TextInput` component with a `date` mask. See an example here:
+[TextInput Date Example](?path=/docs/components-textinput-overview--with-date-mask)
+
+<Canvas isExpanded of={Stories.Basic} />
+
+## Props
+
+<ArgTypes of={DateInput} />
+
+## Default
+
+The DateInput is composed of 3 components. Each can be tailored based on their props. They are:
+
+1. [DatePicker](?path=/docs/components-datepicker-overview--basic-example)
+2. [Popover](?path=/docs/components-popover-overview--demo)
+3. [TextInput](?path=/docs/components-textinput-overview--default-story)
+
+The `DateInput` uses sensible defaults for these to allow for very straightforward ergonomics that allow users to
+select dates with minimal work.
+
+<Canvas of={Stories.Default} />
+
+## Date Range
+
+<Canvas of={Stories.DateRange} />
+
+## With Min/Max dates
+
+<Canvas of={Stories.WithMinAndMaxDates} />
+
+## Custom Date Format
+
+You can manipulate the format on the input field by using the `dateFormat` and `dateOptions`
+props. Under the hood our component uses the [date-fns `format` function](https://date-fns.org/v2.16.1/docs/format)
+to generate a string based on these options.
+
+<Canvas of={Stories.CustomDateFormat} />
+
+## On using onBlur event with DateInput
+
+The input is technically blurred whenever the calendar popover is interacted but as far as the user
+is concerned they are still interacting with the DateInput. Please keep this in mind when
+triggering form validation after an onBlur event.
+
+Make sure to pass the `onBlur` prop to the input via `textInputProps`.
+
+<Canvas of={Stories.InputBlurEvent} />
+
+## Component Design Tokens
+
+This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).

package/src/components/DateInput/DateInput.stories.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { DateInput } from './DateInput';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof DateInput> = {
+  title: 'Components/DateInput',
+  component: DateInput,
+};
+
+export default meta;
+
+export const Basic = () => (
+  <DateInput
+    datePickerProps={{
+      onChange() {},
+    }}
+    textInputProps={{
+      id: 'exampleDateInput',
+      name: 'selectDate',
+      label: 'Select a Date',
+      placeholder: 'e.g. 11/02/2020',
+    }}
+  />
+);
+
+export const Default = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null | [Date, Date]>(
+    null
+  );
+  const handleClear = () => {
+    setSelectedDate(null);
+  };
+
+  return (
+    <DateInput
+      datePickerProps={{
+        selected: selectedDate as Date,
+        onChange: setSelectedDate,
+      }}
+      textInputProps={{
+        placeholder: 'e.g. 11/02/2020',
+        onClear: handleClear,
+        id: 'defaultDatePicker',
+        name: 'selectDate',
+        label: 'Select Date',
+      }}
+    />
+  );
+};
+
+export const DateRange = () => {
+  const [startDate, setStartDate] = useState<Date | [Date, Date] | null>(null);
+  const [endDate, setEndDate] = useState<Date | [Date, Date] | null>(null);
+  const setDate = ([startDate, endDate]: [Date, Date]) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
+  };
+  const handleClear = () => {
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  return (
+    <DateInput
+      datePickerProps={{
+        // @ts-ignore - Type compatibility with onChange.
+        onChange: setDate,
+        selected: startDate as Date,
+        selectsRange: true,
+        startDate: startDate as Date,
+        endDate: endDate as Date,
+      }}
+      textInputProps={{
+        onClear: handleClear,
+        id: 'myDateRangePicker',
+        name: 'myDateRangePicker',
+        label: 'Select Date Range',
+      }}
+    />
+  );
+};
+
+export const WithMinAndMaxDates = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | [Date, Date] | null>(
+    null
+  );
+  const handleClear = () => {
+    setSelectedDate(null);
+  };
+  const min = new Date(2022, 6, 18);
+  min.setDate(min.getDate() - 10);
+  const max = new Date(2022, 6, 18);
+  max.setDate(max.getDate() + 100);
+  return (
+    <DateInput
+      datePickerProps={{
+        selected: selectedDate as Date,
+        maxDate: max,
+        minDate: min,
+        onChange: setSelectedDate,
+      }}
+      textInputProps={{
+        placeholder: 'e.g. 11/02/2020',
+        onClear: handleClear,
+        id: 'defaultDatePicker',
+        name: 'selectDate',
+        label: 'Select Date',
+      }}
+    />
+  );
+};
+
+export const CustomDateFormat = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null | [Date, Date]>(
+    new Date('2020, 11, 3')
+  );
+  const handleClear = () => {
+    setSelectedDate(null);
+  };
+  return (
+    <Box gap="md">
+      <DateInput
+        dateFormat={'MMMM dd, yyyy'}
+        datePickerProps={{
+          selected: selectedDate as Date,
+          onChange: setSelectedDate,
+        }}
+        textInputProps={{
+          onClear: handleClear,
+          id: 'withCustomDateFormat',
+          name: 'selectDate',
+          label: 'Select Date',
+        }}
+      />
+      <Box>
+        <p>
+          Selected Date (as ISO String):{' '}
+          {selectedDate ? (selectedDate as Date).toISOString() : null}
+        </p>
+      </Box>
+    </Box>
+  );
+};
+
+export const InputBlurEvent = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | [Date, Date] | null>(
+    new Date('2020, 11, 3')
+  );
+  const handleTextInputBlur = () => {
+    alert('TextInput Blur Event');
+  };
+  return (
+    <DateInput
+      dateFormat={'MMMM dd, yyyy'}
+      datePickerProps={{
+        selected: selectedDate as Date,
+        onChange: setSelectedDate,
+      }}
+      textInputProps={{
+        id: 'withCustomDateFormat',
+        name: 'selectDate',
+        label: 'Select Date',
+        onBlur: handleTextInputBlur,
+      }}
+    />
+  );
+};

package/src/components/DateInput/DateInput.test.tsx

@@ -0,0 +1,258 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { DateInput } from './DateInput';
+
+describe('DateInput', () => {
+  describe('Default', () => {
+    it('renders a DateInput component with defaults', () => {
+      render(
+        <DateInput
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('Popover', () => {
+    it('opens the Popover when the input is clicked', async () => {
+      render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      expect(input).toBeInTheDocument();
+
+      fireEvent.click(input);
+
+      const popoverContainer = screen.getByLabelText('Popover');
+      await waitFor(() =>
+        expect(popoverContainer).toHaveAttribute(
+          'data-popper-placement',
+          'bottom'
+        )
+      );
+    });
+
+    it('closes popover when user clicks outside', async () => {
+      const { container } = render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      fireEvent.click(input);
+
+      const popoverContainer = screen.getByLabelText('Popover');
+      await waitFor(() =>
+        expect(popoverContainer).toHaveAttribute(
+          'data-popper-placement',
+          'bottom'
+        )
+      );
+
+      fireEvent.click(container);
+      const popover = screen.queryByRole('dialog');
+      expect(popover).toBeNull();
+    });
+
+    it('closes popover when user selects a value NOT in a range', async () => {
+      const date = new Date(1995, 11, 14);
+
+      render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            openToDate: date,
+            selected: null,
+            onChange: () => null,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      fireEvent.click(input);
+
+      const popoverContainer = screen.getByLabelText('Popover');
+      await waitFor(() =>
+        expect(popoverContainer).toHaveAttribute(
+          'data-popper-placement',
+          'bottom'
+        )
+      );
+      const dateButton = screen.getByText('14');
+      await waitFor(() => {
+        fireEvent.click(dateButton);
+      });
+
+      const popover = screen.queryByRole('dialog');
+      await waitFor(() => {
+        expect(popover).toBeNull();
+      });
+    });
+
+    it('keeps popover open while user is selecting a Date range', async () => {
+      const date = new Date(1995, 11, 14);
+
+      render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            openToDate: date,
+            selected: null,
+            onChange: () => null,
+            selectsRange: true,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      fireEvent.click(input);
+
+      const popoverContainer = screen.getByLabelText('Popover');
+      await waitFor(() =>
+        expect(popoverContainer).toHaveAttribute(
+          'data-popper-placement',
+          'bottom'
+        )
+      );
+      const dateButton = screen.getByText('14');
+      await waitFor(() => {
+        fireEvent.click(dateButton);
+      });
+
+      const popover = screen.getByLabelText('Popover');
+      await waitFor(() => {
+        expect(popover).toHaveAttribute('data-popper-placement', 'bottom');
+      });
+    });
+  });
+
+  describe('Date Formatting', () => {
+    it('formats the date when a format is passed', async () => {
+      const date = new Date(1995, 11, 14);
+      render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+            openToDate: date,
+            selected: date,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('value', '1995/12/14');
+    });
+
+    it('formats both dates when range is being selected', async () => {
+      const dateOne = new Date(1995, 11, 14);
+      const dateTwo = new Date(1995, 11, 16);
+      render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+            openToDate: dateOne,
+            startDate: dateOne,
+            endDate: dateTwo,
+            selectsRange: true,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('value', '1995/12/14 - 1995/12/16');
+    });
+
+    it('formats one date if selecting range', async () => {
+      const dateOne = null;
+      const dateTwo = new Date(1995, 11, 16);
+      const { rerender } = render(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+            openToDate: dateTwo,
+            startDate: dateOne,
+            endDate: dateTwo,
+            selectsRange: true,
+          }}
+        />
+      );
+
+      const input = screen.getByLabelText('Select Date');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('value', ' - 1995/12/16');
+
+      rerender(
+        <DateInput
+          dateFormat="yyyy/MM/dd"
+          textInputProps={{
+            id: 'myInput',
+            label: 'Select Date',
+          }}
+          datePickerProps={{
+            onChange: () => null,
+            openToDate: dateTwo,
+            startDate: dateTwo,
+            endDate: dateOne,
+            selectsRange: true,
+          }}
+        />
+      );
+
+      const inputTwo = screen.getByLabelText('Select Date');
+      expect(inputTwo).toBeInTheDocument();
+      expect(inputTwo).toHaveAttribute('value', '1995/12/16 - ');
+    });
+  });
+});