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

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

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

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

package/src/Switch/Switch.js

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

@@ -0,0 +1,55 @@
+<!--- Switch.stories.mdx --->
+
+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">
+    <Switch label="Activate the microphone" selected={true} onChange={() => setChecked((s) => !s)} visibleLabels />
+  </Story>
+</Canvas>
+
+### Deactivated Switch
+
+Deactivated state is one of two of them available for a Switch.
+
+<Canvas>
+  <Story name="not-activated">
+    <Switch label="Activate the microphone" selected={false} onChange={() => setChecked((s) => !s)} visibleLabels />
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Switch} />

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

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

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

package/src/Table/Cell.js

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

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

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