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

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

@@ -1,154 +0,0 @@
-import DOMPurify from 'dompurify';
-
-export const defaultConfig = {
-  dragDropClassname: 'is-dragdrop',
-  inputSelector: 'input[type="file"]',
-  resultsSelector: '.file-input__files',
-  deleteButtonSelector: '[data-file-delete]',
-  deleteFileAttr: 'data-file-delete',
-  fileTemplate: (name, i) => {
-    return `
-      <li>${name}&nbsp;<button type="button" data-file-delete="${i}" class="file-input__delete">
-          <svg class="icon icon--small icon--trash icon--danger" aria-hidden="true">
-            <use xlink:href="/sprite.svg#trash"></use>
-          </svg>
-          <span class="sr-only">Odstrániť súbor ${name}</span>
-        </button>
-      </li>
-    `;
-  },
-};
-
-export default class File {
-  constructor(element, config) {
-    this.element = element;
-
-    this.config = { ...defaultConfig, ...config };
-
-    this.input = null;
-    this.files = [];
-    this.results = null;
-    this.removeButtons = [];
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onRemoveButtonClick = this.onRemoveButtonClick.bind(this);
-    this.highlight = this.highlight.bind(this);
-    this.unhighlight = this.unhighlight.bind(this);
-    this.onDrop = this.onDrop.bind(this);
-
-    this.init();
-
-    return this;
-  }
-
-  init() {
-    this.input = this.element.querySelector(this.config.inputSelector);
-    this.results = this.element.querySelector(this.config.resultsSelector);
-
-    this.input.addEventListener('change', this.onInputChange);
-
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-      this.element.addEventListener(eventName, this.preventDefaults, false);
-      document.body.addEventListener(eventName, this.preventDefaults, false);
-    });
-
-    ['dragenter', 'dragover'].forEach(eventName => {
-      this.element.addEventListener(eventName, this.highlight, false);
-    });
-
-    ['dragleave', 'drop'].forEach(eventName => {
-      this.element.addEventListener(eventName, this.unhighlight, false);
-    });
-
-    this.element.addEventListener('drop', this.onDrop);
-  }
-
-  onInputChange() {
-    this.files = Array.from(this.input.files);
-
-    if (!this.files) {
-      return false;
-    }
-
-    this.results.innerHTML = '';
-
-    const listItems = this.files.map((file, i) =>
-      this.config.fileTemplate(
-        DOMPurify.sanitize(file.name, { ALLOWED_TAGS: [] }),
-        i
-      )
-    );
-
-    listItems.forEach(listItem => {
-      this.results.appendChild(
-        DOMPurify.sanitize(listItem, {
-          ADD_TAGS: ['use'],
-          RETURN_DOM_FRAGMENT: true,
-          RETURN_DOM_IMPORT: true,
-        })
-      );
-    });
-
-    this.removeButtons = Array.from(
-      this.results.querySelectorAll(this.config.deleteButtonSelector)
-    );
-    this.removeButtons.forEach(button =>
-      button.addEventListener('click', this.onRemoveButtonClick)
-    );
-  }
-
-  onDrop(e) {
-    this.input.files = e?.dataTransfer?.files || new DataTransfer().files;
-    this.onInputChange();
-  }
-
-  onRemoveButtonClick(e) {
-    const dt = new DataTransfer();
-    const deletedFileIndex = e.currentTarget.getAttribute(
-      this.config.deleteFileAttr
-    );
-
-    this.files.splice(deletedFileIndex, 1);
-    this.files.map(file => dt.items.add(file));
-
-    this.input.files = dt.files;
-    this.onInputChange();
-  }
-
-  highlight() {
-    this.element.classList.add(this.config.dragDropClassname);
-  }
-
-  unhighlight() {
-    this.element.classList.remove(this.config.dragDropClassname);
-  }
-
-  preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  destroy() {
-    this.input.removeEventListener('change', this.onInputChange);
-
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-      this.element.removeEventListener(eventName, this.preventDefaults, false);
-      document.body.removeEventListener(eventName, this.preventDefaults, false);
-    });
-
-    ['dragenter', 'dragover'].forEach(eventName => {
-      this.element.removeEventListener(eventName, this.highlight, false);
-    });
-
-    ['dragleave', 'drop'].forEach(eventName => {
-      this.element.removeEventListener(eventName, this.unhighlight, false);
-    });
-
-    this.element.removeEventListener('drop', this.onDrop());
-  }
-
-  update() {
-    this.destroy();
-    this.init();
-  }
-}

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

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

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

