@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/src/DatePicker/DatePicker.js

@@ -0,0 +1,132 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import CalendarIcon from '@strapi/icons/Calendar';
+import Cross from '@strapi/icons/Cross';
+import { sizes } from '../themes/sizes';
+import { TextInput } from '../TextInput';
+import { DatePickerButton, DatePickerWrapper, IconBox } from './components';
+import { DatePickerCalendar } from './DatePickerCalendar';
+import { formatDate } from './utils/formatDate';
+import { useId } from '../helpers/useId';
+import { getDefaultLocale } from '../helpers/getDefaultLocale';
+
+export const DatePicker = ({
+  ariaLabel,
+  initialDate,
+  selectedDate,
+  onChange,
+  label,
+  locale: defaultLocale,
+  selectedDateLabel,
+  onClear,
+  clearLabel,
+  disabled,
+  id,
+  ...props
+}) => {
+  const generatedId = useId('datepicker', id);
+  const [visible, setVisible] = useState(false);
+  const inputRef = useRef(null);
+  const datePickerButtonRef = useRef(null);
+  const locale = defaultLocale || getDefaultLocale();
+  const formattedDate = selectedDate ? formatDate(selectedDate, locale) : '';
+
+  const toggleVisibility = () => {
+    if (disabled) return;
+    setVisible((prevVisible) => !prevVisible);
+  };
+
+  const handleClear = () => {
+    if (disabled) return;
+
+    onClear();
+    datePickerButtonRef.current.focus();
+  };
+
+  const handleChange = (date) => {
+    onChange(date);
+    setVisible(false);
+  };
+
+  const handleEscape = () => {
+    setVisible(false);
+  };
+
+  return (
+    <DatePickerWrapper bold={visible}>
+      <TextInput
+        ref={inputRef}
+        onClick={toggleVisibility}
+        // Prevent input from changing for now
+        onChange={() => {}}
+        value={formattedDate}
+        startAction={
+          <DatePickerButton
+            ref={datePickerButtonRef}
+            onClick={toggleVisibility}
+            aria-label={selectedDate ? selectedDateLabel(formatDate(selectedDate, locale)) : label || ariaLabel}
+            type="button"
+            aria-disabled={disabled}
+          >
+            <CalendarIcon aria-hidden={true} />
+          </DatePickerButton>
+        }
+        endAction={
+          onClear && formattedDate ? (
+            <IconBox as="button" onClick={handleClear} aria-label={clearLabel} aria-disabled={disabled}>
+              <Cross />
+            </IconBox>
+          ) : undefined
+        }
+        aria-autocomplete="none"
+        label={label}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        id={generatedId}
+        {...props}
+      />
+
+      {inputRef.current && inputRef.current.inputWrapperRef && visible && (
+        <DatePickerCalendar
+          selectedDate={selectedDate}
+          initialDate={initialDate}
+          onChange={handleChange}
+          onEscape={handleEscape}
+          popoverSource={inputRef.current.inputWrapperRef}
+          label={label || ariaLabel}
+        />
+      )}
+    </DatePickerWrapper>
+  );
+};
+
+DatePicker.defaultProps = {
+  ariaLabel: undefined,
+  clearLabel: undefined,
+  disabled: false,
+  id: undefined,
+  label: undefined,
+  initialDate: new Date(),
+  onClear: undefined,
+  placeholder: undefined,
+  selectedDate: undefined,
+  size: 'M',
+};
+
+DatePicker.propTypes = {
+  ariaLabel: PropTypes.string,
+  clearLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  initialDate: PropTypes.instanceOf(Date),
+  label: PropTypes.string,
+  locale: PropTypes.string,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func.isRequired,
+  onClear: PropTypes.func,
+  placeholder: PropTypes.string,
+  selectedDate: PropTypes.instanceOf(Date),
+  selectedDateLabel: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+};

package/src/DatePicker/DatePicker.stories.mdx

