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

package/src/Tooltip/utils/__tests__/positionTooltip.spec.js

@@ -1,114 +0,0 @@
-import { positionTooltip } from '../positionTooltip';
-
-describe('positionTooltip', () => {
-  let tooltipNode;
-  let toggleSourceNode;
-
-  beforeEach(() => {
-    tooltipNode = {
-      getBoundingClientRect: () => ({ width: 160, height: 40 }),
-    };
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 500, top: 300, width: 100, height: 30 }),
-    };
-
-    window.pageYOffset = 800;
-  });
-
-  it('positions the tooltip at the top of the toggle source', () => {
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 470, top: 1052 });
-  });
-
-  it('positions the tooltip at the bottom of the toggle source', () => {
-    const position = positionTooltip(tooltipNode, toggleSourceNode, 'bottom');
-
-    expect(position).toEqual({ left: 470, top: 1138 });
-  });
-
-  it('positions the tooltip on the left of the toggle source', () => {
-    const position = positionTooltip(tooltipNode, toggleSourceNode, 'left');
-
-    expect(position).toEqual({ left: 332, top: 1095 });
-  });
-
-  it('positions the tooltip on the right of the toggle source', () => {
-    const position = positionTooltip(tooltipNode, toggleSourceNode, 'right');
-
-    expect(position).toEqual({ left: 608, top: 1095 });
-  });
-
-  it('positions the tooltip on the right of the toggle source when toggle source pos is top-left', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 15, top: 15, width: 50, height: 20 }),
-    };
-    window.pageYOffset = 0;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 73, top: 3 });
-  });
-
-  it('positions the tooltip on the right of the toggle source when toggle source pos is bottom-left', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 15, top: 760, width: 50, height: 20 }),
-    };
-
-    window.pageYOffset = 0;
-    window.innerHeight = 800;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 73, top: 748 });
-  });
-
-  it('positions the tooltip below the toggle source when toggle source pos is top-center', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 400, top: 15, width: 50, height: 20 }),
-    };
-    window.pageYOffset = 0;
-    window.innerWidth = 800;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 345, top: 43 });
-  });
-
-  it('positions the tooltip above the toggle source when toggle source pos is bottom-center', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 400, top: 760, width: 50, height: 20 }),
-    };
-    window.pageYOffset = 0;
-    window.innerWidth = 800;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 345, top: 712 });
-  });
-
-  it('positions the tooltip on the left of the toggle source when toggle source pos is top-right', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 750, right: 800, top: 15, width: 50, height: 20 }),
-    };
-    window.innerWidth = 800;
-    window.pageYOffset = 0;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 582, top: 5 });
-  });
-
-  it('positions the tooltip on the left of the toggle source when toggle source pos is bottom-right', () => {
-    toggleSourceNode = {
-      getBoundingClientRect: () => ({ left: 750, right: 800, top: 760, width: 50, height: 20 }),
-    };
-    window.innerWidth = 800;
-    window.innerHeight = 800;
-    window.pageYOffset = 0;
-
-    const position = positionTooltip(tooltipNode, toggleSourceNode);
-
-    expect(position).toEqual({ left: 582, top: 750 });
-  });
-});

package/src/Tooltip/utils/positionTooltip.js

@@ -1,83 +0,0 @@
-const SPACE_BETWEEN = 8;
-
-const positionBottom = (tooltipRect, toggleSourceRect) => {
-  const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-  const left = toggleSourceRect.left - widthDifference;
-  const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
-
-  return {
-    left,
-    top,
-  };
-};
-
-const positionRight = (tooltipRect, toggleSourceRect) => {
-  const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-  const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
-  const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-
-  return { left, top };
-};
-
-const positionLeft = (tooltipRect, toggleSourceRect) => {
-  const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-  const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-  const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-
-  return { left, top };
-};
-
-const positionTop = (tooltipRect, toggleSourceRect) => {
-  const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-  let left = toggleSourceRect.left - widthDifference;
-  let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
-
-  //CONDITIONS TO HANDLE TOOLTIP OVERFLOW OUT OF VIEWPORT
-
-  //calculate the space between rightside viewport to rightside source element
-  //knowing this space will help calculate if tooltip will overflow right side
-  const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
-
-  //calculate rightside pos of tooltip to compare later to window.innerWidth
-  const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
-
-  if (overflowRight > window.innerWidth) {
-    //if tooltip overflow right side of viewport
-    //place tooltip left side from source element
-    left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-    top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
-  } else if (left < 0) {
-    //if overflow left
-    //place tooltip right side from source element
-    left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
-    top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
-  } else if (top < 0 && left > 0) {
-    //if overflow top but not left
-    //place tooltip below source element
-    top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
-  }
-
-  return {
-    left,
-    top,
-  };
-};
-
-export const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
-  const tooltipRect = tooltipNode.getBoundingClientRect();
-  const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
-
-  if (position === 'bottom') {
-    return positionBottom(tooltipRect, toggleSourceRect);
-  }
-
-  if (position === 'right') {
-    return positionRight(tooltipRect, toggleSourceRect);
-  }
-
-  if (position === 'left') {
-    return positionLeft(tooltipRect, toggleSourceRect);
-  }
-
-  return positionTop(tooltipRect, toggleSourceRect);
-};

