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

package/src/components/Pagination/helpers.js

@@ -1,47 +0,0 @@
-export function getItemState({ activeIndex, items, isCompact, index }) {
-  const isFirst = index === 0;
-  const isSecond = index === 1;
-  const isCurrent = index === activeIndex;
-  const isSecondFromEnd = index === items.length - 2;
-  const isLast = index === items.length - 1;
-  const isSiblingActive =
-    activeIndex === index - 1 || activeIndex === index + 1;
-
-  const maxVisible = 5; // must be odd number to work properly
-  const isCloseToCurrent =
-    (index < activeIndex + Math.floor(maxVisible / 2) && index > activeIndex) ||
-    (index > activeIndex - Math.floor(maxVisible / 2) && index < activeIndex);
-
-  const isCloseToFirst = index < maxVisible - 1 && activeIndex < maxVisible - 2;
-  const isCloseToLast =
-    index > items.length - maxVisible &&
-    activeIndex > items.length - (maxVisible - 1);
-
-  const isHidden = !(
-    isCloseToCurrent ||
-    isCloseToFirst ||
-    isCloseToLast ||
-    isFirst ||
-    isCurrent ||
-    isLast
-  );
-
-  const showSeparator = (isSecond && isHidden) || (isSecondFromEnd && isHidden);
-
-  const hasIcon =
-    isCompact &&
-    !isCurrent &&
-    (isFirst || isLast) &&
-    !isSiblingActive &&
-    !(items.length <= maxVisible);
-
-  return {
-    isFirst,
-    isHidden,
-    isLast,
-    isSecond,
-    isSecondFromEnd,
-    hasIcon,
-    showSeparator,
-  };
-}

package/src/components/Pagination/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Pagination';

package/src/components/Pagination/styles/mixins.scss

@@ -1,38 +0,0 @@
-@use '../../Button/styles/style';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/breakpoint';
-@use '../../Typography/styles/mixins' as typoMixins;
-
-@mixin base() {
-  @include typoMixins.list-unstyled();
-
-  display: flex;
-  max-width: none;
-  margin-bottom: space.get();
-}
-
-@mixin separator() {
-  font-weight: bold;
-  height: 50%;
-  align-self: center;
-}
-
-@mixin item() {
-  margin-right: space.get('small');
-  margin-bottom: 0;
-}
-
-@mixin last-item() {
-  margin-right: 0;
-}
-
-@mixin link() {
-  margin-bottom: 0;
-}
-
-@mixin link-active() {
-  color: color.$white;
-  background-color: color.$black;
-  border-color: color.$black;
-}

package/src/components/Pagination/styles/style.scss

@@ -1,27 +0,0 @@
-
-@use './mixins';
-
-.pagination {
-  @include mixins.base;
-
-  &__separator {
-    @include mixins.separator;
-  }
-
-  &__item,
-  &__separator {
-    @include mixins.item;
-  }
-  
-  &__item:last-child {
-    @include mixins.last-item;
-  }
-
-  &__link {
-    @include mixins.link;
-
-    &--active {
-      @include mixins.link-active;
-    }
-  }
-}

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 Item from '../Item.js';
-
-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.conformance.test.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Pagination from '../';
-
-const getItems = (count = 10, current = Math.ceil(count / 2)) =>
-  [
-    ...Array(count)
-      .fill('')
-      .map((_, i) => i + 1),
-  ].map(n => ({
-    label: `${n}`,
-    ariaLabel: `Strana ${n}`,
-    href: `/?page=${n}`,
-    ...(current === n ? { isActive: true } : {}),
-  }));
-
-const example = (
-  <>
-    <Pagination label="Pagination 1" items={getItems(10)} />
-    <Pagination label="Pagination 2" items={getItems(10, 3)} />
-    <Pagination label="Pagination 3" items={getItems(10)} />
-    <Pagination label="Pagination 4" items={getItems(10, 9)} />
-    <Pagination label="Pagination 5" items={getItems(10, 1)} isCompact />
-    <Pagination label="Pagination 6" items={getItems(10, 2)} isCompact />
-    <Pagination label="Pagination 7" items={getItems(10)} isCompact />
-    <Pagination label="Pagination 8" items={getItems(10, 9)} isCompact />
-    <Pagination label="Pagination 9" items={getItems(10, 10)} isCompact />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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.js';
-
-//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.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-const CLASS_ROOT = 'pill';
-
-const Pill = ({ className, children, ...other }) => (
-  <span className={cx(CLASS_ROOT, className)} {...other}>
-    {children}
-  </span>
-);
-
-Pill.displayName = 'Pill';
-
-export default Pill;

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/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Pill';

package/src/components/Pill/styles/config.scss

@@ -1,8 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
-
-$base: (
-  background-color: color.$black,
-  color: color.$white,
-  font-weight: bold,
-);

package/src/components/Pill/styles/mixins.scss

@@ -1,19 +0,0 @@
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
-@use './config';
-
-@mixin base($config: config.$base) {
-  display: inline-flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  min-width: 1.22222em;
-  min-height: 1.22222em;
-  padding: 0 0.2em;
-  border-radius: 999rem;
-  font-size: 0.9em;
-  line-height: inherit;
-  vertical-align: text-bottom;
-
-  @include generate.css-map($config);
-}

package/src/components/Pill/styles/style.scss

@@ -1,7 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './config';
-@use './mixins';
-
-.pill {
-  @include mixins.base();
-}

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Pill from '../';
-
-const example = (
-  <>
-    <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>
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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

@@ -1,39 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-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('passes other props', () => {
-      const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
-      expect(getByTestId('test')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Progress/Progress.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { number, node, oneOf } from 'prop-types';
-import cx from 'classnames';
-
-export const propTypes = {
-  /** Color of the indicator */
-  color: oneOf(['orange', 'green', 'yellow', 'red', 'blue']),
-  /** Provides clear instruction on what the horizontal bar represents */
-  label: node.isRequired,
-  /** Textual representation of the indicator */
-  value: node.isRequired,
-  /** Width of the progress indicator where 0 = empty, 1 = full */
-  width: number,
-};
-
-const defaultProps = {
-  color: 'orange',
-};
-
-const CLASS_ROOT = 'progress'; // class is defined by boosted
-
-const Progress = ({
-  color,
-  label,
-  value,
-  width,
-  className,
-  children,
-  ...other
-}) => {
-  return (
-    <div className={cx(CLASS_ROOT, className)} {...other}>
-      <div className={`${CLASS_ROOT}__label`}>{label}</div>
-      <div className={`${CLASS_ROOT}__bar`}>
-        <div
-          className={cx(`${CLASS_ROOT}__indicator`, {
-            [`${CLASS_ROOT}__indicator--${color}`]:
-              color !== defaultProps.color,
-          })}
-          style={{ width: `${width * 100}%` }}
-        />
-      </div>
-      <div className={`${CLASS_ROOT}__value`}>{value}</div>
-    </div>
-  );
-};
-
-Progress.displayName = 'Progress';
-Progress.propTypes = propTypes;
-Progress.defaultProps = defaultProps;
-
-export default Progress;