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

package/src/ThemeProvider/ThemeProvider.js

@@ -1,193 +0,0 @@
-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

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

package/src/ThemeProvider/index.js

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

package/src/TimePicker/TimePicker.js

@@ -1,128 +0,0 @@
-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

@@ -1,171 +0,0 @@
-<!--- 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

@@ -1,37 +0,0 @@
-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);
-    });
-  });
-});