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

package/src/components/PageTitle/PageTitle.mdx

@@ -1,185 +0,0 @@
-import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from './../../styleguide';
-import PageTitle from './PageTitle';
-
-# PageTitle
-
-Styled title for pages that need less than a [Hero](/components/hero).
-
-## Composition
-
-PageTitle combines [Section](/components/section), [Grid](/components/grid), and [Image](/components/image) with [Text Alignment](/utilities/text#alignment), [Vertical Flex Alignment](/utilities/flex-alignment#vertical) and [Visibility](/utilities/visibility) utilities. It essentialy a wrapper component that renders these components in a consistent and managed structure.
-
-### Title
-
-- Always `<h1>`
-- Can be configured to use two sizes - display-1 and display-2 (default).
-
-### Description (optional)
-
-- A short explainer
-- Usually a paragraph.
-
-### Sticker (optional)
-
-- Highlight or promotion
-- Always make sure 30px space between sticker and preceeding description text. This space is added on the preceeding text element using `.mb-large` [spacing utility](/utilities/spacing#bottom-margin).
-
-### Image (optional)
-
-- Always aligned to the bottom right
-- Can be stuck to the bottom of the section
-- Usually an SVG illustration
-- Can be shown only on larger viewports (e.g. hidden on mobile screens)
-
-## Title only
-
-This is the simplest page title.
-
-<Preview>
-  <PageTitle title="Title of the page" />
-</Preview>
-
-## Title + description
-
-Page title with a description.
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-  />
-</Preview>
-
-## Title + description + sticker
-
-Page title with a description.
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    sticker={{ children: 'Sticker', className: 'large', color: 'orange' }}
-  />
-</Preview>
-
-## Title + description + image
-
-Page title with an image. Content (title + description) and Image use separate Grid columns for alignment.
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x178',
-        md: 'https://placehold.co/227x135',
-        lg: 'https://placehold.co/366x217',
-        xl: 'https://placehold.co/430x255',
-      },
-      alt: '',
-    }}
-  />
-</Preview>
-
-## Image stuck to bottom
-
-Some page titles need to stuck image to the bottom of element so you can do it
-by passing `.section__image-stuck-to-bottom` to element which we want to be stuck.
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x263',
-        md: 'https://placehold.co/178x157',
-        lg: 'https://placehold.co/242x214',
-        xl: 'https://placehold.co/274x244',
-      },
-      alt: '',
-    }}
-    hasImageStuckToBottom
-  />
-</Preview>
-
-## Hide image on mobile
-
-If you need to hide image on smaller displays you can use this feature like this.
-Change viewport size to mobile size to see functionality of this example.
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x263',
-        md: 'https://placehold.co/178x157',
-        lg: 'https://placehold.co/242x214',
-        xl: 'https://placehold.co/274x244',
-      },
-      alt: '',
-    }}
-    imageShowFromBreakpoint="sm"
-  />
-</Preview>
-
-## Colors
-
-<Preview>
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x263',
-        md: 'https://placehold.co/178x157',
-        lg: 'https://placehold.co/242x214',
-        xl: 'https://placehold.co/274x244',
-      },
-      alt: '',
-    }}
-  />
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    color="white"
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x263',
-        md: 'https://placehold.co/178x157',
-        lg: 'https://placehold.co/242x214',
-        xl: 'https://placehold.co/274x244',
-      },
-      alt: '',
-    }}
-  />
-  <PageTitle
-    title="Title of the page"
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    color="orange"
-    imageProps={{
-      width: 300,
-      src: {
-        default: 'https://placehold.co/300x263',
-        md: 'https://placehold.co/178x157',
-        lg: 'https://placehold.co/242x214',
-        xl: 'https://placehold.co/274x244',
-      },
-      alt: '',
-    }}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<PageTitle />" component={PageTitle} />

package/src/components/PageTitle/index.js

