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

package/src/Tooltip/Tooltip.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-import { Portal } from '../Portal';
-import { useTooltipHandlers } from './hooks/useTooltipHandlers';
-import { useTooltipLayout } from './hooks/useTooltipLayout';
-import { useId } from '../helpers/useId';
-import { VisuallyHidden } from '../VisuallyHidden';
-
-const TooltipWrapper = styled(Box)`
-  position: absolute;
-  /* z-index exist because of its position inside Modals */
-  z-index: 4;
-  display: ${({ visible }) => (visible ? 'revert' : 'none')};
-`;
-
-export const Tooltip = ({ children, label, description, delay, position, id, ...props }) => {
-  const tooltipId = useId('tooltip', id);
-  const descriptionId = useId('description');
-  const { visible, ...tooltipHandlers } = useTooltipHandlers(delay);
-  const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout(visible, position);
-
-  const childrenClone = React.cloneElement(children, {
-    tabIndex: 0,
-    'aria-labelledby': label ? tooltipId : undefined,
-    'aria-describedby': description ? tooltipId : undefined,
-    ...tooltipHandlers,
-  });
-
-  return (
-    <>
-      <Portal>
-        <TooltipWrapper
-          id={tooltipId}
-          background="neutral900"
-          hasRadius
-          padding={2}
-          role="tooltip"
-          ref={tooltipWrapperRef}
-          visible={visible}
-          {...props}
-        >
-          {visible && <VisuallyHidden id={descriptionId}>{description}</VisuallyHidden>}
-          <Typography as="p" variant="pi" fontWeight="bold" textColor="neutral0">
-            {label || description}
-          </Typography>
-        </TooltipWrapper>
-      </Portal>
-
-      <span ref={toggleSourceRef}>{childrenClone}</span>
-    </>
-  );
-};
-
-Tooltip.defaultProps = {
-  delay: 500,
-  id: undefined,
-  position: 'top',
-  label: undefined,
-  description: undefined,
-};
-
-Tooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  delay: PropTypes.number,
-  description: PropTypes.string,
-  id: PropTypes.string,
-  label: PropTypes.string,
-  position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
-};

package/src/Tooltip/Tooltip.stories.mdx

@@ -1,127 +0,0 @@
-<!--- Tooltip.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Tooltip } from './Tooltip';
-import { Grid, GridItem } from '../Grid';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/Tooltip" component={Tooltip} />
-
-# Tooltip
-
-Tooltips are floating labels that display additional information upon hover of an element.
-
-**Best practices**
-
-- The tooltip should remain as long as the mouse is not moved.
-- The tooltip should provide additional useful details.
-- The tooltip should not be used to provide critical or urgent information.
-- Tooltip shouldn't be longer or wider than 400px.
-- Tooltips should be used sparingly.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Tooltip)
-
-## Imports
-
-```js
-import { Tooltip } from '@strapi/design-system/Tooltip';
-```
-
-## Usage
-
-Tooltips are used to show the full version of truncated text or is a way to display further information about an element.
-The tooltip will appear on top of adjacent text.
-
-<Canvas withSource="open">
-  <Story name="base">
-    <div>
-      <Typography>
-        An infinite amount of content to place correctly the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-        sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </Typography>
-      <Tooltip description="Content of the tooltip">
-        <Typography>Show tooltip</Typography>
-      </Tooltip>
-      <Typography>
-        An infinite amount of content to place correctly the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-        sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </Typography>
-    </div>
-  </Story>
-</Canvas>
-
-### Tooltip with smaller text or longer description
-
-Tootips work with longer texts as well.
-
-<Canvas withSource="open">
-  <Story name="with text inside">
-    <div>
-      <Tooltip description="Smaller">
-        <Typography>Show tooltip</Typography>
-      </Tooltip>
-    </div>
-    <div>
-      <Tooltip
-        description="Excepteur sint occaecat cupidatat non proident, sunt
-        in culpa qui officia deserunt mollit anim id est laborum."
-      >
-        <button>
-          <Typography>A longer CTA with longer content</Typography>
-        </button>
-      </Tooltip>
-    </div>
-  </Story>
-</Canvas>
-
-### Alternative positioning
-
-You can change the position of the tooltip by changing the `position` parameter.
-The default position is `top`.
-
-<Canvas withSource="open">
-  <Story name="grid">
-    <Grid gap={4} padding={4}>
-      <GridItem col={3}>
-        <Tooltip description="Tootips are neat.">
-          <button>
-            <Typography>Default tooltip</Typography>
-          </button>
-        </Tooltip>
-      </GridItem>
-      <GridItem col={3}>
-        <Tooltip description="Tootips are neat." position="bottom">
-          <button>
-            <Typography>Bottom</Typography>
-          </button>
-        </Tooltip>
-      </GridItem>
-      <GridItem col={3}>
-        <Tooltip description="Tootips are neat." position="right">
-          <button>
-            <Typography>Right</Typography>
-          </button>
-        </Tooltip>
-      </GridItem>
-      <GridItem col={3}>
-        <Tooltip description="Tootips are neat." position="left">
-          <button>
-            <Typography>Left</Typography>
-          </button>
-        </Tooltip>
-      </GridItem>
-    </Grid>
-  </Story>
-</Canvas>
-
-## Props
-
-The Tooltip 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={Tooltip} />

