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

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

@@ -0,0 +1,32 @@
+@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 var(--color-border-contrast),
+  background: var(--color-background-primary),
+  border-radius: 100%,
+);

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

@@ -0,0 +1,139 @@
+@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: var(--color-background-contrast);
+    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: var(--color-surface-moderate);
+  height: config.$slider-size;
+  margin-bottom: space.get("small");
+}
+
+@mixin connects() {
+  overflow: hidden;
+  z-index: 0;
+  height: 100%;
+}
+
+@mixin connect() {
+  background: var(--color-surface-secondary);
+  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: var(--color-surface-moderate);
+}
+
+@mixin pips() {
+  height: convert.to-rem(24px);
+  margin-bottom: space.get("small");
+  top: 100%;
+  left: 0;
+  width: 100%;
+}
+
+@mixin marker() {
+  position: absolute;
+  background: var(--color-surface-moderate);
+  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

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

package/src/components/Forms/Select/Select.mdx

@@ -0,0 +1,106 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+
+import Field from '../Field';
+import Select from './';
+
+export const options = ['Option 1', 'Option 2', 'Option 3'];
+
+# Select
+
+Select is a control that provides a finite menu of options. One option is always selected, a select cannot be empty.
+
+Select is used when the user does not need to see all available options.
+
+## Select Field
+
+A Select 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. **Select** control itself
+5. [**Messages**](/components/fomrs/captions/messge) (optional)
+
+<Preview>
+  <Field
+    control={{ type: 'select', id: 'select', options }}
+    label="Example select"
+    hint="Hint on what to fill in"
+    messages={[{ type: 'warning', text: 'A validation message' }]}
+  />
+</Preview>
+
+## States
+
+### Disabled
+
+Cannot be focused, does not receive `click` events and is not submitted with the form.
+
+<Preview>
+  <Select isDisabled options={options} />
+</Preview>
+
+### Invalid
+
+Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
+
+<Preview>
+  <Select isInvalid options={options} />
+</Preview>
+
+## Widths
+
+### Default
+
+Default width matches widths of other form controls.
+
+<Preview>
+  <Select options={options} />
+</Preview>
+
+### 12ch
+
+Narrow select. Truncnates very long options to maintain it's width.
+
+<Preview>
+  <Select
+    width="12ch"
+    options={[...options, 'very very long option gets truncnated']}
+  />
+</Preview>
+
+### Shrink
+
+Shrink matches the control witdh to the longest available option.
+
+<Preview>
+  <Select width="shrink" options={['1', '2', '3 is longer']} />
+</Preview>
+
+### Fullwidth
+
+Fill the available container.
+
+<Preview>
+  <Select width="fullwidth" options={options} />
+</Preview>
+
+## Sizes
+
+### Default
+
+<Preview>
+  <Select options={options} />
+</Preview>
+
+### Large
+
+<Preview>
+  <Select size="large" options={options} />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Select />" component={Select} />

package/src/components/Forms/Select/Select.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import cx from "classnames";
+
+import generateId from "../../../utils/generateId";
+
+const CLASS_ROOT = "select";
+
+export type SelectOption = { text: string; value: string } | string;
+
+export type SelectSize = "default" | "large";
+export type SelectWidth = "default" | "12ch" | "shrink" | "fullwidth";
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /** Forwarded DOM element ref. */
+  elemRef?: React.Ref<HTMLSelectElement>;
+  /** Html id attribute. */
+  id?: string;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  /** Invalid state. */
+  isInvalid?: boolean;
+  /** Html name attribute. */
+  name?: string;
+  /** Select option can be specified via children or as options array */
+  options?: SelectOption[];
+  /** Size of element. */
+  size?: SelectSize;
+  /** Select value. */
+  value?: string | string[];
+  /** Element width */
+  width?: SelectWidth;
+  /** Additional CSS classes */
+  className?: string;
+  /** Child elements */
+  children?: React.ReactNode;
+}
+
+const defaultProps = {
+  size: "default" as SelectSize,
+  width: "default" as SelectWidth,
+  options: [] as SelectOption[],
+};
+
+const Select: React.FC<SelectProps> = ({
+  id,
+  isDisabled,
+  isInvalid,
+  name,
+  options = defaultProps.options,
+  size = defaultProps.size,
+  className,
+  children,
+  elemRef,
+  width = defaultProps.width,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className, {
+    "is-invalid": isInvalid,
+    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
+    [`${CLASS_ROOT}--${width}`]: width !== defaultProps.width,
+  });
+
+  const elementId = id || generateId();
+  const elementName = name || elementId;
+
+  return (
+    <select
+      id={elementId}
+      name={elementName}
+      className={classes}
+      disabled={isDisabled}
+      ref={elemRef}
+      {...other}
+    >
+      {options.map((option) => {
+        const {
+          value: optionValue,
+          text,
+          ...otherOptionProps
+        } = typeof option === "string"
+          ? { value: option, text: option }
+          : option;
+        return (
+          <option value={optionValue} key={text} {...otherOptionProps}>
+            {text}
+          </option>
+        );
+      })}
+      {children}
+    </select>
+  );
+};
+
+Select.displayName = "Select";
+
+export { Select };

package/src/components/Forms/Select/index.tsx

@@ -0,0 +1,9 @@
+import "./styles/style.scss";
+
+import { Select, SelectProps } from "./Select";
+
+export { Select };
+
+export const MultiSelect = (props: SelectProps) => (
+  <Select multiple {...props} />
+);

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