@@ -1 +0,0 @@
-export { default } from './PageTitle';

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import PageTitle from '../';
-
-const example = (
-  <>
-    <PageTitle title="Title of the page" />
-    <PageTitle
-      title="Title of the page"
-      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-    />
-    <PageTitle
-      title="Title of the page"
-      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
-      imageProps={{
-        width: 300,
-        src: {
-          default: 'https://placehold.co/300x178',
-          md: 'https://placehold.co/227x135',
-          lg: 'https://placehold.co/366x217',
-          xl: 'https://placehold.co/430x255',
-        },
-        alt: '',
-      }}
-    />
-  </>
-);
-
-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/PageTitle/tests/PageTitle.unit.test.js

@@ -1,208 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import PageTitle from '../PageTitle';
-
-describe('rendering PageTitle', () => {
-  describe('initial state', () => {
-    it('section component has class bg-black', () => {
-      const { getByTestId } = render(<PageTitle data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('bg-black');
-    });
-    it('h1 heading element is rendered', () => {
-      const { container } = render(<PageTitle />);
-      expect(container.querySelector('h1')).toBeTruthy();
-    });
-    it('h1 heading element has class display-2', () => {
-      const { container } = render(<PageTitle />);
-      expect(container.querySelector('h1')).toHaveClass('display-2');
-    });
-  });
-  describe('heading props title and titleSize are passed', () => {
-    it("h1 heading element has class display-1 when titleSize is set to 'large'", () => {
-      const { container } = render(<PageTitle titleSize="large" />);
-      expect(container.querySelector('h1')).toHaveClass('display-1');
-    });
-    it('title of type Node is rendered inside h1', () => {
-      const { container } = render(
-        <PageTitle title={<a>title-link-test</a>} />
-      );
-      expect(container.querySelector('h1').querySelector('a')).toBeTruthy();
-      expect(container.querySelector('h1').querySelector('a').textContent).toBe(
-        'title-link-test'
-      );
-    });
-    it('title of type string is rendered inside h1', () => {
-      const { container } = render(<PageTitle title="title-link-test" />);
-      expect(container.querySelector('h1').textContent).toBe('title-link-test');
-    });
-  });
-  describe('description prop is passed', () => {
-    it('description of type Node is rendered', () => {
-      const { container } = render(
-        <PageTitle description={<a>description-link-test</a>} />
-      );
-      expect(container.querySelector('a')).toBeTruthy();
-      expect(container.querySelector('a').textContent).toBe(
-        'description-link-test'
-      );
-    });
-    it('description of type string is rendered inside paragraph element', () => {
-      const { container } = render(
-        <PageTitle description="description-link-test" />
-      );
-      expect(container.querySelector('p')).toBeTruthy();
-      expect(container.querySelector('p').textContent).toBe(
-        'description-link-test'
-      );
-    });
-  });
-  describe('color prop is passed', () => {
-    ['black', 'orange'].map(color => {
-      it(`section component has class bg-${color} when color prop is ${color}`, () => {
-        const { getByTestId } = render(
-          <PageTitle data-testid="test-id" color={color} />
-        );
-        expect(getByTestId('test-id')).toHaveClass(`bg-${color}`);
-      });
-    });
-    it('section component doesnt have class bg-white when color prop is white', () => {
-      const { getByTestId } = render(
-        <PageTitle data-testid="test-id" color="white" />
-      );
-      expect(
-        getByTestId('test-id').getElementsByClassName('bg-white').length
-      ).toBe(0);
-    });
-  });
-  describe('image props hasImageStuckToBottom, imageProps and imageShowFromBreakpoint are passed', () => {
-    const image1 = {
-      src: 'image1',
-      alt: 'img-alt',
-      className: 'test-image-class',
-    };
-    const image2 = {
-      src: { default: 'image2', md: 'image2-md' },
-      alt: 'img-alt',
-      className: 'test-image-class',
-    };
-    it('title and description is rendered when imageProps prop is passed', () => {
-      const { getByText } = render(
-        <PageTitle
-          imageProps={image1}
-          title="test-title"
-          description="test-description"
-        />
-      );
-      expect(getByText('test-title')).toBeInTheDocument();
-      expect(getByText('test-description')).toBeInTheDocument();
-    });
-    it('img element with src=imageProps.src is rendered when imageProps.src has type string', () => {
-      const { container } = render(<PageTitle imageProps={image1} />);
-      expect(container.querySelector('img')).toBeInTheDocument();
-      expect(container.querySelector('img').getAttribute('src')).toBe('image1');
-    });
-    it('img element with alt=imageProps.alt is rendered when imageProps.alt is passed', () => {
-      const { container } = render(<PageTitle imageProps={image1} />);
-      expect(container.querySelector('img')).toBeInTheDocument();
-      expect(container.querySelector('img').getAttribute('alt')).toBe(
-        'img-alt'
-      );
-    });
-    it('img element with additional class is rendered when imageProps.className is passed', () => {
-      const { container } = render(<PageTitle imageProps={image1} />);
-      expect(container.querySelector('img')).toBeInTheDocument();
-      expect(container.querySelector('img')).toHaveClass('test-image-class');
-    });
-    ['xxl', 'xl', 'lg', 'md', 'sm'].map(breakpoint => {
-      it(`image wrapper column with additional class show-${breakpoint} is rendered when imageShowFromBreakpoint=${breakpoint} is passed`, () => {
-        const { container } = render(
-          <PageTitle imageProps={image1} imageShowFromBreakpoint={breakpoint} />
-        );
-        expect(container.querySelector('img')).toBeInTheDocument();
-        expect(container.querySelector('img').parentElement).toHaveClass(
-          `show-${breakpoint}`
-        );
-      });
-    });
-    it('img el. with src=imageProps.src.default is rendered inside picture el. when imageProps.src has type object', () => {
-      const { container } = render(<PageTitle imageProps={image2} />);
-      const img = container.querySelector('img');
-      expect(img.parentElement.tagName).toBe('PICTURE');
-      expect(container.querySelector('img').getAttribute('src')).toBe('image2');
-    });
-    it('when imageProps.src.md is passed, picture has source element with srcSet=imageProps.src.md in it', () => {
-      const { container } = render(<PageTitle imageProps={image2} />);
-      const picture = container.querySelector('picture');
-      expect(picture).toBeInTheDocument();
-      for (let child of picture.children) {
-        if (child.tagName === 'SOURCE') {
-          expect(child.getAttribute('srcSet')).toBe('image2-md');
-        }
-      }
-    });
-    it('div wrapper around image has class grid__col--auto and additional classes passed in its className prop', () => {
-      const { container } = render(<PageTitle imageProps={image1} />);
-      const img = container.querySelector('img');
-      expect(img).toBeInTheDocument();
-      const div = img.parentElement;
-      expect(div.tagName).toBe('DIV');
-      expect(div.className).toBe(
-        'grid__col--auto align-md-right align-self-bottom'
-      );
-    });
-    it('div wrapper around image has additional class passed when hasImageStuckToBottom prop is passed', () => {
-      const { container } = render(
-        <PageTitle imageProps={image1} hasImageStuckToBottom />
-      );
-      const img = container.querySelector('img');
-      expect(img).toBeInTheDocument();
-      const div = img.parentElement;
-      expect(div.tagName).toBe('DIV');
-      expect(div.className).toBe(
-        'grid__col--auto align-md-right align-self-bottom section__image-stuck-to-bottom'
-      );
-    });
-    it('div wrapper around picture has class grid__col--auto and additional classes passed in its className prop', () => {
-      const { container } = render(<PageTitle imageProps={image2} />);
-      const picture = container.querySelector('picture');
-      expect(picture).toBeInTheDocument();
-      const div = picture.parentElement;
-      expect(div.tagName).toBe('DIV');
-      expect(div.className).toBe(
-        'grid__col--auto align-md-right align-self-bottom'
-      );
-    });
-    it('div wrapper around picture has additional class passed when hasImageStuckToBottom prop is passed', () => {
-      const { container } = render(
-        <PageTitle imageProps={image2} hasImageStuckToBottom />
-      );
-      const picture = container.querySelector('picture');
-      expect(picture).toBeInTheDocument();
-      const div = picture.parentElement;
-      expect(div.tagName).toBe('DIV');
-      expect(div.className).toBe(
-        'grid__col--auto align-md-right align-self-bottom section__image-stuck-to-bottom'
-      );
-    });
-    it('renders sticker', () => {
-      const { container } = render(
-        <PageTitle sticker={{ children: 'Sticker', color: 'orange' }} />
-      );
-      const sticker = container.querySelector('.sticker');
-      expect(sticker).toBeInTheDocument();
-      expect(sticker).toHaveClass('sticker--orange');
-      expect(sticker.innerHTML).toBe('Sticker');
-    });
-    it('has correct space between description and sticker', () => {
-      const { container } = render(
-        <PageTitle
-          sticker={{ children: 'Sticker', color: 'orange' }}
-          description="Description"
-        />
-      );
-      const description = container.querySelector('p');
-      expect(description).toHaveClass('mb-large');
-    });
-  });
-});

package/src/components/PageTitle/tests/data.js

@@ -1,26 +0,0 @@
-export const img = {
-  alt: '',
-  src: 'https://placehold.co/300x300?text=<img+/>+300x300',
-};
-
-export const responsiveImg = {
-  alt: '',
-  src: {
-    default: 'https://placehold.co/300x300?text=<picture+/>+300x300',
-    sm: 'https://placehold.co/300x300?text=<picture+/>+300x300',
-    md: 'https://placehold.co/200x200?text=<picture+/>+200x200',
-    lg: 'https://placehold.co/250x200?text=<picture+/>+250x200',
-    xl: 'https://placehold.co/400x300?text=<picture+/>+400x300',
-  },
-};
-
-export const titleSizes = [undefined, 'large'];
-export const titles = [
-  'Short title',
-  'Title that is longer to showcase wrapping.',
-];
-export const description =
-  'Pretty long description but still ok if we really need to say something very important and it cannot be said in matter of 5 words. We also use it to showcase proper wrapping and image alignment.';
-
-export const imagePropsArr = [img, responsiveImg];
-export const colors = [undefined, 'white', 'orange'];

package/src/components/Pagination/Item.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { bool, string } from 'prop-types';
-import cx from 'classnames';
-
-import Icon from '../Icon/index';
-
-const propTypes = {
-  /** aria-label of page item */
-  ariaLabel: string,
-  /** Text label inside page item */
-  label: string,
-  /** Show icon as label */
-  hasIcon: bool,
-  /** Link href */
-  href: string,
-  /** Active state */
-  isActive: bool,
-  /** Is first item */
-  isFirst: bool,
-  /** Is last item */
-  isLast: bool,
-};
-
-const ITEM_CLASS_ROOT = 'pagination__item';
-const ANCHOR_CLASS_ROOT = 'pagination__link';
-
-const Item = ({
-  ariaLabel,
-  className,
-  hasIcon,
-  href,
-  isActive,
-  isFirst,
-  isLast,
-  label,
-  ...other
-}) => {
-  const itemClasses = cx(ITEM_CLASS_ROOT, className);
-
-  const anchorClasses = cx(ANCHOR_CLASS_ROOT, 'btn btn--square', {
-    [`${ANCHOR_CLASS_ROOT}--active`]: isActive,
-  });
-
-  return (
-    <li className={itemClasses} {...other}>
-      <a
-        href={href}
-        className={anchorClasses}
-        aria-current={isActive ? 'page' : null}
-        aria-label={ariaLabel || undefined}
-      >
-        {hasIcon && isFirst && <Icon name="chevron-start" />}
-        {!hasIcon && label}
-        {hasIcon && isLast && <Icon name="chevron-end" />}
-      </a>
-    </li>
-  );
-};
-
-Item.displayName = 'PaginationItem';
-Item.propTypes = propTypes;
-
-export default Item;

package/src/components/Pagination/Pagination.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import { string, shape, bool, arrayOf } from 'prop-types';
-import cx from 'classnames';
-
-import Item from './Item';
-import Separator from './Separator';
-import { getItemState } from './helpers';
-
-const itemShape = {
-  /** Page link href */
-  href: string.isRequired,
-  /** Text label inside page item */
-  label: string.isRequired,
-  /** Active state. */
-  isActive: bool,
-};
-
-const propTypes = {
-  /** Collapsed version */
-  isCompact: bool,
-  /** All pagination items - buttons & numbers */
-  items: arrayOf(shape(itemShape)).isRequired,
-  /** Accessibility label */
-  label: string,
-};
-
-const CLASS_ROOT = 'pagination';
-
-const Pagination = ({ className, label, isCompact, items, ...other }) => {
-  const classes = cx(CLASS_ROOT, className);
-
-  const activeIndex = items.findIndex(({ isActive }) => isActive);
-
-  return (
-    <nav aria-label={label}>
-      <ul className={classes} {...other}>
-        {items.map((item, index) => {
-          const {
-            isFirst,
-            isHidden,
-            isLast,
-            isSecond,
-            isSecondFromEnd,
-            hasIcon,
-            showSeparator,
-          } = getItemState({ activeIndex, items, isCompact, index });
-
-          return (
-            <React.Fragment key={index.toString()}>
-              {!isCompact && showSeparator && isSecond && <Separator />}
-              <Item
-                {...item}
-                isFirst={isFirst}
-                isLast={isLast}
-                className={cx({ hide: isHidden })}
-                hasIcon={hasIcon}
-              />
-              {!isCompact && showSeparator && isSecondFromEnd && <Separator />}
-            </React.Fragment>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};
-
-Pagination.displayName = 'Pagination';
-Pagination.propTypes = propTypes;
-
-export default Pagination;

package/src/components/Pagination/Pagination.mdx

@@ -1,45 +0,0 @@
-import {ComponentDocs,  Preview, Note, md } from '@lighting-beetle/lighter-styleguide';
-import Pagination from './index';
-
-# Pagination
-
-export 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 } : {}),
-}));
-
-export const label = "Výber stránok";
-
-Pagination is used to separate long lists or pages into more readable chunks and reduce server load by rendering a limited amount of items.
-
-The maximum of visible items is 5. 
-
-<Preview>
-  <Pagination label={label} items={getItems(10)} />
-</Preview>
-
-## Separators
-
-Separators are used when there is more than 5 items and the active page is not near the first or last item.
-
-<Preview>
-  <Pagination label={label} items={getItems(10, 3)} />
-  <Pagination label={label} items={getItems(10)} />
-  <Pagination label={label} items={getItems(10, 9)} />
-</Preview>
-
-## Compact
-
-Compact pagination is used in confined spaces, such as cards. First and last elements are replaced with an icon and separators are removed.
-
-<Preview>
-  <Pagination label={label} items={getItems(10, 1)} isCompact />
-  <Pagination label={label} items={getItems(10, 2)} isCompact />
-  <Pagination label={label} items={getItems(10)} isCompact />
-  <Pagination label={label} items={getItems(10, 9)} isCompact />
-  <Pagination label={label} items={getItems(10, 10)} isCompact />
-</Preview>
-
-<ComponentDocs title="<Pagination />" component={Pagination} />

package/src/components/Pagination/Separator.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-const CLASS_ROOT = 'pagination__separator';
-
-const Separator = ({ className, ...other }) => {
-  const itemClasses = cx(CLASS_ROOT, className);
-
-  return (
-    <li className={itemClasses} {...other}>
-      …
-    </li>
-  );
-};
-
-Separator.displayName = 'PaginationSeparator';
-
-export default Separator;