@@ -1,12 +0,0 @@
-@use "sass:map";
-@use '../../../../styles/tools/convert';
-@use '../../../Button/styles/config' as buttonConfig;
-
-$sizes: buttonConfig.$sizes;
-
-$sizes: (
-  'default': map.get(buttonConfig.$sizes, 'default'),
-  'large': map.get(buttonConfig.$sizes, 'large'),
-);
-
-$disabled: map.get(buttonConfig.$base, 'disabled');

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

@@ -1,87 +0,0 @@
-@use './config';
-@use '../../../../styles/tokens/color';
-@use '../../../../styles/tokens/base';
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/generate';
-@use '../../../../styles/tools/convert';
-@use '../../../Typography/styles/mixins' as typoMixins;
-@use '../../../Button/styles/mixins' as buttonMixins;
-@use '../../../Button/styles/config' as buttonConfig;
-
-@mixin wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-@mixin control {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 100%;
-}
-
-@mixin control-size($size, $sizes: config.$sizes) {
-  @include generate.css-map($sizes, $size);
-}
-
-@mixin control-focused {
-  outline: base.$focus-outline;
-  outline-offset: base.$focusring-offset;
-}
-
-@mixin button {
-  @include buttonMixins.base;
-  @include buttonMixins.style('default', buttonConfig.$styles);
-
-  margin-bottom: 0;
-  position: relative;
-  z-index: 1;
-}
-
-@mixin button-disabled($config: config.$disabled) {
-  @include generate.css-map($config);
-
-  &:hover {
-    color: inherit;
-    background-color: inherit;
-    border-color: inherit;
-  }
-}
-
-@mixin control-size($size, $sizes: config.$sizes) {
-  @include generate.css-map($sizes, $size);
-}
-
-@mixin files {
-  @include typoMixins.list-unstyled;
-
-  width: 100%;
-  margin-top: space.get('small');
-
-  &:empty {
-    display: none;
-  }
-
-  > li {
-    word-break: break-all;
-  }
-}
-
-@mixin drag-drop-highlight {
-  outline: 2px dashed color.$orange-dark;
-  outline-offset: 2px;
-}
-
-@mixin delete {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -75%;
-    width: 250%;
-    height: 100%;
-  }
-}

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

@@ -1,49 +0,0 @@
-@use './config';
-@use './mixins';
-@use '../../../../styles/tools/generate';
-
-.file-input {
-  $this: &;
-
-  &.is-dragdrop {
-    @include mixins.drag-drop-highlight;
-  }
-
-  @include mixins.wrapper;
-
-  &__control {
-    @include mixins.control;
-
-    @each $size, $values in config.$sizes {
-      #{$this}#{generate.variant-name($size)} & {
-        @include mixins.control-size($size);
-      }
-    }
-  }
-
-  &__button {
-    @include mixins.button;
-
-    @each $size, $values in config.$sizes {
-      #{$this}#{generate.variant-name($size)} & {
-        @include mixins.control-size($size);
-      }
-    }
-  }
-
-  &__control:focus + &__button {
-    @include mixins.control-focused;
-  }
-
-  &__control[disabled] + &__button {
-    @include mixins.button-disabled;
-  }
-
-  &__files {
-    @include mixins.files;
-  }
-
-  &__delete {
-    @include mixins.delete;
-  }
-}

package/src/components/Forms/FormTooltip.mdx

