@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -0,0 +1,105 @@
+import { render } from "@testing-library/react";
+
+import { Radio } from "../Radio";
+
+// id and name are required
+describe("rendering Radio", () => {
+  describe("initial state", () => {
+    it("has default class radio", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("radio");
+    });
+    it("has type radio", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("type")).toBe("radio");
+    });
+    it("has div with className radio-display", () => {
+      const { container } = render(<Radio id="id" name="test" />);
+      expect(container.querySelector("div")).toBeInTheDocument();
+      expect(container.querySelector("div")).toHaveClass("radio-display");
+    });
+  });
+  describe("passed props", () => {
+    it("has is-invalid class when isInvalid prop is passed", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" isInvalid />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-invalid");
+    });
+    it("has radio--large class when size prop is set to large", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" size="large" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("radio--large");
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Radio
+          data-testid="test-id"
+          className="test-class"
+          id="id"
+          name="test"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("radio");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("id attribute is set to id prop", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("id")).toBe("id");
+    });
+
+    it("name attribute is set to name prop", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("name")).toBe("test");
+    });
+    it("disabled attribute is set to true when isDisabled prop is passed", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" isDisabled />,
+      );
+      expect(getByTestId("test-id").disabled).toBe(true);
+    });
+    it("value attribute is set to id prop when value prop is not set", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("value")).toBe("id");
+    });
+    it("value attribute is set to value prop when value prop is set", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" value="test-value" />,
+      );
+      expect(getByTestId("test-id").getAttribute("value")).toBe("test-value");
+    });
+    it("checked attribute set to true when isChecked prop is passed", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" isChecked />,
+      );
+      expect(getByTestId("test-id").checked).toBe(true);
+    });
+    it("radio element is checked after click", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").checked).toBe(false);
+      getByTestId("test-id").click();
+      expect(getByTestId("test-id").checked).toBe(true);
+    });
+    it("radio element stays unchecked after click when isDisabled is passed", () => {
+      const { getByTestId } = render(
+        <Radio data-testid="test-id" id="id" name="test" isDisabled />,
+      );
+      expect(getByTestId("test-id").checked).toBe(false);
+      getByTestId("test-id").click();
+      expect(getByTestId("test-id").checked).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,304 @@
+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.ts

@@ -0,0 +1,121 @@
+import noUiSlider, { API as NoUiSliderInstance } from "nouislider";
+import wnumb, { Instance as WNumbInstance } from "wnumb";
+
+import defaultConfig from "./data";
+
+export interface RangeSliderConfig {
+  format?: any;
+  [key: string]: any;
+}
+
+interface Output {
+  element: HTMLElement;
+  format?: WNumbInstance;
+}
+
+export default class RangeSlider {
+  public element: HTMLElement;
+  public config: RangeSliderConfig;
+  public instance?: NoUiSliderInstance;
+  public inputs: HTMLInputElement[];
+  public outputs: (Output | false)[];
+
+  constructor(element: HTMLElement, config?: Partial<RangeSliderConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.inputs = [];
+    this.outputs = [];
+    this.handleSliderUpdate = this.handleSliderUpdate.bind(this);
+    (this.element as any).ODS_RangeSlider = this;
+    this.init();
+    return this;
+  }
+
+  public init(): void {
+    const configAttr = this.element.getAttribute("data-rangeslider-config");
+    let elementConfig: Partial<RangeSliderConfig> = {};
+    if (configAttr) {
+      try {
+        elementConfig = JSON.parse(configAttr);
+      } catch {
+        // ignore parse error
+      }
+    }
+    this.config = { ...this.config, ...elementConfig };
+    this.config.format = wnumb(this.config.format);
+
+    if ((this.element as any).noUiSlider) {
+      (this.element as any).noUiSlider = undefined;
+      if (this.instance?.destroy) this.instance.destroy();
+    }
+
+    // Ensure config matches required Options type
+    if (!this.config.range) {
+      throw new Error("RangeSlider config must include 'range'.");
+    }
+    this.instance = noUiSlider.create(this.element, this.config as any);
+    this.inputs = Array.from(
+      document.querySelectorAll(
+        `input[name^=${this.element.getAttribute("id")}-]`,
+      ),
+    ) as HTMLInputElement[];
+
+    this.outputs = this.inputs.map((input) => {
+      const outputElement = document.getElementById(
+        `${input.getAttribute("id")}-output`,
+      );
+      if (outputElement) {
+        const formatAttr = outputElement.getAttribute("data-format");
+        return {
+          element: outputElement,
+          format:
+            outputElement.hasAttribute("data-format") && formatAttr
+              ? wnumb(JSON.parse(formatAttr))
+              : undefined,
+        };
+      }
+      return false;
+    });
+
+    this.instance.on(
+      "update",
+      (values: (string | number)[], handle: number) => {
+        this.handleSliderUpdate(values.map(String), handle);
+      },
+    );
+  }
+
+  public update(): void {
+    this.instance?.destroy();
+    this.init();
+  }
+
+  public destroy(): void {
+    this.instance?.off("update");
+    this.instance?.destroy();
+    (this.element as any).ODS_RangeSlider = null;
+  }
+
+  static getInstance(el: HTMLElement): RangeSlider | null {
+    return el && (el as any).ODS_RangeSlider
+      ? (el as any).ODS_RangeSlider
+      : null;
+  }
+
+  private handleSliderUpdate = (values: string[], handle: number): void => {
+    const value = values[handle];
+    if (this.inputs[handle]) {
+      this.inputs[handle].value = value;
+    }
+    if (this.outputs[handle]) {
+      const output = this.outputs[handle] as Output;
+      if (output && output.format) {
+        output.element.innerText = output.format.to(
+          this.config.format.from(value),
+        );
+      } else if (output) {
+        output.element.innerText = value;
+      }
+    }
+  };
+}

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../../utils/hooks";
+import generateId from "../../../utils/generateId";
+import RangeSliderStatic from "./RangeSlider.static";
+
+const CLASS_ROOT = "range-slider";
+
+export type RangeSliderWidth = "default" | "fullwidth";
+
+export interface RangeSliderConfig {
+  connect?: boolean | boolean[];
+  format?: (value: number) => string;
+  handleAttributes?: Array<Record<string, any>>;
+  pips?: {
+    mode?: "positions" | "count" | "values";
+    filter?: (value: number) => boolean;
+    format?: (value: number) => string;
+    values?: number[] | number;
+    density?: number;
+  };
+  range: {
+    min: number | number[];
+    max: number | number[];
+  };
+  start: number[];
+  [key: string]: any;
+}
+
+export interface RangeSliderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** [noUiSlider config object](https://refreshless.com/nouislider/slider-options/) */
+  config: RangeSliderConfig;
+  /** insert arbitrary element after rangeslider */
+  elementAfter?: React.ReactNode;
+  /** insert arbitrary element before rangeslider */
+  elementBefore?: React.ReactNode;
+  /** render data-rangeslider attribute and initialize RangeSlider.static.js */
+  hasDataAttr?: boolean;
+  /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
+  id?: string;
+  /** width of the element */
+  width?: RangeSliderWidth;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const defaultProps = {
+  hasDataAttr: true,
+  width: "default" as RangeSliderWidth,
+};
+
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  className,
+  id,
+  hasDataAttr = defaultProps.hasDataAttr,
+  config,
+  elementBefore,
+  elementAfter,
+  width = defaultProps.width,
+  ...other
+}) => {
+  const [rangesliderRef] = useStatic(RangeSliderStatic as any);
+
+  const currentId = id ?? generateId();
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${width}`]: width !== defaultProps.width,
+    },
+    className,
+  );
+
+  return (
+    <>
+      {elementBefore}
+      <div
+        id={currentId}
+        className={classes}
+        ref={rangesliderRef}
+        data-rangeslider={hasDataAttr}
+        data-rangeslider-config={JSON.stringify(config)}
+        {...other}
+      />
+      {config.start.map((_, i) => {
+        const inputId = `${currentId}-${i}`;
+        return (
+          <input key={inputId} type="hidden" id={inputId} name={inputId} />
+        );
+      })}
+      {elementAfter}
+    </>
+  );
+};
+
+RangeSlider.displayName = "RangeSlider";
+
+export { RangeSlider };

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

@@ -0,0 +1,50 @@
+const rangeSliderData = {
+  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,
+  },
+};
+
+export default rangeSliderData;

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

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { RangeSlider } from "./RangeSlider";