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

package/src/components/Forms/InputStepper/InputStepper.static.js

@@ -1,162 +0,0 @@
-export const defaultConfig = {
-  nonEditableInput: false,
-  min: 1,
-  max: 999,
-  defaultValue: 1,
-};
-
-export default class InputStepper {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-    this.input = null;
-    this.numberDisplay = null;
-    this.add = null;
-    this.remove = null;
-    this.element.ODS_InputStepper = this;
-    this.handleButtonClick = this.handleButtonClick.bind(this);
-    this.handleInputClick = this.handleInputClick.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleButtonState = this.handleButtonState.bind(this);
-
-    this.init();
-  }
-
-  handleInputClick() {
-    this.input && this.input.select();
-  }
-
-  handleButtonState() {
-    let { min, max } = this.config;
-    const value = !this.config.nonEditableInput
-      ? parseInt(this.input.value, 10)
-      : parseInt(this.numberDisplay.textContent, 10);
-
-    if (this.add && typeof max === 'number' && value >= max) {
-      this.add.setAttribute('aria-disabled', true);
-      this.add.setAttribute('disabled', true);
-    } else {
-      this.add.removeAttribute('aria-disabled');
-      this.add.removeAttribute('disabled');
-    }
-    if (this.remove && typeof min === 'number' && value <= min) {
-      this.remove.setAttribute('aria-disabled', true);
-      this.remove.setAttribute('disabled', true);
-    } else {
-      this.remove.removeAttribute('aria-disabled');
-      this.remove.removeAttribute('disabled');
-    }
-  }
-
-  handleInputChange(e) {
-    let { min, max } = this.config;
-
-    if (e) {
-      if (min && e.target.value <= min) {
-        e.target.value = min;
-      }
-      if (max && e.target.value >= max) {
-        e.target.value = max;
-      }
-    }
-  }
-
-  handleButtonClick(e) {
-    let { min, max } = this.config;
-    let value = !this.config.nonEditableInput
-      ? parseInt(this.input.value, 10)
-      : parseInt(this.numberDisplay.textContent, 10);
-
-    if (e.target.classList.contains('input-stepper__button--minus')) {
-      if (min && value <= min) {
-        if (e.target.getAttribute('disabled') === 'true') return;
-        e.target.setAttribute('aria-disabled', true);
-        e.target.setAttribute('disabled', true);
-        return;
-      }
-      value -= 1;
-    }
-    if (e.target.classList.contains('input-stepper__button--plus')) {
-      if (max && value >= max) {
-        if (e.target.getAttribute('disabled') === 'true') return;
-        e.target.setAttribute('aria-disabled', true);
-        e.target.setAttribute('disabled', true);
-        return;
-      }
-      value += 1;
-    }
-    if (!this.config.nonEditableInput) {
-      this.input.value = value;
-    } else {
-      this.numberDisplay.textContent = value;
-    }
-    this.handleButtonState();
-  }
-
-  init() {
-    this.config = {
-      ...this.config,
-      ...JSON.parse(this.element.getAttribute('data-inputstepper')),
-    };
-
-    if (!this.config.nonEditableInput) {
-      this.input = this.element.querySelector('.input-stepper__field');
-      this.input.value = this.defaultValue;
-    } else {
-      this.numberDisplay = this.element.querySelector('.input-stepper__number');
-      this.numberDisplay.textContent = this.defaultValue;
-    }
-    this.add = this.element.querySelector('.input-stepper__button--plus');
-    this.remove = this.element.querySelector('.input-stepper__button--minus');
-
-    let { min, max, defaultValue } = this.config;
-
-    if (defaultValue) {
-      if (!this.config.nonEditableInput) {
-        this.input.value = defaultValue;
-      } else {
-        this.numberDisplay.textContent = defaultValue;
-      }
-    }
-    if (min !== undefined) {
-      min = parseInt(min, 10);
-    }
-    if (max !== undefined) {
-      max = parseInt(max, 10);
-    }
-
-    if (!this.element.classList.contains('input-stepper--disabled')) {
-      this.add && this.add.addEventListener('click', this.handleButtonClick);
-      this.remove &&
-        this.remove.addEventListener('click', this.handleButtonClick);
-      if (!this.config.nonEditableInput) {
-        this.input &&
-          this.input.addEventListener('click', this.handleInputClick);
-        this.input &&
-          this.input.addEventListener('change', this.handleInputChange);
-      }
-      this.handleButtonState();
-    }
-  }
-
-  update() {
-    this.destroy();
-    this.init();
-  }
-
-  destroy() {
-    if (!this.config.nonEditableInput) {
-      this.input &&
-        this.input.removeEventListener('click', this.handleInputClick);
-      this.input &&
-        this.input.removeEventListener('change', this.handleInputChange);
-    }
-    this.add && this.add.removeEventListener('click', this.handleButtonClick);
-    this.remove &&
-      this.remove.removeEventListener('click', this.handleButtonClick);
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_InputStepper ? el.ODS_InputStepper : null;
-  }
-}

