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

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Cover from '../';
-
-const example = (
-  <>
-    <Cover bgSrc="https://placehold.co/800x150" />;
-    <Cover
-      bgSrc={{
-        default: 'https://placehold.co/800x300',
-        lg: 'https://placehold.co/2560x1000',
-        md: 'https://placehold.co/1200x500',
-      }}
-    />
-  </>
-);
-
-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/Cover/tests/Cover.unit.test.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Cover from '../Cover';
-
-const image = '/test-image.jpg';
-const picture = {
-  default: '/test-picture.jpg',
-  md: '/test-picture-md.jpg',
-  xl: '/test-picture-xl.jpg',
-};
-
-// bgSrc prop is required
-describe('rendering Cover', () => {
-  describe('initial state', () => {
-    it('has default class cover', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-    });
-    it('has default class cover__image', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover__image').length).toBe(1);
-    });
-  });
-  describe('passed props', () => {
-    it('passes other props', () => {
-      const { getByTestId } = render(
-        <Cover data-testid="test" bgSrc={image} />
-      );
-      expect(getByTestId('test')).toBeInTheDocument();
-    });
-    it('renders children', () => {
-      const { getByText } = render(<Cover bgSrc={image}>test-text</Cover>);
-      expect(getByText('test-text')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { container } = render(
-        <Cover bgSrc={image} className="test-class" />
-      );
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-      expect(container.getElementsByClassName('test-class').length).toBe(1);
-    });
-    it('has class cover__content when children are set', () => {
-      const { container } = render(<Cover bgSrc={image}>test</Cover>);
-      expect(container.getElementsByClassName('cover__content').length).toBe(1);
-    });
-    it('has additional class when contentClass and children are set', () => {
-      const { container } = render(
-        <Cover bgSrc={image} contentClass="test-content-class">
-          test
-        </Cover>
-      );
-      expect(
-        container.getElementsByClassName('test-content-class').length
-      ).toBe(1);
-    });
-    ['small', 'medium', 'large'].map(size => {
-      it(`has cover--${size} class when size is set to ${size}`, () => {
-        const { container } = render(<Cover bgSrc={image} size={size} />);
-        expect(container.getElementsByClassName(`cover--${size}`).length).toBe(
-          1
-        );
-      });
-    });
-    ['top', 'bottom'].map(position => {
-      it(`has cover__image--${position} class when bgPosition is set to ${position}`, () => {
-        const { container } = render(
-          <Cover bgSrc={image} bgPosition={position} />
-        );
-        expect(
-          container.getElementsByClassName(`cover__image--${position}`).length
-        ).toBe(1);
-      });
-    });
-    it('doesnt have cover__image--center class when bgPosition is set to center', () => {
-      const { container } = render(<Cover bgSrc={image} bgPosition="center" />);
-      expect(
-        container.getElementsByClassName('cover__image--center').length
-      ).toBe(0);
-    });
-    it('renders img element, not picture, when bgSrc is set to string', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('picture').length).toBe(0);
-    });
-    it('img element has src set to bgSrc when bgSrc is string', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        '/test-image.jpg'
-      );
-    });
-    it('renders picture element with source and img elements when bgSrc is set to object with multiple properties', () => {
-      const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelectorAll('picture').length).toBe(1);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('source').length > 0).toBeTruthy();
-    });
-    it('img element has src set to bgSrc.default when bgSrc is object', () => {
-      const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        picture.default
-      );
-    });
-    Object.keys(picture)
-      .filter(el => el !== 'default')
-      .map(key => {
-        it('srcSet of source element has correct value from bgSrc object', () => {
-          const { container } = render(<Cover bgSrc={picture} />);
-          const correctSource = container.querySelector(
-            `source[srcset="${picture[key]}"]`
-          );
-          expect(correctSource).toBeInTheDocument();
-        });
-      });
-  });
-});

