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

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

@@ -0,0 +1,99 @@
+@use "sass:map";
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/generate';
+@use '../../../styles/typography/mixins' as typoMixins;
+@use './config';
+
+@mixin list-base($border: config.$border) {
+  @include typoMixins.list-unstyled;
+
+  margin-bottom: space.get();
+
+  > * {
+    border-top: $border;
+
+    &:last-child {
+      border-bottom: $border;
+    }
+  }
+}
+
+@mixin list-spacious {
+  > *:first-child {
+    border-top-width: 0;
+  }
+
+  > *:last-child {
+    border-bottom-width: 0;
+  }
+}
+
+@mixin item-base() {
+  position: relative;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  ul {
+    @include typoMixins.ul-list-base;
+  }
+}
+
+@mixin item-color($color, $palette: config.$color-palette) {
+  @include generate.css-map($palette, $color);
+}
+
+@mixin item-size($size, $sizes: config.$spacing) {
+  padding-top: map.get($sizes, $size);
+  padding-bottom: map.get($sizes, $size);
+}
+
+@mixin enclosed-item($spacing: config.$enclosed-spacing) {
+  padding-left: $spacing;
+  padding-right: $spacing;
+}
+
+@mixin control($config: config.$control-states) {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  text-align: left;
+
+  @include generate.css-map($config, 'default');
+
+  &:hover {
+    @include generate.css-map($config, 'hover');
+  }
+
+  &:focus {
+    @include generate.css-map($config, 'hover');
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin nested-enclosed {
+  &:not(:first-child) {
+    border-width: 1px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+@mixin indicator {
+  margin-left: auto;
+  flex-shrink: 0;
+  align-self: center;
+  margin-top: -2px;
+  margin-bottom: -2px;
+}

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

@@ -0,0 +1,48 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .list {
+    $this: &;
+    @include mixins.list-base();
+
+    &--spacious {
+      @include mixins.list-spacious();
+    }
+
+    &__item {
+      @include mixins.item-base();
+
+      #{$this}--enclosed > & {
+        @include mixins.enclosed-item();
+      }
+    }
+
+    @each $color, $value in config.$color-palette {
+      &#{generate.variant-name($color)} > &__item {
+        @include mixins.item-color($color);
+      }
+    }
+
+    @each $size, $value in config.$spacing {
+      &#{generate.variant-name($size)} > &__item {
+        @include mixins.item-size($size);
+      }
+    }
+
+    &__control {
+      @include mixins.control();
+    }
+
+    &__indicator {
+      @include mixins.indicator();
+    }
+
+    &--nested-enclosed {
+      > #{$this}__item {
+        @include mixins.nested-enclosed();
+      }
+    }
+  }
+}

package/src/components/List/tests/ClickableControl.unit.test.js