package/src/components/Forms/InputStepper/index.js

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

package/src/components/Forms/InputStepper/styles/style.scss

@@ -1,206 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
-@use '../../../../styles/tokens/color';
-@use '../../../../styles/tokens/base';
-
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable max-nesting-depth */
-.input-stepper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  &__field {
-    width: convert.to-rem(40px);
-    appearance: textfield;
-    z-index: 0;
-    padding: space.get('xsmall') space.get('xsmall') convert.to-rem(8px)
-      space.get('xsmall');
-    text-align: center;
-    border-left: 0;
-    border-right: 0;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      appearance: none;
-    }
-    &:disabled {
-      color: color.$gray-500 !important;
-      -webkit-text-fill-color: color.$gray-500 !important;
-      background-color: color.$white;
-    }
-
-    &:focus {
-      z-index: 1;
-      border-color: color.$gray-500;
-    }
-  }
-  &__number {
-    display: block;
-    font-weight: bold;
-    appearance: textfield;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
-    z-index: 0;
-    padding: space.get('xsmall') space.get('xsmall') convert.to-rem(8px)
-      space.get('xsmall');
-    text-align: center;
-    border: 2px solid color.$gray-500;
-    border-left: 0;
-    border-right: 0;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-  &__button {
-    position: relative;
-    z-index: 0;
-    height: 40px;
-    width: 40px;
-    border-top: 2px solid;
-    border-bottom: 2px solid;
-    border-color: color.$gray-500;
-
-    &::before {
-      content: '';
-      position: absolute;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__button--minus {
-    border-left: 2px solid color.$gray-500;
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-    }
-  }
-
-  &__button--plus {
-    border-right: 2px solid color.$gray-500;
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-    }
-  }
-
-  &__button:focus {
-    z-index: 1;
-  }
-
-  &__button--minus:disabled {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23CCCCCC"/></svg>');
-    }
-  }
-
-  &__button--plus:disabled {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23CCCCCC"/></svg>');
-    }
-  }
-
-  &__button:hover:not(:disabled) {
-    background-color: color.$black;
-    border-color: color.$black;
-  }
-
-  &__button--minus:hover:not(:disabled) {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
-    }
-  }
-
-  &__button--plus:hover:not(:disabled) {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-    }
-  }
-
-  &__button--minus:active:not(:disabled) {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-    }
-  }
-
-  &__button--plus:active:not(:disabled) {
-    &::before {
-      background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-    }
-  }
-
-  &__button:active:not(:disabled) {
-    background-color: color.$orange-dark;
-    border-color: color.$orange-dark;
-  }
-}
-
-.input-stepper--inverse,
-.bg-black .input-stepper {
-  .input-stepper__field {
-    background-color: color.$black;
-    color: color.$white;
-    border-color: color.$gray-700;
-
-    &:disabled {
-      color: color.$gray-700;
-      -webkit-text-fill-color: color.$gray-700 !important;
-    }
-  }
-
-  .input-stepper__button {
-    border-color: color.$gray-700;
-
-    &--minus {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
-      }
-    }
-
-    &--plus {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-      }
-    }
-
-    &--minus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23666666"/></svg>');
-      }
-    }
-
-    &--plus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23666666"/></svg>');
-      }
-    }
-
-    &:hover:not(:disabled) {
-      background-color: color.$white;
-      border-color: color.$white;
-    }
-
-    &:active:not(:disabled) {
-      background-color: color.$orange;
-      border-color: color.$orange;
-    }
-
-    &--minus:active:not(:disabled),
-    &--minus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-      }
-    }
-
-    &--plus:active:not(:disabled),
-    &--plus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-      }
-    }
-  }
-}

