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

package/src/components/Forms/RangeSlider/RangeSlider.mdx

@@ -1,304 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Code, Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-
-import RangeSlider from './';
-import defaultConfig from './data';
-
-export const basicConfig = {
-  start: [0],
-  range: {
-    min: 0,
-    max: 50,
-  },
-  connect: [true, false],
-};
-
-# RangeSlider
-
-Interactive widget used a replacement for `input[type=range]` using
-[noUiSlider](https://refreshless.com/nouislider/)
-
-<Preview>
-  <RangeSlider config={basicConfig} />
-</Preview>
-
-## RangeSlider Field
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-1. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-1. [**Hint**](/components/forms/captions/hing) (optional)
-1. **Before Element** arbitrary content before the slider, useful for [output values](#output-values) (optional)
-1. **RangeSlider** control itself
-   - Track - visualises range that handle(s) can travel along (mandatory)
-   - Handle(s) - one or more handles used to select desired value (mandatory)
-   - Pips - points along the slider (optional)
-1. **After Element** arbitrary content after the slider, useful for [output values](#output-values) or custom pips (optional)
-1. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{
-      id: 'rangeslider-field',
-      type: 'range',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 10,
-        },
-        connect: [true, false],
-        handleAttributes: [
-          {
-            'aria-labelledby': 'rangeslider-field-label',
-            'aria-describedby':
-              'rangeslider-field-hint rangeslider-field-tooltip rangeslider-field-message-0',
-          },
-        ],
-        pips: {
-          mode: 'values',
-          values: [0, 10],
-          stepped: false,
-          density: 100,
-        },
-      },
-      elementBefore: <p className="mb-xsmall">Before element</p>,
-      elementAfter: <p className="mb-small">After element</p>,
-    }}
-    tooltip="Helpful tooltip"
-    label="How much would you like?"
-    hint="Some helpful hint text"
-    messages={[
-      {
-        type: 'error',
-        text: 'You have selected zero. Please have at least one.',
-      },
-    ]}
-  />
-</Preview>
-
-## Width
-
-### Default
-
-<Preview>
-  <RangeSlider config={basicConfig} />
-</Preview>
-
-### Fullwidth
-
-<Preview>
-  <RangeSlider width="fullwidth" config={basicConfig} />
-</Preview>
-
-## Output values
-
-By default, the `<RangeSlider />` component renders hidden input fields with
-current value of each handle.
-
-### Initialize
-
-`RangeSlider.static.js` expects hidden `input` elements with a `name` property consisting of the `id` of the rangeslider element and the `index` of the handle, delimited by a dash.
-
-`<input type="hidden" name="rangeslider-0" />`
-
-### Accesing instance
-
-Initialized RangeSlider is stored in `ODS_RangeSlider` property of the element. So by accessing this property, for example by `document.getElementById('id-1').ODS_RangeSlider`, you get access to RangeSlider config, element itself, it inputs and outputs and instance which contains [noUiSlider](https://refreshless.com/nouislider/) itself. Through this you can for example get or set RangeSlider value `document.getElementById('id-1').ODS_RangeSlider.instance.set(10)`.
-
-### Display
-
-To display the values for the user, place an element anywhere in the document
-and assign it an id equal to the rangeslider element, index of the handle and
-"output", delimited by a dash.
-
-`<div id="rangeslider-0-output" />`
-
-### Formatting
-
-By default, the value of the input is formatted to zero decimal places and can
-be overriden using the `format` property in config. The config format expects a
-[wNumb](https://refreshless.com/wnumb/) config object.
-
-You can format the output by passing a [wNumb](https://refreshless.com/wnumb/)
-config object to `data-format` attribute of the output element.
-
-<Preview>
-  <div id="range-output-preview-0-output" />
-  <div
-    id="range-output-preview-1-output"
-    data-format={JSON.stringify({
-      decimals: 2,
-      mark: ',',
-      thousand: ' ',
-      prefix: '',
-      suffix: ' MB',
-    })}
-  />
-  <RangeSlider
-    id="range-output-preview"
-    config={{
-      start: [0, 30],
-      range: {
-        min: 0,
-        max: 100,
-      },
-      connect: [false, true, false],
-    }}
-  />
-</Preview>
-
-## Accessibility
-
-[noUiSlider](https://refreshless.com/nouislider/) provides keyboard operability and screenreader support. Authors must provide accessible names for slider handles and create relationship between handles and captioning elements.
-
-## Assign relationship between slider handle and Captions
-
-RangeSlider uses hidden fields that are populated with user selected values. We can't point related information to those hidden fields, but the JS generated handles. Each handle must have it's own accessible name. Hint, tooltip and validation messages (captions) must be also in relationship with the handle elements.
-
-This is achieved defining `aria-label`, `aria-labelledby` and `aria-describedby` attributes for each handle using `handleAttributes` property of the [`config` object](#config).
-
-### Label
-
-Since our rendered input is hidden, the `label` element is replaced by a `span`.
-
-```diff
-- <label for="input-id" class="label form-field__label">Label</label>
-+ <span id="input-label" class="label form-field__label">Label</span>
-```
-
-The relationship is then defined in the config object using `aria-labelledby`
-
-```javascript
-{
-  start: [0],
-  range: {
-    min: 0,
-    max: 100,
-  },
-  connect: [true, false],
-  handleAttributes: [{
-    { 'aria-labelledby': 'input-label' }
-  }]
-}
-```
-
-#### Multiple handles
-
-In case multiple handles are present, we need to create a different accessible name for each handle, as they represent different parts of the range. Screenreader users must be able to distinguish which handle they are using and what does the handle represent.
-
-```javascript
-{
-  start: [0, 20],
-  range: {
-    min: 0,
-    max: 100,
-  },
-  connect: [true, false],
-  handleAttributes: [
-    { 'aria-label': 'Price from' },
-    { 'aria-label': 'Price to' },
-  ]
-}
-```
-
-### Hint, Tooltip and Messages
-
-Hint, tooltip and messages must also be in relationship with the handle using `aria-describedby`. When multiple handles are used, authors are responsible to pick whether it makes more sense to describe all or just some of the handles.
-
-```javascript
-  ...
-  handleAttributes: [
-    {
-      'aria-label': 'Price from',
-      'aria-describedby': 'hint-id tooltip-id message-0'
-    },
-    {
-      'aria-label': 'Price from',
-      'aria-describedby': 'hint-id message-1' // in this case, second handle is not descrbied by a tooltip and has a separate message.
-    }
-  ]
-  ...
-```
-
-## JS Module Reference
-
-All elements with `[data-rangeslider]` will be initialised automatically on [`DOMContentLoaded` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event).
-
-### Config
-
-The module is configured either by passing a JSON string representing a [noUiSlider config](https://refreshless.com/nouislider/slider-options/) object through `[data-rangeslider]` attribute or during [manual initialisation](#manual-initialisation).
-
-When configuring the module through `[data-rangeslider]`, the format attribute expects a [wNumb](https://refreshless.com/wnumb/) config object instead of a function. In case you need a custom formatting fuction, omit the `data-rangeslider` attribute and [initialize the module manually](#manual-initialisation).
-
-### Default config
-
-```javascript
-{
-  start: [0],
-  connect: false,
-  range: {
-    min: 0,
-    max: 100,
-  },
-  cssPrefix: 'range-slider',
-  cssClasses: {
-    target: '__target',
-    base: '__base',
-    origin: '__origin',
-    handle: '__handle',
-    handleLower: '__handle--lower',
-    handleUpper: '__handle--upper',
-    touchArea: '__touch-area',
-    horizontal: '--horizontal',
-    vertical: '--vertical',
-    background: '__background',
-    connect: '__connect',
-    connects: '__connects',
-    ltr: '--ltr',
-    rtl: '--rtl',
-    draggable: '--draggable',
-    drag: '--state-drag',
-    tap: '--state-tap',
-    active: '--active',
-    tooltip: '__tooltip',
-    pips: '__pips',
-    pipsHorizontal: '__pips--horizontal',
-    pipsVertical: '__pips--vertical',
-    marker: '__marker',
-    markerHorizontal: '__marker--horizontal',
-    markerVertical: '__marker--vertical',
-    markerNormal: '__marker--normal',
-    markerLarge: '__marker--large',
-    markerSub: '__marker--sub',
-    value: '__value',
-    valueHorizontal: '__value--horizontal',
-    valueVertical: '__value--vertical',
-    valueNormal: '__value--normal',
-    valueLarge: '__value--large',
-    valueSub: '__value--sub',
-  },
-  format: {
-    decimals: 0,
-  },
-}
-```
-
-### Manual initialisation
-
-```javascript
-const myRangeSlider = new window.myApp.RangeSlider(
-  document.getElementById('my-rangeslider'),
-  config
-);
-```
-
-## Props
-
-<ComponentDocs title="<RangeSlider />" component={RangeSlider} />
-
-## Notes
-
-`<RangeSlider />` currently DOES NOT SUPPORT vertical and rtl ortientations and tooltips.

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

@@ -1,90 +0,0 @@
-import noUiSlider from 'nouislider';
-import wnumb from 'wnumb';
-
-import defaultConfig from './data';
-
-export default class RangeSlider {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-
-    this.inputs = [];
-    this.outputs = [];
-    this.handleSliderUpdate = this.handleSliderUpdate.bind(this);
-    this.element.ODS_RangeSlider = this;
-
-    this.init();
-
-    return this;
-  }
-
-  init() {
-    this.config = {
-      ...this.config,
-      ...JSON.parse(this.element.getAttribute('data-rangeslider-config')),
-    };
-
-    this.config.format = wnumb(this.config.format);
-
-    if (this.element.noUiSlider) {
-      this.element.noUiSlider = undefined;
-      this.instance?.destroy && this.instance.destroy();
-    }
-
-    this.instance = noUiSlider.create(this.element, this.config);
-    this.inputs = Array.from(
-      document.querySelectorAll(
-        `input[name^=${this.element.getAttribute('id')}-]`
-      )
-    );
-
-    this.outputs = this.inputs.map(input => {
-      const outputElement = document.getElementById(
-        `${input.getAttribute('id')}-output`
-      );
-      if (outputElement) {
-        return {
-          element: outputElement,
-          format:
-            outputElement.hasAttribute('data-format') &&
-            wnumb(JSON.parse(outputElement.getAttribute('data-format'))),
-        };
-      }
-      return false;
-    });
-
-    this.instance.on('update', this.handleSliderUpdate);
-  }
-
-  update() {
-    this.instance.destroy();
-    this.init();
-  }
-
-  destroy() {
-    this.instance.off('update');
-    this.instance.destroy();
-    this.element.ODS_RangeSlider = null;
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_RangeSlider ? el.ODS_RangeSlider : null;
-  }
-
-  handleSliderUpdate(values, handle) {
-    const value = values[handle];
-
-    this.inputs[handle].value = value;
-
-    if (this.outputs[handle]) {
-      const output = this.outputs[handle];
-      if (output.format) {
-        output.element.innerText = output.format.to(
-          this.config.format.from(value) // noUiSlider returns the value as a string, so we need to format it back to a Number
-        );
-      } else {
-        output.element.innerText = value;
-      }
-    }
-  }
-}

package/src/components/Forms/RangeSlider/data.js

@@ -1,48 +0,0 @@
-export default {
-  start: [0],
-  connect: false,
-  range: {
-    min: 0,
-    max: 100,
-  },
-  cssPrefix: 'range-slider',
-  cssClasses: {
-    target: '__target',
-    base: '__base',
-    origin: '__origin',
-    handle: '__handle',
-    handleLower: '__handle--lower',
-    handleUpper: '__handle--upper',
-    touchArea: '__touch-area',
-    horizontal: '--horizontal',
-    vertical: '--vertical',
-    background: '__background',
-    connect: '__connect',
-    connects: '__connects',
-    ltr: '--ltr',
-    rtl: '--rtl',
-    draggable: '--draggable',
-    drag: '--state-drag',
-    tap: '--state-tap',
-    active: '--active',
-    tooltip: '__tooltip',
-    pips: '__pips',
-    pipsHorizontal: '__pips--horizontal',
-    pipsVertical: '__pips--vertical',
-    marker: '__marker',
-    markerHorizontal: '__marker--horizontal',
-    markerVertical: '__marker--vertical',
-    markerNormal: '__marker--normal',
-    markerLarge: '__marker--large',
-    markerSub: '__marker--sub',
-    value: '__value',
-    valueHorizontal: '__value--horizontal',
-    valueVertical: '__value--vertical',
-    valueNormal: '__value--normal',
-    valueLarge: '__value--large',
-    valueSub: '__value--sub',
-  },
-  format: {
-    decimals: 0,
-  },
-};

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

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

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

@@ -1,32 +0,0 @@
-@use '../../../../styles/tools/convert';
-@use '../../../../styles/tokens/color';
-
-$base: (
-  padding-top: convert.to-rem(8px),
-);
-
-$widths: (
-  default: (
-    max-width: convert.to-rem(350px),
-  ),
-  fullwidth: (
-    max-width: none,
-  ),
-);
-
-$slider-size: convert.to-rem(6px);
-
-$slider: (
-  height: $slider-size
-);
-
-$handle-size: convert.to-rem(20px);
-
-$handle: (
-  width: $handle-size,
-  height: $handle-size,
-  top: calc(-#{$handle-size} / 2 + #{$slider-size} / 2),
-  border: 2px solid color.$black,
-  background: color.$white,
-  border-radius: 100%
-);

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

@@ -1,139 +0,0 @@
-@use './config';
-@use '../../../../styles/tokens/base';
-@use '../../../../styles/tokens/color';
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
-@use '../../../../styles/tools/generate';
-
-@mixin slider() {
-  @include generate.css-map(config.$base);
-}
-
-@mixin slider-width($width, $config: config.$widths) {
-  @include generate.css-map($config, $width);
-}
-
-@mixin cursor() {
-  cursor: inherit !important;
-}
-
-@mixin touch-area() {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin target() {
-  position: relative;
-  direction: ltr;
-
-  &,
-  * {
-    -webkit-touch-callout: none;
-    -webkit-tap-highlight-color: color.$black;
-    touch-action: none;
-    user-select: none;
-    box-sizing: border-box;
-  }
-}
-
-@mixin base-and-connects() {
-  width: 100%;
-  position: relative;
-  z-index: 1;
-}
-
-@mixin connect-and-origin() {
-  will-change: transform;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  transform-origin: 0 0;
-}
-
-@mixin tap-transition() {
-  transition: transform 0.3s;
-}
-
-@mixin base() {
-  background: color.$gray-400;
-  height: config.$slider-size;
-  margin-bottom: space.get('small');
-}
-
-@mixin connects() {
-  overflow: hidden;
-  z-index: 0;
-  height: 100%;
-}
-
-@mixin connect() {
-  background: color.$orange;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin origin() {
-  width: 100%;
-  height: 100%;
-}
-
-@mixin handle() {
-  position: absolute;
-  left: auto;
-  right: -#{space.get('small')};
-  cursor: default;
-
-  @include generate.css-map(config.$handle);
-
-  &:focus {
-    @include base.focusring-round;
-  }
-}
-
-@mixin value() {
-  position: absolute;
-  padding-top: convert.to-rem(2px);
-  white-space: nowrap;
-  text-align: center;
-  font-weight: bold;
-  font-size: convert.to-rem(14px);
-  transform: translate(-50%, 50%);
-}
-
-@mixin value-sub() {
-  color: color.$gray-500;
-}
-
-@mixin pips() {
-  height: convert.to-rem(24px);
-  margin-bottom: space.get('small');
-  top: 100%;
-  left: 0;
-  width: 100%;
-}
-
-@mixin marker() {
-  position: absolute;
-  background: color.$gray-500;
-  margin-left: -1px;
-  width: 2px;
-  height: 5px;
-}
-
-@mixin marker-sub() {
-  height: 10px;
-}
-
-@mixin marker-large() {
-  height: 10px;
-}
-
-@mixin disabled() {
-  cursor: not-allowed;
-}
-
-@mixin disabled-connect() {
-  background: color.$gray-600;
-}

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

@@ -1,95 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use './mixins';
-@use './config';
-
-.range-slider {
-  $this: &;
-
-  @include mixins.slider();
-
-  @each $width, $props in config.$widths {
-    &#{generate.variant-name($width)} {
-      @include mixins.slider-width($width);
-    }
-  }
-
-  &--state-drag * {
-    @include mixins.cursor();
-  }
-
-  &__touch-area {
-    @include mixins.touch-area();
-  }
-
-  &__target {
-    @include mixins.target();
-  }
-
-  &__base,
-  &__connects {
-    @include mixins.base-and-connects();
-  }
-
-  &__base {
-    @include mixins.base();
-  }
-
-  &__connects {
-    @include mixins.connects();
-  }
-
-  &__connect {
-    @include mixins.connect();
-  }
-
-  &__origin {
-    @include mixins.origin();
-  }
-
-  &__connect,
-  &__origin {
-    @include mixins.connect-and-origin();
-
-    .range-slider--state-tap & {
-      @include mixins.tap-transition();
-    }
-  }
-
-  &__handle {
-    @include mixins.handle();
-  }
-
-  &__value {
-    @include mixins.value();
-
-    &-sub {
-      @include mixins.value-sub();
-    }
-  }
-
-  &__pips {
-    @include mixins.pips();
-  }
-
-  &__marker {
-    @include mixins.marker();
-
-    &--sub {
-      @include mixins.marker-sub();
-    }
-
-    &--large {
-      @include mixins.marker-large();
-    }
-  }
-
-  &[disabled]#{$this}__target,
-  &[disabled]#{$this}__handle,
-  &[disabled] #{$this}__handle {
-    @include mixins.disabled();
-  }
-
-  &[disabled] #{$this}__connect {
-    @include mixins.disabled-connect();
-  }
-}