@@ -0,0 +1,172 @@
+<!--- DatePicker.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { DatePicker } from './DatePicker';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Components/DatePicker" component={DatePicker} />
+
+# DatePicker
+
+Date pickers help users selecting a specific date from a calendar. They can be associated to a Time picker component.
+
+**Best practices**
+
+- It is possible to change the date format by changing your browser locale.
+- A Date picker can used simultaneously with a Time picker in a form.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/DatePicker)
+
+## Imports
+
+```js
+import { DatePicker } from '@strapi/design-system/DatePicker';
+```
+
+## Usage
+
+- A Date picker is used to select an unique date. It is not possible to select a date range. It is not possible to write a date from the keyboard.
+- When the Date picker is activated, it selects today's date. However, a Date picker can have a null value via the Clear feature.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <div>
+          <DatePicker
+            onChange={setDate}
+            selectedDate={date}
+            label="Date picker"
+            name="datepicker"
+            clearLabel={'Clear the datepicker'}
+            onClear={() => setDate(undefined)}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+          />
+          <div style={{ marginLeft: '500px' }}>
+            <button>
+              <Typography>Button outside picker</Typography>
+            </button>
+          </div>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Size S
+
+TODO
+
+<Canvas>
+  <Story name="size S">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <div>
+          <DatePicker
+            onChange={setDate}
+            selectedDate={date}
+            label="Date picker"
+            name="datepicker"
+            size="S"
+            clearLabel={'Clear the datepicker'}
+            onClear={() => setDate(undefined)}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+          />
+          <div style={{ marginLeft: '500px' }}>
+            <button>
+              <Typography>Button outside picker</Typography>
+            </button>
+          </div>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <div>
+          <DatePicker
+            onChange={setDate}
+            selectedDate={date}
+            label="Date picker"
+            name="datepicker"
+            clearLabel={'Clear the datepicker'}
+            onClear={() => setDate(undefined)}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+            disabled
+          />
+          <div style={{ marginLeft: '500px' }}>
+            <button>
+              <Typography>Button outside picker</Typography>
+            </button>
+          </div>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Min and Max Dates
+
+By passing in `minDate` or `maxDate` it is possible to define the range of years, the datepicker displays.
+
+<Canvas>
+  <Story name="min/ max date">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <DatePicker
+          onChange={setDate}
+          selectedDate={date}
+          label="Date picker"
+          name="datepicker"
+          clearLabel={'Clear the datepicker'}
+          onClear={() => setDate(undefined)}
+          placeholder="03/01/1970"
+          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+          minDate={new Date(2000, 1, 1)}
+          maxDate={new Date(2040, 1, 1)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Locales
+
+<Canvas>
+  <Story name="locales">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <DatePicker
+          onChange={setDate}
+          selectedDate={date}
+          label="Date picker"
+          name="datepicker"
+          clearLabel={'Clear the datepicker'}
+          onClear={() => setDate(undefined)}
+          placeholder="03/01/1970"
+          locale="de"
+          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+          minDate={new Date(2000, 1, 1)}
+          maxDate={new Date(2040, 1, 1)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={DatePicker} />

package/src/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { DatePickerPopover } from './components';
+import { SimpleMenu, MenuItem } from '../SimpleMenu';
+import { Flex } from '../Flex';
+import { Box } from '../Box';
+import { RawTable, RawThead, RawTbody, RawTr } from '../RawTable';
+import { DatePickerTh } from './DatePickerTh';
+import { DatePickerTd } from './DatePickerTd';
+import { FocusTrap } from '../FocusTrap';
+import { getMonths, getDayOfWeek, generateWeeks, getYears, formatDate } from './utils';
+
+export const DatePickerCalendar = ({
+  selectedDate,
+  initialDate,
+  popoverSource,
+  onChange,
+  label,
+  minDate,
+  maxDate,
+  onEscape,
+}) => {
+  const [date, setDate] = useState(initialDate);
+  const [weeks, activeRow, activeCol] = generateWeeks(date, selectedDate);
+  const { sun, mon, tue, wed, thu, fri, sat } = getDayOfWeek();
+  const months = getMonths();
+  const years = getYears(minDate, maxDate);
+
+  useEffect(() => {
+    if (selectedDate) {
+      setDate(selectedDate);
+    }
+  }, [selectedDate]);
+
+  const handleMonthChange = (month) => {
+    const updatedDate = new Date(date);
+    updatedDate.setMonth(months.indexOf(month));
+    setDate(updatedDate);
+  };
+
+  const handleYearChange = (year) => {
+    const updatedDate = new Date(date);
+    updatedDate.setFullYear(year);
+    setDate(updatedDate);
+  };
+
+  return (
+    <DatePickerPopover source={popoverSource} role="dialog" aria-modal="true" aria-label={label} spacing={4}>
+      <FocusTrap onEscape={onEscape}>
+        <Box padding={4}>
+          <Box paddingBottom={4} paddingLeft={2} paddingRight={2}>
+            <Flex>
+              <SimpleMenu label={months[date.getMonth()]}>
+                {months.map((month) => (
+                  <MenuItem key={month} onClick={() => handleMonthChange(month)}>
+                    {month}
+                  </MenuItem>
+                ))}
+              </SimpleMenu>
+              <Box paddingLeft={2}>
+                <SimpleMenu label={date.getFullYear()}>
+                  {years.map((year) => (
+                    <MenuItem key={year} onClick={() => handleYearChange(year)}>
+                      {year}
+                    </MenuItem>
+                  ))}
+                </SimpleMenu>
+              </Box>
+            </Flex>
+          </Box>
+          <RawTable colCount={7} rowCount={weeks.length + 1} initialCol={activeCol} initialRow={activeRow} role="grid">
+            <RawThead>
+              <RawTr aria-rowindex={1}>
+                <DatePickerTh>{sun}</DatePickerTh>
+                <DatePickerTh>{mon}</DatePickerTh>
+                <DatePickerTh>{tue}</DatePickerTh>
+                <DatePickerTh>{wed}</DatePickerTh>
+                <DatePickerTh>{thu}</DatePickerTh>
+                <DatePickerTh>{fri}</DatePickerTh>
+                <DatePickerTh>{sat}</DatePickerTh>
+              </RawTr>
+            </RawThead>
+            <RawTbody>
+              {weeks.map((week, index) => (
+                <RawTr key={`week-${index}`}>
+                  {week.map(({ date, outsideMonth, isSelected }) => {
+                    return (
+                      <DatePickerTd
+                        key={`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}
+                        outsideMonth={outsideMonth}
+                        onSelectDay={() => onChange(date)}
+                        isSelected={isSelected}
+                      >
+                        <span aria-hidden={true}>{date.getDate()}</span>
+                        <VisuallyHidden>
+                          <span>{formatDate(date)}</span>
+                        </VisuallyHidden>
+                      </DatePickerTd>
+                    );
+                  })}
+                </RawTr>
+              ))}
+            </RawTbody>
+          </RawTable>
+        </Box>
+      </FocusTrap>
+    </DatePickerPopover>
+  );
+};
+
+DatePickerCalendar.defaultProps = { selectedDate: undefined, initialDate: new Date() };
+DatePickerCalendar.propTypes = {
+  initialDate: PropTypes.instanceOf(Date),
+  label: PropTypes.string.isRequired,
+
+  /*
+   * Maximum year, that can be selected through the year select
+   */
+
+  maxDate: PropTypes.instanceOf(Date),
+
+  /*
+   * Minimum year, that can be selected through the year select
+   */
+
+  minDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func.isRequired,
+  onEscape: PropTypes.func.isRequired,
+  popoverSource: PropTypes.shape({
+    current: (typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)).isRequired,
+  }).isRequired,
+  selectedDate: PropTypes.instanceOf(Date),
+};

package/src/DatePicker/DatePickerTd.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { RawTd } from '../RawTable';
+import { Typography } from '../Typography';
+
+const DatePickerCellButton = styled.button`
+  border: none;
+  background: ${({ theme, isSelected }) => (isSelected ? theme.colors.primary100 : theme.colors.neutral0)};
+  height: ${32 / 16}rem;
+  text-align: center;
+  width: ${32 / 16}rem;
+  border-radius: ${({ theme }) => theme.borderRadius};
+
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primary100};
+  }
+
+  &:hover > ${Typography} {
+    color: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+
+export const DatePickerTd = ({ children, outsideMonth, onSelectDay, isSelected, ...props }) => {
+  const textColor = isSelected ? 'primary600' : outsideMonth ? 'neutral600' : 'neutral900';
+
+  return (
+    <RawTd {...props}>
+      <DatePickerCellButton tabIndex={-1} onClick={onSelectDay} isSelected={isSelected} type="button">
+        <Typography variant="pi" textColor={textColor} fontWeight={isSelected ? 'bold' : null}>
+          {children}
+        </Typography>
+      </DatePickerCellButton>
+    </RawTd>
+  );
+};
+
+DatePickerTd.defaultProps = {
+  isSelected: false,
+  outsideMonth: false,
+};
+
+DatePickerTd.propTypes = {
+  children: PropTypes.node.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectDay: PropTypes.func.isRequired,
+  outsideMonth: PropTypes.bool,
+};

package/src/DatePicker/DatePickerTh.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { RawTh } from '../RawTable';
+import { Typography } from '../Typography';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { Flex } from '../Flex';
+
+const DatePickerThWrapper = styled(RawTh)`
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  text-transform: capitalize;
+`;
+
+const DatePickerThRow = styled(Flex)`
+  height: ${24 / 16}rem;
+  width: ${32 / 16}rem;
+`;
+
+export const DatePickerTh = ({ children, ...props }) => {
+  return (
+    <DatePickerThWrapper {...props}>
+      <DatePickerThRow justifyContent="center">
+        <Typography variant="pi" fontWeight="bold" color="neutral800" aria-hidden>
+          {children.substr(0, 2)}
+        </Typography>
+
+        <VisuallyHidden>
+          <span>{children}</span>
+        </VisuallyHidden>
+      </DatePickerThRow>
+    </DatePickerThWrapper>
+  );
+};
+
+DatePickerTh.propTypes = {
+  children: PropTypes.string.isRequired,
+};

package/src/DatePicker/__tests__/DatePicker.e2e.js

@@ -0,0 +1,94 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('DatePicker', () => {
+  test.describe('light mode', () => {
+    test.describe('disabled', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-datepicker--disabled&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      // TODO : Can't fire page.click on disabled element. To fix
+      // it('does not open the dialog when clicking the input', async () => {
+      //   await page.click('input');
+
+      //   expect(await page.$('[role="dialog"]')).toBeFalsy();
+      // });
+    });
+
+    test.describe.parallel('base', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-datepicker--base&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('triggers axe on the document with the dropdown open', async ({ page }) => {
+        await page.click('input');
+        await checkA11y(page);
+      });
+
+      test('selects a value and closes the dialog', async ({ page }) => {
+        await page.click('input');
+        expect(await page.$('[role="dialog"]')).toBeTruthy();
+
+        await page.click(':nth-match(button[aria-haspopup], 1)');
+        await page.click('text="January"');
+
+        await page.click(':nth-match(button[aria-haspopup], 2)');
+        await page.click('text="2021"');
+
+        await page.click('text="14"');
+
+        const value = await page.$eval('input', (el) => el.value);
+        expect(value).toBe('1/14/2021');
+        expect(await page.$('[role="dialog"]')).toBeFalsy();
+      });
+
+      test('clears the input and sends the focus back to the calendar button when pressing the clear button', async ({
+        page,
+      }) => {
+        await page.click('input');
+        expect(await page.$('[role="dialog"]')).toBeTruthy();
+
+        await page.click(':nth-match(button[aria-haspopup], 1)');
+        await page.click('text="January"');
+        await page.click(':nth-match(button[aria-haspopup], 2)');
+        await page.click('text="2021"');
+        await page.click('text="14"');
+
+        await page.click('[aria-label="Clear the datepicker"]');
+        const value = await page.$eval('input', (el) => el.value);
+        expect(value).toBe('');
+        await expect(page.locator('[aria-label="Date picker"]')).toBeFocused();
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-datepicker--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('disabled A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-datepicker--disabled&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/DatePicker/__tests__/DatePicker.spec.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { DatePicker } from '../DatePicker';
+
+import { lightTheme } from '../../themes';
+import { ThemeProvider } from '../../ThemeProvider';
+
+describe('DatePicker', () => {
+  describe('Locale prop', () => {
+    const renderDate = (locale) =>
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <DatePicker
+            label="date"
+            locale={locale}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+            selectedDate={new Date('Tue Sep 06 2022')}
+            onChange={() => null}
+          />
+        </ThemeProvider>,
+      );
+
+    it('should format by EN locale by default', () => {
+      renderDate();
+
+      const input = screen.getByRole('textbox');
+
+      expect(input.value).toMatchInlineSnapshot('"9/6/2022"');
+    });
+
+    it('should format by the DE locale when passed', () => {
+      renderDate('de-DE');
+
+      const input = screen.getByRole('textbox');
+
+      expect(input.value).toMatchInlineSnapshot('"6.9.2022"');
+    });
+  });
+});

package/src/DatePicker/compareDates.js

@@ -0,0 +1,9 @@
+export const isDateEqual = (date1, date2) => {
+  if (!date1 || !date2) return false;
+
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+};