@hyphen/hyphen-components 2.9.0

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { DatePicker } from './DatePicker';
+import type { Meta } from '@storybook/react';
+import { Box } from '../Box/Box';
+import { Heading } from '../Heading/Heading';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+};
+
+export default meta;
+
+export const BasicExample = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date(2019, 11, 3));
+  return (
+    <Box gap="md">
+      <DatePicker
+        onChange={(date) => setSelectedDate(date as Date)}
+        selected={selectedDate}
+      />
+      <p>Selected Date: {selectedDate.toISOString()}</p>
+    </Box>
+  );
+};
+
+export const DateRange = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 3));
+  const [endDate, setEndDate] = useState<Date>(new Date(2019, 11, 28));
+  const setDate = ([startDate, endDate]: [Date, Date]) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
+  };
+  return (
+    <Box gap="md">
+      <DatePicker
+        onChange={(date) => setDate(date as [Date, Date])}
+        selected={startDate}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+      />
+      <p>
+        {`Selected Date Range: ${startDate && startDate.toISOString()} - ${
+          endDate && endDate.toISOString()
+        }`}
+      </p>
+    </Box>
+  );
+};
+
+export const MinAndMaxDates = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 18));
+  const min = new Date(2019, 11, 18);
+  min.setDate(min.getDate() - 5);
+  const max = new Date(2019, 11, 18);
+  max.setDate(max.getDate() + 5);
+  return (
+    <Box gap="md">
+      <DatePicker
+        selected={startDate}
+        onChange={(date) => setStartDate(date as Date)}
+        minDate={min}
+        maxDate={max}
+      />
+      <p>Selected Date: {startDate.toISOString()}</p>
+    </Box>
+  );
+};
+
+export const MonthPicker = () => {
+  const [startDateOne, setStartDateOne] = useState<Date>(new Date(2019, 10));
+  const [startDateTwo, setStartDateTwo] = useState<Date>(new Date(2019, 10));
+  const [startDateThree, setStartDateThree] = useState<Date>(
+    new Date(2019, 10)
+  );
+  return (
+    <Box display="flex" direction="row" gap="md">
+      <Box
+        gap="md"
+        display="flex"
+        direction="column"
+        alignItems="center"
+        width="33"
+      >
+        <Heading size="md">Default</Heading>
+        <DatePicker
+          selected={startDateOne}
+          onChange={(date) => setStartDateOne(date as Date)}
+          showMonthYearPicker
+        />
+        <p>{startDateOne.toISOString()}</p>
+      </Box>
+      <Box
+        gap="md"
+        display="flex"
+        direction="column"
+        alignItems="center"
+        width="33"
+      >
+        <Heading size="md">With full month name</Heading>
+        <DatePicker
+          selected={startDateTwo}
+          onChange={(date) => setStartDateTwo(date as Date)}
+          showMonthYearPicker
+          showFullMonthYearPicker
+        />
+        <p>{startDateTwo.toISOString()}</p>
+      </Box>
+      <Box
+        gap="md"
+        display="flex"
+        direction="column"
+        alignItems="center"
+        width="33"
+      >
+        <Heading size="md">With Two-column layout</Heading>
+        <DatePicker
+          selected={startDateThree}
+          onChange={(date) => setStartDateThree(date as Date)}
+          showMonthYearPicker
+          showFullMonthYearPicker
+          showTwoColumnMonthYearPicker
+        />
+        <p>{startDateThree.toISOString()}</p>
+      </Box>
+    </Box>
+  );
+};
+
+export const ShowMultipleMonths = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 3));
+  const [endDate, setEndDate] = useState<Date>(new Date(2019, 12, 20));
+  const setDate = ([startDate, endDate]: [Date, Date]) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
+  };
+  return (
+    <Box gap="md">
+      <DatePicker
+        onChange={(date) => setDate(date as [Date, Date])}
+        selected={startDate}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+        monthsShown={2}
+      />
+      <p>Start Date: {startDate && startDate.toISOString()}</p>
+      <p>End Date: {endDate && endDate.toISOString()}</p>
+    </Box>
+  );
+};
+
+export const WithTimePicker = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date('1993/09/28'));
+  return (
+    <Box gap="md">
+      <DatePicker
+        selected={startDate}
+        onChange={(date) => setStartDate(date as Date)}
+        showTimeSelect
+        timeIntervals={15}
+        timeCaption="Time"
+      />
+      <p>Selected Date: {startDate && startDate.toISOString()}</p>
+    </Box>
+  );
+};
+
+export const OpenByDefaultOnASpecificDate = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date('1993/09/28'));
+  return (
+    <Box gap="md">
+      <DatePicker
+        onChange={(date) => setStartDate(date as Date)}
+        selected={startDate}
+        openToDate={new Date('1993/09/28')}
+      />
+      <p>Selected Date: {startDate && startDate.toISOString()}</p>
+    </Box>
+  );
+};
+
+export const WithChildren = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date(2019, 11, 3));
+  return (
+    <Box gap="md">
+      <DatePicker
+        onChange={(date) => setSelectedDate(date as Date)}
+        selected={selectedDate}
+      >
+        <Box display="block" style={{ textAlign: 'center' }} color="base">
+          It will be sunny out today!
+        </Box>
+      </DatePicker>
+      <p>Selected Date: {selectedDate.toISOString()}</p>
+    </Box>
+  );
+};