@@ -0,0 +1,100 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { ClickableControl } from "../ClickableControl";
+
+describe("rendering ClickableControl", () => {
+  describe("initial state", () => {
+    it("has default class list__control", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("list__control");
+    });
+    it("renders default element button", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("BUTTON");
+    });
+    it("element button has type button", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id").getAttribute("type")).toBe("button");
+    });
+    it("renders Icon with use element that has attribute xlinkhref=''", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      const use = getByTestId("test-id").querySelector("use");
+      expect(use).toBeInTheDocument();
+      expect(use.getAttribute("xlink:href")).toBe("/sprite.svg#chevron-right");
+    });
+    it("svg element has class list__indicator", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id").querySelector("svg")).toBeTruthy();
+      expect(getByTestId("test-id").querySelector("svg")).toHaveClass(
+        "list__indicator",
+      );
+    });
+    it("svg element has class icon--medium", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id").querySelector("svg")).toBeTruthy();
+      expect(getByTestId("test-id").querySelector("svg")).toHaveClass(
+        "icon--medium",
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id">test-child</ClickableControl>,
+      );
+      expect(getByTestId("test-id").textContent).toBe("test-child");
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders anchor element instead of button when href prop is passed", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" href="/test" />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("A");
+    });
+    it("anchor element renders children", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" href="/test">
+          test-child
+        </ClickableControl>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("A");
+      expect(getByTestId("test-id").textContent).toBe("test-child");
+    });
+    it("anchor element has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <ClickableControl
+          data-testid="test-id"
+          href="/test"
+          className="test-class"
+        />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("A");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("anchor element doesnt have type attribute", () => {
+      const { getByTestId } = render(
+        <ClickableControl data-testid="test-id" href="/test" />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("A");
+      expect(getByTestId("test-id").getAttribute("type")).toBeFalsy();
+    });
+  });
+});

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { List, ListItem } from '../';
+
+const items = [
+  'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  'Praesent commodo cursus magna, vel scelerisque nisl consectetur et.',
+];
+
+const defaultExample = (
+  <List>
+    {items.map(item => (
+      <ListItem key={item}>{item}</ListItem>
+    ))}
+  </List>
+);
+
+const clickableAnchor = (
+  <List>
+    {items.map(item => (
+      <ListItem key={item} controlProps={{ href: '#' }}>
+        {item}
+      </ListItem>
+    ))}
+  </List>
+);
+
+const clickableButton = (
+  <List>
+    {items.map(item => (
+      <ListItem key={item} controlProps={{}}>
+        {item}
+      </ListItem>
+    ))}
+  </List>
+);
+
+it('default is valid html', () => {
+  const { container } = render(defaultExample);
+  expect(container).toHTMLValidate();
+});
+
+it('default is accessible', async () => {
+  const { container } = render(defaultExample);
+  expect(await axe(container)).toHaveNoViolations();
+});
+
+it('clickableAnchor is valid html', () => {
+  const { container } = render(clickableAnchor);
+  expect(container).toHTMLValidate();
+});
+
+it('clickableAnchor is accessible', async () => {
+  const { container } = render(clickableAnchor);
+  expect(await axe(container)).toHaveNoViolations();
+});
+
+it('clickableButton is valid html', () => {
+  const { container } = render(clickableButton);
+  expect(container).toHTMLValidate();
+});
+
+it('clickableButton is accessible', async () => {
+  const { container } = render(clickableButton);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+
+import { List } from "../List";
+
+//conditional wrapper component inside List requires child to render
+describe("rendering List", () => {
+  describe("initial state", () => {
+    it("has default class list", () => {
+      const { getByTestId } = render(<List data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("list");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <List data-testid="test-id">test-child</List>,
+      );
+      expect(getByText("test-child")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <List data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("list");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has class list--enclosed when isEnclosed prop is passed", () => {
+      const { getByTestId } = render(<List data-testid="test-id" isEnclosed />);
+      expect(getByTestId("test-id")).toHaveClass("list");
+      expect(getByTestId("test-id")).toHaveClass("list--enclosed");
+    });
+    it("has class list--small when size prop is set to small", () => {
+      const { getByTestId } = render(
+        <List data-testid="test-id" size="small" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("list");
+      expect(getByTestId("test-id")).toHaveClass("list--small");
+    });
+    it("has class list--gray when color prop is set to gray", () => {
+      const { getByTestId } = render(
+        <List data-testid="test-id" color="gray" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("list");
+      expect(getByTestId("test-id")).toHaveClass("list--gray");
+    });
+  });
+});

package/src/components/List/tests/ListItem.unit.test.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { ListItem } from '../ListItem';
+
+const controlProps1 = {
+  className: 'test-class',
+};
+const controlProps2 = {
+  className: 'test-class',
+  href: 'test',
+};
+
+//conditional wrapper component inside ListItem requires child to render
+describe('rendering ListItem', () => {
+  describe('initial state', () => {
+    it('has default class list__item', () => {
+      const { getByTestId } = render(
+        <ListItem data-testid="test-id">test-child</ListItem>
+      );
+      expect(getByTestId('test-id')).toHaveClass('list__item');
+    });
+  });
+  describe('passed props', () => {
+    it('renders children', () => {
+      const { getByText } = render(
+        <ListItem data-testid="test-id">test-child</ListItem>
+      );
+      expect(getByText('test-child')).toBeInTheDocument();
+    });
+    it('has additional class when className is set', () => {
+      const { getByTestId } = render(
+        <ListItem data-testid="test-id" className="test-class">
+          test-child
+        </ListItem>
+      );
+      expect(getByTestId('test-id')).toHaveClass('list__item');
+      expect(getByTestId('test-id')).toHaveClass('test-class');
+    });
+    it('renders button with type button when controlProps without href is passed', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+      expect(getByRole('button').getAttribute('type')).toBe('button');
+    });
+    it('renders button with class from controlProps.className when passed', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+      expect(getByRole('button')).toHaveClass('test-class');
+    });
+    it('renders button with class from controlProps.className when passed', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+      expect(getByRole('button')).toHaveClass('test-class');
+    });
+    it('children are rendered inside button element when button is rendered', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+      expect(getByRole('button').textContent).toBe('test-child');
+    });
+    it('renders anchor without type when controlProps with href is passed', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('link')).toBeInTheDocument();
+      expect(getByRole('link').getAttribute('type')).toBeFalsy();
+    });
+    it('renders anchor with class from controlProps.className when passed', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('link')).toBeInTheDocument();
+      expect(getByRole('link')).toHaveClass('test-class');
+    });
+    it('children are rendered inside anchor element when anchor is rendered', () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>
+      );
+      expect(getByRole('link')).toBeInTheDocument();
+      expect(getByRole('link').textContent).toBe('test-child');
+    });
+  });
+});

