@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Pagination/tests/Item.unit.test.js

@@ -1,96 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { PaginationItem as Item } from '../PaginationItem.tsx';
-
-describe('rendering Item', () => {
-  describe('initial state', () => {
-    it('has default class pagination__item', () => {
-      const { container } = render(<Item />);
-      expect(container.querySelector('li')).toHaveClass('pagination__item');
-    });
-
-    it('has default class pagination__link', () => {
-      const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('pagination__link');
-    });
-
-    it('has default class btn', () => {
-      const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('btn');
-    });
-
-    it('has default class btn--square', () => {
-      const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('btn--square');
-    });
-  });
-
-  describe('passed props', () => {
-    it('passes other props', () => {
-      const { getByTestId } = render(<Item data-testid="test" />);
-      expect(getByTestId('test')).toBeInTheDocument();
-    });
-
-    it('has link role when href is set', () => {
-      const { getByRole } = render(<Item href="/" />);
-      expect(getByRole('link')).toBeInTheDocument();
-    });
-
-    it('list item has additional class when className is set', () => {
-      const { container } = render(<Item className="test-class" />);
-      expect(container.querySelector('li')).toHaveClass('test-class');
-    });
-
-    it('anchor has pagination__link--active class when isActive is set to true', () => {
-      const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a')).toHaveClass(
-        'pagination__link--active'
-      );
-    });
-
-    it('anchor attribute has pagination__link--active class when isActive is set to true', () => {
-      const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a')).toHaveClass(
-        'pagination__link--active'
-      );
-    });
-
-    it('anchor shows label when hasIcon is falsy and label is truthy string', () => {
-      const { getByText } = render(<Item label="test-label" />);
-      expect(getByText('test-label')).toBeInTheDocument();
-    });
-
-    it('anchors aria-current attribute is set to "page" when isActive is true', () => {
-      const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a').getAttribute('aria-current')).toBe(
-        'page'
-      );
-    });
-
-    it('anchors aria-label attribute is set to ariaLabel value', () => {
-      const { container } = render(<Item ariaLabel="test-label" />);
-      expect(container.querySelector('a').getAttribute('aria-label')).toBe(
-        'test-label'
-      );
-    });
-
-    it('first item with icon has a chevron-start icon', () => {
-      const { container } = render(<Item hasIcon={true} isFirst={true} />);
-      expect(container.querySelector('use').getAttribute('xlink:href')).toBe(
-        '/sprite.svg#chevron-start'
-      );
-    });
-
-    it('last item with icon has a chevron-end icon', () => {
-      const { container } = render(<Item hasIcon={true} isLast={true} />);
-      expect(container.querySelector('use').getAttribute('xlink:href')).toBe(
-        '/sprite.svg#chevron-end'
-      );
-    });
-  });
-});

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