package/src/Tooltip/__tests__/Tooltip.e2e.js

@@ -1,33 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('Tooltip', () => {
-  test.describe('light mode', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-tooltip--base&viewMode=story');
-      await injectAxe(page);
-    });
-
-    test('triggers axe on the document', async ({ page }) => {
-      await checkA11y(page);
-    });
-
-    test('shows the tooltip when focusing the text content', async ({ page }) => {
-      await page.focus('text="Show tooltip"');
-      const isVisible = await page.isVisible('text="Content of the tooltip"');
-
-      expect(isVisible).toBe(true);
-    });
-  });
-
-  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-tooltip--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

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

@@ -1,306 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { Tooltip } from '../Tooltip';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-jest.mock('../../helpers/genId', () => ({
-  genId: () => 123,
-}));
-
-describe('Tooltip', () => {
-  it('snapshots document.body when the tooltip is not visible but exists in the DOM', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <Tooltip description="Content of the tooltip fefe">
-          <button>Show tooltip</button>
-        </Tooltip>
-      </ThemeProvider>,
-    );
-
-    expect(document.body).toMatchInlineSnapshot(`
-      .c1 {
-        background: #212134;
-        padding: 8px;
-        border-radius: 4px;
-      }
-
-      .c3 {
-        font-weight: 600;
-        color: #ffffff;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c0 {
-        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;
-      }
-
-      .c2 {
-        position: absolute;
-        z-index: 4;
-        display: none;
-      }
-
-      <body>
-        <div>
-          <span>
-            <button
-              aria-describedby="tooltip-123"
-              tabindex="0"
-            >
-              Show tooltip
-            </button>
-          </span>
-          <div
-            class="c0"
-          >
-            <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>
-        <div
-          data-react-portal="true"
-        >
-          <div
-            class="c1 c2"
-            id="tooltip-123"
-            role="tooltip"
-          >
-            <p
-              class="c3"
-            >
-              Content of the tooltip fefe
-            </p>
-          </div>
-        </div>
-      </body>
-    `);
-  });
-
-  it('snapshots document.body when the button is focused (aria-describedby exists)', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <Tooltip description="Content of the tooltip fefe">
-          <button>Show tooltip</button>
-        </Tooltip>
-      </ThemeProvider>,
-    );
-
-    fireEvent.focus(screen.getByText('Show tooltip'));
-
-    expect(document.body).toMatchInlineSnapshot(`
-      .c1 {
-        background: #212134;
-        padding: 8px;
-        border-radius: 4px;
-      }
-
-      .c3 {
-        font-weight: 600;
-        color: #ffffff;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c0 {
-        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;
-      }
-
-      .c2 {
-        position: absolute;
-        z-index: 4;
-        display: revert;
-      }
-
-      <body>
-        <div>
-          <span>
-            <button
-              aria-describedby="tooltip-123"
-              tabindex="0"
-            >
-              Show tooltip
-            </button>
-          </span>
-          <div
-            class="c0"
-          >
-            <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>
-        <div
-          data-react-portal="true"
-        >
-          <div
-            class="c1 c2"
-            id="tooltip-123"
-            role="tooltip"
-            style="left: 0px; top: -8px;"
-          >
-            <div
-              class="c0"
-              id="description-123"
-            >
-              Content of the tooltip fefe
-            </div>
-            <p
-              class="c3"
-            >
-              Content of the tooltip fefe
-            </p>
-          </div>
-        </div>
-      </body>
-    `);
-  });
-
-  it('snapshots document.body with a label', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <Tooltip label="Content of the tooltip fefe">
-          <button>+</button>
-        </Tooltip>
-      </ThemeProvider>,
-    );
-
-    fireEvent.focus(screen.getByText('+'));
-
-    expect(document.body).toMatchInlineSnapshot(`
-      .c1 {
-        background: #212134;
-        padding: 8px;
-        border-radius: 4px;
-      }
-
-      .c3 {
-        font-weight: 600;
-        color: #ffffff;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c0 {
-        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;
-      }
-
-      .c2 {
-        position: absolute;
-        z-index: 4;
-        display: revert;
-      }
-
-      <body>
-        <div>
-          <span>
-            <button
-              aria-labelledby="tooltip-123"
-              tabindex="0"
-            >
-              +
-            </button>
-          </span>
-          <div
-            class="c0"
-          >
-            <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>
-        <div
-          data-react-portal="true"
-        >
-          <div
-            class="c1 c2"
-            id="tooltip-123"
-            role="tooltip"
-            style="left: 0px; top: -8px;"
-          >
-            <div
-              class="c0"
-              id="description-123"
-            />
-            <p
-              class="c3"
-            >
-              Content of the tooltip fefe
-            </p>
-          </div>
-        </div>
-      </body>
-    `);
-  });
-});