package/src/Typography/Typography.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { ellipsisStyle, variantStyle, handleColor } from './utils';
-import { typographyDefaultProps, typographyPropTypes } from './TypographyProps';
-
-const transientProps = {
-  fontSize: true,
-  fontWeight: true,
-};
-
-export const Typography = styled.span.withConfig({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-})`
-  font-weight: ${({ theme, fontWeight }) => theme.fontWeights[fontWeight]};
-  font-size: ${({ theme, fontSize }) => theme.fontSizes[fontSize]};
-  line-height: ${({ theme, lineHeight }) => theme.lineHeights[lineHeight]};
-  color: ${handleColor};
-  text-align: ${({ textAlign }) => textAlign};
-  text-transform: ${({ textTransform }) => textTransform};
-  ${ellipsisStyle}
-  ${variantStyle}
-`;
-
-Typography.defaultProps = typographyDefaultProps;
-Typography.propTypes = typographyPropTypes;

package/src/Typography/Typography.stories.mdx

@@ -1,86 +0,0 @@
-<!--- Typography.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Typography } from './Typography';
-import { TypographyProps } from './TypographyProps';
-import { Box } from '../Box';
-
-<Meta title="Design System/Technical Components/Typography" component={Typography} />
-
-# Text
-
-This is the doc of the different Text / Typography components.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Typography)
-
-## Imports
-
-```js
-import { Typography } from '@strapi/design-system/Typography';
-```
-
-## Usage of the different variants
-
-The main way to display text content on the screen
-
-<Canvas>
-  <Story name="variants">
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="alpha">Alpha - header 1</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="beta">Beta - header 2</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="delta">Delta - header 3</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="epsilon">Epsilon - subtitle</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="omega">Omega - body</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="omega" fontWeight="semiBold">
-        Omega semibold - body highlight
-      </Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="omega" fontWeight="bold">
-        Omega bold - button text
-      </Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="pi">Pi - small text</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="pi" fontWeight="bold">
-        Pi bold - small button text
-      </Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4}>
-      <Typography variant="sigma">Sigma - table label</Typography>
-    </Box>
-    <Box paddingTop={2} paddingLeft={4} width="200px">
-      <Typography ellipsis>Ellipsis example - long text - long text</Typography>
-    </Box>
-  </Story>
-</Canvas>
-
-### Ellipsis
-
-By using the prop `ellipsis` it is possible to limit the text to one line and to
-signal to the user there is more to it.
-
-<Canvas>
-  <Story name="ellipsis">
-    <Box maxWidth="150px" borderStyle="solid" borderWidth="1px" borderColor="neutral200">
-      <Typography ellipsis>Loong text, that will be cut off</Typography>
-    </Box>
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={TypographyProps} />

package/src/Typography/TypographyProps.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TEXT_VARIANTS, OMEGA } from './constants';
-
-export const TypographyProps = (props) => <div {...props} />;
-
-export const typographyDefaultProps = {
-  ellipsis: false,
-  fontWeight: undefined,
-  fontSize: undefined,
-  lineHeight: undefined,
-  textColor: undefined,
-  textAlign: undefined,
-  textTransform: undefined,
-  variant: OMEGA,
-};
-
-export const typographyPropTypes = {
-  ellipsis: PropTypes.bool,
-  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  fontWeight: PropTypes.string,
-  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  textAlign: PropTypes.string,
-  textColor: PropTypes.string,
-  textTransform: PropTypes.string,
-  variant: PropTypes.oneOf(TEXT_VARIANTS),
-};
-
-TypographyProps.defaultProps = typographyDefaultProps;
-TypographyProps.propTypes = typographyPropTypes;

package/src/Typography/__tests__/Typography.e2e.js

