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

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

@@ -1,42 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
-
-$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;
-$overlay-z-index: 500 !default;
-$overlay-e: 0.4s ease 0s !default;
-
-$overlay: (
-  background-color: $overlay-bg-color,
-);
-
-$dialog-offset: space.get() * 2;
-
-$dialog: (
-  height: auto,
-  background-color: color.$white,
-  z-index: $overlay-z-index + 1,
-);
-
-$dialog-offset: (
-  default: space.get('small'),
-  sm: space.get(),
-);
-
-$dialog-sizes: (
-  default: convert.to-rem(700px),
-  small: convert.to-rem(400px),
-  large: convert.to-rem(1000px),
-);
-
-$spacing: (
-  small: (
-    default: space.get(),
-  ),
-  default: (
-    default: space.get(),
-    md: space.get('large'),
-  ),
-  large: (),
-  // same as default,
-);

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

@@ -1,199 +0,0 @@
-@use 'sass:map';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/generate';
-@use './config';
-
-@mixin hide {
-  display: none;
-}
-
-@mixin modal {
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin position {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-@mixin overlay($settings: config.$overlay) {
-  @include generate.css-map($settings);
-
-  width: 0;
-  height: 0;
-  z-index: config.$overlay-z-index;
-  opacity: 0;
-  transform: scale(1.1, 1.1);
-  transition:
-    opacity config.$overlay-e,
-    transform config.$overlay-e;
-  backface-visibility: hidden;
-}
-
-@mixin overlay-active {
-  width: 100% !important;
-  height: 100% !important;
-  opacity: 1;
-  transform: scale(1, 1);
-  transition-delay: 0s;
-}
-
-@mixin dialog($settings: config.$dialog, $offset: config.$dialog-offset) {
-  display: flex;
-  flex-flow: column;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  @include generate.css-map($settings);
-
-  @each $breakpoint, $value in $offset {
-    @include breakpoint.get($breakpoint) {
-      max-height: calc(100% - #{$value * 2});
-      width: calc(100% - #{$value * 2});
-    }
-  }
-}
-
-@mixin dialog-width($size, $sizes: config.$dialog-sizes) {
-  $dialog-size: map.get(config.$dialog-sizes, $size);
-
-  max-width: $dialog-size;
-}
-
-@mixin body() {
-  width: 100%;
-  flex: 0 0 auto;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-@mixin header {
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge
-  background: #fff;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-@mixin close {
-  position: absolute;
-  top: convert.to-rem(20px);
-  right: convert.to-rem(20px);
-  margin-bottom: 0 !important;
-
-  @include breakpoint.get('xs', 'down') {
-    top: convert.to-rem(10px);
-    right: convert.to-rem(10px);
-  }
-}
-
-@mixin header-spacing($size, $sizes: config.$spacing) {
-  $spacing: map.get($sizes, $size);
-
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding: $space;
-    }
-  }
-}
-
-@mixin body-spacing($size, $sizes: config.$spacing) {
-  $spacing: map.get($sizes, $size);
-
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-left: $space;
-      padding-right: $space;
-    }
-  }
-
-  &:not(.modal__body--colorful) {
-    @each $breakpoint, $space in $spacing {
-      @include breakpoint.get($breakpoint) {
-        padding-bottom: $space;
-      }
-    }
-  }
-
-  &:has(+ .modal__footer--sticky) {
-    @each $breakpoint, $space in $spacing {
-      @include breakpoint.get($breakpoint) {
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-
-@mixin colorful-body(
-  $size,
-  $sizes: config.$spacing,
-  $sticky-footer-selector: '.modal__footer--sticky'
-) {
-  $spacing: map.get($sizes, $size);
-
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-top: $space;
-      padding-bottom: $space;
-    }
-  }
-
-  + #{$sticky-footer-selector} {
-    margin-top: 0;
-  }
-}
-
-@mixin footer-base() {
-  width: 100%;
-  flex: 0 0 auto;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-@mixin footer-spacing($size, $sizes: config.$spacing) {
-  $spacing: map.get($sizes, $size);
-
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-top: 0;
-      padding-right: $space;
-      padding-bottom: $space;
-      padding-left: $space;
-
-      @at-root {
-        .modal__body--colorful + .modal__footer {
-          padding: $space !important;
-        }
-      }
-    }
-  }
-}
-
-@mixin sticky-footer() {
-  @media screen and (min-height: 500px) {
-    position: sticky;
-    bottom: 0;
-    background-color: color.$white;
-  }
-}

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

@@ -1,97 +0,0 @@
-@use "sass:map";
-@use '../../../styles/tools/generate';
-@use '../../../styles/tokens/breakpoint';
-@use './config';
-@use './mixins';
-
-.modal {
-  @include mixins.position;
-  @include mixins.modal;
-
-  &[aria-hidden='true'] {
-    @include mixins.hide;
-  }
-}
-
-.modal__overlay {
-  @include mixins.position;
-  @include mixins.overlay;
-
-  .modal.is-active & {
-    @include mixins.overlay-active;
-  }
-}
-
-.modal__dialog {
-  @include mixins.dialog;
-
-  @each $size, $props in config.$dialog-sizes {
-    &#{generate.variant-name($size)} {
-      @include mixins.dialog-width($size);
-    }
-  }
-}
-
-.modal__header {
-  @include mixins.header;
-
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.header-spacing($size);
-    }
-  }
-}
-
-.modal__close {
-  @include mixins.close;
-}
-
-.modal__body {
-  @include mixins.body();
-
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.body-spacing($size);
-    }
-  }
-
-  &--colorful {
-    @each $size, $props in config.$spacing {
-      .modal__dialog#{generate.variant-name($size)} & {
-        @include mixins.colorful-body($size);
-      }
-    }
-  }
-}
-
-.modal__dialog--full-height .modal__body {
-  flex: 1;
-}
-
-@include breakpoint.get('xs', 'down') {
-  .modal__dialog--full-height {
-    height: calc(100% - 2.5rem);
-  }
-}
-
-.modal__footer {
-  @include mixins.footer-base();
-
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.footer-spacing($size);
-    }
-  }
-
-  &--sticky {
-    @include mixins.sticky-footer();
-
-    $spacing: map.get(config.$spacing, 'default');
-
-    @each $breakpoint, $space in $spacing {
-      @include breakpoint.get($breakpoint) {
-        padding: $space !important;
-      }
-    }
-  }
-}