@@ -1,51 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { InfoTooltip } from '../Tooltip';
-
-import Field from './Field';
-
-
-# Form Tooltip
-
-After exhausting the possibilities of [label](/components/forms/captions/label) and [hint](/components/forms/captions/hint), the last resort is to use a tooltip.
-
-Tooltips cannot contain interactive elements such as hyperlinks and buttons. If your information requires them, use a [hint](/components/forms/captions/hint) instead.
-
-A form tooltip is a [small info tooltip](http://localhost:3000/components/tooltip#medium-info-tooltip) placed next to the field label:
-
- - The tooltip should open to the right using `[data-tooltip-placement="right"]` attribute
- - The tooltip must be refferenced using `[aria-describedby="tooltip-id"]` attribute on the control (input) element.
-
-<Preview>
-  <InfoTooltip placement="right">Help text</InfoTooltip>
-</Preview>
-
-## Using in Fields
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Service number"
-    tooltip="Your service number is shown on the first page of your contract and each invoice."
-  />
-</Preview>
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label="I understand"
-    tooltip="Tooltips cannot contain interactive elements and should not be used for terms and conditions."
-  />
-</Preview>
-
-## Accessibility
-
-To enable screenreader support, it is important to reference the tooltip from the control (input) element using `aria-describedby`.
-
-Simplified example:
-
-```
-<input aria-describedby="tooltip-id" type="text" />
-<span id="tooltip-id" class="tooltip" role="tooltip" hidden data-tooltip="true">...</span>
-```

package/src/components/Forms/Forms.mdx

@@ -1,48 +0,0 @@
-# Forms
-
-Forms represent the arrangement of controls, captions and fields used to collect information and user input.
-
-### Controls
-
-Controls provide the core functionality of entering and submitting a value. They do not carry any layout and spacing rules other than those needed for input.
-
-- [TextInput](/components/forms/text-input) Textual data input
-- [Textarea](/components/forms/textarea) Longer textual data input
-- [Select](/components/forms/select) Pick from more than three options
-- [Radio](/components/forms/radio) Pick from three or less options
-- [Checkbox](/components/forms/checkbox) Pick one or more options
-- [Autocomplete](/components/forms/autocomplete) Pick one option from many using typeahead
-- [RangeSlider](/components/forms/range-slider) Pick a value from provided range
-<!-- - [Submit Button](/components/forms/submit) Submit eneterd values -->
-
-### Captions
-
-These provide descriptions and instructions on what values, how and why should users enter into each control.
-
-- [Label](/components/forms/captions/label)
-- [Hint](/components/forms/captions/hint)
-- [Message](/components/forms/captions/message)
-- [Tooltip](/components/forms/captions/tooltip)
-- [Label copy](/copy/form-labels)
-
-### Scaffolding
-
-- [ControlGroup (addons)](/components/forms/addons) - Prefixes and suffixes
-- [Field](/components/forms/field) - Arrangement of controls and captions
-- [Fieldset](/components/forms/fieldset) - Groups of related fields
-
-### Validation
-
-Verification of user input to ensure provided data is well formatted and contains all required information.
-
-- [Message](/components/forms/captions/message)
-- [Validation copy](/copy/form-validation)
-
-## Further reading
-
-- [Creating Accessible Forms - Labels](https://webaim.org/techniques/forms/)
-- [Web Accessibility Tutorials - Forms](https://www.w3.org/WAI/tutorials/forms/)
-- [Form design patterns book](https://formdesignpatterns.com/)
-- [Using aria-labelledby to concatenate a label from several text nodes](https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html)
-- [Web Accessibility Tutorials - Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/)
-- [Creating Accessible Forms - Advanced Form Labeling](https://webaim.org/techniques/forms/advanced)

package/src/components/Forms/Group/Group.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { node, oneOf, shape } from 'prop-types';
-import cx from 'classnames';
-
-import TextInput from '../TextInput';
-import Select from '../Select';
-
-import Item from './Item';
-
-const CLASS_ROOT = 'control-group';
-
-const propTypes = {
-  /** Props passed onto control element */
-  control: shape({
-    type: oneOf(['text', 'select']).isRequired,
-  }),
-  /** Prefixed element, or array of prefixed elements */
-  prefix: node,
-  /** Size of group. Apllies to all suffixed elements and Input element */
-  size: oneOf(['large']),
-  /** Suffixed element, or array of suffixed elements */
-  suffix: node,
-};
-
-const Group = ({ control, prefix, suffix, size, className, ...other }) => {
-  const { type, ...controlProps } = control;
-
-  const ControlElement = props => {
-    switch (type) {
-      case 'select':
-        return <Select {...props} />;
-      default:
-        return <TextInput {...props} />;
-    }
-  };
-
-  const renderItems = items =>
-    React.Children.map(items, item => {
-      // wrap anything that is not a react component
-      if (typeof item === 'string' || typeof item.type === 'string') {
-        return <Item size={size}>{item}</Item>;
-      } else {
-        return React.cloneElement(item, { ...item.props, size });
-      }
-    });
-
-  return (
-    <div className={cx(CLASS_ROOT, className)} {...other}>
-      {renderItems(prefix)}
-      <ControlElement {...controlProps} size={size} />
-      {renderItems(suffix)}
-    </div>
-  );
-};
-
-Group.propTypes = propTypes;
-Group.displayName = 'ControlGroup';
-
-export default Group;

package/src/components/Forms/Group/Group.mdx

@@ -1,146 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import TextInput from '../../Forms/TextInput';
-import Autocomplete from '../../Forms/Autocomplete';
-import Button from '../../Button';
-import Group from './';
-
-# Seach Icon
-
-Add search icon to element using `.input--search-icon`. Icon is visible when element is not focused and doesn't have value.
-It's required to set empty placeholder. Usage with placeholder is described in [the example below](#search-icon-with-placeholder). Does not apply for radios and checkboxes.
-
-<Preview>
-  <Autocomplete
-    id="search-autocomplete"
-    options={[
-      '',
-      'apple',
-      'apricot',
-      'banana',
-      'blueberry',
-      'fig',
-      'lime',
-      'lemon',
-      'mango',
-      'orange',
-      'raspberry',
-      'watermelon',
-    ]}
-    autocompleteConfig={{
-      customInputClassName: 'input--search-icon',
-    }}
-    placeholder=""
-  />
-  <br />
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon"
-    placeholder=""
-  />
-  <br />
-  <TextInput
-    id="search-2"
-    htmlType="text"
-    defaultValue="has value"
-    placeholder=""
-    className="input--search-icon"
-  />
-</Preview>
-
-## Search icon with placeholder
-
-When using displaying search icon on input with placeholder, it's required to set the `.input--search-icon-with-placeholder` class on the input element.
-Does not apply for radios and checkboxes.
-
-### Usage with Autocomplete
-
-<Preview>
-  <Autocomplete
-    id="search-autocomplete"
-    options={[
-      '',
-      'apple',
-      'apricot',
-      'banana',
-      'blueberry',
-      'fig',
-      'lime',
-      'lemon',
-      'mango',
-      'orange',
-      'raspberry',
-      'watermelon',
-    ]}
-    data-autocomplete-config={JSON.stringify({
-      customInputClassName: 'input--search-icon-with-placeholder',
-      placeholder: "Select fruit"
-    })}
-    placeholder=""
-  />
-</Preview>
-
-### Usage with TextInput
-
-Regular input
-
-<Preview>
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon-with-placeholder"
-    placeholder="Search"
-  />
-</Preview>
-
-Large input
-<Preview>
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon-with-placeholder text-input--large"
-    placeholder="Search"
-  />
-</Preview>
-
-# Control Group
-
-Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes.
-
-## Example
-
-<Preview>
-  <Group
-    prefix="€"
-    suffix="per piece"
-    control={{ type: 'text', id: 'group-1' }}
-  />
-</Preview>
-
-### Variants
-
-#### With Button
-
-<Preview>
-  <Group
-    suffix={<Button type="primary">Ok</Button>}
-    control={{ type: 'text', id: 'group-2' }}
-  />
-</Preview>
-
-#### Size
-
-<Preview>
-  <Group
-    size="large"
-    prefix="€"
-    suffix={['kg', <Button>Send</Button>]}
-    control={{ type: 'text', size: 'large', id: 'group-3' }}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Group />" component={Group} />

package/src/components/Forms/Group/Item.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { oneOf } from 'prop-types';
-import cx from 'classnames';
-
-const CLASS_ROOT = 'control-group__item';
-
-const propTypes = {
-  size: oneOf(['default', 'large']),
-};
-
-const defaultProps = {
-  size: 'default',
-};
-
-const Item = ({ size, className, children, ...other }) => {
-  const classes = cx(CLASS_ROOT, className, {
-    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
-  });
-
-  return (
-    <div className={classes} {...other}>
-      {children}
-    </div>
-  );
-};
-
-Item.propTypes = propTypes;
-Item.defaultProps = defaultProps;
-Item.displayName = 'GroupItem';
-
-export default Item;

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

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

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

@@ -1,9 +0,0 @@
-@use '../../../../styles/tokens/color';
-@use '../../TextInput/styles/config' as TextInputConfig;
-
-$item: (
-  border: 2px solid color.$gray-500,
-  background: color.$gray-300,
-);
-
-$sizes: TextInputConfig.$sizes;

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

@@ -1,38 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use './config';
-
-@mixin base() {
-  display: flex;
-  flex-flow: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  position: relative;
-
-  > * + * {
-    margin-left: -2px;
-  }
-
-  > *:not([class*='mb-']) {
-    margin-bottom: 0;
-  }
-
-  > *:focus {
-    z-index: 2;
-  }
-
-  > .btn {
-    z-index: 1;
-  }
-
-  > .btn:not([class*='mr-']) {
-    margin-right: 0;
-  }
-}
-
-@mixin item($config: config.$item) {
-  @include generate.css-map($config);
-}
-
-@mixin item-size($size, $config: config.$sizes) {
-  @include generate.css-map($config, $size);
-}