package/src/components/Loader/Loader.mdx

@@ -0,0 +1,148 @@
+import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
+import cx from 'classnames';
+import { Preview } from '../../styleguide/';
+import Loader from './index';
+import Skeleton from '../Skeleton';
+import ToggleButton from '../../docs/utils/ToggleButton';
+
+export const messages = [
+  'Loading.',
+  'Loading..',
+  'Loading...',
+  'Still loading',
+  'Still loading.',
+  'Still loading..',
+  'Still loading...',
+];
+
+# Loader
+
+A simple loader that can cycle different loading messages.
+
+<Preview>
+  <Loader messages={messages}>Loading</Loader>
+  <hr />
+  <Loader size="large" messages={messages}>
+    Large loader
+  </Loader>
+</Preview>
+
+# Inverse colour
+
+Can be used on orange background [together with skeleton](/components/loader/#delay).
+
+<Preview code={<Loader messages={messages}>Loading</Loader>}>
+  <div className="card bg-orange">
+    <div className="card__section">
+      <Loader messages={messages}>Loading</Loader>
+    </div>
+  </div>
+</Preview>
+
+## Button/Loader switch
+
+Buttons and Loaders have the same height for smooth transition without page
+jitter. Loader has no spacing by default. If you are changing button for loader,
+loader needs the same spacing as button to prevent jittering.
+
+export const ToggleLoader = ({ id, size, margin }) => (
+  <div>
+    <ToggleButton
+      type="primary"
+      aria-controls={`loader-${id}`}
+      data-toggle={JSON.stringify([
+        { target: 'self', attribute: 'hidden' },
+        { target: `loader-${id}`, acrion: 'focus' },
+      ])}
+      size={size}
+    >
+      Show loader
+    </ToggleButton>
+    <Loader
+      id={`loader-${id}`}
+      hidden
+      size={size}
+      messages={messages}
+      className={margin}
+      tabIndex="-1"
+      aria-live="polite"
+    >
+      Loader
+    </Loader>
+  </div>
+);
+
+<Preview>
+  <ToggleLoader id="1" />
+  <ToggleLoader id="2" size="large" />
+  <ToggleLoader id="3" margin="mb-medium" />
+  <ToggleLoader id="4" size="large" margin="mb-medium" />
+</Preview>
+
+## Delay
+
+When loading takes more than 5 seconds Loader is shown together with Skeleton
+to inform the user that the section loading is still in progress.
+Use attribute `data-loader-delayed` to delay initialization and to remove
+`.hide` class which is also used.
+
+<Preview>
+  <Loader messages={['Načítavam.', 'Načítavam..', 'Načítavam...']} isDelayed>
+    Načítavam
+  </Loader>
+  <Skeleton></Skeleton>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Loader />" component={Loader} />
+
+## JS module reference
+
+All elements with `[data-loader]` will be initialised automatically.
+
+### Custom initialization
+
+```javascript
+const myAccordion = new window.ODS.modules.Loader(
+  document.getElementById('my-loader'),
+  config
+);
+```
+
+### Methods
+
+```js
+const instance = document.querySelector(elementSelector).ODS_Expander;
+instance.method();
+```
+
+<DocsTable
+  data={[
+    {
+      prop: 'init',
+      type: 'func',
+      default: '() => {}',
+      description:
+        'Initialize an instance. Called automatically on `new BlockAction(el, config)`',
+    },
+    {
+      prop: 'destroy',
+      type: 'func',
+      default: '() => {}',
+      description: 'Destroy the instance - removes all listeners',
+    },
+    {
+      prop: 'cycleMessages',
+      type: 'func',
+      default: '() => {}',
+      description: 'Cycle through messages',
+    },
+  ]}
+/>
+
+## Accessibility
+
+No accessibility testing conducted
+
+## Notes

package/src/components/Loader/Loader.static.ts

@@ -0,0 +1,85 @@
+const defaultConfig = {
+  cycleDuration: 4000,
+  delay: 5000,
+};
+
+interface LoaderConfig {
+  cycleDuration?: number;
+  delay?: number;
+}
+
+export default class Loader {
+  element: HTMLElement;
+  config: LoaderConfig;
+  interval: number | null;
+  delay: number | null;
+  currentMessageIndex: number;
+  messages: string[];
+
+  constructor(element: HTMLElement, config?: LoaderConfig) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+
+    this.interval = null;
+    this.delay = null;
+    this.currentMessageIndex = 0;
+    this.messages = [];
+    this.cycleMessages = this.cycleMessages.bind(this);
+
+    (this.element as any).ODS_Loader = this;
+
+    this.init();
+  }
+
+  initBody() {
+    const messagesAttr = this.element.getAttribute("data-loader-messages");
+    this.messages = messagesAttr ? JSON.parse(messagesAttr) : [];
+
+    if (this.messages.length) {
+      this.interval = window.setInterval(
+        this.cycleMessages,
+        this.config.cycleDuration ?? defaultConfig.cycleDuration,
+      );
+    }
+  }
+
+  init() {
+    if (this.element.hasAttribute("data-loader-delayed")) {
+      this.delay = window.setTimeout(() => {
+        if (
+          this.element.parentNode &&
+          this.element.parentNode instanceof HTMLElement
+        ) {
+          this.element.parentNode.classList.remove("hide");
+        }
+        this.initBody();
+      }, this.config.delay ?? defaultConfig.delay);
+    } else {
+      this.initBody();
+    }
+  }
+
+  destroy() {
+    if (this.interval) {
+      window.clearInterval(this.interval);
+    }
+    if (this.delay) {
+      window.clearTimeout(this.delay);
+    }
+  }
+
+  cycleMessages() {
+    if (this.currentMessageIndex < this.messages.length) {
+      this.element.innerText = this.messages[this.currentMessageIndex];
+      this.currentMessageIndex += 1;
+    } else {
+      this.destroy();
+    }
+  }
+
+  static getInstance(el: HTMLElement): Loader | null {
+    return el && (el as any).ODS_Loader
+      ? ((el as any).ODS_Loader as Loader)
+      : null;
+  }
+}