package/src/components/Modal/tests/Body.unit.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Body from '../Body';
-
-describe('rendering Body', () => {
-  describe('initial state', () => {
-    it('renders div with class modal__body', () => {
-      const { getByTestId } = render(<Body data-testid="test-id" />);
-      expect(getByTestId('test-id').tagName).toBe('DIV');
-      expect(getByTestId('test-id')).toHaveClass('modal__body');
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Body>test</Body>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    [
-      'white',
-      'gray',
-      'orange',
-      'orange-dark',
-      'black',
-      'blue',
-      'green',
-      'pink',
-      'violet',
-      'yellow',
-    ].map(color => {
-      it(`has classes bg-${color} and modal__body--colorful when color is set to ${color}`, () => {
-        const { getByTestId } = render(
-          <Body color={color} data-testid="test-id" />
-        );
-        expect(getByTestId('test-id')).toHaveClass(`bg-${color}`);
-        expect(getByTestId('test-id')).toHaveClass('modal__body--colorful');
-      });
-    });
-  });
-});

package/src/components/Modal/tests/CloseButton.unit.test.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import CloseButton from '../CloseButton';
-
-describe('rendering CloseButton', () => {
-  describe('initial state', () => {
-    it('renders button with class btn', () => {
-      const { getByTestId } = render(<CloseButton data-testid="test-id" />);
-      expect(getByTestId('test-id').tagName).toBe('BUTTON');
-      expect(getByTestId('test-id')).toHaveClass('btn');
-    });
-    it('renders icon with class icon--small', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('svg')).toBeInTheDocument();
-      expect(container.querySelector('svg')).toHaveClass('icon--small');
-    });
-    it('renders span with class visually-hidden', () => {
-      const { container } = render(<CloseButton>test</CloseButton>);
-      expect(container.querySelector('span')).toBeInTheDocument();
-      expect(container.querySelector('span')).toHaveClass('visually-hidden');
-    });
-    it('icon has class modal__close', () => {
-      const { getByTestId } = render(<CloseButton data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('modal__close');
-    });
-    it('use element inside svg has /sprite.svg#delete xlinkhref', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('svg').children.length).toBe(1);
-      expect(container.querySelector('svg').children[0].tagName).toBe('use');
-      expect(
-        container.querySelector('svg').children[0].getAttribute('xlink:href')
-      ).toBe('/sprite.svg#delete');
-    });
-    it('icon has class icon--small', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('svg')).toBeInTheDocument();
-      expect(container.querySelector('svg')).toHaveClass('icon--small');
-    });
-    it('button has class btn--small', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button')).toHaveClass('btn--small');
-    });
-    it('button has class btn--square', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button')).toHaveClass('btn--square');
-    });
-    it('button has class btn--ghost', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button')).toHaveClass('btn--ghost');
-    });
-    it('button has attribute data-a11y-dialog-hide set to true', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(
-        container.querySelector('button').getAttribute('data-a11y-dialog-hide')
-      ).toBe('true');
-    });
-    it('button has attribute aria-label set to Zatvoriť', () => {
-      const { container } = render(<CloseButton />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button').getAttribute('aria-label')).toBe(
-        'Zatvoriť'
-      );
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<CloseButton>test</CloseButton>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('children are rendered inside span element', () => {
-      const { container } = render(<CloseButton>test</CloseButton>);
-      expect(container.querySelector('span')).toBeInTheDocument();
-      expect(container.querySelector('span').textContent).toBe('test');
-    });
-  });
-});

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Button from '../../Button';
-import Modal from '../';
-
-const example = (
-  <>
-    <div id="root">
-      <Button data-a11y-dialog-show="modal" data-test-id="open-button">
-        Open
-      </Button>
-      <Modal id="modal" title="Modal title">
-        <p>
-          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
-          lacinia odio sem nec elit. Integer posuere erat a ante venenatis
-          dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies
-          vehicula ut id elit. Donec sed odio dui. Maecenas faucibus mollis
-          interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        </p>
-      </Modal>
-    </div>
-    <div id="root-modals" />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate({
-    rules: { 'no-inline-style': 'off', 'hidden-focusable': 'off' },
-  });
-});
-
-it('is accessible', async () => {
-  window.scrollTo = jest.fn();
-  const { container } = render(example);
-
-  fireEvent.click(container.querySelector('[data-test-id="open-button"]'));
-  expect(await axe(container)).toHaveNoViolations();
-});

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Modal from '../Modal';
-
-describe('rendering Modal', () => {
-  let modal;
-
-  beforeEach(() => {
-    modal = render(
-      <>
-        <div id="root">
-          <Modal id="id" data-testid="test-id" />
-        </div>
-        <div id="root-modals" />
-      </>
-    );
-  });
-  describe('initial state and id', () => {
-    it('has wrapper div with class modal', () => {
-      const { getByTestId } = modal;
-      expect(getByTestId('test-id').parentElement.tagName).toBe('DIV');
-      expect(getByTestId('test-id').parentElement).toHaveClass('modal');
-    });
-    it('has wrapper div with id attribute set to id prop', () => {
-      const { getByTestId } = modal;
-      expect(getByTestId('test-id').parentElement.tagName).toBe('DIV');
-      expect(getByTestId('test-id').parentElement.id).toBe('id');
-    });
-    it('has wrapper div with data-modal attribute set to true', () => {
-      const { getByTestId } = modal;
-      expect(getByTestId('test-id').parentElement.tagName).toBe('DIV');
-      expect(
-        getByTestId('test-id').parentElement.getAttribute('data-modal')
-      ).toBe('true');
-    });
-    it('has wrapper div with aria-labelledby attribute set to id-title when id prop is id', () => {
-      const { getByTestId } = modal;
-      expect(getByTestId('test-id').parentElement.tagName).toBe('DIV');
-      expect(
-        getByTestId('test-id').parentElement.getAttribute('aria-labelledby')
-      ).toBe('id-title');
-    });
-    it('has class modal__dialog', () => {
-      const { getByTestId } = modal;
-      expect(getByTestId('test-id')).toHaveClass('modal__dialog');
-    });
-    it('has child div with class modal__header', () => {
-      const { getByTestId } = modal;
-      const child =
-        getByTestId('test-id').getElementsByClassName('modal__header');
-      expect(child.length).toBe(1);
-      expect(child[0]).toHaveClass('modal__header');
-    });
-  });
-});

