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

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Breadcrumbs from '../';
-
-const example = (
-  <>
-    <Breadcrumbs
-      label="Breadcrumbs"
-      items={[
-        {
-          text: 'Home',
-          url: '/styleguide',
-        },
-        {
-          text: 'Components',
-          url: '/components',
-        },
-        {
-          text: 'Breadcrumbs',
-          url: '#main',
-        },
-      ]}
-    />
-    <Breadcrumbs
-      label="Breadcrumbs 2"
-      items={[
-        {
-          text: 'Home',
-          url: '/styleguide',
-        },
-        {
-          text: 'Components',
-          url: '/components',
-        },
-        {
-          text: 'Breadcrumbs',
-        },
-      ]}
-    />
-  </>
-);
-
-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/Breadcrumbs/tests/Breadcrumbs.unit.test.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Breadcrumbs from '../Breadcrumbs';
-
-const itemsArr = [
-  { url: '/test1', text: 'test1-text' },
-  { text: 'test2-test' },
-  { url: '/test3', text: 'test3-text' },
-];
-
-// items array is required
-describe('rendering Breadcrumbs', () => {
-  describe('initial state', () => {
-    it('has default class osk-breadcrumbs', () => {
-      const { getByTestId } = render(
-        <Breadcrumbs items={[]} data-testid="test-id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('osk-breadcrumbs');
-    });
-    it('ordered list has default class osk-breadcrumbs__container', () => {
-      const { container } = render(<Breadcrumbs items={[]} />);
-      const orderList = container.querySelector('ol');
-      expect(orderList).toBeInTheDocument();
-      expect(orderList).toHaveClass('osk-breadcrumbs__container');
-    });
-  });
-  describe('passed props', () => {
-    it('passes other props', () => {
-      const { getByTestId } = render(
-        <Breadcrumbs data-testid="test" items={[]} />
-      );
-      expect(getByTestId('test')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Breadcrumbs data-testid="test-id" className="test-class" items={[]} />
-      );
-      expect(getByTestId('test-id')).toHaveClass('osk-breadcrumbs');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('nav element has aria-label attribute when label prop is passed', () => {
-      const { container } = render(
-        <Breadcrumbs data-testid="test" items={[]} label="test-label" />
-      );
-      expect(container.querySelector('nav').getAttribute('aria-label')).toBe(
-        'test-label'
-      );
-    });
-    it('has class osk-breadcrumbs--dark when darkMode prop is passed', () => {
-      const { container } = render(<Breadcrumbs items={[]} darkMode />);
-      expect(
-        container.getElementsByClassName('osk-breadcrumbs--dark').length
-      ).toBe(1);
-    });
-    itemsArr.map(({ url, text }, index) => {
-      it(`renders BreadcrumbItem with text ${text} ${
-        url ? 'inside achor element with url ' + url : ''
-      }`, () => {
-        const { container } = render(<Breadcrumbs items={itemsArr} />);
-        const listElements = container.querySelectorAll('li');
-        expect(listElements[index].textContent).toBe(text);
-        if (url) {
-          expect(listElements[index].children[0].getAttribute('href')).toBe(
-            url
-          );
-        }
-      });
-    });
-    it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
-      const { container } = render(<Breadcrumbs items={itemsArr} />);
-      const listElements = container.querySelectorAll('li');
-      expect(
-        listElements[listElements.length - 1].children[0].getAttribute(
-          'aria-current'
-        )
-      ).toBe('page');
-    });
-  });
-});

package/src/components/Button/Button.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import { bool, object, oneOf, string } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** Forwarded DOM element ref. */
-  elemRef: object,
-  /** Link with href attribute rendered as button. */
-  href: string,
-  /** Button type */
-  htmlType: string,
-  /** Active state. */
-  isActive: bool,
-  /** Forces default styling - use when inverse style is forced but not desired */
-  isDefault: bool,
-  /** Disabled state */
-  isDisabled: bool,
-  /** Inverse buttons for dark backgrounds */
-  isInverse: bool,
-  /** Button with same width as height. */
-  isSquare: bool,
-  /** Button sizes */
-  size: oneOf(['small', 'large']),
-  /** Visual type of button. */
-  type: oneOf(['primary', 'fill', 'ghost']),
-};
-
-const defaultProps = {
-  htmlType: 'button',
-};
-
-const CLASS_ROOT = 'btn';
-
-const Button = React.forwardRef(
-  (
-    {
-      className,
-      children,
-      htmlType,
-      href,
-      isActive,
-      isDefault,
-      isDisabled,
-      isInverse,
-      size,
-      isSquare,
-      type,
-      elemRef,
-      ...other
-    },
-    ref
-  ) => {
-    let Tag = 'button';
-
-    if (href) {
-      Tag = 'a';
-    }
-
-    const classes = cx(
-      CLASS_ROOT,
-      {
-        [`${CLASS_ROOT}--square`]: isSquare,
-        [`${CLASS_ROOT}--${size}`]: size,
-        [`${CLASS_ROOT}--${type}`]: type,
-        [`${CLASS_ROOT}--default`]: isDefault,
-        [`${CLASS_ROOT}--inverse`]: isInverse,
-        'is-active': isActive,
-      },
-      className
-    );
-
-    const props = {
-      'aria-disabled': isDisabled,
-      href,
-      type: href ? null : htmlType,
-      className: classes,
-      ref: elemRef,
-      ...other,
-    };
-
-    return (
-      <Tag ref={ref} {...props}>
-        {children}
-      </Tag>
-    );
-  }
-);
-
-Button.displayName = 'Button';
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
-
-export default Button;