package/src/components/Forms/InputStepper/tests/InputStepper.unit.test.js

@@ -1,59 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import InputStepper from '../InputStepper';
-
-describe('rendering InputStepper', () => {
-  describe('initial state', () => {
-    it('has default class radio', () => {
-      const { getByTestId } = render(
-        <InputStepper data-testid="test-id" id="id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('input-stepper');
-    });
-  });
-  describe('passed props', () => {
-    it('has input-stepper--inverse class when isInverse prop is passed', () => {
-      const { getByTestId } = render(
-        <InputStepper data-testid="test-id" id="id" isInverse />
-      );
-      expect(getByTestId('test-id')).toHaveClass('input-stepper--inverse');
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <InputStepper data-testid="test-id" className="test-class" id="id" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('input-stepper');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('has input-stepper--disabled class and disabled controls when isDisabled prop is passed', () => {
-      const { getByTestId, getByLabelText, getByRole } = render(
-        <InputStepper data-testid="test-id" id="id" isDisabled />
-      );
-      expect(getByTestId('test-id')).toHaveClass('input-stepper--disabled');
-      expect(getByLabelText('znížiť počet')).toBeDisabled();
-      expect(getByLabelText('zvýšiť počet')).toBeDisabled();
-      expect(getByRole('spinbutton')).toBeDisabled();
-    });
-    it('has InputStepper removed input field, replaced it with text number and set defaultValue with when config prop is passed', () => {
-      const { getByText } = render(
-        <InputStepper
-          data-testid="test-id"
-          id="id"
-          config={{
-            nonEditableInput: true,
-            min: 2,
-            max: 10,
-            defaultValue: 3,
-          }}
-        />
-      );
-
-      expect(getByText('3')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Forms/Label/Label.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { string } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  htmlFor: string.isRequired,
-};
-
-const CLASS_ROOT = 'label';
-
-const Label = ({ htmlFor, className, children, ...other }) => (
-  <label htmlFor={htmlFor} className={cx(CLASS_ROOT, className)} {...other}>
-    {children}
-  </label>
-);
-
-Label.propTypes = propTypes;
-Label.displayName = 'Label';
-
-export default Label;

package/src/components/Forms/Label/Label.mdx

@@ -1,95 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Link from '../../Link';
-import Field from '../Field';
-
-import Label from './';
-
-# Label
-
-Every input needs a label. A label provides instructions what to fill inside an input. Each label must be visually and programatically associated with an input.
-
-Learn how to write [label copy](/copy/form-labels)
-
-<Preview>
-  <Label htmlFor="label-example">Example label</Label>
-</Preview>
-
-## Labelling required inputs
-
-E-Commerce checkouts need to mark both required and optional fields explicitly. In other cases like a login or newsletter subscribtion it is not needed because of context, previous experience of the user and low number of fields.
-
-Try to avoid optional fields in forms. But if you use them, you should at least clearly distinguish which input fields cannot be left blank by the user.
-
-### How to mark required fields
-
-If you need to mark field as a required, rather than mentioning "required" next to every header, use an asterisk with screenreader text.
-
-### How to mark optional fields
-
-Mark the optional fields in checkout or registration process with "optional" in words next to the label.
-
-<Preview>
-  <Label htmlFor="optional-example">
-    Example label <span className="reset-font-weight">(optional)</span>
-  </Label>
-  <br />
-  <Label htmlFor="optional-example">
-    Example label *<span className="sr-only">required</span>
-  </Label>
-  <br />
-</Preview>
-
-## Links and buttons in labels
-
-Don't place interactive elements inside a label. Touchscreen devices often remove click listeners on label descendants, rendering them useless.
-
-Interactive elements should be placed next to the label element, making sure that both label and action texts are provide meaningful information to screenreaders on their own. This is usually done with visually hiding portions of the instructions.
-
-<Preview>
-  <Label htmlFor="terms">
-    Agree with<span className="visually-hidden"> terms and conditions</span>
-  </Label>{' '}
-  <Link href="#">terms and conditions</Link>
-</Preview>
-
-## Using in fields
-
-<Preview>
-  <Field control={{ type: 'text' }} label="Label" />
-</Preview>
-
-<Preview>
-  <Field control={{ type: 'checkbox' }} label="Label" />
-</Preview>
-
-### With action
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Label"
-    labelAfter={
-      <React.Fragment>
-        <Link href="#">action</Link> (optional)
-      </React.Fragment>
-    }
-  />
-</Preview>
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label={
-      <React.Fragment>
-        Agree with<span className="visually-hidden"> terms and conditions</span>
-      </React.Fragment>
-    }
-    labelAfter={<Link href="#">terms and conditions</Link>}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Label />" component={Label} />

package/src/components/Forms/Label/index.js

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

package/src/components/Forms/Label/styles/config.scss

@@ -1,4 +0,0 @@
-$base: (
-  display: inline,
-  font-weight: bold,
-);

package/src/components/Forms/Label/styles/mixins.scss

@@ -1,6 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use './config';
-
-@mixin base($config: config.$base) {
-  @include generate.css-map($config);
-}

package/src/components/Forms/Label/styles/style.scss

@@ -1,9 +0,0 @@
-@use './mixins';
-
-.label {
-  @include mixins.base();
-
-  &[for] {
-    cursor: pointer;
-  }
-}

package/src/components/Forms/Label/tests/Label.unit.test.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Label from '../Label';
-
-// htmlFor is required
-describe('rendering Label', () => {
-  describe('initial state', () => {
-    it('has default class label', () => {
-      const { getByTestId } = render(
-        <Label data-testid="test-id" htmlFor="test-label" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('label');
-    });
-  });
-  describe('passed props', () => {
-    it('has additional class when className is set ', () => {
-      const { getByTestId } = render(
-        <Label
-          data-testid="test-id"
-          htmlFor="test-label"
-          className="test-class"
-        />
-      );
-      expect(getByTestId('test-id')).toHaveClass('label');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('has htmlFor label', () => {
-      const { getByTestId } = render(
-        <Label data-testid="test-id" htmlFor="test-label" />
-      );
-      expect(getByTestId('test-id').htmlFor).toBe('test-label');
-    });
-    it('renders children', () => {
-      const { getByText } = render(
-        <Label data-testid="test-id" htmlFor="test-label">
-          test
-        </Label>
-      );
-      expect(getByText('test')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Forms/Message/Message.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { oneOf } from 'prop-types';
-import cx from 'classnames';
-
-import Icon from '../../Icon';
-
-const propTypes = {
-  /** Type of message */
-  type: oneOf(['info', 'warning', 'error']),
-};
-
-const defaultProps = {
-  type: 'info',
-};
-
-const icons = {
-  info: 'info',
-  warning: 'warning-important',
-  error: 'error-severe',
-};
-
-const colors = {
-  info: 'info',
-  warning: 'warning',
-  error: 'danger',
-};
-
-const CLASS_ROOT = 'message';
-
-const Message = ({ className, children, type, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--error`]: type === 'error',
-    },
-    className
-  );
-
-  return (
-    <p className={classes} {...other}>
-      {type && (
-        <Icon
-          name={icons[type]}
-          size="medium"
-          color={colors[type]}
-          className={`${CLASS_ROOT}__icon`}
-        />
-      )}
-      {children}
-    </p>
-  );
-};
-
-Message.displayName = 'Message';
-Message.propTypes = propTypes;
-Message.defaultProps = defaultProps;
-
-export default Message;