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

package/src/components/Forms/File/File.mdx

@@ -0,0 +1,88 @@
+import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../../styleguide';
+
+import Field from '../Field';
+import File from './File';
+
+# File
+
+File input allows uploading one or multiple files.
+
+<Field
+  control={{ type: 'file' }}
+  label="Upload a file"
+/>
+
+## File Field
+
+A File Field consists of:
+
+1. [**Label**](/components/forms/captions/label) (mandatory)
+2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
+3. [**Hint**](/components/forms/captions/hing) (optional)
+4. **File** control itself
+5. **List of selected files** (visible after selecting file/files)
+6. [**Messages**](/components/fomrs/captions/messge) (optional)
+
+<Preview>
+  <Field
+    control={{ type: 'file', accept: '.pdf'}}
+    label="Upload your CV"
+    hint="Please use a PDF file"
+    messages={[ { type: 'warning', text: 'An example warning message' }]}
+  />
+</Preview>
+
+## Control States
+
+### Disabled
+
+Cannot be focused, does not receive `click` events and is not submitted with the form. 
+
+<Preview>
+  <File id="file-disabled" isDisabled />
+</Preview>
+
+### Invalid
+
+Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/field#hint-tooltip-and-messages).
+
+<Preview>
+  <File id="file-invalid" isInvalid />
+</Preview>
+
+## Sizes
+
+### Large
+
+<Preview>
+  <File id="file-size-large" size="large" />
+</Preview>
+
+## JS Module Reference
+
+The JS Module is responsible for updating label text with the selected file name.
+
+All elements matching `input[type="file"].file-input` selector with a unique `name` attribute will be initialised automatically.
+
+**`input[name]`** must be specified for the JS module to initialize.
+
+### Custom initialization
+
+```javascript
+const myFileInput = new window.ODS.modules.File( document.getElementById('myFileInput') );
+```
+
+### Methods
+
+- **init()** - handles initialization
+- **destroy()** - destroys the instance
+- **update()** - destroys and initializes the instance again
+
+## Props
+
+<ComponentDocs component={File} />
+
+## Accessibility
+
+Bootsted implementation changes the input label text to the file name of selected file. Once user selects a file, they loose the context and therefore this implementation is considered bad usability and violates at least one WCAG success criterion - [3.3.2 Labels or Instructions - Level A](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html).

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

@@ -0,0 +1,164 @@
+import DOMPurify from "dompurify";
+
+export interface FileConfig {
+  dragDropClassname: string;
+  inputSelector: string;
+  resultsSelector: string;
+  deleteButtonSelector: string;
+  deleteFileAttr: string;
+  fileTemplate: (name: string, i: number) => string;
+}
+
+export const defaultConfig: FileConfig = {
+  dragDropClassname: "is-dragdrop",
+  inputSelector: 'input[type="file"]',
+  resultsSelector: ".file-input__files",
+  deleteButtonSelector: "[data-file-delete]",
+  deleteFileAttr: "data-file-delete",
+  fileTemplate: (name: string, i: number) => {
+    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 FileStatic {
+  element: HTMLElement;
+  config: FileConfig;
+  input: HTMLInputElement | null;
+  files: File[];
+  results: HTMLElement | null;
+  removeButtons: HTMLButtonElement[];
+
+  constructor(element: HTMLElement, config?: Partial<FileConfig>) {
+    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.preventDefaults = this.preventDefaults.bind(this);
+
+    this.init();
+    return this;
+  }
+
+  init() {
+    this.input = this.element.querySelector(
+      this.config.inputSelector,
+    ) as HTMLInputElement | null;
+    this.results = this.element.querySelector(
+      this.config.resultsSelector,
+    ) as HTMLElement | null;
+    if (!this.input || !this.results) return;
+
+    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() {
+    if (!this.input || !this.results) return false;
+    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,
+        }) as DocumentFragment,
+      );
+    });
+    this.removeButtons = Array.from(
+      this.results.querySelectorAll(this.config.deleteButtonSelector),
+    ) as HTMLButtonElement[];
+    this.removeButtons.forEach((button) =>
+      button.addEventListener("click", this.onRemoveButtonClick),
+    );
+  }
+
+  onDrop(e: DragEvent) {
+    if (!this.input) return;
+    this.input.files = e?.dataTransfer?.files || new DataTransfer().files;
+    this.onInputChange();
+  }
+
+  onRemoveButtonClick(e: MouseEvent) {
+    if (!this.input) return;
+    const dt = new DataTransfer();
+    const target = e.currentTarget as HTMLElement;
+    const deletedFileIndex = Number(
+      target.getAttribute(this.config.deleteFileAttr),
+    );
+    this.files.splice(deletedFileIndex, 1);
+    this.files.forEach((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: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  destroy() {
+    if (!this.input) return;
+    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/File.tsx

@@ -0,0 +1,77 @@
+import React, { FC } from "react";
+import cx from "classnames";
+
+import generateId from "../../../utils/generateId";
+import FileStatic from "./File.static";
+import { useStatic } from "../../../utils/hooks";
+
+const CLASS_ROOT = "file-input";
+
+export type FileSize = "default" | "large";
+
+// Omit native 'size' prop to avoid conflict
+export interface FileProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Html id attribute. Generated automatically if omitted. */
+  id?: string;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
+  /** Input name. */
+  name?: string;
+  /** Size of element. */
+  size?: FileSize;
+  className?: string;
+}
+
+const defaultSize: FileSize = "default";
+
+const File: FC<FileProps> = ({
+  id,
+  isDisabled,
+  // isInvalid, // Not used, removed to fix lint error
+  name,
+  size = defaultSize,
+  className,
+  ...other
+}) => {
+  const [ref] = useStatic(FileStatic);
+
+  const currentId = id || generateId();
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${size}`]: size !== defaultSize,
+    },
+    className,
+  );
+
+  return (
+    <div className={classes} data-file-input ref={ref}>
+      <input
+        className={`${CLASS_ROOT}__control`}
+        id={currentId}
+        name={name || id}
+        disabled={isDisabled}
+        type="file"
+        {...other}
+      />
+      <label
+        // @ts-expect-error: custom prop for styling
+        size={size}
+        htmlFor={currentId}
+        aria-hidden="true"
+        className={`${CLASS_ROOT}__button`}
+      >
+        Vybrať súbor
+      </label>
+      <ul className={`${CLASS_ROOT}__files`} />
+    </div>
+  );
+};
+
+File.displayName = "File";
+
+export { File };

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

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

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

@@ -0,0 +1,12 @@
+@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

@@ -0,0 +1,87 @@
+@use "./config";
+@use "../../../../styles/tokens/color";
+@use "../../../../styles/tokens/base";
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
+@use "../../../../styles/typography/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.$variants);
+
+  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

@@ -0,0 +1,51 @@
+@use "./config";
+@use "./mixins";
+@use "../../../../styles/tools/generate";
+
+@layer components {
+  .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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,48 @@
+# 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/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG for Group.tsx
+
+## [Unreleased]
+- BREAKING CHANGE: Renamed props `prefix` and `suffix` to `addonPrefix` and `addonSuffix` in the Group component to avoid collision with HTML attributes and fix TypeScript compatibility.
+- Updated all usages and tests to use the new prop names.