package/src/Tooltip/hooks/useTooltipHandlers.js

@@ -1,39 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-
-export const useTooltipHandlers = (delay) => {
-  const [visible, setVisible] = useState(false);
-  const timerRef = useRef();
-
-  const clearTimer = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      clearTimer();
-    };
-  }, []);
-
-  const onFocus = () => {
-    setVisible(true);
-  };
-
-  const onBlur = () => {
-    setVisible(false);
-  };
-
-  const onMouseEnter = () => {
-    timerRef.current = setTimeout(() => {
-      setVisible(true);
-    }, delay);
-  };
-
-  const onMouseLeave = () => {
-    clearTimer();
-    setVisible(false);
-  };
-
-  return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
-};

package/src/Tooltip/hooks/useTooltipLayout.js

@@ -1,21 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-import { positionTooltip } from '../utils/positionTooltip';
-
-export const useTooltipLayout = (visible, position) => {
-  const tooltipWrapperRef = useRef(null);
-  const toggleSourceRef = useRef(null);
-
-  useLayoutEffect(() => {
-    if (visible) {
-      const tooltip = tooltipWrapperRef.current;
-      const toggleSource = toggleSourceRef.current;
-
-      const tooltipPosition = positionTooltip(tooltip, toggleSource, position);
-
-      tooltip.style.left = `${tooltipPosition.left}px`;
-      tooltip.style.top = `${tooltipPosition.top}px`;
-    }
-  }, [visible]);
-
-  return { tooltipWrapperRef, toggleSourceRef };
-};

package/src/Tooltip/index.js

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