@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/src/components/Tooltip/tests/InfoTooltip.unit.test.js

@@ -1,99 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import InfoTooltip from '../InfoTooltip';
-
-import Base from './BaseWrapper';
-
-describe('rendering InfoTooltip', () => {
-  describe('initial state', () => {
-    let infoTooltip;
-
-    beforeEach(() => {
-      infoTooltip = render(
-        <Base>
-          <InfoTooltip />
-        </Base>
-      );
-    });
-
-    it('renders button with class info-tooltip', () => {
-      const { container } = infoTooltip;
-
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button')).toHaveClass('info-tooltip');
-    });
-    it('renders button with type button', () => {
-      const { container } = infoTooltip;
-
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button').type).toBe('button');
-    });
-    it('renders button with generated aria-describeby', () => {
-      const { container } = infoTooltip;
-      const pattern = /id-\d+/;
-      expect(container.querySelector('button')).toBeInTheDocument();
-
-      expect(
-        pattern.test(
-          container.querySelector('button').getAttribute('aria-describedby')
-        )
-      ).toBeTruthy();
-    });
-    it('renders button with generated aria-owns', () => {
-      const { container } = infoTooltip;
-      const pattern = /id-\d+/;
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(
-        pattern.test(
-          container.querySelector('button').getAttribute('aria-owns')
-        )
-      ).toBeTruthy();
-    });
-    it('renders button with data-tooltip-trigger set to true', () => {
-      const { container } = infoTooltip;
-
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(
-        container.querySelector('button').getAttribute('data-tooltip-trigger')
-      ).toBe('true');
-    });
-    it('renders text Info inside span with class sr-only', () => {
-      const { getByText } = infoTooltip;
-      expect(getByText('Info')).toBeInTheDocument();
-      expect(getByText('Info').tagName).toBe('SPAN');
-      expect(getByText('Info')).toHaveClass('sr-only');
-    });
-    it('svg element has classes info-tooltip__icon', () => {
-      const { container } = infoTooltip;
-      expect(container.querySelector('svg')).toHaveClass('info-tooltip__icon');
-    });
-    it('use element inside svg has /sprite.svg#assistance xlinkhref', () => {
-      const { container } = infoTooltip;
-      expect(
-        container
-          .querySelector('svg')
-          .querySelector('use')
-          .getAttribute('xlink:href')
-      ).toBe('/sprite.svg#assistance');
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(
-        <Base>
-          <InfoTooltip>test</InfoTooltip>
-        </Base>
-      );
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('passes other props', () => {
-      const { getByTestId } = render(
-        <Base>
-          <InfoTooltip data-testid="test-id" />
-        </Base>
-      );
-      expect(getByTestId('test-id')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Tooltip/tests/Tooltip.conformance.test.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Button from '../../Button';
-import Tooltip, { InfoTooltip } from '../';
-
-const example = (
-  <>
-    <div id="root">
-      <Tooltip
-        id="tooltip-example"
-        dialog="But I do provide further explanation"
-      >
-        This is not clear enough
-      </Tooltip>
-
-      <Tooltip tag="div" dialog={<p>Love is on my left side</p>}>
-        This is not clear enough
-      </Tooltip>
-
-      <Tooltip
-        dialog="This explains a lot"
-        renderTrigger={props => <Button {...props} />}
-      >
-        You might not know what does this button do
-      </Tooltip>
-
-      {/* <InfoTooltip>Look here for more information</InfoTooltip> */}
-    </div>
-    <div id="root-tooltips" />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate({ rules: { 'no-inline-style': 'off' } });
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

package/src/components/Tooltip/tests/Tooltip.unit.test.js

@@ -1,298 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-
-import Tooltip from '../Tooltip';
-
-import Base from './BaseWrapper';
-
-describe('rendering Tooltip', () => {
-  describe('initial state', () => {
-    let tooltip;
-
-    beforeEach(() => {
-      tooltip = render(
-        <Base>
-          <Tooltip data-testid="test-id" />
-        </Base>
-      );
-    });
-
-    it('default tag is span, therefore it renders 3 elements with tag span', () => {
-      const { container } = tooltip;
-      expect(container.querySelectorAll('span').length).toBe(3);
-    });
-    it('has default class tooltip', () => {
-      const { getByTestId } = tooltip;
-      expect(getByTestId('test-id')).toHaveClass('tooltip');
-    });
-    it('has default role tooltip', () => {
-      const { getByTestId } = tooltip;
-      expect(getByTestId('test-id').getAttribute('role')).toBe('tooltip');
-    });
-    it('has hidden attribute', () => {
-      const { getByTestId } = tooltip;
-      expect(getByTestId('test-id').hidden).toBe(true);
-    });
-    it('has data-tooltip attribute', () => {
-      const { getByTestId } = tooltip;
-      expect(getByTestId('test-id').getAttribute('data-tooltip')).toBe('true');
-    });
-    it('has span with class tooltip__arrow', () => {
-      const { container } = tooltip;
-      expect(container.getElementsByClassName('tooltip__arrow').length).toBe(1);
-      expect(
-        container.getElementsByClassName('tooltip__arrow')[0].tagName
-      ).toBe('SPAN');
-    });
-    it('has span with class tooltip__dialog', () => {
-      const { container } = tooltip;
-      expect(container.getElementsByClassName('tooltip__dialog').length).toBe(
-        1
-      );
-      expect(
-        container.getElementsByClassName('tooltip__dialog')[0].tagName
-      ).toBe('SPAN');
-    });
-    it('has hidden attribute set to true', () => {
-      const { getByTestId } = tooltip;
-      expect(getByTestId('test-id').hidden).toBe(true);
-    });
-    it('renders button with generated aria-describeby', () => {
-      const { container } = tooltip;
-      const pattern = /id-\d+/;
-      expect(container.querySelector('button')).toBeInTheDocument();
-
-      expect(
-        pattern.test(
-          container.querySelector('button').getAttribute('aria-describedby')
-        )
-      ).toBeTruthy();
-    });
-    it('renders button with generated aria-owns', () => {
-      const { container } = tooltip;
-      const pattern = /id-\d+/;
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(
-        pattern.test(
-          container.querySelector('button').getAttribute('aria-owns')
-        )
-      ).toBeTruthy();
-    });
-    it('renders button with data-tooltip-trigger set to true', () => {
-      const { container } = tooltip;
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(
-        container.querySelector('button').getAttribute('data-tooltip-trigger')
-      ).toBe('true');
-    });
-  });
-  describe('passed props', () => {
-    it('when tag  is set to div, renders 5 elements with tag div (3 + 2 root divs defined here)', () => {
-      const { container } = render(
-        <Base>
-          <Tooltip tag="div" />
-        </Base>
-      );
-      expect(container.querySelectorAll('div').length).toBe(5);
-    });
-    it('renders children', () => {
-      const { getByText } = render(
-        <Base>
-          <Tooltip>test</Tooltip>
-        </Base>
-      );
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('renders dialog', () => {
-      const { getByText } = render(
-        <Base>
-          <Tooltip dialog="test" />
-        </Base>
-      );
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has additional class when className is set ', () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" className="test-class" />
-        </Base>
-      );
-      expect(getByTestId('test-id')).toHaveClass('tooltip');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    [
-      'auto',
-      'top',
-      'top-start',
-      'top-end',
-      'bottom',
-      'bottom-start',
-      'bottom-end',
-      'right',
-      'right-start',
-      'right-end',
-      'left',
-      'left-start',
-      'left-end',
-    ].map(placement => {
-      it(`has data-tooltip-placement set to ${placement} which is passed by placement prop`, () => {
-        const { getByTestId } = render(
-          <Base>
-            <Tooltip data-testid="test-id" placement={placement} />
-          </Base>
-        );
-        expect(
-          getByTestId('test-id').getAttribute('data-tooltip-placement')
-        ).toBe(placement);
-      });
-    });
-    it('renders trigger element instead of button', () => {
-      const { container } = render(
-        <Base>
-          <Tooltip
-            data-testid="test-id"
-            renderTrigger={props => {
-              return <p {...props} />;
-            }}
-          />
-        </Base>
-      );
-      expect(container.querySelector('p')).toBeInTheDocument();
-      expect(container.querySelector('button')).not.toBeInTheDocument();
-    });
-    it('trigger element has generated aria-describeby', () => {
-      const { container } = render(
-        <Base>
-          <Tooltip
-            data-testid="test-id"
-            renderTrigger={props => {
-              return <p {...props} />;
-            }}
-          />
-        </Base>
-      );
-      const pattern = /id-\d+/;
-      expect(container.querySelector('p')).toBeInTheDocument();
-
-      expect(
-        pattern.test(
-          container.querySelector('p').getAttribute('aria-describedby')
-        )
-      ).toBeTruthy();
-    });
-    it('trigger element has generated aria-owns', () => {
-      const { container } = render(
-        <Base>
-          <Tooltip
-            data-testid="test-id"
-            renderTrigger={props => {
-              return <p {...props} />;
-            }}
-          />
-        </Base>
-      );
-      const pattern = /id-\d+/;
-      expect(container.querySelector('p')).toBeInTheDocument();
-      expect(
-        pattern.test(container.querySelector('p').getAttribute('aria-owns'))
-      ).toBeTruthy();
-    });
-    it('trigger element has data-tooltip-trigger set to true', () => {
-      const { container } = render(
-        <Base>
-          <Tooltip
-            data-testid="test-id"
-            renderTrigger={props => {
-              return <p {...props} />;
-            }}
-          />
-        </Base>
-      );
-      expect(container.querySelector('p')).toBeInTheDocument();
-      expect(
-        container.querySelector('p').getAttribute('data-tooltip-trigger')
-      ).toBe('true');
-    });
-  });
-  describe('fires events', () => {
-    let tooltip;
-
-    beforeEach(() => {
-      tooltip = render(
-        <Base>
-          <Tooltip data-testid="test-id" />
-        </Base>
-      );
-    });
-    it('button has class is-active when focused', () => {
-      const { container } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      expect(container.querySelector('button')).toHaveClass('is-active');
-    });
-
-    it('tooltip has class is-visible when button is focused', () => {
-      const { container, getByTestId } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      expect(getByTestId('test-id')).toHaveClass('is-visible');
-    });
-    it('button has class is-active when mouse enters button', () => {
-      const { container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      expect(container.querySelector('button')).toHaveClass('is-active');
-    });
-
-    it('tooltip has class is-visible when mouse enters button', () => {
-      const { container, getByTestId } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      expect(getByTestId('test-id')).toHaveClass('is-visible');
-    });
-    it('has hidden attribute set to false after mouse enters button', () => {
-      const { getByTestId, container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      expect(getByTestId('test-id').hidden).toBe(false);
-    });
-    it('has hidden attribute set to false after button focus', () => {
-      const { getByTestId, container } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      expect(getByTestId('test-id').hidden).toBe(false);
-    });
-    it('button losses class is-active after it losses focus', () => {
-      const { container } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      fireEvent.blur(container.querySelector('button'));
-      expect(container.querySelector('button')).not.toHaveClass('is-active');
-    });
-
-    it('tooltip losses class is-visible after button losses focus', () => {
-      const { container, getByTestId } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      fireEvent.blur(container.querySelector('button'));
-      expect(getByTestId('test-id')).not.toHaveClass('is-visible');
-    });
-    it('button losses class is-active after mouse leave event', () => {
-      const { container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      fireEvent.mouseLeave(container.querySelector('button'));
-      expect(container.querySelector('button')).not.toHaveClass('is-active');
-    });
-
-    it('tooltip losses class is-visible after mouse leaves button', () => {
-      const { container, getByTestId } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      fireEvent.mouseLeave(container.querySelector('button'));
-      expect(getByTestId('test-id')).not.toHaveClass('is-visible');
-    });
-    it('has hidden attribute set to true after mouse leaves button', () => {
-      const { getByTestId, container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector('button'));
-      fireEvent.mouseLeave(container.querySelector('button'));
-      expect(getByTestId('test-id').hidden).not.toBe(true);
-    });
-    it('has hidden attribute set to true after button blur', () => {
-      const { getByTestId, container } = tooltip;
-      fireEvent.focus(container.querySelector('button'));
-      fireEvent.blur(container.querySelector('button'));
-      expect(getByTestId('test-id').hidden).not.toBe(true);
-    });
-  });
-});

package/src/components/Typography/docs/BodyCopy.mdx

@@ -1,95 +0,0 @@
-import { Preview } from '../../../styleguide/';
-
-import Table from '../../Table';
-
-# Body copy
-
-Use class names `.small`, `.large` to scale inline text.
-
-<Preview>
-  <p className="small">This is small text</p>
-  <p>This is default text</p>
-  <p className="large">This is large text</p>
-</Preview>
-
-<Table
-  caption="Body copy font sizes and line heights. Displayed values are calculated from relative units when default font size is set to 16px."
-  headers={[
-    {
-      key: 'selector',
-      label: 'Selector',
-    },
-    {
-      key: 'property',
-      label: 'Property',
-    },
-    {
-      key: 'value',
-      label: 'Value',
-    },
-  ]}
-  rows={[
-    {
-      selector: {
-        tag: 'th',
-        scope: 'row',
-        rowSpan: '2',
-        value: <inlineCode>.small</inlineCode>,
-      },
-      property: 'font-size',
-      value: '14px',
-    },
-    {
-      property: 'line-height',
-      value: '18px',
-    },
-    {
-      selector: {
-        tag: 'th',
-        scope: 'row',
-        rowSpan: '2',
-        value: <inlineCode>*</inlineCode>,
-      },
-      property: 'font-size',
-      value: '16px',
-    },
-    {
-      property: 'line-height',
-      value: '20px',
-    },
-    {
-      selector: {
-        tag: 'th',
-        scope: 'row',
-        rowSpan: '2',
-        value: <inlineCode>.large</inlineCode>,
-      },
-      property: 'font-size',
-      value: '18px',
-    },
-    {
-      property: 'line-height',
-      value: '22px',
-    },
-  ]}
-/>
-
-## Line length
-
-Line lengths should be managed to represent the correct look of text. Limit the extent of line lengths. Shorter line lengths are on brand and more readable.
-
-1. Up to 40 characters per line for short lines of text or short paragraphs.
-2. Up to 55 characters per line for body text.
-3. More than 80 characters is too long.
-
-Default length is set to 30em, which equals roughly to 55 characters.
-
-This can be adjusted with [text line length and wrapping utilities](/utilities/text#line-length-and-wrapping)
-
-<Preview>
-  <p>
-    Digital services are a key enabler for today’s social and economic
-    development. Orange is a key player in this progress by providing telecoms
-    infrastructure in more than 220 countries and territories around the world.
-  </p>
-</Preview>

package/src/components/Typography/docs/DisplayHeadings.mdx

@@ -1,124 +0,0 @@
-import { Preview } from '../../../styleguide/';
-
-# Display headings
-
-Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
-
-<Preview>
-  {[1, 2, 3, 4, 'hero'].map(headingLevel => {
-    const displayClass = `display-${headingLevel}`;
-    return (
-      <h1 key={displayClass} className={displayClass}>
-        .{displayClass}: 401 Koní bežalo vôkol mäsového kombinátu
-      </h1>
-    );
-  })}
-</Preview>
-<table className="table">
-  <caption>
-    Display headings font sizes and line heights. Displayed values are
-    calculated from relative units when default font size is set to 16px.
-  </caption>
-  <thead>
-    <tr>
-      <th rowSpan="2">Selector</th>
-      <th rowSpan="2">Property</th>
-      <th colSpan="2">Viewport size</th>
-    </tr>
-    <tr>
-      <th>default</th>
-      <th>md</th>
-      <th>xl</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row" rowSpan="3">
-        <inlineCode>.display-1</inlineCode>
-      </th>
-      <td>font-size</td>
-      <td>30px</td>
-      <td>50px</td>
-      <td>60px</td>
-    </tr>
-    <tr>
-      <td>line-height</td>
-      <td>33px</td>
-      <td>55px</td>
-      <td>66px</td>
-    </tr>
-    <tr>
-      <td>max-width</td>
-      <td>520px</td>
-      <td>700px</td>
-      <td>950px</td>
-    </tr>
-    <tr>
-      <th scope="row" rowSpan="3">
-        <inlineCode>.display-2</inlineCode>
-      </th>
-      <td>font-size</td>
-      <td>28px</td>
-      <td>40px</td>
-      <td>50px</td>
-    </tr>
-    <tr>
-      <td>line-height</td>
-      <td>31px</td>
-      <td>44px</td>
-      <td>55px</td>
-    </tr>
-    <tr>
-      <td>max-width</td>
-      <td>520px</td>
-      <td>650px</td>
-      <td>850px</td>
-    </tr>
-    <tr>
-      <th scope="row" rowSpan="3">
-        <inlineCode>.display-3</inlineCode>
-      </th>
-      <td>font-size</td>
-      <td>26px</td>
-      <td>34px</td>
-      <td>40px</td>
-    </tr>
-    <tr>
-      <td>line-height</td>
-      <td>29px</td>
-      <td>37px</td>
-      <td>44px</td>
-    </tr>
-    <tr>
-      <td>max-width</td>
-      <td>480px</td>
-      <td>580px</td>
-      <td>750px</td>
-    </tr>
-    <tr>
-      <th scope="row" rowSpan="3">
-        <inlineCode>.display-4</inlineCode>
-      </th>
-      <td>font-size</td>
-      <td>24px</td>
-      <td>30px</td>
-      <td>34px</td>
-    </tr>
-    <tr>
-      <td>line-height</td>
-      <td>26px</td>
-      <td>33px</td>
-      <td>37px</td>
-    </tr>
-    <tr>
-      <td>max-width</td>
-      <td>480px</td>
-      <td>520px</td>
-      <td>700px</td>
-    </tr>
-  </tbody>
-</table>
-
-## Text utilities
-
-If you need change style, alignment, color or wrapping of text use [text utilities](/utilities/text/).