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

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

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

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

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

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

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

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

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

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

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

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

package/src/Typography/utils.js

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

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

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

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

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

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

package/src/helpers/genId.js

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

package/src/helpers/getDefaultLocale.js

@@ -0,0 +1,33 @@
+/**
+ * 
+   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;
+};