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

package/src/DateTimePicker/__tests__/__snapshots__/DateTimePicker.spec.js.snap

@@ -1,448 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DateTimePicker snapshots the component 1`] = `
-.c7 {
-  padding-right: 8px;
-  padding-left: 12px;
-}
-
-.c14 {
-  padding-left: 12px;
-}
-
-.c16 {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c0 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c3 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c5 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c10 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c4 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c4 > * + * {
-  margin-left: 8px;
-}
-
-.c2 {
-  font-weight: 600;
-  color: #32324d;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c17 {
-  color: #32324d;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c20 {
-  color: #666687;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c9 {
-  border: none;
-  border-radius: 4px;
-  padding-bottom: 0.65625rem;
-  padding-left: 0;
-  padding-right: 16px;
-  padding-top: 0.65625rem;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-}
-
-.c9::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c9::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c9:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c9::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c9[aria-disabled='true'] {
-  color: inherit;
-}
-
-.c9:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c6 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
-  background: #ffffff;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c6:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c8 {
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-}
-
-.c8 svg path {
-  fill: #8e8ea9;
-}
-
-.c12 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
-}
-
-.c12:focus {
-  outline: none;
-}
-
-.c12[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.c11 {
-  position: relative;
-  border: 1px solid #dcdce4;
-  padding-right: 12px;
-  border-radius: 4px;
-  background: #ffffff;
-  overflow: hidden;
-  min-height: 2.5rem;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c11:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c18 {
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-}
-
-.c18 svg {
-  height: 0.6875rem;
-  width: 0.6875rem;
-}
-
-.c18 svg path {
-  fill: #666687;
-}
-
-.c19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: none;
-  border: none;
-}
-
-.c19 svg {
-  width: 0.375rem;
-}
-
-.c13 {
-  width: 100%;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 svg {
-  height: 1rem;
-  width: 1rem;
-}
-
-.c15 svg path {
-  fill: #8e8ea9;
-}
-
-<div
-  aria-labelledby="datetime-label-1"
-  role="group"
->
-  <div
-    class="c0 c1"
-    spacing="1"
-  >
-    <label
-      class="c2"
-      for="field-3"
-      id="datetime-label-1"
-    >
-      <div
-        class="c3"
-      >
-        Date time picker
-      </div>
-    </label>
-    <div
-      class="c3 c4"
-      spacing="2"
-    >
-      <div
-        class=""
-      >
-        <div>
-          <div>
-            <div
-              class="c0 c1"
-              spacing="1"
-            >
-              <div
-                class="c5 c6"
-              >
-                <div
-                  class="c7"
-                >
-                  <button
-                    aria-disabled="false"
-                    aria-label="Date picker, current is 10/13/2021"
-                    class="c8"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.869 2.99V0h2.9v2.99h10.463V0h2.9v2.99h.629c2.768 0 3.203.498 3.239 2.926V21c0 2.124-.191 3-2.802 3H2.818C.208 24 0 23.363 0 20.785V6.21c.035-2.049.233-3.22 3.001-3.22h.868zM2.32 20.369c0 .811.245.865.776.865h17.905c.53 0 .68-.012.68-.825V8.233c-.015-.627-.219-.737-.631-.737H2.907c-.413 0-.592.09-.587.573v12.3z"
-                        fill="#212134"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <input
-                  aria-autocomplete="none"
-                  aria-disabled="false"
-                  aria-invalid="false"
-                  aria-label="Date time picker"
-                  class="c9"
-                  data-testid="datetimepicker-date"
-                  id="datepicker-4"
-                  name="datetimepicker"
-                  value="10/13/2021"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="c0 c10"
-        >
-          <div
-            class="c3 c11"
-          >
-            <button
-              aria-disabled="false"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="Date time picker"
-              aria-labelledby="timepicker-5-label timepicker-5-content"
-              class="c12"
-              data-testid="datetimepicker-time"
-              id="timepicker-5"
-              type="button"
-            />
-            <div
-              class="c5 c13"
-            >
-              <div
-                class="c3"
-              >
-                <div
-                  aria-hidden="true"
-                  class="c14"
-                >
-                  <div
-                    class="c15"
-                  >
-                    <svg
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M0 12C0 5.37 5.364 0 11.994 0S24 5.37 24 12s-5.376 12-12.006 12S0 18.63 0 12zm2.4 0c0 5.304 4.296 9.6 9.6 9.6 5.304 0 9.6-4.296 9.6-9.6 0-5.304-4.296-9.6-9.6-9.6A9.597 9.597 0 002.4 12zm8.4-6h1.8v6.3l5.4 3.204-.906 1.476L10.8 13.2V6z"
-                        fill="#212134"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  class="c16"
-                >
-                  <span
-                    class="c17"
-                    id="timepicker-5-content"
-                  >
-                    10:00
-                  </span>
-                </div>
-              </div>
-              <div
-                class="c3"
-              >
-                <button
-                  aria-hidden="true"
-                  class="c14 c18 c19"
-                  tabindex="-1"
-                  title="select"
-                  type="button"
-                >
-                  <svg
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 14 8"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                      fill="#32324D"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p
-      class="c20"
-      id="field-3-hint"
-    >
-      This is a super description
-    </p>
-  </div>
-</div>
-`;

package/src/DateTimePicker/__tests__/parseDate.test.js

@@ -1,10 +0,0 @@
-import { parseDate } from '../parseDate';
-
-describe('parseDate', () => {
-  it('should return a date', () => {
-    expect(parseDate('2021-11-05T15:37:29.592Z') instanceof Date).toBeTruthy();
-  });
-  it('should return null if the passed params has not the right format', () => {
-    expect(parseDate('test')).toBeNull();
-  });
-});

package/src/DateTimePicker/index.js

@@ -1 +0,0 @@
-export * from './DateTimePicker';

package/src/DateTimePicker/parseDate.js

@@ -1,11 +0,0 @@
-// Return a Date if the passed param is a date valid format
-
-export const parseDate = (date) => {
-  const timestamp = Date.parse(date);
-
-  if (!Number.isNaN(timestamp)) {
-    return new Date(timestamp);
-  }
-
-  return null;
-};

package/src/Dialog/Dialog.js

@@ -1,86 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-
-import { Box } from '../Box';
-import { FocusTrap } from '../FocusTrap';
-import { Portal } from '../Portal';
-import { Flex } from '../Flex';
-import { Typography } from '../Typography';
-import { DismissibleLayer } from '../DismissibleLayer';
-
-import { setOpacity } from '../helpers/setOpacity';
-import useLockScroll from '../helpers/useLockScroll';
-import { useId } from '../helpers/useId';
-
-const DialogWrapper = styled.div`
-  position: fixed;
-  z-index: 4;
-  inset: 0;
-  background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
-  padding: 0 ${({ theme }) => theme.spaces[8]};
-`;
-
-const DialogContainer = styled(Box)`
-  max-width: ${412 / 16}rem;
-  margin: 0 auto;
-  overflow: hidden;
-  margin-top: 10%;
-`;
-
-const DialogHeader = styled(Flex)`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-
-export const Dialog = ({ onClose, title, as, isOpen, id, ...props }) => {
-  const generatedId = useId('dialog', id);
-
-  useLockScroll(isOpen);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const labelledBy = `${generatedId}-label`;
-
-  return (
-    <Portal>
-      <DialogWrapper>
-        <FocusTrap>
-          <DismissibleLayer onEscapeKeyDown={onClose} onPointerDownOutside={onClose}>
-            <DialogContainer
-              aria-labelledby={labelledBy}
-              aria-modal={true}
-              background="neutral0"
-              hasRadius
-              shadow="popupShadow"
-              role="dialog"
-            >
-              <DialogHeader padding={6} justifyContent="center">
-                <Typography variant="beta" as={as || 'h2'} id={labelledBy}>
-                  {title}
-                </Typography>
-              </DialogHeader>
-              <Box {...props} />
-            </DialogContainer>
-          </DismissibleLayer>
-        </FocusTrap>
-      </DialogWrapper>
-    </Portal>
-  );
-};
-
-Dialog.displayName = 'Dialog';
-
-Dialog.defaultProps = {
-  as: 'h2',
-  id: undefined,
-};
-
-Dialog.propTypes = {
-  as: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-};

package/src/Dialog/Dialog.stories.mdx

@@ -1,78 +0,0 @@
-<!--- Dialog.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Typography } from '../Typography';
-import { Stack } from '../Stack';
-import { Flex } from '../Flex';
-import { Button } from '../Button';
-import { Dialog } from './Dialog';
-import { DialogBody } from './DialogBody';
-import { DialogFooter } from './DialogFooter';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
-
-<Meta title="Design System/Components/Dialog" component={Dialog} />
-
-# Dialog
-
-`Dialog` creates a box to confirm an action.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Dialog)
-
-## Imports
-
-```js
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [isVisible, setIsVisible] = useState(false);
-      return (
-        <>
-          <Button onClick={() => setIsVisible(true)}>Click me</Button>
-          <Dialog onClose={() => setIsVisible(false)} title="Confirmation" isOpen={isVisible}>
-            <DialogBody icon={<ExclamationMarkCircle />}>
-              <Stack spacing={2}>
-                <Flex justifyContent="center">
-                  <Typography id="confirm-description">Are you sure you want to delete this?</Typography>
-                </Flex>
-              </Stack>
-            </DialogBody>
-            <DialogFooter
-              startAction={
-                <Button onClick={() => setIsVisible(false)} variant="tertiary">
-                  Cancel
-                </Button>
-              }
-              endAction={
-                <Button variant="danger-light" startIcon={<Trash />}>
-                  Confirm
-                </Button>
-              }
-            />
-          </Dialog>
-        </>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-The Dialog component wraps all its children in the (Box)[https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base] component, so you can pass all Box props to change its style.
-
-<ArgsTable of={Dialog} />
-
-### DialogBody props
-
-<ArgsTable of={DialogBody} />
-
-### DialogFooter props
-
-<ArgsTable of={DialogFooter} />

package/src/Dialog/DialogBody.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-
-const IconContainer = styled(Box)`
-  svg {
-    width: ${({ theme }) => theme.spaces[6]};
-    height: ${({ theme }) => theme.spaces[6]};
-
-    path {
-      fill: ${({ theme }) => theme.colors.danger600};
-    }
-  }
-`;
-
-export const DialogBody = ({ children, icon }) => {
-  return (
-    <Box paddingTop={8} paddingBottom={8} paddingLeft={6} paddingRight={6}>
-      {icon && (
-        <IconContainer paddingBottom={2}>
-          <Flex justifyContent="center">{icon}</Flex>
-        </IconContainer>
-      )}
-      {children}
-    </Box>
-  );
-};
-
-DialogBody.displayName = 'DialogBody';
-
-DialogBody.propTypes = {
-  children: PropTypes.node.isRequired,
-  icon: PropTypes.node,
-};

package/src/Dialog/DialogFooter.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import { Stack } from '../Stack';
-
-const FooterWrapper = styled(Box)`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-
-  button {
-    width: 100%;
-    display: inline-flex;
-    justify-content: center;
-  }
-`;
-
-export const DialogFooter = ({ startAction, endAction }) => {
-  return (
-    <FooterWrapper padding={4}>
-      <Stack horizontal spacing={2}>
-        {startAction}
-        {endAction}
-      </Stack>
-    </FooterWrapper>
-  );
-};
-
-DialogFooter.displayName = 'DialogFooter';
-
-DialogFooter.defaultProps = {
-  endAction: undefined,
-  startAction: undefined,
-};
-
-DialogFooter.propTypes = {
-  endAction: PropTypes.node,
-  startAction: PropTypes.node,
-};