package/src/components/Button/Button.mdx

@@ -1,273 +0,0 @@
-import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { Grid, GridCol, Icon, Bar, BarItem } from '../';
-
-import Button from './Button';
-import IconButton from './IconButton';
-
-export const buttonVariants = ['default', 'primary', 'fill', 'ghost'];
-
-# Button
-
-Buttons are control elements used for navigating and operating a page and form submission.
-
-## Example
-
-<Button>Button</Button>
-
-## Elements
-
-The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element:
-
-- `<a>` if it takes you somewhere (on page or elsewhere)
-- `<button>` if it does something (controls a section, submits a form, etc.)
-
-[Additional resources](#additional-resources)
-
-<Preview>
-  <Button>Button</Button>
-  <br />
-  <Button href="#">Anchor</Button>
-</Preview>
-
-## Arrangement
-
-The Button component implements right and bottom margin to ensure horizontal flow between multiple button elements and vertical flow with regular text. In case your buttons might break into multiple lines, use the [Buttons component](/components/buttons). The following example shows, that buttons flow nicely between paragraphs and the non-ideal case when they break into multiple lines.
-
-<Preview>
-  <p>
-    Buttons sit next to each other and provide necessary spacing when used in
-    regular text
-  </p>
-  <Button>Button 1</Button>
-  <Button>Button 2</Button>
-  <p>This paragraph is offset byt the bottom margin of preceeding buttons</p>
-  <Button>Don't do this</Button>
-  <br />
-  <Button href="/components/buttons">Wrap us in Buttons</Button>
-  <p>
-    When buttons might break into multiple lines, wrap them usng{' '}
-    <a href="/components/buttons">Buttons component</a> for better vertical
-    spacing.
-  </p>
-</Preview>
-
-## Variants
-
-<React.Fragment>
-  {buttonVariants.map(variant => {
-    const variantProp = variant === 'default' ? undefined : variant;
-    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
-    return (
-      <React.Fragment key={variant}>
-        <h3>{variantName}</h3>
-        <Preview>
-          <Button type={variantProp}>{variantName}</Button>
-          <Button type={variantProp} isActive>
-            {variantName} active
-          </Button>
-          <Button type={variantProp} isDisabled>
-            {variantName} disabled
-          </Button>
-        </Preview>
-      </React.Fragment>
-    );
-  })}
-</React.Fragment>
-<React.Fragment>
-  {buttonVariants.map(variant => {
-    const variantProp = variant === 'default' ? undefined : variant;
-    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
-    return (
-      <React.Fragment key={variant}>
-        <h3>{variantName} inverse </h3>
-        <Preview bgTheme="black">
-          <Button isInverse type={variantProp}>
-            {variantName} inverse
-          </Button>
-          <Button isInverse type={variantProp} isActive>
-            {variantName} inverse active
-          </Button>
-          <Button isInverse type={variantProp} isDisabled>
-            {variantName} inverse disabled
-          </Button>
-        </Preview>
-      </React.Fragment>
-    );
-  })}
-</React.Fragment>
-
-## Default important
-
-When white background is used inside black background, button uses style defined for black one and therefore has incorrect colour scheme. For this case we have class .btn--default that forces button to use default styles.
-
-<Preview
-  code={
-    <div className="bg-black">
-      <div className="bg-white">
-        <Button isDefault>button</Button>
-        <Button>button</Button>
-      </div>
-    </div>
-  }
->
-  <div className="bg-black" style={{ padding: '15px', paddingTop: '30px' }}>
-    <div className="bg-white">
-      <Bar>
-        <BarItem>
-          <Button isDefault>button</Button>
-        </BarItem>
-        <BarItem>{'<-- button with btn--default class'}</BarItem>
-      </Bar>
-      <Bar className="mb-none">
-        <BarItem>
-          <Button>button</Button>
-        </BarItem>
-        <BarItem>{"<-- there's a button"}</BarItem>
-      </Bar>
-    </div>
-  </div>
-</Preview>
-
-## Sizes
-
-<Preview>
-  <Button size="large">Large</Button>
-  <Button>Default</Button>
-  <Button size="small">Small</Button>
-</Preview>
-
-## Square
-
-Square buttons maintain their shape, no matter what you throw inside. They should be used for [icons](#icon-only).
-
-<Preview>
-  <Button isSquare size="small">
-    A
-  </Button>
-  <Button isSquare>A</Button>
-  <Button isSquare size="large">
-    A
-  </Button>
-  <br />
-  <Button isSquare size="small">
-    Overflow
-  </Button>
-  <Button isSquare>Overflow</Button>
-  <Button isSquare size="large">
-    Overflow
-  </Button>
-</Preview>
-
-## Icons
-
-### Icon only
-
-<Preview>
-  <IconButton size="small" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton size="large" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <br />
-  <IconButton type="ghost" size="small" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton type="ghost" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton type="ghost" size="large" isSquare iconName="settings">
-    Settings
-  </IconButton>
-</Preview>
-
-### Icon and text
-
-<Preview>
-  <IconButton type="primary" size="small" iconName="add">
-    Pridať
-  </IconButton>
-  <IconButton type="primary" iconName="add">
-    Pridať
-  </IconButton>
-  <IconButton type="primary" size="large" iconName="add">
-    Pridať
-  </IconButton>
-  <br />
-  <IconButton size="small" iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <IconButton iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <IconButton size="large" iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <br />
-  <IconButton
-    type="ghost"
-    size="small"
-    iconName="chevron-right"
-    iconPosition="right"
-  >
-    Ďalej
-  </IconButton>
-  <IconButton type="ghost" iconName="chevron-right" iconPosition="right">
-    Ďalej
-  </IconButton>
-  <IconButton
-    type="ghost"
-    size="large"
-    iconName="chevron-right"
-    iconPosition="right"
-  >
-    Ďalej
-  </IconButton>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Button />" component={Button} />
-<ComponentDocs title="<IconButton />" component={IconButton} />
-
-## Accessibility
-
-The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element. The rule of thumb is to use `<a>` if it takes you somewhere, `<button>` if it does something and `<button type="submit/rest">` if it's used as a form control. Check the [articles below](#additional-resources) for more information.
-
-### Color contrast
-
-Buttons do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
-
-[Technique G145](https://www.w3.org/WAI/WCAG21/Techniques/general/G145) describes that increasing font size is sufficient to meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), but a business decision has been made not to follow this for aesthetics reasons.
-
-### Don't disable buttons
-
-Especially form submit buttons. A disabled button is not keyboard focusable. Instead of using the `[disabled]` attribute, it's advised to rather use `[aria-disabled=true]` - it still remains focusable, and a screenreader can find it and announce it's contents, along with the information that it's disabled.
-
-Users should be able to submit incomplete and invalid forms, and should get relevant validation feedback, which explains what went wrong and how to fix it. It's considered a bad practice to let the user figure out thier errors themselves.
-
-### Icons
-
-While it's recommended to always show a textual label acompanying an icon, this rule can't be always followed. When this happens, always make sure there is a textual alternative readable by assistive technology. There are three options:
-
-- alt attribute on the icon OR
-- `[aria-label]` on the button element OR
-- a visually visually hidden but accessible element (e.g. `.sr-only`)
-
-### Additional resources
-
-- [When Is A Button Not A Button?](https://www.smashingmagazine.com/2019/02/buttons-interfaces/)
-- [Anchors, Buttons, And Accessibility](https://formidable.com/blog/2014/05/08/anchors-buttons-and-accessibility/)
-
-## Aliases
-
-```
-<ButtonPrimary /> === <Button type="primary" />
-<ButtonFill /> === <Button type="fill" />
-<ButtonGhost /> === <Button type="ghost" />
-```

package/src/components/Button/IconButton.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { string, oneOf, bool } from 'prop-types';
-
-import Icon from '../Icon';
-
-import Button from './Button';
-
-const propTypes = {
-  /** Name of the icon */
-  iconName: string.isRequired,
-  /** Position of the icon */
-  iconPosition: oneOf(['left', 'right']),
-  /** Class of the icon */
-  iconClassName: string,
-  /** Button size. Also affects icon size */
-  size: oneOf(['small', 'large']),
-  /** Use square button. Children are rendered as visually hidden */
-  isSquare: bool,
-};
-
-const defaultProps = {
-  iconPosition: 'left',
-};
-
-const IconButton = React.forwardRef(
-  (
-    {
-      iconName,
-      iconPosition,
-      iconClassName,
-      children,
-      size,
-      isSquare,
-      ...other
-    },
-    ref
-  ) => {
-    const IconComponent = ({ className, ...props }) => (
-      <Icon
-        name={iconName}
-        size={size ?? 'medium'}
-        className={cx(iconClassName, className)}
-        {...props}
-      />
-    );
-
-    if (isSquare) {
-      return (
-        <Button size={size} isSquare {...other}>
-          <IconComponent />
-          <span className="visually-hidden">{children}</span>
-        </Button>
-      );
-    }
-
-    return (
-      <Button ref={ref} size={size} {...other}>
-        {iconPosition === 'left' && (
-          <IconComponent className="btn__icon-left" />
-        )}
-        {children}
-        {iconPosition === 'right' && (
-          <IconComponent className="btn__icon-right" />
-        )}
-      </Button>
-    );
-  }
-);
-
-IconButton.propTypes = propTypes;
-IconButton.defaultProps = defaultProps;
-IconButton.displayName = 'IconButton';
-
-export default IconButton;

package/src/components/Button/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import Button from './Button';
-import IconButton from './IconButton';
-
-import './styles/style.scss';
-
-export default Button;
-
-export const ButtonPrimary = props => <Button type="primary" {...props} />;
-ButtonPrimary.displayName = 'ButtonPrimary';
-
-export const ButtonFill = props => <Button type="fill" {...props} />;
-ButtonFill.displayName = 'ButtonFill';
-
-export const ButtonGhost = props => <Button type="ghost" {...props} />;
-ButtonGhost.displayName = 'ButtonGhost';
-
-export { IconButton };