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

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

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

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import List from '../List';
-
-const controlProps1 = {
-  className: 'test-class',
-};
-const controlProps2 = {
-  className: 'test-class',
-  href: 'test',
-};
-
-//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

@@ -1,104 +0,0 @@
-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.js

@@ -1,86 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { arrayOf, string, oneOf, bool } from 'prop-types';
-import cx from 'classnames';
-
-import LoaderStatic from './Loader.static';
-
-const CLASS_ROOT = 'loader';
-
-const propTypes = {
-  colour: oneOf(['default', 'inverse']),
-  isDelayed: bool,
-  /** Messages that the loader will cycle until done */
-  messages: arrayOf(string),
-  /** Size variants */
-  size: oneOf(['default', 'large']),
-};
-
-const defaultProps = {
-  size: 'default',
-  colour: 'default',
-};
-
-const Loader = ({
-  messages,
-  size,
-  className,
-  colour,
-  isDelayed,
-  children,
-  ...other
-}) => {
-  let loaderRef = useRef(null);
-
-  useEffect(() => {
-    const loader = messages && new LoaderStatic(loaderRef);
-
-    return () => {
-      messages && loader.destroy();
-    };
-  }, [loaderRef, messages]);
-
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--${size}`]: size !== 'default',
-      [`${CLASS_ROOT}--${colour}`]: colour !== 'default',
-      hide: isDelayed,
-    },
-    className
-  );
-
-  return (
-    <div className={classes} {...other}>
-      <div
-        className={cx(`${CLASS_ROOT}__body`, {
-          [`${CLASS_ROOT}__body--inverse`]: colour !== 'default',
-        })}
-      >
-        <div
-          className={cx(`${CLASS_ROOT}__line`, {
-            [`${CLASS_ROOT}__line--inverse`]: colour !== 'default',
-          })}
-        />
-      </div>
-      {messages && (
-        <div
-          data-loader
-          data-loader-delayed={isDelayed}
-          data-loader-messages={JSON.stringify(messages)}
-          className={`${CLASS_ROOT}__messages`}
-          ref={ref => {
-            loaderRef = ref;
-          }}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-Loader.displayName = 'Loader';
-
-export default Loader;

package/src/components/Loader/Loader.mdx

@@ -1,148 +0,0 @@
-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.js

@@ -1,67 +0,0 @@
-const defaultConfig = {
-  cycleDuration: 4000,
-  delay: 5000,
-};
-
-export default class Loader {
-  constructor(element, config) {
-    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.ODS_Loader = this;
-
-    this.init();
-  }
-
-  initBody() {
-    this.messages = JSON.parse(
-      this.element.getAttribute('data-loader-messages')
-    );
-
-    if (this.messages.length) {
-      this.interval = window.setInterval(
-        this.cycleMessages,
-        this.config.cycleDuration
-      );
-    }
-  }
-
-  init() {
-    if (this.element.hasAttribute('data-loader-delayed')) {
-      this.delay = window.setTimeout(() => {
-        this.element.parentNode.classList.remove('hide');
-        this.initBody();
-      }, this.config.delay);
-    } else {
-      this.initBody();
-    }
-  }
-
-  destroy() {
-    if (this.interval) {
-      window.clearInterval(this.interval);
-    }
-    if (this.delay) {
-      window.clearInterval(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) {
-    return el && el.ODS_Loader ? el.ODS_Loader : null;
-  }
-}

package/src/components/Loader/index.js

@@ -1,4 +0,0 @@
-import './styles/style.scss';
-import Loader from './Loader';
-
-export default Loader;

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

@@ -1,16 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-
-$sizes: (
-  default: (
-    width: convert.to-rem(40px),
-    height: convert.to-rem(40px),
-    margin-right: space.get('small'),
-  ),
-  large: (
-    width: convert.to-rem(50px),
-    height: convert.to-rem(50px),
-    margin-right: space.get(),
-  )
-);