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

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

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

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

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

package/src/DateTimePicker/parseDate.js

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

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

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

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

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