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

package/src/Tabs/components.js

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-
-/** Simple variant */
-export const SimpleTabBox = styled(Box)`
-  border-bottom: 2px solid
-    ${({ theme, selected, hasError }) => {
-      if (selected) {
-        if (hasError) {
-          return theme.colors.danger600;
-        }
-
-        return theme.colors.primary600;
-      }
-
-      return 'transparent';
-    }};
-`;
-
-/** Default variant */
-export const DefaultTabBox = styled(Box)`
-  border-bottom: 1px solid ${({ theme, selected }) => (selected ? theme.colors.neutral0 : theme.colors.neutral150)};
-`;
-
-export const DefaultTabButton = styled.button`
-  border: none;
-  background: transparent;
-  padding: 0;
-
-  & + & > ${DefaultTabBox} {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
-  }
-
-  ${DefaultTabBox} {
-    border-right: ${({ theme, showRightBorder }) =>
-      showRightBorder ? `1px solid ${theme.colors.neutral150}` : 'none'};
-  }
-
-  // Hack preventing the outline from being overflow by the following tab
-  outline-offset: -2px;
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-
-export const DefaultTabsRow = styled(Flex)`
-  & > * {
-    flex: 1;
-  }
-
-  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
-  }
-
-  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
-  }
-
-  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
-    border-left: none;
-    border-right: none;
-  }
-`;

package/src/Tabs/index.js

@@ -1,3 +0,0 @@
-export * from './Tabs';
-export * from './TabPanels';
-export * from './TabGroup';

package/src/Tabs/useTabsFocus.js

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useTabsFocus = (selectedTabIndex, onTabChange) => {
-  const tabsRef = useRef(null);
-  const mountedRef = useRef(null);
-
-  useEffect(() => {
-    if (!tabsRef.current) return;
-
-    // We don't' want to send the focus to the tab when it mounts
-    // It could break the navigating flow of the users if the focus was supposed to be
-    // on another element
-    if (mountedRef.current) {
-      const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
-
-      if (nextFocusEl) {
-        nextFocusEl.focus();
-        onTabChange(selectedTabIndex);
-      }
-    }
-
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-    }
-  }, [selectedTabIndex]);
-
-  return tabsRef;
-};

package/src/Tag/Tag.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Typography } from '../Typography';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-
-const TagWrapper = styled(Box)`
-  svg {
-    height: ${8 / 16}rem;
-    width: ${8 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
-  }
-`;
-
-const TagText = styled(Typography)`
-  border-right: 1px solid ${({ theme, disabled }) => (disabled ? theme.colors.neutral300 : theme.colors.primary200)};
-  color: inherit;
-  padding-right: ${({ theme }) => theme.spaces[2]};
-`;
-
-export const Tag = ({ children, icon, disabled, onClick, ...props }) => {
-  const handleClick = (e) => {
-    if (disabled) return;
-    onClick(e);
-  };
-
-  return (
-    <TagWrapper
-      as="button"
-      background={disabled ? 'neutral200' : 'primary100'}
-      color={disabled ? 'neutral700' : 'primary600'}
-      paddingLeft={3}
-      paddingRight={3}
-      onClick={handleClick}
-      aria-disabled={disabled}
-      borderWidth="1px"
-      borderStyle="solid"
-      borderColor={disabled ? 'neutral300' : 'primary200'}
-      hasRadius
-      height={`${32 / 16}rem`}
-      {...props}
-    >
-      <Flex>
-        <TagText disabled={disabled} variant="pi" fontWeight="bold" as="span">
-          {children}
-        </TagText>
-
-        <Box paddingLeft={2}>
-          <Flex>{icon}</Flex>
-        </Box>
-      </Flex>
-    </TagWrapper>
-  );
-};
-
-Tag.displayName = 'Tag';
-
-Tag.defaultProps = {
-  disabled: false,
-  onClick: undefined,
-};
-
-Tag.propTypes = {
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  icon: PropTypes.element.isRequired,
-  onClick: PropTypes.func,
-};

package/src/Tag/Tag.stories.mdx

@@ -1,47 +0,0 @@
-<!--- Tag.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import Information from '@strapi/icons/Information';
-import { Tag } from './Tag';
-
-<Meta title="Design System/Components/Tag" component={Tag} />
-
-# Tag
-
-Tags are used to give a quick information about a performed action. Tags can be added or removed from a page or another component. They are also used as a filter.
-
-**Best practices**
-
-- Tags text should be concise and easily scannable.
-- Tags text should be explicit and indicate its purpose.
-- Tags should be very close to or within the performed action.
-- Use Badge component if the information given is not related to a performed action.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Tag)
-
-## Imports
-
-```js
-import { Tag } from '@strapi/design-system/Tag';
-```
-
-## Usage
-
-Tags are related to a performed action. They should be very close by the action's trigger. Moreover, a tag can be added or removed from that place. They cannot exist on their own.
-
-<Canvas>
-  <Story name="base">
-    <Tag icon={<Information aria-hidden={true} />}>Hello world</Tag>
-  </Story>
-  <Story name="disabled">
-    <Tag icon={<Information aria-hidden={true} />} disabled>
-      Hello world
-    </Tag>
-  </Story>
-</Canvas>
-
-## Props
-
-The Tag 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={Tag} />

package/src/Tag/__tests__/Tag.e2e.js

@@ -1,37 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('Tag', () => {
-  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-tag--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-tag--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-tag--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-tag--disabled&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Tag/index.js

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

package/src/TextButton/TextButton.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { keyframes } from 'styled-components';
-import Loader from '@strapi/icons/Loader';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-import { Flex } from '../Flex';
-import { buttonFocusStyle } from '../themes/utils';
-
-const rotation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-
-const LoadingWrapper = styled.div`
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-
-const TextButtonWrapper = styled(Flex)`
-  background: transparent;
-  border: none;
-
-  &[aria-disabled='true'] {
-    pointer-events: none;
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  svg {
-    display: flex;
-    font-size: ${10 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${buttonFocusStyle}
-`;
-
-export const TextButton = React.forwardRef(
-  ({ children, startIcon, endIcon, onClick, disabled, loading, ...props }, ref) => {
-    const handleClick = onClick && !disabled ? onClick : undefined;
-    const isDisabled = disabled || loading;
-
-    return (
-      <TextButtonWrapper
-        ref={ref}
-        aria-disabled={isDisabled}
-        onClick={handleClick}
-        as="button"
-        type="button"
-        {...props}
-      >
-        {(startIcon || loading) && (
-          <Box as="span" paddingRight={2} aria-hidden={true}>
-            {loading ? (
-              <LoadingWrapper>
-                <Loader />
-              </LoadingWrapper>
-            ) : (
-              startIcon
-            )}
-          </Box>
-        )}
-        <Typography variant="pi" textColor={isDisabled ? 'neutral600' : 'primary600'}>
-          {children}
-        </Typography>
-        {endIcon && (
-          <Box as="span" paddingLeft={2} aria-hidden={true}>
-            {endIcon}
-          </Box>
-        )}
-      </TextButtonWrapper>
-    );
-  },
-);
-
-TextButton.displayName = 'TextButton';
-
-TextButton.defaultProps = {
-  disabled: false,
-  startIcon: undefined,
-  endIcon: undefined,
-  loading: false,
-  onClick: undefined,
-};
-
-TextButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  endIcon: PropTypes.element,
-  loading: PropTypes.bool,
-  onClick: PropTypes.func,
-  startIcon: PropTypes.element,
-};

