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

package/src/components/Skeleton/Skeleton.mdx

@@ -1,90 +0,0 @@
-
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Skeleton from './index';
-import Card, { CardSection } from '../Card';
-import Grid, { GridCol } from '../Grid';
-
-# Skeleton
-
-Basic loading indicator used as placeholder of the loaded component
-
-<Preview>
-  <Skeleton />
-</Preview>
-
-## Usage
-
-Feel free to adjust the size of the skeleton with [Grid component](/components/grid).
-
-<Preview>
-  <Grid>
-    <GridCol size={6}>
-      <Skeleton className="h2" />
-    </GridCol>
-  </Grid>
-  <h2>
-    <Skeleton />
-  </h2>
-</Preview>
-
-To simulate the structure of the component being loaded, mix up some skeletons
-
-<Preview>
-  <Card>
-    <CardSection>
-      <Grid>
-        <GridCol size={8}>
-          <Skeleton className="h2" />
-        </GridCol>
-      </Grid>
-      <Grid>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol size={6}><Skeleton /></GridCol>
-      </Grid>
-    </CardSection>
-  </Card>
-</Preview>
-
-<Preview>
-  <Grid>
-    {[1,2,3].map(item => (
-      <GridCol key={item.toString()} size={{ md: 6, lg: 4}}>
-        <Card>
-          <CardSection>
-            <Grid justifyHeight>
-              <GridCol size={6}>
-                <Skeleton />
-              </GridCol>
-              <GridCol size="auto">
-                <Grid>
-                  <GridCol>
-                    <Skeleton className="h2" />
-                  </GridCol>
-                </Grid>
-                <Grid>
-                  {[1,2,3,4,5,6,7].map(item => (
-                    <GridCol key={item.toString()}><Skeleton /></GridCol>
-                  ))}
-                  <GridCol size={6}><Skeleton /></GridCol>
-                </Grid>
-              </GridCol>
-            </Grid>
-          </CardSection>
-        </Card>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Skeleton />" component={Skeleton} />
-
-## Accessibility
-
-You should announce the loading state using aria-busy in the appropriate live region

package/src/components/Skeleton/index.js

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

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

@@ -1,29 +0,0 @@
-@use '../../../styles/tokens/color';
-
-@keyframes skeletonKeyframes {
-  0% {
-    opacity: 0;
-  }
-
-  30% {
-    opacity: 0.8;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-  }
-};
-
-$skeleton-base: (
-  background-color: color.$gray-400,
-);
-
-$skeleton-overlay: (
-  border-radius: 3px,
-  background-color: color.$gray-300,
-  animation: 1.5s skeletonKeyframes linear infinite,
-);

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

@@ -1,22 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './config';
-
-@mixin base {
-  @include generate.css-map(config.$skeleton-base);
-
-  position: relative;
-  display: inline-block;
-  line-height: 1;
-  width: 100%;
-
-  &::after {
-    @include generate.css-map(config.$skeleton-overlay);
-
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}

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

@@ -1,5 +0,0 @@
-@use './mixins';
-
-.skeleton {
-  @include mixins.base;
-}

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Skeleton from '../';
-
-const example = <Skeleton />;
-
-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/Skeleton/tests/Skeleton.unit.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Skeleton from '../Skeleton';
-
-describe('rendering Skeleton', () => {
-  describe('initial state', () => {
-    it('has default className skeleton', () => {
-      const { getByTestId } = render(<Skeleton data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('skeleton');
-    });
-  });
-
-  describe('passed props', () => {
-    it('has additional class when className is set ', () => {
-      const { getByTestId } = render(
-        <Skeleton data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('skeleton');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-  });
-});

package/src/components/SkipLink/SkipLink.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { string } from 'prop-types';
-
-import './styles/style.scss';
-
-const propTypes = {
-  href: string,
-};
-
-const CLASS_ROOT = 'skip-link';
-
-const SkipLink = ({ href = '#maincontent', className, ...props }) => {
-  const classes = cx(CLASS_ROOT, className);
-  return (
-    <a href={href} className={classes} {...props}>
-      Preskočiť na hlavný obsah
-    </a>
-  );
-};
-
-SkipLink.propTypes = propTypes;
-SkipLink.displayName = 'SkipLink';
-
-export default SkipLink;

package/src/components/SkipLink/SkipLink.mdx

@@ -1,23 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview, Code } from '../../styleguide/';
-import SkipLink from './';
-
-# Skip link
-
-Provides keyboard users to skip parts of a webpage. Usually a skip link is used as a first element of a page and points to main content. This allows users to skip main navigation and dive into subject matter of the requested page.
-
-The link is visually hidden until it's focused by keyboard.
-
-## Example
-
-<Preview>
-  <SkipLink href="#example-skip-link-target" />
-
-  <div id="example-skip-link-target">
-    Skip link target element
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs component={SkipLink} />

package/src/components/SkipLink/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './SkipLink';

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

@@ -1,18 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-.skip-link {
-  padding: space.get('xsmall') space.get('small');
-  background: color.$orange;
-  color: color.$black;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 12;
-  transform: translateY(-100%);
-  transition: transform 0.2s ease-out;
-}
-
-.skip-link:focus {
-  transform: none;
-}

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

@@ -1,74 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import SkipLink from '../SkipLink';
-import Base from '../../../pages/utils/Base';
-
-const TestBase = ({ skipProps }) => (
-  <Base>
-    <SkipLink data-testid="skip-link" {...skipProps} />
-    <nav>
-      <a href="/">Home</a>
-    </nav>
-    <main tabIndex={-1} id="maincontent" data-testid="maincontent">
-      <h1>Heading</h1>
-      <a href="/" data-testid="mainlink">
-        Link
-      </a>
-    </main>
-  </Base>
-);
-
-//children were required plus they helped to check defaultTabIndex
-describe('rendering', () => {
-  describe('initial state', () => {
-    it('rendered', () => {
-      const { getByTestId } = render(<TestBase />);
-      expect(getByTestId('skip-link')).toBeInTheDocument();
-    });
-    it('has class skip-link', () => {
-      const { getByTestId } = render(<TestBase />);
-      expect(getByTestId('skip-link')).toHaveClass('skip-link');
-    });
-    it('has href #maincontent', () => {
-      const { getByTestId } = render(<TestBase />);
-      expect(getByTestId('skip-link').getAttribute('href')).toBe(
-        '#maincontent'
-      );
-    });
-  });
-  describe('passed props', () => {
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <TestBase skipProps={{ className: 'test-class' }} />
-      );
-      expect(getByTestId('skip-link')).toHaveClass('skip-link');
-      expect(getByTestId('skip-link')).toHaveClass('test-class');
-    });
-  });
-});
-
-describe('keyboard navigation', () => {
-  it('focuses on first tab', async () => {
-    render(<TestBase />);
-
-    const { tab } = userEvent.setup();
-    await tab();
-
-    expect(screen.getByTestId('skip-link')).toHaveFocus();
-  });
-
-  it.failing('focuses main on click', async () => {
-    render(<TestBase />);
-
-    const { tab, keyboard } = userEvent.setup();
-    await tab();
-    await keyboard('{Enter}');
-
-    expect(screen.getByTestId('maincontent')).toHaveFocus();
-  });
-});

package/src/components/Stepbar/Stepbar.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import { arrayOf, bool, shape, string, node, oneOf } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** arial label of nav element */
-  label: string,
-  /** Titles of non-current steps are visible from this breakpoint */
-  showTitlesFrom: oneOf(['md', 'lg', 'xl']),
-  steps: arrayOf(
-    shape({
-      href: string,
-      isCurrent: bool,
-      title: node,
-    })
-  ).isRequired,
-  variant: oneOf(['default', 'inverse']),
-};
-
-const defaultProps = {
-  label: 'krok',
-};
-
-const CLASS_ROOT = 'stepbar';
-
-const Stepbar = ({
-  showTitlesFrom,
-  steps,
-  label,
-  variant,
-  className,
-  ...other
-}) => {
-  const currentItemIndex = steps.findIndex(step => {
-    return step.isCurrent;
-  });
-
-  const GetStepContent = (step, index) => {
-    const fullTitle = `${index + 1}. ${step.title}`;
-    return index < currentItemIndex ? (
-      <a
-        {...{
-          href: step.href,
-          className: cx(`${CLASS_ROOT}__link`, {
-            [`${CLASS_ROOT}__title-${showTitlesFrom}`]: showTitlesFrom,
-          }),
-        }}
-      >
-        {fullTitle}
-      </a>
-    ) : (
-      <span
-        aria-current={index === currentItemIndex ? 'step' : ''}
-        className={showTitlesFrom ? `stepbar__title-${showTitlesFrom}` : ''}
-      >
-        {fullTitle}
-      </span>
-    );
-  };
-
-  return (
-    <nav
-      className={cx(
-        CLASS_ROOT,
-        {
-          [`${CLASS_ROOT}--${variant}`]: variant,
-          [`${CLASS_ROOT}--wide-${showTitlesFrom}`]: showTitlesFrom,
-        },
-        className
-      )}
-      aria-label={label}
-      {...other}
-    >
-      <ol className={`${CLASS_ROOT}__list`}>
-        {steps.map((step, index) => {
-          return (
-            <li
-              key={index.toString()}
-              className={cx(`${CLASS_ROOT}__item`, {
-                [`${CLASS_ROOT}__item--current`]: index === currentItemIndex,
-              })}
-            >
-              {GetStepContent(step, index)}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-Stepbar.propTypes = propTypes;
-Stepbar.defaultProps = defaultProps;
-Stepbar.displayName = 'Stepbar';
-
-export default Stepbar;

package/src/components/Stepbar/Stepbar.mdx

@@ -1,137 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Stepbar from './index';
-
-# Stepbar
-
-Stepped navigation for multi step processes.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Dark variant
-
-<Preview>
-  <div className="section bg-black mb-small">
-    <Stepbar
-      variant="dark"
-      steps={[
-        {
-          title: 'Paušál',
-          href: '#',
-        },
-        {
-          title: 'default behaviour on black background',
-          href: '#',
-          isCurrent: true,
-        },
-        {
-          title: 'TV (nepovinné)',
-          href: '#',
-        },
-      ]}
-    />
-  </div>
-  <Stepbar
-    variant="inverse"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'with class .stepbar--inverse',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Step links
-
-Previous step links must point to a related part of the stepped process, ideally the first interactive element.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '/components/stepbar#form-element',
-      },
-      {
-        title: 'Internet',
-        href: '#form-element',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-  <input type="text" id="form-element" placeholder="stepped form input" />
-</Preview>
-
-## Responsive behaviour
-
-On small viewports, steps are displayed as rectangles without titles. As the width of screen increases, the title of the active element is shown, and arrows are added. Finnaly titles of non-active steps can be shown using the responsive `--wide-[md/lg/xl]` modifier.
-
-- xs: item titles are hidden, only numbers are visible.
-- sm: current item title is visible
-- md and larger: optionally show all step titles
-
-<Preview>
-  <Stepbar
-    showTitlesFrom="lg"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'Televízia',
-        href: '#',
-      },
-      {
-        title: 'Doručenie',
-        href: '#',
-      },
-      {
-        title: 'Platba',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Stepbar />" component={Stepbar} />

package/src/components/Stepbar/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Stepbar';

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

@@ -1,106 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-@use '../../Link/styles/config.scss' as linkConfig;
-
-
-$item-base: (
-  display: inline-flex,
-  align-items: center,
-  padding-top: space.get('small'),
-  padding-bottom: space.get('small'),
-  margin: 0 0 0 space.get('xsmall'),
-  color: color.$white,
-);
-
-$arrow-spacing-small: (
-  default: (
-    padding-left: convert.to-rem(30px),
-    padding-right: convert.to-rem(14px),
-  ),
-  first: (
-    padding-left: convert.to-rem(30px),
-  ),
-  last: (
-    padding-right: convert.to-rem(30px),
-  ),
-);
-
-$arrow-spacing: (
-  default: (
-    padding-left: convert.to-rem(40px),
-    padding-right: convert.to-rem(19px),
-  ),
-  first: (
-    padding-left: convert.to-rem(35px),
-  ),
-  last: (
-    padding-right: convert.to-rem(35px),
-  ),
-);
-
-$arrows: (
-  default: (
-    done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='black'/%3E%3C/svg%3E"),
-    current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
-    next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
-  ),
-  inverse: (
-    done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
-    current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
-    next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
-  )
-);
-
-$item-done-colors: (
-  default: (
-    background: color.$black,
-  ),
-  inverse: (
-    background: color.$white,
-  ),
-);
-
-$item-colors: (
-  current: (
-    background: color.$orange-dark,
-    color: color.$white,
-
-  ),
-  next: (
-    background: color.$gray-300,
-    color: color.$gray-700,
-  ),
-);
-
-$link-colors: (
-  default: (
-    base: (
-      color: color.$white,
-    ),
-    interaction: (
-      color: color.$orange,
-    ),
-  ),
-  inverse: (
-    base: (
-      color: color.$black,
-    ),
-    interaction: (
-      color: color.$orange-dark,
-    ),
-  ),
-);
-
-$link-underline: (
-  text-decoration: underline,
-  text-underline-position: under,
-  box-shadow: none,
-);
-