@@ -1,25 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('Typography', () => {
-  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-technical-components-typography--variants&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-technical-components-typography--variants&viewMode=story&theme=dark',
-      );
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Typography/__tests__/Typography.spec.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Typography } from '../Typography';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-const setup = (props) =>
-  render(
-    <ThemeProvider theme={lightTheme}>
-      <Typography {...props} />
-    </ThemeProvider>,
-  );
-
-describe('Typography', () => {
-  test('textAlign', async () => {
-    const { container } = setup({
-      children: 'Test',
-      textAlign: 'center',
-    });
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('textTransform', () => {
-    const { container } = setup({
-      children: 'Test',
-      textTransform: 'uppercase',
-    });
-
-    expect(container).toMatchSnapshot();
-  });
-});

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

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Typography textAlign 1`] = `
-.c0 {
-  color: #32324d;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c1 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-<div>
-  <span
-    class="c0"
-  >
-    Test
-  </span>
-  <div
-    class="c1"
-  >
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-log"
-      role="log"
-    />
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-status"
-      role="status"
-    />
-    <p
-      aria-live="assertive"
-      aria-relevant="all"
-      id="live-region-alert"
-      role="alert"
-    />
-  </div>
-</div>
-`;
-
-exports[`Typography textTransform 1`] = `
-.c0 {
-  color: #32324d;
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c1 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-<div>
-  <span
-    class="c0"
-  >
-    Test
-  </span>
-  <div
-    class="c1"
-  >
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-log"
-      role="log"
-    />
-    <p
-      aria-live="polite"
-      aria-relevant="all"
-      id="live-region-status"
-      role="status"
-    />
-    <p
-      aria-live="assertive"
-      aria-relevant="all"
-      id="live-region-alert"
-      role="alert"
-    />
-  </div>
-</div>
-`;

package/src/Typography/constants.js

@@ -1,9 +0,0 @@
-export const ALPHA = 'alpha';
-export const BETA = 'beta';
-export const DELTA = 'delta';
-export const EPSILON = 'epsilon';
-export const OMEGA = 'omega';
-export const PI = 'pi';
-export const SIGMA = 'sigma';
-
-export const TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA];

package/src/Typography/index.js

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

package/src/Typography/utils.js

@@ -1,69 +0,0 @@
-import { ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA } from './constants';
-
-export const ellipsisStyle = ({ ellipsis }) =>
-  ellipsis &&
-  `
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-
-export const variantStyle = ({ variant, theme }) => {
-  switch (variant) {
-    case ALPHA: {
-      return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[5]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-    }
-    case BETA: {
-      return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[4]};
-        line-height: ${theme.lineHeights[1]};
-      `;
-    }
-    case DELTA: {
-      return `
-        font-weight: ${theme.fontWeights.semiBold};
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-    }
-    case EPSILON: {
-      return `
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[6]};
-      `;
-    }
-    case OMEGA: {
-      return `
-        font-size: ${theme.fontSizes[2]};
-        line-height: ${theme.lineHeights[4]};
-      `;
-    }
-    case PI: {
-      return `
-        font-size: ${theme.fontSizes[1]};
-        line-height: ${theme.lineHeights[3]};
-      `;
-    }
-    case SIGMA: {
-      return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[0]};
-        line-height: ${theme.lineHeights[5]};
-        text-transform: uppercase;
-      `;
-    }
-    default: {
-      return `
-        font-size: ${theme.fontSizes[2]};
-      `;
-    }
-  }
-};
-
-export const handleColor = ({ theme, textColor }) => theme.colors[textColor || 'neutral800'];

package/src/VisuallyHidden/VisuallyHidden.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const VisuallyHidden = styled.div`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-`;

package/src/VisuallyHidden/index.js

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

package/src/helpers/__tests__/useId.spec.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { useId } from '../useId';
-
-describe('useId', () => {
-  it('snapshots with a generated id and a prefix', () => {
-    const TestCompo = () => {
-      const id = useId('my-prefix', undefined);
-
-      return <div id={id} />;
-    };
-
-    const { container } = render(<TestCompo />);
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          id="my-prefix-1"
-        />
-      </div>
-    `);
-  });
-
-  it('snapshots with a predefined ID', () => {
-    const TestCompo = () => {
-      const id = useId('my-prefix', 'my-custom-id');
-
-      return <div id={id} />;
-    };
-
-    const { container } = render(<TestCompo />);
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          id="my-custom-id"
-        />
-      </div>
-    `);
-  });
-});

package/src/helpers/escapeSelector.js

@@ -1 +0,0 @@
-export const escapeSelector = (selector) => selector.replace(':', '-');

package/src/helpers/genId.js

@@ -1,2 +0,0 @@
-let id = 0;
-export const genId = () => ++id;

package/src/helpers/getDefaultLocale.js

@@ -1,33 +0,0 @@
-/**
- * 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.} operator 
-
-   Link to the code: https://github.com/adobe/react-spectrum/blob/1e2b7f280a04ead83e21b27fa580eb189e5f4186/packages/%40react-aria/i18n/src/useDefaultLocale.ts#L28
- */
-const DEFAULT_LOCALE = 'en-EN';
-
-export const getDefaultLocale = () => {
-  if (typeof navigator === 'undefined') {
-    return DEFAULT_LOCALE;
-  }
-
-  if (navigator.language) {
-    return navigator.language;
-  }
-
-  if (navigator.userLanguage) {
-    return navigator.userLanguage;
-  }
-
-  return DEFAULT_LOCALE;
-};