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

package/src/SubNav/__tests__/SubNav.e2e.js

@@ -1,23 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('SubNav', () => {
-  test.describe('light mode', () => {
-    test('triggers axe on the document', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-subnav--base&viewMode=story');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('triggers axe on the document', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-subnav--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/SubNav/index.js

@@ -1,6 +0,0 @@
-export * from './SubNav';
-export * from './SubNavHeader';
-export * from './SubNavLink';
-export * from './SubNavLinkSection';
-export * from './SubNavSection';
-export * from './SubNavSections';

package/src/Switch/Switch.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-
-const SwitchContent = styled.div`
-  background: ${({ theme }) => theme.colors.danger500};
-  border: none;
-  border-radius: 16px;
-  position: relative;
-  height: ${24 / 16}rem;
-  width: ${40 / 16}rem;
-
-  & span {
-    font-size: ${({ visibleLabels }) => (visibleLabels ? '1rem' : 0)};
-  }
-
-  &:before {
-    content: '';
-    background: ${({ theme }) => theme.colors.neutral0};
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    position: absolute;
-    transition: all 0.5s;
-    left: ${({ theme }) => theme.spaces[1]};
-    top: ${({ theme }) => theme.spaces[1]};
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &:before {
-      transition: none;
-    }
-  }
-`;
-
-const SwitchButton = styled.button`
-  background: transparent;
-  padding: 0;
-  border: none;
-
-  &[aria-checked='true'] ${SwitchContent} {
-    background: ${({ theme }) => theme.colors.success500};
-  }
-
-  &[aria-checked='true'] ${SwitchContent}:before {
-    transform: translateX(1rem);
-  }
-`;
-
-export const Switch = React.forwardRef(
-  ({ label, onChange, onLabel, offLabel, selected, visibleLabels, ...props }, ref) => {
-    return (
-      <SwitchButton
-        ref={ref}
-        role="switch"
-        aria-checked={selected}
-        aria-label={label}
-        onClick={onChange}
-        visibleLabels={visibleLabels}
-        type="button"
-        {...props}
-      >
-        <Flex>
-          <SwitchContent>
-            <span>{onLabel}</span>
-            <span>{offLabel}</span>
-          </SwitchContent>
-
-          {visibleLabels && (
-            <Box as="span" aria-hidden={true} paddingLeft={2} color={selected ? 'success600' : 'danger600'}>
-              {selected ? onLabel : offLabel}
-            </Box>
-          )}
-        </Flex>
-      </SwitchButton>
-    );
-  },
-);
-
-Switch.defaultProps = {
-  onLabel: 'On',
-  offLabel: 'Off',
-  visibleLabels: false,
-};
-
-Switch.propTypes = {
-  label: PropTypes.string.isRequired,
-  offLabel: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onLabel: PropTypes.string,
-  selected: PropTypes.bool.isRequired,
-  visibleLabels: PropTypes.bool,
-};
-
-Switch.displayName = 'Switch';

package/src/Switch/Switch.stories.mdx

@@ -1,76 +0,0 @@
-<!--- Switch.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Switch } from './Switch';
-
-<Meta title="Design System/Components/Switch" component={Switch} />
-
-# Switch
-
-Switches are used to change between enabled and disabled states. It is a binary choice.
-
-**Best practices**
-
-- Make sure to add state labels when using a Switch component. For inclusion matters, colors are mandatory but not enough to indicate a change of state.
-- The state labels should only have a single word and be clear.
-- A change of state should also be visible by the circle position.
-- One tap should be enough to change the state.
-- When in a form, prefer the usage of a Toggle component.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Switch)
-
-## Imports
-
-```js
-import { Switch } from '@strapi/design-system/Switch';
-```
-
-## Usage
-
-Use a switch whenever the users need to turn something on or off in a small area or content section. A switch can be disabled.
-
-### Activated Switch
-
-Activated state is one of two of them available for a Switch.
-
-<Canvas>
-  <Story name="activated">
-    {() => {
-      const [activated, setActivated] = useState(true);
-      return (
-        <Switch
-          label="Activate the microphone"
-          selected={activated}
-          onChange={() => setActivated((s) => !s)}
-          visibleLabels
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Deactivated Switch
-
-Deactivated state is one of two of them available for a Switch.
-
-<Canvas>
-  <Story name="not-activated">
-    {() => {
-      const [activated, setActivated] = useState(false);
-      return (
-        <Switch
-          label="Activate the microphone"
-          selected={activated}
-          onChange={() => setActivated((s) => !s)}
-          visibleLabels
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Switch} />

package/src/Switch/__tests__/Switch.e2e.js

@@ -1,33 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('Switch', () => {
-  test.describe('light mode', () => {
-    test('triggers axe on the document for the activated switch', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-switch--activated&viewMode=story');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('triggers axe on the document for the not-activated switch', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-switch--not-activated&viewMode=story');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('triggers axe on the document for the activated switch', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-switch--activated&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('triggers axe on the document for the not-activated switch', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-switch--not-activated&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Switch/index.js

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

package/src/Table/Cell.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Flex } from '../Flex';
-import { RawTh, RawTd } from '../RawTable/RawCell';
-
-const CellWrapper = styled(RawTd)`
-  vertical-align: middle;
-  text-align: left;
-  color: ${({ theme }) => theme.colors.neutral600};
-  outline-offset: -4px;
-
-  /**
-  * Hack to make sure the checkbox looks aligned
-  */
-  input {
-    vertical-align: sub;
-  }
-`;
-
-const ActionWrapper = styled.span`
-  svg {
-    height: ${4 / 16}rem;
-  }
-`;
-
-export const Th = ({ children, action, ...props }) => {
-  return (
-    <CellWrapper as={RawTh} {...props}>
-      <Flex>
-        {children}
-        <ActionWrapper>{action}</ActionWrapper>
-      </Flex>
-    </CellWrapper>
-  );
-};
-
-Th.defaultProps = {
-  action: undefined,
-};
-
-Th.propTypes = {
-  action: PropTypes.node,
-  children: PropTypes.node.isRequired,
-};
-
-export const Td = (props) => {
-  return <CellWrapper {...props} />;
-};

package/src/Table/TFooter.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import { Divider } from '../Divider';
-import { Typography } from '../Typography';
-import { Flex } from '../Flex';
-import styled from 'styled-components';
-
-const IconBox = styled(Box)`
-  height: ${24 / 16}rem;
-  width: ${24 / 16}rem;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  svg {
-    height: ${10 / 16}rem;
-    width: ${10 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-
-// TODO: remove when the reset css button is merged
-const ButtonBox = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-  display: block;
-  width: 100%;
-  border: none;
-`;
-
-export const TFooter = ({ children, icon, ...props }) => {
-  return (
-    <div>
-      <Divider />
-      <ButtonBox as="button" background="primary100" padding={5} {...props}>
-        <Flex>
-          <IconBox aria-hidden background="primary200">
-            {icon}
-          </IconBox>
-          <Box paddingLeft={3}>
-            <Typography variant="pi" fontWeight="bold" textColor="primary600">
-              {children}
-            </Typography>
-          </Box>
-        </Flex>
-      </ButtonBox>
-    </div>
-  );
-};
-
-TFooter.propTypes = {
-  children: PropTypes.string.isRequired,
-  icon: PropTypes.node.isRequired,
-};

package/src/Table/Table.js

@@ -1,96 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { RawTable } from '../RawTable/RawTable';
-import styled from 'styled-components';
-import { Box } from '../Box';
-
-const TableContainer = styled(Box)`
-  overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-
-const TableWrapper = styled(RawTable)`
-  width: 100%;
-  white-space: nowrap;
-`;
-
-const TableBox = styled(Box)`
-  position: relative;
-
-  &:before {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'left' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    left: 0;
-  }
-
-  &:after {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(270deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'right' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    right: 0;
-    top: 0;
-  }
-`;
-
-const ScrollContainer = styled(Box)`
-  overflow-x: auto;
-`;
-
-export const Table = ({ colCount, rowCount, footer, ...props }) => {
-  const tableRef = useRef(null);
-  const [overflowing, setOverflowing] = useState();
-
-  const handleScroll = (e) => {
-    const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth;
-
-    if (e.target.scrollLeft === 0) {
-      return setOverflowing('right');
-    }
-
-    if (e.target.scrollLeft === maxScrollLeft) {
-      return setOverflowing('left');
-    }
-
-    if (e.target.scrollLeft > 0) {
-      return setOverflowing('both');
-    }
-  };
-
-  useEffect(() => {
-    if (tableRef.current.scrollWidth > tableRef.current.clientWidth) {
-      setOverflowing('right');
-    }
-  }, []);
-
-  return (
-    <TableContainer shadow="tableShadow" hasRadius background="neutral0">
-      <TableBox overflowing={overflowing}>
-        <ScrollContainer ref={tableRef} onScroll={handleScroll} paddingLeft={6} paddingRight={6}>
-          <TableWrapper colCount={colCount} rowCount={rowCount} {...props} />
-        </ScrollContainer>
-      </TableBox>
-      {footer}
-    </TableContainer>
-  );
-};
-
-Table.defaultProps = {
-  footer: undefined,
-};
-
-Table.propTypes = {
-  colCount: PropTypes.number.isRequired,
-  footer: PropTypes.node,
-  rowCount: PropTypes.number.isRequired,
-};