@strapi/design-system 1.2.6 → 1.3.0-beta.0

package/src/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as StyledThemeProvider, createGlobalStyle } from 'styled-components';
+import { LiveRegions } from '../LiveRegions/LiveRegions';
+
+const GlobalStyle = createGlobalStyle`
+ /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  /* My styles */
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  *:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
+    outline-offset: 2px;
+  }
+
+  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  body,html{
+    height: 100%;
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: 100%;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  textarea,input {
+    font: inherit;
+  }
+
+  .lock-body-scroll {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+`;
+
+export const ThemeProvider = ({ children, theme }) => {
+  return (
+    <StyledThemeProvider theme={theme}>
+      <GlobalStyle />
+      {children}
+      <LiveRegions />
+    </StyledThemeProvider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  theme: PropTypes.object.isRequired,
+};

package/src/ThemeProvider/hooks.js

@@ -0,0 +1,5 @@
+import { useTheme as useStyledTheme } from 'styled-components';
+
+export const useTheme = () => {
+  return useStyledTheme();
+};

package/src/ThemeProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export * from './hooks';

package/src/TimePicker/TimePicker.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Clock from '@strapi/icons/Clock';
+import styled from 'styled-components';
+import { sizes } from '../themes/sizes';
+import { Select, Option } from '../Select';
+import { useId } from '../helpers/useId';
+
+const TimeIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
+export const TimePicker = ({
+  disabled,
+  error,
+  hint,
+  id,
+  onClear,
+  onChange,
+  value,
+  clearLabel,
+  label,
+  selectButtonTitle,
+  step,
+  size,
+  ...props
+}) => {
+  const generatedId = useId('timepicker', id);
+  const hoursCount = 24;
+  const times = [];
+  let min = 0;
+
+  for (let i = 0; i < hoursCount; i++) {
+    min = 0;
+
+    while (min < 60) {
+      times.push(`${i < 10 ? '0' + i : i}:${min < 10 ? '0' + min : min}`);
+      min += step;
+    }
+  }
+
+  // The time picker will select the closest value in the list.
+  // This is a temporary fix.
+  const getClosestValue = () => {
+    const valueHours = value.split(':')[0];
+    const valueMinutes = value.split(':')[1];
+
+    const hours = times.reduce((prev, curr) => {
+      const hours = curr.split(':')[0];
+      return Math.abs(hours - valueHours) < Math.abs(prev - valueHours) ? hours : prev;
+    }, times[0].split(':')[0]);
+    const minutes = times.reduce((prev, curr) => {
+      const minutes = curr.split(':')[1];
+      return Math.abs(minutes - valueMinutes) < Math.abs(prev - valueMinutes) ? minutes : prev;
+    }, times[0].split(':')[1]);
+
+    return `${hours}:${minutes}`;
+  };
+
+  return (
+    <Select
+      id={generatedId}
+      label={label}
+      placeholder="--:--"
+      hint={hint}
+      onClear={onClear}
+      clearLabel={clearLabel}
+      error={error}
+      value={value ? getClosestValue() : null}
+      size={size}
+      onChange={onChange}
+      disabled={disabled}
+      selectButtonTitle={selectButtonTitle}
+      startIcon={
+        <TimeIconWrapper>
+          <Clock />
+        </TimeIconWrapper>
+      }
+      {...props}
+    >
+      {times.map((time) => (
+        <Option value={time} key={time}>
+          {time}
+        </Option>
+      ))}
+    </Select>
+  );
+};
+
+TimePicker.defaultProps = {
+  disabled: false,
+  error: undefined,
+  hint: undefined,
+  id: undefined,
+  label: undefined,
+  onClear: undefined,
+  size: 'M',
+  step: 15,
+  value: undefined,
+};
+
+TimePicker.propTypes = {
+  clearLabel: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onClear: PropTypes.func,
+  selectButtonTitle: PropTypes.string,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+  step: PropTypes.number,
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};

package/src/TimePicker/TimePicker.stories.mdx

@@ -0,0 +1,171 @@
+<!--- TimePicker.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { TimePicker } from './TimePicker';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Components/TimePicker" component={TimePicker} />
+
+# TimePicker
+
+Time pickers help users selecting a specific timeslot from a suggested timetable. They can be associated to a Date picker component.
+
+**Best practices**
+
+- It is not possible to write a timeslot from the keyboard.
+- It is not possible to change the time format.
+- The PopOver closes after selecting a timeslot.
+- A Time picker can used simultaneously with a Date picker in a form.
+- One single format of time is currently available, which is a 24-hour one.
+- The Time picker is built on top on a Field component.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/TimePicker)
+
+## Imports
+
+```js
+import { TimePicker } from '@strapi/design-system/TimePicker';
+```
+
+## Usage
+
+Use the Time picker component whenever a specific time needs to be scheduled or indicated. It is only possible to select one single timeslot.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [value, setValue] = useState();
+      return (
+        <TimePicker
+          label={'Choose a time'}
+          disabled={false}
+          error={undefined}
+          hint={'Description line'}
+          id={'tp-1'}
+          onClear={() => setValue(undefined)}
+          onChange={setValue}
+          value={value}
+          clearLabel={'Clear the selected time picker value'}
+          selectButtonTitle={'Select time button'}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### TimePicker 30 mns steps
+
+The unit of the Time Picker can be modified by changing the `step` parameter.
+
+<Canvas>
+  <Story name="30-mns-step">
+    {() => {
+      const [value, setValue] = useState();
+      return (
+        <TimePicker
+          step={30}
+          label={'Choose a time'}
+          disabled={false}
+          error={undefined}
+          hint={'Description line'}
+          id={'tp-1'}
+          onClear={() => setValue(undefined)}
+          onChange={setValue}
+          value={value}
+          clearLabel={'Clear the selected time picker value'}
+          selectButtonTitle={'Select time button'}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Initial data
+
+TODO
+
+<Canvas>
+  <Story name="initial-data">
+    {() => {
+      const [value, setValue] = useState('13:32:45');
+      return (
+        <>
+          <Typography>Initial value : {value}</Typography>
+          <Box paddingTop={2}>
+            <TimePicker
+              step={1}
+              label={'Choose a time'}
+              disabled={false}
+              error={undefined}
+              hint={'Description line'}
+              id={'tp-1'}
+              onClear={() => setValue(undefined)}
+              onChange={setValue}
+              value={value}
+              clearLabel={'Clear the selected time picker value'}
+              selectButtonTitle={'Select time button'}
+            />
+          </Box>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Size S
+
+TODO
+
+<Canvas>
+  <Story name="size S">
+    {() => {
+      const [value, setValue] = useState();
+      return (
+        <TimePicker
+          step={30}
+          label={'Choose a time'}
+          disabled={false}
+          error={undefined}
+          hint={'Description line'}
+          id={'tp-1'}
+          size="S"
+          onClear={() => setValue(undefined)}
+          onChange={setValue}
+          value={value}
+          clearLabel={'Clear the selected time picker value'}
+          selectButtonTitle={'Select time button'}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [value, setValue] = useState();
+      return (
+        <TimePicker
+          label={'Choose a time'}
+          disabled
+          error={undefined}
+          hint={'Description line'}
+          id={'tp-1'}
+          onClear={() => setValue(undefined)}
+          onChange={setValue}
+          value={value}
+          clearLabel={'Clear the selected time picker value'}
+          selectButtonTitle={'Select time button'}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={TimePicker} />

package/src/TimePicker/__tests__/TimePicker.e2e.js

@@ -0,0 +1,37 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('TimePicker', () => {
+  test.describe('light mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-timepicker--base&viewMode=story');
+      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-timepicker--disabled&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+
+  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-timepicker--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-timepicker--disabled&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});