package/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { DatePicker } from './DatePicker';
+
+describe('DatePicker', () => {
+  describe('Default', () => {
+    it('renders a datepicker with default props', () => {
+      const mockedOnChange = jest.fn();
+      const { container } = render(<DatePicker onChange={mockedOnChange} />);
+      const datePicker = container.querySelector('.react-datepicker');
+      expect(datePicker).toBeInTheDocument();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('Fires the expected callback when date is selected', () => {
+      const openToDate = new Date('1995, 11, 14');
+      const mockedOnChange = jest.fn();
+      render(<DatePicker onChange={mockedOnChange} openToDate={openToDate} />);
+      const fourteenth = screen.getByText('14');
+      expect(fourteenth).toBeInTheDocument();
+      fireEvent.click(fourteenth);
+      expect(mockedOnChange).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,138 @@
+import React, { FC, SyntheticEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import styles from './DatePicker.module.scss';
+
+export interface DatePickerProps extends ReactDatePickerProps<any, any> {
+  /**
+   * React children (to be rendered below the calendar dates).
+   */
+  children?: ReactNode;
+  /**
+   * Custom classname to be applied to the DatePicker container.
+   */
+  className?: string;
+  /**
+   * Callback that fires when a date is changed/selected.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange: (
+    date: Date | [Date, Date] | null,
+    event?: React.SyntheticEvent<any> | undefined
+  ) => void;
+  /**
+   * Callback that fires when a date is clicked.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onSelect?:
+    | ((date: Date, event: SyntheticEvent<any, Event> | undefined) => void)
+    | undefined;
+  /**
+   * Custom Class to be applied to a single day element based on a date.
+   */
+  dayClassName?: ((date: Date) => string | null) | undefined;
+  /**
+   * Custom Class to be applied to a single week element based on a date.
+   */
+  weekClassName?: ((date: Date) => string | null) | undefined;
+  /**
+   * Custom Class to be applied to a single month element based on a date.
+   */
+  monthClassName?: ((date: Date) => string | null) | undefined;
+  /**
+   * Custom Class to be applied to a specific time.
+   */
+  timeClassName?: ((date: Date) => string | null) | undefined;
+  /**
+   * Custom format for weekday.
+   */
+  formatWeekDay?: (formattedDate: string) => string;
+  /**
+   * Last allowable/shown date
+   */
+  maxDate?: Date | null;
+  /**
+   * First allowable/shown date
+   */
+  minDate?: Date | null;
+  /**
+   * Months to be shown at one time
+   */
+  monthsShown?: number;
+  /**
+   * Date that the calendar will open to by default.
+   */
+  openToDate?: Date;
+  /**
+   * Currently selected date.
+   */
+  selected?: Date | null;
+  /**
+   * Whether or not the picker will return a range of dates.
+   */
+  selectsRange?: boolean;
+  /**
+   * Start date in a range
+   */
+  startDate?: Date | null;
+  /**
+   * Show month picker in two columns
+   */
+  showTwoColumnMonthYearPicker?: boolean;
+  /**
+   * See full month name in the month picker
+   */
+  showFullMonthYearPicker?: boolean;
+  /**
+   * Use the month picker
+   */
+  showMonthYearPicker?: boolean;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const DatePicker: FC<DatePickerProps> = ({
+  children = null,
+  dayClassName = undefined,
+  maxDate = undefined,
+  minDate = undefined,
+  monthsShown = undefined,
+  openToDate = undefined,
+  startDate = undefined,
+  selected = undefined,
+  selectsRange = undefined,
+  showTwoColumnMonthYearPicker = false,
+  showFullMonthYearPicker = false,
+  showMonthYearPicker = false,
+  className = undefined,
+  formatWeekDay = (formattedDate) => formattedDate[0], // Make days show as 1 character.
+  ...restProps
+}) => {
+  const datePickerClasses = classNames(styles['react-datepicker'], className);
+
+  return (
+    <ReactDatePicker
+      inline
+      calendarClassName={datePickerClasses}
+      formatWeekDay={formatWeekDay}
+      maxDate={maxDate}
+      minDate={minDate}
+      monthsShown={monthsShown}
+      openToDate={openToDate}
+      selected={selected}
+      startDate={startDate}
+      selectsRange={selectsRange}
+      showTwoColumnMonthYearPicker={showTwoColumnMonthYearPicker}
+      showFullMonthYearPicker={showFullMonthYearPicker}
+      showMonthYearPicker={showMonthYearPicker}
+      dayClassName={dayClassName}
+      {...restProps}
+    >
+      {children}
+    </ReactDatePicker>
+  );
+};
+
+export default DatePicker;

package/src/components/Details/Details.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Details } from './Details';
+import { DetailsSummary } from './DetailsSummary';
+import * as Stories from './Details.stories';
+
+<Meta of={Stories} />
+
+# Details
+
+The `<details>` tag specifies additional details that the user can open and close on demand. This custom component
+provides a React implementation of this semantic HTML with controlled state.
+
+It includes a child component for the details summary `<Details.Summary />`. The details themselves can be included as children
+inside `<Details>` typically following the `<Details.Summary>`.
+
+NOTE: for a custom implementation of this component see the [accordion](/?path=/story/components-accordion-overview--default-story)
+
+<Canvas of={Stories.BasicUsage} />
+
+## Props
+
+<ArgTypes of={Details} />
+
+## Sub-Components
+
+### `<Details.Summary>`
+
+## Props
+
+<ArgTypes of={DetailsSummary} />

package/src/components/Details/Details.module.scss

@@ -0,0 +1,32 @@
+.details-reset {
+  > summary {
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::before {
+      display: none;
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: 0 0 0 2px var(--color-base-primary-light);
+    }
+
+    //Show focus styles on keyboard focus.
+    &:focus-visible {
+      outline: 0;
+      box-shadow: 0 0 0 2px var(--color-base-primary-light);
+    }
+
+    // Hide focus styles if they are not needed, for example,
+    // when an element receives focus via the mouse.
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+}

package/src/components/Details/Details.stories.tsx

@@ -0,0 +1,38 @@
+import { Details } from './Details';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { Box } from '../Box/Box';
+import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';
+
+const meta: Meta<typeof Details> = {
+  title: 'Components/Details',
+  component: Details,
+};
+
+export default meta;
+
+export const BasicUsage = () => {
+  const { isOpen, handleToggle } = useOpenClose();
+  return (
+    <Details isOpen={isOpen}>
+      <Details.Summary
+        isDetailsOpen={isOpen}
+        onToggle={handleToggle}
+        display="inline"
+      >
+        What is Hyphen's Mission?
+      </Details.Summary>
+      <Box padding="md 0" gap="sm">
+        <Box fontSize="lg" as="h4">
+          Empowering Teams with Streamlined DevOps
+        </Box>
+        <Box as="p">
+          Our mission is to streamline DevOps for software teams. By automating
+          access management and integrating essential tools, we empower teams to
+          focus on innovation and deliver seamless software solutions
+          efficiently.
+        </Box>
+      </Box>
+    </Details>
+  );
+};

package/src/components/Details/Details.test.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Details } from './Details';
+
+describe('Details', () => {
+  describe('Default', () => {
+    test('It renders a default details HTML element and summary', () => {
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false}>summary</Details.Summary>
+        </Details>
+      );
+
+      const details = screen.getByRole('group');
+      expect(details).toBeInTheDocument();
+      const summary = screen.getByText('summary');
+      expect(summary).toBeInTheDocument();
+    });
+  });
+
+  describe('With open details initially', () => {
+    test('It renders a default details HTML element and summary', () => {
+      render(
+        <Details isOpen>
+          <Details.Summary isDetailsOpen>summary</Details.Summary>
+          <div>details</div>
+        </Details>
+      );
+
+      const details = screen.getByRole('group');
+      expect(details).toBeInTheDocument();
+      const summary = screen.getByText('summary');
+      expect(summary).toBeInTheDocument();
+      const innerDetails = screen.getByText('details');
+      expect(innerDetails).toBeVisible();
+    });
+  });
+
+  describe('Aria', () => {
+    test('It renders the summary with the correct "button" role', () => {
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false}>summary</Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      expect(summary).toBeInTheDocument();
+      expect(summary).toHaveTextContent('summary');
+    });
+
+    test('It notes whether the underlying element is expanded', () => {
+      const { rerender } = render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false}>summary</Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByText('summary');
+      expect(summary).toBeInTheDocument();
+      expect(summary).toHaveAttribute('aria-expanded', 'false');
+
+      rerender(
+        <Details isOpen>
+          <Details.Summary isDetailsOpen>summary2</Details.Summary>
+        </Details>
+      );
+
+      const summaryTwo = screen.getByText('summary2');
+      expect(summaryTwo).toBeInTheDocument();
+      expect(summaryTwo).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    test('The summary is tabbable', () => {
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false}>summary</Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      expect(summary).toBeInTheDocument();
+      expect(summary).toHaveAttribute('tabIndex', '0');
+    });
+  });
+
+  describe('Events', () => {
+    test('it fires an onToggle when summary is clicked', () => {
+      const mockedOnToggle = jest.fn(() => null);
+
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false} onToggle={mockedOnToggle}>
+            summary
+          </Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      fireEvent.click(summary);
+      expect(mockedOnToggle).toHaveBeenCalledTimes(1);
+    });
+
+    test('onToggle event fires with ENTER key', () => {
+      const mockedOnToggle = jest.fn(() => null);
+
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false} onToggle={mockedOnToggle}>
+            summary
+          </Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      fireEvent.keyDown(summary, { keyCode: 13 });
+      fireEvent.keyDown(summary, { keyCode: 32 });
+      fireEvent.keyDown(summary, { keyCode: 25 });
+      expect(mockedOnToggle).toHaveBeenCalledTimes(2);
+    });
+
+    test('Does not attempt to fire onToggle if function not passed', () => {
+      const mockedOnToggle = jest.fn(() => null);
+
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false}>summary</Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      fireEvent.keyDown(summary, { keyCode: 13 });
+      fireEvent.keyDown(summary, { keyCode: 32 });
+      fireEvent.click(summary);
+      expect(mockedOnToggle).toHaveBeenCalledTimes(0);
+    });
+
+    test('Fires onClick if passed', () => {
+      const mockedOnToggle = jest.fn(() => null);
+
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false} onClick={mockedOnToggle}>
+            summary
+          </Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      fireEvent.click(summary);
+      expect(mockedOnToggle).toHaveBeenCalledTimes(1);
+    });
+
+    test('Fires onKeyDown if passed', () => {
+      const mockedOnToggle = jest.fn(() => null);
+
+      render(
+        <Details isOpen={false}>
+          <Details.Summary isDetailsOpen={false} onKeyDown={mockedOnToggle}>
+            summary
+          </Details.Summary>
+        </Details>
+      );
+
+      const summary = screen.getByRole('button');
+      fireEvent.keyDown(summary, { keyCode: 13 });
+
+      expect(mockedOnToggle).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Spread props', () => {
+    it('takes a className and applies it to root node', () => {
+      render(
+        <Details isOpen={false} className="m-bottom-md">
+          <Details.Summary isDetailsOpen={false} className="m-top-lg">
+            summary
+          </Details.Summary>
+        </Details>
+      );
+
+      const details = screen.getByRole('group');
+      expect(details).toHaveClass('m-bottom-md');
+
+      const summary = screen.getByRole('button');
+      expect(summary).toHaveClass('m-top-lg');
+    });
+  });
+});