@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.2

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

@@ -0,0 +1,96 @@
+/**
+ * @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.conformance.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Pagination } from '../Pagination.tsx';
+
+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

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

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

@@ -0,0 +1,12 @@
+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/Progress/Progress.mdx

@@ -0,0 +1,119 @@
+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/Progress.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import cx from "classnames";
+
+export interface ProgressProps {
+  /** Color of the indicator */
+  color?: "orange" | "green" | "yellow" | "red" | "blue";
+  /** Provides clear instruction on what the horizontal bar represents */
+  label: React.ReactNode;
+  /** Textual representation of the indicator */
+  value: React.ReactNode;
+  /** Width of the progress indicator where 0 = empty, 1 = full */
+  width?: number;
+  className?: string;
+  children?: React.ReactNode;
+  colorMode?: "light" | "dark";
+}
+
+const defaultProps = {
+  color: "orange" as const,
+};
+
+const CLASS_ROOT = "progress"; // class is defined by boosted
+
+export const Progress: React.FC<ProgressProps> = ({
+  color = defaultProps.color,
+  label,
+  value,
+  width,
+  className,
+  colorMode,
+  ...other
+}) => {
+  return (
+    <div
+      className={cx(
+        CLASS_ROOT,
+        {
+          "is-dark": colorMode === "dark",
+          "is-light": colorMode === "light",
+        },
+        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 ? width * 100 : 0}%` }}
+        />
+      </div>
+      <div className={`${CLASS_ROOT}__value`}>{value}</div>
+    </div>
+  );
+};
+
+Progress.displayName = "Progress";

package/src/components/Progress/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Progress } from "./Progress";

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

@@ -0,0 +1,19 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+
+$layout: (
+  margin-bottom: space.get(),
+);
+
+$bar: (
+  height: space.get('small'),
+  background-color: var(--color-fill-moderate),
+);
+
+$colors: (
+  default: var(--color-surface-secondary),
+  green: var(--color-fill-accent2),
+  red: var(--color-border-negative),
+  blue: var(--color-border-information),
+  yellow: var(--color-border-warning),
+);

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

@@ -0,0 +1,40 @@
+@use "sass:map";
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/generate';
+@use '../../../styles/typography/config' as typography;
+@use './config';
+
+@mixin base {
+  @include generate.css-map(config.$layout);
+}
+
+@mixin bar {
+  position: relative;
+  margin-bottom: space.get('xsmall');
+
+  @include generate.css-map(config.$bar);
+}
+
+@mixin label {
+  margin-bottom: space.get('xsmall');
+  font-weight: bold;
+}
+
+@mixin value {
+  font-weight: bold;
+
+  @include generate.css-map(typography.$body-text, 'small');
+}
+
+@mixin indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  max-width: 100%;
+  height: 100%;
+}
+
+@mixin indicator-color($color) {
+  background-color: map.get(config.$colors, $color);
+}

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

@@ -0,0 +1,31 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .progress {
+    @include mixins.base;
+
+    &__bar {
+      @include mixins.bar;
+    }
+
+    &__label {
+      @include mixins.label;
+    }
+
+    &__value {
+      @include mixins.value;
+    }
+
+    &__indicator {
+      @include mixins.indicator;
+
+      @each $name, $value in config.$colors {
+        &#{generate.variant-name($name)} {
+          @include mixins.indicator-color($name);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Progress } from '../';
+
+const example = (
+  <>
+    <Progress
+      label="Zdieľanie dát: zostavajuce predplatené"
+      value="4.1 GB / 7.9 GB"
+      width={0.8}
+    />
+  </>
+);
+
+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();
+});