package/src/TextButton/TextButton.stories.mdx

@@ -1,71 +0,0 @@
-<!--- TextButton.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import ArrowRight from '@strapi/icons/ArrowRight';
-import { TextButton } from './TextButton';
-
-<Meta title="Design System/Components/TextButton" component={TextButton} />
-
-# TextButton
-
-TextButtons invites users to trigger an action related to the interface. They are used for internal navigation.
-
-**Best practices**
-
-- Use Link component if the action if the action is related to external navigation.
-- TextButtons text should describe an action and start with a verb.
-- TextButtons text should be concise and describe their purpose. Users need to know exactly what they are about to do.
-- Use an icon with TextButtons to give more information and impact to your action.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/TextButton)
-
-## Imports
-
-```js
-import { TextButton } from '@strapi/design-system/TextButton';
-```
-
-## Usage
-
-TextButtons are used for internal navigation. Each TextButton should redirect to an action or a page of the admin panel. Moreover, they can be associated with an icon on the left or on the right depending on the context.
-
-Depending on the permissions a user have or the status of an action, a TextButton can be unreachable or unavailable yet.
-
-<Canvas>
-  <Story name="base">
-    <div>
-      <TextButton endIcon={<ArrowRight />} startIcon={<ArrowLeft />}>
-        Click on me
-      </TextButton>
-    </div>
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story name="disabled">
-    <div>
-      <TextButton disabled startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
-        Disabled TextButton
-      </TextButton>
-    </div>
-  </Story>
-</Canvas>
-
-## Loading
-
-<Canvas>
-  <Story name="loading">
-    <div>
-      <TextButton loading startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
-        Loading
-      </TextButton>
-    </div>
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={TextButton} />

package/src/TextButton/__tests__/TextButton.e2e.js

@@ -1,23 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('TextButton', () => {
-  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-textbutton--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-textbutton--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/TextButton/index.js

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

package/src/TextInput/TextInput.js

@@ -1,67 +0,0 @@
-import React, { useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { Field, FieldLabel, FieldHint, FieldError, FieldInput } from '../Field';
-import { Stack } from '../Stack';
-import { sizes } from '../themes/sizes';
-import { useId } from '../helpers/useId';
-
-export const TextInput = React.forwardRef(
-  ({ size, startAction, endAction, name, hint, error, label, labelAction, id, required, ...props }, ref) => {
-    const generatedId = useId('textinput', id);
-    const inputWrapperRef = useRef(null);
-
-    if (!label && !props['aria-label']) {
-      throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-    }
-
-    useImperativeHandle(ref, () => ({
-      inputWrapperRef,
-    }));
-
-    return (
-      <div ref={inputWrapperRef}>
-        <Field name={name} hint={hint} error={error} id={generatedId}>
-          <Stack spacing={1}>
-            {label && (
-              <FieldLabel required={required} action={labelAction}>
-                {label}
-              </FieldLabel>
-            )}
-            <FieldInput size={size} ref={ref} startAction={startAction} endAction={endAction} {...props} />
-            <FieldHint />
-            <FieldError />
-          </Stack>
-        </Field>
-      </div>
-    );
-  },
-);
-
-TextInput.displayName = 'TextInput';
-
-TextInput.defaultProps = {
-  'aria-label': undefined,
-  label: undefined,
-  labelAction: undefined,
-  error: undefined,
-  hint: undefined,
-  id: undefined,
-  startAction: undefined,
-  size: 'M',
-  endAction: undefined,
-  required: false,
-};
-
-TextInput.propTypes = {
-  'aria-label': PropTypes.string,
-  endAction: PropTypes.element,
-  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  id: PropTypes.string,
-  label: PropTypes.string,
-  labelAction: PropTypes.element,
-  name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  size: PropTypes.oneOf(Object.keys(sizes.input)),
-  startAction: PropTypes.element,
-};