@@ -1,108 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Pagination } from '../Pagination.tsx';
-
-//items array is required
-describe('rendering Pagination', () => {
-  describe('initial state', () => {
-    it('has default class pagination', () => {
-      const { getByTestId } = render(
-        <Pagination items={[]} data-testid="test-id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('pagination');
-    });
-  });
-
-  describe('passed props', () => {
-    const createArray = (length, activeItemNum = 1) => {
-      return Array(length)
-        .fill()
-        .map((_, i) => ({
-          href: `/test${i + 1}`,
-          label: `item${i + 1}`,
-          isActive: activeItemNum === i + 1,
-        }));
-    };
-
-    it('has label when set', () => {
-      const { getByLabelText } = render(
-        <Pagination items={[]} label="test-label" />
-      );
-      expect(getByLabelText('test-label')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Pagination items={[]} data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('pagination');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('renders items when items array is set', () => {
-      const itemsArr = createArray(3);
-      const { container } = render(<Pagination items={itemsArr} />);
-      expect(container.querySelectorAll('li').length).toBe(3);
-    });
-    it('pagination items have correct href attribute', () => {
-      const itemsArr = createArray(3);
-      const { container } = render(<Pagination items={itemsArr} />);
-      const items = container.querySelectorAll('li');
-      for (let i in itemsArr) {
-        expect(items[i].querySelector('a').getAttribute('href')).toBe(
-          `/test${parseInt(i) + 1}`
-        );
-      }
-    });
-    it('pagination items have correct label', () => {
-      const itemsArr = createArray(3);
-      const { container } = render(<Pagination items={itemsArr} />);
-      const items = container.querySelectorAll('li');
-      for (let i in itemsArr) {
-        expect(items[i]).toHaveTextContent(`item${parseInt(i) + 1}`);
-      }
-    });
-
-    for (let i = 1; i <= 10; i++) {
-      it('first and last item has icon/label based on current position when isCompact is set', () => {
-        const itemsArr = createArray(10, i);
-        const { container } = render(<Pagination items={itemsArr} isCompact />);
-        const queryItems = container.querySelectorAll('li');
-        if (i < 3) {
-          expect(queryItems[0]).toHaveTextContent('item1');
-          expect(
-            queryItems[9].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-end');
-        } else if (i <= 8) {
-          expect(
-            queryItems[0].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-start');
-          expect(
-            queryItems[9].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-end');
-        } else {
-          expect(queryItems[9]).toHaveTextContent('item10');
-          expect(
-            queryItems[0].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-start');
-        }
-      });
-    }
-    for (let i = 1; i <= 8; i++) {
-      it('renders separator/separators when isCompact is not set', () => {
-        const itemsArr = createArray(10, i);
-        const { container } = render(<Pagination items={itemsArr} />);
-        const sepNum = i <= 3 || i >= 8 ? 1 : 2;
-        expect(
-          container.getElementsByClassName('pagination__separator').length
-        ).toBe(sepNum);
-      });
-    }
-    it('separator in not rendered when isCompact is set', () => {
-      const itemsArr = createArray(10, 5);
-      const { container } = render(<Pagination items={itemsArr} isCompact />);
-      expect(
-        container.getElementsByClassName('pagination__separator').length
-      ).toBe(0);
-    });
-  });
-});

package/src/components/Pagination/tests/Separator.unit.test.js

@@ -1,25 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Separator from '../Separator';
-
-describe('rendering Separator', () => {
-  describe('initial state', () => {
-    it('has default class pagination__separator', () => {
-      const { getByTestId } = render(<Separator data-testid="separator" />);
-      expect(getByTestId('separator')).toHaveClass('pagination__separator');
-    });
-  });
-  describe('rendering Item', () => {
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Separator data-testid="separator" className="test-class" />
-      );
-      expect(getByTestId('separator')).toHaveClass('test-class');
-    });
-  });
-});

package/src/components/Pagination/tests/utils.js

@@ -1,12 +0,0 @@
-export const getItems = (count = 10, current = 0) =>
-  [
-    ...Array(count)
-      .fill('')
-      .map((_, i) => i + 1),
-  ].map(n => ({
-    label: `${n}`,
-    ariaLabel: `Strana ${n}`,
-    href: `/?page=${n}`,
-    key: n.toString(),
-    ...(current === n ? { isActive: true } : {}),
-  }));

package/src/components/Pill/Pill.mdx

@@ -1,41 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from '../Icon';
-
-import Pill from './Pill';
-
-# Pill
-
-Put numbers in it.
-
-<Preview>
-  <Pill>1</Pill>
-</Preview>
-
-## Sizes
-
-Pill size is determined by font size inherited from ancestor elements.
-
-<Preview>
-  <h1>This many: <Pill>1</Pill></h1>
-  <h2>I have more: <Pill>2</Pill></h2>
-  <p><Pill className="large">3</Pill></p>
-  <p>Max 3 digits please. <Pill>123</Pill></p>
-</Preview>
-
-## Matching size with icons
-
-While pill size is determined by typography, [icons have fixes sizes](/components/icon#sizes), icon images usually contain a bit of whitespace around the paths themselves. This makes it nearly impossible to match icon and pill sizes, especially when the icon path has an oval shape.
-
-In case there is no way to alter the design, you might want to reuse icon sizing classes. Note that due to whitespace in the icon, the sizes will never match perfectly. Some icons work better than others. Icons with circular shape don't work well, as the size difference becomes more apparent.
-
-<Preview>
-  <Pill className="icon--large">1</Pill>{' '}<Icon name="fast_delivery" size="large" />
-  <br /><br />
-  <Pill className="icon--large">2</Pill>{' '}<Icon name="funny" size="large" />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Pill />" component={Pill} />

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

@@ -1,108 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { Pill } from "../";
-
-describe("rendering Pill", () => {
-  describe("initial state", () => {
-    it("has default className pill", () => {
-      const { getByTestId } = render(<Pill data-testid="test-id" />);
-      expect(getByTestId("test-id")).toHaveClass("pill");
-    });
-  });
-
-  describe("passed props", () => {
-    it("renders children", () => {
-      const { getByText } = render(<Pill>pill</Pill>);
-      expect(getByText("pill")).toBeInTheDocument();
-    });
-
-    it("has additional class when className is set", () => {
-      const { getByTestId } = render(
-        <Pill className="test-class" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("pill");
-      expect(getByTestId("test-id")).toHaveClass("test-class");
-    });
-
-    it("has size class when size prop is set", () => {
-      const { getByTestId } = render(
-        <Pill size="large" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("pill--large");
-    });
-
-    it("has default black styling without modifier", () => {
-      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
-      expect(getByTestId("test-id")).toHaveClass("pill");
-      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
-    });
-
-    it("has white class when color is white", () => {
-      const { getByTestId } = render(
-        <Pill color="white" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("pill--white");
-    });
-
-    it("has gray class when color is gray", () => {
-      const { getByTestId } = render(
-        <Pill color="gray" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("pill--gray");
-    });
-
-    it("has transparent class when color is transparent", () => {
-      const { getByTestId } = render(
-        <Pill color="transparent" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("pill--transparent");
-    });
-
-    it("supports all available colors", () => {
-      const colors = ["white", "gray", "transparent"];
-
-      colors.forEach((color) => {
-        const { getByTestId } = render(
-          <Pill color={color} data-testid={`test-${color}`}>
-            {color}
-          </Pill>,
-        );
-
-        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
-      });
-    });
-
-    it("has is-light class when colorScheme is light", () => {
-      const { getByTestId } = render(
-        <Pill colorScheme="light" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-    });
-
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-    });
-
-    it("passes other props", () => {
-      const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
-      expect(getByTestId("test")).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Progress/Progress.mdx

@@ -1,119 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import Preview from '../../styleguide/Preview';
-
-import Progress from './';
-import Bar, { BarItem } from '../Bar';
-import Icon from '../Icon';
-import { InfoTooltip } from '../Tooltip';
-
-# Progress
-
-Horizontal indicator of a task progress or scalar value.
-
-## Label and value
-
-Authors are required to provide a clear, explanatory Label and textual Value to ensure all users can access the displayed information.
-
-<Preview>
-  <Progress
-    label="Zdieľanie dát: zostavajuce predplatené"
-    value="4.1 GB / 7.9 GB"
-    width={0.8}
-  />
-</Preview>
-
-## Variants
-
-<Preview>
-  {['orange', 'green', 'red', 'blue', 'yellow'].map(color => {
-    const randomWidth = Math.round(Math.random() * 10000) / 10000;
-    return (
-      <Progress
-        label="Example label"
-        key={color}
-        color={color}
-        width={randomWidth}
-        value={`${randomWidth} / 1`}
-      />
-    );
-  })}
-</Preview>
-
-## Complex description of Progress bar
-
-<Preview>
-  <Progress
-    label={
-      <Bar className="justify-content-space-between mb-none" space="small">
-        <BarItem canShrink>
-          <Bar align="start" className="mb-none" space="small" canWrap={false}>
-            <BarItem>
-              <Icon name="data-traffic" />
-            </BarItem>
-            <BarItem canShrink>
-              <p className="text-nowrap mb-none">
-                <span className="text-wrap">Label with icon and tooltip</span>
-                &nbsp;
-                <InfoTooltip>
-                  Tooltip should always be next to label, so we use combination
-                  of .text-nowrap and .text-wrap classes.
-                </InfoTooltip>
-              </p>
-            </BarItem>
-          </Bar>
-        </BarItem>
-        <BarItem>
-          <Bar className="mb-none" space="small">
-            <BarItem>
-              <p className="reset-font-weight mb-none">breaks to left</p>
-            </BarItem>
-            <BarItem>
-              <Icon color="danger" name="error-severe" size="medium" />
-            </BarItem>
-          </Bar>
-        </BarItem>
-      </Bar>
-    }
-    color="red"
-    width={0.4}
-    value={
-      <>
-        <p className="mb-small">
-          <span className="reset-font-weight">Avaible:</span> 4
-          <span className="reset-font-weight"> / 8 GB</span>
-        </p>
-        <Bar align="start" className="mb-none" space="small" canWrap={false}>
-          <BarItem>
-            <Icon name="info" />
-          </BarItem>
-          <BarItem canShrink>
-            <p className="mb-none">
-              <span className="reset-font-weight">
-                Yes we need to use another bar element in label, so icon and
-                text stays on same line. Also this text in
-              </span>{' '}
-              paragraph{' '}
-              <span className="reset-font-weight">
-                {' '}
-                so it has set max-width. If you have label with longer text, you
-                should also use paragraph in there. And one last last think - yes
-                we need to have that many bars in label, so the text doesnt break
-                to newline without icon.
-              </span>
-            </p>
-          </BarItem>
-        </Bar>
-      </>
-    }
-  />
-</Preview>
-
-## Accessibility
-
-Progress component can be used with `role="progressbar"` when it's needed to "indicate that the user's request has been received and the application is making progress toward completing the requested action." [role="progressbar"](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
-
-It's not recommended to use `role="meter"` when the component should represent a scalar value as it's screenreader support is poor.
-
-Since label and textual value are required when using this component, all relevant infomation is provided in an understandable way, not relying on visual representation only. [Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.](https://www.w3.org/TR/WCAG21/#use-of-color)
-
-<ComponentDocs title="<Progress />" component={Progress} />

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

@@ -1,108 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Progress } from '../Progress';
-
-// value and label props is required
-describe('rendering Progress', () => {
-  describe('initial state', () => {
-    it('has default class progress', () => {
-      const { getByTestId } = render(
-        <Progress value="test-value" label="test-label" data-testid="test-id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('progress');
-    });
-    it('has default class progress__label', () => {
-      const { container } = render(
-        <Progress value="test-value" label="test-label" />
-      );
-      expect(container.getElementsByClassName('progress__label').length).toBe(
-        1
-      );
-    });
-    it('has default class progress__bar', () => {
-      const { container } = render(
-        <Progress value="test-value" label="test-label" />
-      );
-      expect(container.getElementsByClassName('progress__bar').length).toBe(1);
-    });
-    it('has default class progress__indicator', () => {
-      const { container } = render(
-        <Progress value="test-value" label="test-label" />
-      );
-      expect(
-        container.getElementsByClassName('progress__indicator').length
-      ).toBe(1);
-    });
-    it('has default class progress__value', () => {
-      const { container } = render(
-        <Progress value="test-value" label="test-label" />
-      );
-      expect(container.getElementsByClassName('progress__value').length).toBe(
-        1
-      );
-    });
-  });
-
-  describe('passed props', () => {
-    it('renders value', () => {
-      const { getByText } = render(
-        <Progress value="test-value" label="test-label">
-          test-value
-        </Progress>
-      );
-      expect(getByText('test-value')).toBeInTheDocument();
-    });
-    it('renders label', () => {
-      const { getByText } = render(
-        <Progress value="test-value" label="test-label">
-          test-label
-        </Progress>
-      );
-      expect(getByText('test-label')).toBeInTheDocument();
-    });
-
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Progress
-          value="test-value"
-          label="test-label"
-          data-testid="test-id"
-          className="test-class"
-        />
-      );
-      expect(getByTestId('test-id')).toHaveClass('progress');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-
-    ['green', 'yellow', 'red', 'blue'].forEach(color => {
-      it(`has progress__indicator--${color} class when color is ${color}`, () => {
-        const { container } = render(
-          <Progress
-            data-testid="test-id"
-            color={color}
-            value="test-value"
-            label="test-label"
-          />
-        );
-        expect(
-          container.getElementsByClassName(`progress__indicator--${color}`)
-            .length
-        ).toBe(1);
-      });
-    });
-    it(`doesnt have class progress__indicator--orange class when color is orange`, () => {
-      const { container } = render(
-        <Progress
-          data-testid="test-id"
-          color={'orange'}
-          value="test-value"
-          label="test-label"
-        />
-      );
-      expect(
-        container.getElementsByClassName('progress__indicator--orange').length
-      ).toBe(0);
-    });
-  });
-});