package/src/components/Divider/Divider.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { string, node, oneOf, bool } from 'prop-types';
-
-import Icon from '../Icon';
-
-const propTypes = {
-  /** Custom background color */
-  color: oneOf(['black', 'white']),
-  /** Custom content inside divider */
-  content: node,
-  /** Icon which will be rendered inside divider */
-  icon: string,
-  // divider line has width of 1px
-  thinLine: bool,
-};
-
-const CLASS_ROOT = 'divider';
-
-const Divider = ({ className, color, icon, content, thinLine, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--${color}`]: color,
-    },
-    className
-  );
-  const lineClass = cx(`${CLASS_ROOT}__line`, {
-    [`${CLASS_ROOT}__line--thin`]: thinLine,
-  });
-  const contentClass = `${CLASS_ROOT}__content`;
-
-  return (
-    <div className={classes} {...other}>
-      <div className={lineClass} />
-      {(content || icon) && (
-        <>
-          <div className={contentClass}>
-            {content ?? (icon && <Icon name={icon} size="medium" />)}
-          </div>
-          <div className={lineClass} />
-        </>
-      )}
-    </div>
-  );
-};
-
-Divider.displayName = 'Divider';
-Divider.propTypes = propTypes;
-
-export default Divider;

package/src/components/Divider/Divider.mdx

@@ -1,65 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Card, { CardHeader, CardSection } from '../Card';
-import { headerColors } from '../Card/CardHeader';
-import Divider from '../Divider';
-import Button from '../Button';
-import Image from '../Image';
-import Grid, { GridCol } from '../Grid';
-
-# Divider
-
-Divider serves as an option for horizontal division of spaces/elements/contents.
-
-## Example
-
-<Preview>
-  <Divider />
-</Preview>
-
-## Width
-
-Width of the divider line can be reduced to 1 pixel using `.divider__line--thin` class.
-
-<Preview>
-  <Divider />
-  <Divider thinLine />
-</Preview>
-
-## Content
-
-Divider can hold different contents if you need to visualise separation with
-something like a word or icon, you can do it here.
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-</Preview>
-
-## Color
-
-If you need to use divider on **non-white backgrounds** use
-`.divider--black` or `.divider--white` class
-
-Default color is gray and it's used on white backgrounds only
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-  <div className="bg-black">
-    <Divider color="white" />
-    <Divider color="white" icon="add" />
-    <Divider color="white" content={<strong>custom text</strong>} />
-  </div>
-  <Divider color="black" />
-  <Divider color="black" icon="add" />
-  <Divider color="black" content={<strong>custom text</strong>} />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Divider />" component={Divider} />

package/src/components/Divider/index.js

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

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

@@ -1,22 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-$base: (
-  padding: space.get(),
-  font-weight: bold,
-);
-
-$colors: (
-  'default': (
-    content: color.$gray-700,
-    line: color.$gray-500,
-  ),
-  'black': (
-    content: color.$black,
-    line: color.$black,
-  ),
-  'white': (
-    content: color.$white,
-    line: color.$white,
-  ),
-);

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

@@ -1,38 +0,0 @@
-@use './config';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/map';
-
-@mixin divider-base($base: config.$base) {
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: stretch;
-
-  @include generate.css-map($base);
-}
-
-@mixin divider-content() {
-  flex-grow: 0.3;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
-@mixin divider-content-color($color, $config: config.$colors) {
-  color: map.map-deep-get($config, $color, 'content');
-}
-
-@mixin divider-line() {
-  border-width: 0 0 2px;
-  border-style: solid;
-  flex-grow: 1;
-}
-
-@mixin divider-line-thin() {
-  border-width: 0 0 1px;
-}
-
-@mixin divider-line-color($color, $config: config.$colors) {
-  border-color: map.map-deep-get($config, $color, 'line');
-}

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

@@ -1,31 +0,0 @@
-@use './config';
-@use './mixins';
-@use '../../../styles/tools/generate';
-
-.divider {
-  @include mixins.divider-base;
-
-  &__content {
-    @include mixins.divider-content;
-
-    @each $color, $values in config.$colors {
-      #{generate.variant-name($color, '.divider--')} & {
-        @include mixins.divider-content-color($color);
-      }
-    }
-  }
-
-  &__line {
-    @include mixins.divider-line;
-
-    &--thin {
-      @include mixins.divider-line-thin;
-    }
-
-    @each $color, $values in config.$colors {
-      #{generate.variant-name($color, '.divider--')} & {
-        @include mixins.divider-line-color($color);
-      }
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Divider from '../';
-
-const example = (
-  <>
-    <Divider />
-    <Divider content={<span>Hello node</span>} />
-    <Divider content="Hello string" />
-    <Divider color="black" icon="add" />
-  </>
-);
-
-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/Divider/tests/Divider.unit.test.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Divider from '../Divider';
-
-describe('rendering Divider', () => {
-  describe('initial state', () => {
-    it('has default class divider', () => {
-      const { getByTestId } = render(<Divider data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('divider');
-    });
-    it('child div has default class divider__line', () => {
-      const { container } = render(<Divider />);
-      expect(container.getElementsByClassName('divider__line').length).toBe(1);
-    });
-  });
-
-  describe('passed props', () => {
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Divider data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('divider');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-
-    it('child div has class divider__line--thin when thinLine is set to true', () => {
-      const { container } = render(<Divider thinLine={true} />);
-      expect(
-        container.getElementsByClassName('divider__line--thin').length
-      ).toBe(1);
-    });
-
-    ['black', 'white'].map(color => {
-      it(`has divider--${color} class when color is set to ${color}`, () => {
-        const { getByTestId } = render(
-          <Divider color={color} data-testid="test-id" />
-        );
-        expect(getByTestId('test-id')).toHaveClass('divider');
-        expect(getByTestId('test-id')).toHaveClass(`divider--${color}`);
-      });
-    });
-    it('has class divider__content when content prop is set', () => {
-      const { container } = render(<Divider content="test-content" />);
-      expect(container.getElementsByClassName('divider__content').length).toBe(
-        1
-      );
-    });
-    it('has second class divider__line when content prop is set', () => {
-      const { container } = render(<Divider content="test-content" />);
-      expect(container.getElementsByClassName('divider__line').length).toBe(2);
-    });
-    it('renders content prop', () => {
-      const { getByText } = render(<Divider content="test-content" />);
-      expect(getByText('test-content')).toBeInTheDocument();
-    });
-    it('has class divider__content when icon prop is set', () => {
-      const { container } = render(<Divider icon="test-icon" />);
-      expect(container.getElementsByClassName('divider__content').length).toBe(
-        1
-      );
-    });
-    it('has second class divider__line when icon prop is set', () => {
-      const { container } = render(<Divider icon="test-icon" />);
-      expect(container.getElementsByClassName('divider__line').length).toBe(2);
-    });
-    it('renders use element inside svg element with attribute xlinkhref set to /sprite.svg#test-icon when icon prop is set to test-icon', () => {
-      const { container } = render(<Divider icon="test-icon" />);
-      expect(container.querySelector('use').getAttribute('xlink:href')).toBe(
-        '/sprite.svg#test-icon'
-      );
-    });
-    it('when both icon and content props are set only content is rendered', () => {
-      const { container, getByText } = render(
-        <Divider icon="test-icon" content="test-content" />
-      );
-      expect(getByText('test-content')).toBeInTheDocument();
-      expect(container.querySelector('svg')).toBeFalsy();
-    });
-  });
-});

package/src/components/Dropdown/Dropdown.js

@@ -1,111 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { bool, oneOf, string, shape, node, oneOfType } from 'prop-types';
-import cx from 'classnames';
-
-import Bar, { BarItem } from '../Bar';
-import { IconButton } from '../Button';
-
-import DropdownButtonStatic from './Dropdown.static';
-import DropdownToggleButton from './DropdownToggleButton';
-
-export const CLASS_ROOT = 'dropdown';
-
-const defaultProps = {
-  hasSpacing: true,
-};
-
-const propTypes = {
-  button: shape({
-    className: string,
-    children: oneOfType([string, node]),
-    iconName: string,
-  }).isRequired,
-  children: node.isRequired,
-  hasFocusTrap: bool,
-  hasSpacing: bool,
-  id: string.isRequired,
-  isInteractive: bool,
-  placement: oneOf(['left', 'center', 'right']),
-};
-
-const placements = {
-  left: 'bottom-start',
-  center: 'bottom',
-  right: 'bottom-end',
-};
-
-const Dropdown = ({
-  button,
-  className,
-  hasFocusTrap,
-  hasSpacing,
-  children,
-  id,
-  isInteractive,
-  placement,
-  ...other
-}) => {
-  let dropdownRef = useRef();
-
-  useEffect(() => {
-    let dropdownTrap = new DropdownButtonStatic(dropdownRef);
-
-    return () => {
-      dropdownTrap && dropdownTrap.destroy();
-    };
-  }, [dropdownRef]);
-
-  const classes = cx(
-    'dropdown',
-    {
-      [`${CLASS_ROOT}-spacing`]: hasSpacing,
-    },
-    className
-  );
-  return (
-    <>
-      {button && <DropdownToggleButton {...button} id={id} />}
-      <div
-        ref={ref => {
-          dropdownRef = ref;
-        }}
-        id={`dropdown-${id}`}
-        className={classes}
-        data-dropdown=""
-        data-dropdown-placement={placements[placement]}
-        data-dropdown-interactive={isInteractive}
-        data-dropdown-focus-trap={hasFocusTrap}
-        {...other}
-      >
-        {hasFocusTrap && (
-          <Bar className={'mb-small justify-content-end'}>
-            <BarItem>
-              <IconButton
-                iconName="delete"
-                type="ghost"
-                isSquare
-                size="small"
-                className={`${CLASS_ROOT}__close`}
-                aria-label="Zatvoriť"
-                id={`close-btn-${id}`}
-                data-toggle={JSON.stringify([
-                  {
-                    target: `#btn-${id}`,
-                    action: 'click',
-                  },
-                ])}
-              />
-            </BarItem>
-          </Bar>
-        )}
-        {children}
-      </div>
-    </>
-  );
-};
-
-Dropdown.displayName = 'Dropdown';
-Dropdown.propTypes = propTypes;
-Dropdown.defaultProps = defaultProps;
-
-export default Dropdown;