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

package/src/components/Bar/Bar.mdx

@@ -1,203 +0,0 @@
-import { Code, ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Bar, { BarItem, BarBreak } from './index';
-
-export const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
-export const spaces = ['small', 'default', 'large'];
-export const alignments = ['start', 'center', 'end'];
-
-# Bar
-
-We use bar to create horizontal layouts with predefined spacings between items.
-
-<Preview>
-  <Bar tag="ul">
-    <BarItem tag="li">
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem tag="li" isFilling>
-      <div className="l-debug">I'm filling good</div>
-    </BarItem>
-    <BarItem tag="li">
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Spacing
-
-If you need to adjust space widths between items, it can be done by adjusted with
-`.bar--space-small` and `.bar--space-large` classes.
-
-<Preview>
-  {spaces.map(space => (
-    <Bar key={space} space={space === 'default' ? undefined : space}>
-      <BarItem>
-        <div className="l-debug">space</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">set</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">to</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">
-          <strong>{space}</strong>
-        </div>
-      </BarItem>
-    </Bar>
-  ))}
-</Preview>
-
-## Vertical alignment
-
-You have three options to vertically align all items of the `.bar` component.
-You can use a standard `.align-items-start`, `.align-items-center`,
-`.align-items-end` known as [vertical utility classes](/utilities/flex-alignment#vertical).
-
-<Preview>
-  {alignments.map(align => (
-    <Bar key={align} align={align}>
-      <BarItem>
-        <div className="l-debug">
-          <strong>{capitalize(align)}</strong> alignment
-        </div>
-      </BarItem>
-      <BarItem isFilling>
-        <div className="l-debug">
-          <p>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque,
-            ipsum deleniti quia iure similique mollitia quam excepturi
-            laudantium architecto, aperiam magnam exercitationem magni commodi
-            laborum molestiae dolore. Corrupti, officia perferendis?
-          </p>
-        </div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">Item</div>
-      </BarItem>
-    </Bar>
-  ))}
-</Preview>
-
-## Vertical bar
-
-Bar can be use to stack elements vertically with `.bar--vertical` class.
-
-<Preview>
-  <Bar isVertical>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem isFilling>
-      <div className="l-debug">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
-          incidunt veniam minima quasi eligendi amet ullam explicabo laborum
-          aperiam accusantium hic laboriosam doloremque expedita odit ex
-          consequatur voluptas aliquid soluta.
-        </p>
-      </div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Item filling the space
-
-If one or more items need to fill maximum available space available you can use
-`.bar__item--fill` class to do that.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem isFilling>
-      <div className="l-debug">I'm filling good</div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Third item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Item shrinking to fit
-
-If you need an item to shrink where there is lack of space, there is a
-`.bar__item--shrink` class to do that.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem canShrink>
-      <div className="l-debug">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium
-          deleniti dignissimos recusandae nesciunt perferendis cupiditate
-          perspiciatis harum odit eaque aspernatur dolorem rerum ratione
-          repudiandae qui alias assumenda saepe, atque reiciendis?
-        </p>
-      </div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Third item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Bar nowrap
-
-`.bar--nowrap` is used to **force bar items to stay in one line** at all times.
-
-<Preview>
-  <Bar canWrap={false}>
-    {[...Array(20)].map((_, i) => (
-      <BarItem key={i.toString()}>
-        <div className="l-debug">Item</div>
-      </BarItem>
-    ))}
-  </Bar>
-</Preview>
-
-## Bar break
-
-`.bar__break` breaks horizontal bar into multiple lines.
-
-Pro tip: use [visibility classes](/utilities/visibility) to show
-and hide the break to adjust layout for different breakpoints.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarBreak />
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Bar />" component={Bar} />
-
-<ComponentDocs title="<BarItem />" component={BarItem} />
-
-## Accessibility
-
-The Bar component is primarily used for layout, and as such, should not have any
-impact on accessibility.
-
-Beware however when you are using it for layouts inside
-[inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
-such as form labels. `<Bar />` and `<BarItem />` benefit from the tag prop to
-render any html element you want it to.

package/src/components/Bar/BarBreak.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { string } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** HTML tag to render the compontent with */
-  tag: string,
-};
-
-const defaultProps = {
-  tag: 'div',
-};
-
-const CLASS_ROOT = 'bar__break';
-
-const BarBreak = ({ className, tag, ...other }) => {
-  const classes = cx(CLASS_ROOT, className);
-
-  const Tag = tag;
-
-  return <Tag className={classes} {...other} />;
-};
-
-BarBreak.displayName = 'BarBreak';
-BarBreak.propTypes = propTypes;
-BarBreak.defaultProps = defaultProps;
-
-export default BarBreak;

package/src/components/Bar/BarItem.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { bool, string } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** Bar item could shrink and wrap content if there is not enough empty space */
-  canShrink: bool,
-  /** Bar item should fill empty space */
-  isFilling: bool,
-  /** Tag of the item */
-  tag: string,
-};
-
-const defaultProps = {
-  tag: 'div',
-};
-
-const CLASS_ROOT = 'bar__item';
-
-const BarItem = ({ className, tag, isFilling, canShrink, ...other }) => {
-  const Tag = tag;
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--fill`]: isFilling,
-      [`${CLASS_ROOT}--shrinkable`]: canShrink,
-    },
-    className
-  );
-
-  return <Tag className={classes} {...other} />;
-};
-
-BarItem.displayName = 'BarItem';
-BarItem.propTypes = propTypes;
-BarItem.defaultProps = defaultProps;
-
-export default BarItem;

package/src/components/Bar/index.js

@@ -1,8 +0,0 @@
-import Bar from './Bar';
-
-import './styles/style.scss';
-
-export default Bar;
-
-export { default as BarItem } from './BarItem';
-export { default as BarBreak } from './BarBreak';

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

@@ -1,10 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-
-$spacing: (
-  default: space.get(),
-  small: space.get('small'),
-  large: space.get('large'),
-);
-
-$border: 2px solid color.$black;

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

@@ -1,84 +0,0 @@
-@use './../../../styles/tokens/space';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './config';
-
-@mixin bar-base {
-  display: flex;
-  margin-bottom: space.get();
-}
-
-@mixin bar-horizontal() {
-  flex-flow: row;
-  flex-wrap: wrap;
-  align-items: center;
-  padding-left: 0;
-}
-
-@mixin bar-vertical {
-  height: 100%;
-  flex-flow: column;
-  align-items: stretch;
-  margin-top: 0;
-}
-
-@mixin bar-item-base() {
-  flex: 0 0 auto;
-  display: block;
-  min-width: 0;
-  align-items: center;
-
-  @include layout.reset-last-child-margin-bottom;
-}
-
-@mixin bar-item-horizontal {
-  margin-bottom: 0;
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-
-@mixin bar-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
-    margin-top: -($space);
-  }
-}
-
-@mixin bar-item-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
-    margin-top: $space;
-    margin-right: $space;
-  }
-
-  @if ($direction == 'vertical') {
-    margin-bottom: $space;
-  }
-}
-
-@mixin bar-item-vertical {
-  margin-top: 0;
-  margin-right: 0;
-}
-
-@mixin bar-item-fill {
-  flex: 1 0 1px;
-}
-
-@mixin bar-item-shrinkable {
-  flex-shrink: 1;
-}
-
-@mixin bar-border() {
-  border-left: $border;
-  align-self: stretch;
-}
-
-@mixin bar-break() {
-  flex: 1 0 100%;
-}
-
-@mixin bar-nowrap() {
-  flex-wrap: nowrap;
-}

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

@@ -1,60 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './config';
-@use './mixins';
-
-.bar__item {
-  @include mixins.bar-item-base();
-
-  &--shrinkable {
-    @include mixins.bar-item-shrinkable;
-  }
-
-  &--fill {
-    @include mixins.bar-item-fill;
-  }
-}
-
-.bar {
-  $this: &;
-
-  @include mixins.bar-base();
-  @include mixins.bar-horizontal();
-
-  &--nowrap {
-    @include mixins.bar-nowrap();
-  }
-
-  > .bar__item {
-    @include mixins.bar-item-horizontal();
-  }
-
-  @each $space, $size in config.$spacing {
-    &#{generate.variant-name($space, '--space-')} {
-      > .bar__item {
-        @include mixins.bar-item-spacing('horizontal', $size);
-      }
-      @include mixins.bar-spacing('horizontal', $size);
-    }
-  }
-
-  &--vertical {
-    @include mixins.bar-vertical();
-
-    > .bar__item {
-      @include mixins.bar-item-vertical();
-    }
-
-    @each $space, $size in config.$spacing {
-      &#{generate.variant-name($space, '#{$this}--space-')} {
-        //stylelint-disable-next-line max-nesting-depth
-        > .bar__item {
-          @include mixins.bar-item-spacing('vertical', $size);
-        }
-      }
-    }
-  }
-}
-
-.bar__break {
-  @include mixins.bar-break;
-}

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Bar, { BarItem } from '../';
-
-const example = (
-  <>
-    <Bar>
-      <BarItem>Lorem</BarItem>
-      <BarItem isFilling>ipsum</BarItem>
-    </Bar>
-    <Bar tag="span">
-      <BarItem tag="span">Lorem</BarItem>
-      <BarItem tag="span" isFilling>
-        ipsum
-      </BarItem>
-    </Bar>
-  </>
-);
-
-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/Bar/tests/Bar.unit.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Bar from '../';
-
-describe('rendering Bar', () => {
-  describe('initial state', () => {
-    it('has default class bar', () => {
-      const { getByTestId } = render(<Bar data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('bar');
-    });
-  });
-
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Bar>test</Bar>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Bar className="test-class" data-testid="test-id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-
-    ['start', 'end', 'center'].map(align => {
-      it(`has align-items-${align} class when align is ${align}`, () => {
-        const { getByTestId } = render(
-          <Bar data-testid="test-id" align={align} />
-        );
-        expect(getByTestId('test-id')).toHaveClass(`align-items-${align}`);
-      });
-    });
-
-    ['small', 'large'].map(space => {
-      it(`has bar--space-${space} class when space is ${space}`, () => {
-        const { getByTestId } = render(
-          <Bar data-testid="test-id" space={space} />
-        );
-        expect(getByTestId('test-id')).toHaveClass(`bar--space-${space}`);
-      });
-    });
-
-    it('has class bar--nowrap when canWrap is set to false', () => {
-      const { getByTestId } = render(
-        <Bar data-testid="test-id" canWrap={false} />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar--nowrap');
-    });
-
-    it('has class bar--vertical when isVertical is set to true', () => {
-      const { getByTestId } = render(
-        <Bar data-testid="test-id" isVertical={true} />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar--vertical');
-    });
-  });
-});

package/src/components/Bar/tests/BarBreak.unit.test.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import BarBreak from '../BarBreak';
-
-describe('rendering barBreak', () => {
-  describe('initial state', () => {
-    it('has default class bar__break', () => {
-      const { getByTestId } = render(<BarBreak data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('bar__break');
-    });
-
-    it('has default tag div', () => {
-      const { container } = render(<BarBreak />);
-      expect(container.querySelector('div')).toBeTruthy();
-    });
-  });
-
-  describe('passed props', () => {
-    it('has tag span when tag is set to span', () => {
-      const { container } = render(<BarBreak tag="span" />);
-      expect(container.querySelector('span')).toBeTruthy();
-    });
-
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <BarBreak data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar__break');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-  });
-});

package/src/components/Bar/tests/BarItem.unit.test.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import BarItem from '../BarItem';
-
-describe('rendering barItem', () => {
-  describe('initial state', () => {
-    it('has default class bar__item', () => {
-      const { getByTestId } = render(<BarItem data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('bar__item');
-    });
-
-    it('has default tag div', () => {
-      const { container } = render(<BarItem />);
-      expect(container.querySelector('div')).toBeTruthy();
-    });
-  });
-
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<BarItem>test</BarItem>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-
-    it('has tag span when tag is set to span', () => {
-      const { container } = render(<BarItem tag="span" />);
-      expect(container.querySelector('span')).toBeTruthy();
-    });
-
-    it('has class bar__item--shrinkable when canShrink is set to true', () => {
-      const { getByTestId } = render(
-        <BarItem data-testid="test-id" canShrink={true} />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar__item--shrinkable');
-    });
-
-    it('has class bar__item--fill when canShrink is set to true', () => {
-      const { getByTestId } = render(
-        <BarItem data-testid="test-id" isFilling={true} />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar__item--fill');
-    });
-
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <BarItem data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('bar__item');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-  });
-});

package/src/components/BlockAction/BlockAction.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { element } from 'prop-types';
-
-import CloneElementWithClassName from './CloneElementWithClassName';
-import { Provider } from './Context';
-
-const propTypes = {
-  /** 1 and only one single element */
-  children: element.isRequired,
-};
-
-const BlockAction = props => {
-  return (
-    <Provider>
-      <CloneElementWithClassName
-        {...props}
-        className="block-action"
-        data-block-action
-      />
-    </Provider>
-  );
-};
-
-BlockAction.propTypes = propTypes;
-BlockAction.displayName = 'BlockAction';
-
-export default BlockAction;