package/src/components/Modal/tests/Title.unit.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Title from '../Title';
-
-describe('rendering Title', () => {
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Title>test</Title>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has class display-3 when size is set to large', () => {
-      const { getByTestId } = render(
-        <Title data-testid="test-id" size="large" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('display-3');
-    });
-    it('has class h3 when size is set to small', () => {
-      const { getByTestId } = render(
-        <Title data-testid="test-id" size="small" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('h2');
-    });
-  });
-});

package/src/components/PageTitle/PageTitle.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { bool, oneOf, oneOfType, string, node, object } from 'prop-types';
-import cx from 'classnames';
-
-import Grid, { GridCol } from '../Grid';
-import Section from '../Section';
-import Image from '../Image';
-import Heading from '../Heading';
-import Sticker from '../Sticker';
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
-
-const propTypes = {
-  /** Background color */
-  color: oneOf(['black', 'white', 'orange']),
-  /** Description */
-  description: oneOfType([string, node]),
-  /** If image element is present it's stuck to the element bottom border */
-  hasImageStuckToBottom: bool,
-  /** Props for the image element */
-  imageProps: object,
-  /** Breakpoint from which image will be visible */
-  imageShowFromBreakpoint: oneOf(['xxl', 'xl', 'lg', 'md', 'sm']),
-  /** Sticker props */
-  sticker: object,
-  /** Main title */
-  title: oneOfType([string, node]),
-  /** Title size */
-  titleSize: oneOf(['large']),
-};
-
-const defaultProps = {
-  color: 'black',
-};
-
-const PageTitle = ({
-  className,
-  color,
-  description,
-  hasImageStuckToBottom,
-  imageProps,
-  imageShowFromBreakpoint,
-  sticker,
-  title,
-  titleSize,
-  ...other
-}) => {
-  const customImageProps = {
-    ...(imageProps ?? {}),
-  };
-
-  const headingClasses = cx(titleSize === 'large' ? 'display-1' : 'display-2');
-  const imageColClasses = cx('align-md-right', 'align-self-bottom', {
-    [`show-${imageShowFromBreakpoint}`]: imageShowFromBreakpoint,
-    'section__image-stuck-to-bottom': hasImageStuckToBottom,
-  });
-
-  const content = (
-    <>
-      <Heading level={1} className={headingClasses}>
-        {title}
-      </Heading>
-      {description && (
-        <ConditionalWrapper
-          condition={typeof description === 'string'}
-          wrapper={<p className={cx({ 'mb-large': !!sticker })} />}
-        >
-          {description}
-        </ConditionalWrapper>
-      )}
-      {sticker && <Sticker {...sticker} />}
-    </>
-  );
-
-  return (
-    <Section color={color} {...other}>
-      {imageProps ? (
-        <Grid rowGapSize="medium">
-          <GridCol size={{ sm: 8, md: 7 }}>{content}</GridCol>
-          <GridCol size="auto" className={imageColClasses}>
-            <Image {...customImageProps} />
-          </GridCol>
-        </Grid>
-      ) : (
-        content
-      )}
-    </Section>
-  );
-};
-
-PageTitle.displayName = 'PageTitle';
-PageTitle.defaultProps = defaultProps;
-PageTitle.propTypes = propTypes;
-
-export default PageTitle;