@@ -0,0 +1,53 @@
+@use "../../../../styles/tokens/color";
+@use "../../../../styles/tools/convert";
+@use "../../styles/config" as commonConfig;
+
+$base: (
+  border-radius: convert.to-rem(5px),
+  background-image:
+    url("data:image/svg+xml,%3Csvg width='14' height='7' viewBox='0 0 14 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H14L7 7L0 0Z' fill='%23000'/%3E%3C/svg%3E%0A"),
+  background-repeat: no-repeat,
+  background-position: right 10px center,
+  font-weight: bold,
+  appearance: none,
+  -webkit-appearance: none,
+  color: color.$black,
+  overflow: hidden,
+);
+
+$states: (
+  default: commonConfig.$default,
+  focus: commonConfig.$focus,
+  disabled: commonConfig.$disabled,
+  invalid: commonConfig.$invalid,
+);
+
+$sizes: (
+  default: (
+    height: convert.to-rem(40px),
+    padding: convert.to-rem(8px) convert.to-rem(34px) convert.to-rem(8px)
+      convert.to-rem(8px),
+  ),
+  large: (
+    height: convert.to-rem(50px),
+    padding: convert.to-rem(13px) convert.to-rem(34px) convert.to-rem(13px)
+      convert.to-rem(13px),
+  ),
+);
+
+$widths: (
+  default: (
+    width: 100%,
+    max-width: convert.to-rem(350px),
+  ),
+  12ch: (
+    max-width: convert.to-rem(160px),
+  ),
+  shrink: (
+    width: auto,
+  ),
+  fullwidth: (
+    width: 100%,
+    max-width: none,
+  ),
+);

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

@@ -0,0 +1,34 @@
+@use '../../../../styles/tools/generate';
+@use './config';
+
+@mixin base($config: config.$base) {
+  @include generate.css-map($config);
+
+  position: relative;
+  display: inline-block;
+  transform: translateZ(0);
+}
+
+@mixin states($config: config.$states) {
+  @include generate.css-map($config, 'default');
+
+  &:focus {
+    @include generate.css-map($config, 'focus');
+  }
+
+  &:disabled {
+    @include generate.css-map($config, 'disabled');
+  }
+
+  &.is-invalid {
+    @include generate.css-map($config, 'invalid');
+  }
+}
+
+@mixin size($size, $config: config.$sizes) {
+  @include generate.css-map($config, $size);
+}
+
+@mixin width($width, $config: config.$widths) {
+  @include generate.css-map($config, $width);
+}

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

@@ -0,0 +1,22 @@
+@use "../../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .select {
+    @include mixins.base();
+    @include mixins.states();
+
+    @each $size, $values in config.$sizes {
+      &#{generate.variant-name($size)} {
+        @include mixins.size($size);
+      }
+    }
+
+    @each $width, $values in config.$widths {
+      &#{generate.variant-name($width)} {
+        @include mixins.width($width);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+import { render } from "@testing-library/react";
+
+import { Select } from "../Select";
+
+describe("rendering Select", () => {
+  describe("initial state", () => {
+    it("has default class select", () => {
+      const { getByTestId } = render(<Select data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("select");
+    });
+    it("has generated id", () => {
+      const { getByTestId } = render(<Select data-testid="test-id" />);
+      const pattern = /id-\d+/;
+      expect(
+        pattern.test(getByTestId("test-id").getAttribute("id")),
+      ).toBeTruthy();
+    });
+    it("name attribute is set to id when its not defined", () => {
+      const { getByTestId } = render(<Select data-testid="test-id" />);
+      expect(getByTestId("test-id").getAttribute("name")).toBe(
+        getByTestId("test-id").getAttribute("id"),
+      );
+    });
+  });
+  describe("passed props", () => {
+    const options = ["option1", { text: "option2", value: "option2" }];
+    it("renders children", () => {
+      const { getByText } = render(<Select data-testid="test-id">test</Select>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has is-invalid class when isInvalid prop is passed", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-id" isInvalid />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-invalid");
+    });
+    it("has select--large class when size prop is set to large", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-id" size="large" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("select--large");
+    });
+    ["shrink", "fullwidth"].map((width) => {
+      it(`has select--${width} class when width prop is set to ${width}`, () => {
+        const { getByTestId } = render(
+          <Select data-testid="test-id" width={width} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`select--${width}`);
+      });
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("select");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("id attribute is set to id prop when prop is passed", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-id" id="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("id")).toBe("test");
+    });
+    it("name attribute is set to id when its not defined and id is prop is set", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-id" id="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("name")).toBe(
+        getByTestId("test-id").getAttribute("id"),
+      );
+    });
+    it("name attribute is set to name prop when prop is passed", () => {
+      const { getByTestId } = render(
+        <Select data-testid="test-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(
+        <Select data-testid="test-id" isDisabled />,
+      );
+      expect(getByTestId("test-id").disabled).toBe(true);
+    });
+    it("renders options", () => {
+      const { container } = render(
+        <Select options={options} data-testid="test-id" name="test" />,
+      );
+      const optionElements = container.querySelectorAll("option");
+      expect(optionElements.length).toBe(2);
+      for (let i in options) {
+        expect(optionElements[i].getAttribute("value")).toBe(
+          `option${parseInt(i) + 1}`,
+        );
+        expect(optionElements[i].textContent).toBe(`option${parseInt(i) + 1}`);
+      }
+    });
+  });
+});