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

package/src/components/Forms/InputStepper/InputStepper.mdx

@@ -0,0 +1,147 @@
+import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+
+import Field from '../Field';
+import Bar, { BarItem } from '../../Bar';
+import { InfoTooltip } from '../../Tooltip';
+import Icon from '../../Icon';
+import InputStepper from './InputStepper';
+
+## InputStepper Field
+
+<Preview>
+  <Field
+    control={{
+      type: 'input-stepper',
+      config: { min: 2, max: 10, defaultValue: 3 },
+    }}
+    label="Field label"
+    hint="Field instructions"
+    messages={[{ type: 'info', text: 'Info message' }]}
+    tooltip="Field tooltip with further explanation"
+  />
+</Preview>
+
+## Layout
+
+If you want different layout use Bar component.
+
+<Preview>
+  <div class="form-field">
+    <Bar className={'mb-small'} space={'small'}>
+      <BarItem className={'form-field__description mb-none'} canShrink>
+        <label for="id-2" class="label form-field__label" id="id-2-label">
+          Field label
+        </label>
+        &nbsp;
+        <InfoTooltip>Field tooltip with further explanation</InfoTooltip>
+      </BarItem>
+      <BarItem>
+        <InputStepper
+          id="id-2"
+          className={'form-field__control'}
+        ></InputStepper>
+      </BarItem>
+    </Bar>
+    <p class="hint form-field__hint" id="id-2-hint">
+      Field instructions
+    </p>
+    <p class="message" id="id-2-message-0">
+      <Icon name="info" size="medium" color="info" className="message__icon" />
+      Info message
+    </p>
+  </div>
+</Preview>
+
+## InputStepper config
+
+By default minimum value is 1, maximum value is 999 and defaultValue is 1. You can override these values by passing JSON string to `data-inputstepper`.
+
+<Preview>
+  <InputStepper
+    id="stepper-1"
+    config={{
+      min: 2,
+      max: 10,
+      defaultValue: 3,
+    }}
+  ></InputStepper>
+</Preview>
+
+## InputStepper disabled
+
+Outside of disabled attributes on input and buttons, dont forget to add class `input-stepper--disabled` to `<div/>` wrapper, otherwise disabled attributes will be removed during component initialization.
+
+<Preview>
+  <InputStepper isDisabled={true} id="disabled">
+    {' '}
+  </InputStepper>
+</Preview>
+
+## InputStepper with non editable input
+
+When `nonEditableInput` config is used, input is replaced only with text number and user cannot change it by typing.
+
+<Preview>
+  <InputStepper
+    id="stepper-non-editable"
+    nonEditableInput>
+  </InputStepper>
+
+</Preview>
+
+## InputStepper inverse
+
+InputStepper can be used on dark background by adding class `input-stepper--inverse`, but default behaviour on black backgound is also set.
+
+<Preview bgTheme="black">
+  <InputStepper isInverse className={'mb-medium'} id="inverse-1"></InputStepper>
+  <InputStepper
+    isDisabled={true}
+    id="inverse-2"
+    isInverse
+    className={'mb-medium'}
+  ></InputStepper>
+  <div className="bg-black">
+    <InputStepper id="inverse-3"> </InputStepper>
+  </div>
+</Preview>
+
+## JS Module Reference
+
+All elements with `[data-inputstepper]` 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 config object through `[data-inputstepper]` attribute or during [manual initialisation](#manual-initialisation).
+
+### Default config
+
+```javascript
+{
+  nonEditableInput: false,
+  min: 1,
+  max: 999,
+  defaultValue: 1,
+}
+```
+
+### Manual initialisation
+
+```javascript
+const myInputStepper = new window.myApp.InputStepper(
+  document.getElementById('my-inputstepper'),
+  config
+);
+```
+
+### Methods
+
+- **init()** - handles initialization
+- **destroy()** - destroys the instance
+- **update()** - destroys and initializes the instance again
+
+## Props
+
+<ComponentDocs title="<InputStepper />" component={InputStepper} />

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

@@ -0,0 +1,187 @@
+export interface InputStepperConfig {
+  nonEditableInput?: boolean;
+  min?: number;
+  max?: number;
+  defaultValue?: number;
+}
+
+export const defaultConfig: Required<InputStepperConfig> = {
+  nonEditableInput: false,
+  min: 1,
+  max: 999,
+  defaultValue: 1,
+};
+
+export default class InputStepperStatic {
+  element: HTMLElement;
+  config: Required<InputStepperConfig>;
+  input: HTMLInputElement | null;
+  numberDisplay: HTMLElement | null;
+  add: HTMLButtonElement | null;
+  remove: HTMLButtonElement | null;
+
+  constructor(element: HTMLElement, config?: InputStepperConfig) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.input = null;
+    this.numberDisplay = null;
+    this.add = null;
+    this.remove = null;
+    (this.element as any).ODS_InputStepper = this;
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleInputClick = this.handleInputClick.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleButtonState = this.handleButtonState.bind(this);
+
+    this.init();
+  }
+
+  handleInputClick(): void {
+    if (this.input) {
+      this.input.select();
+    }
+  }
+
+  handleButtonState(): void {
+    const { min, max } = this.config;
+    const value = !this.config.nonEditableInput
+      ? parseInt(this.input?.value ?? "0", 10)
+      : parseInt(this.numberDisplay?.textContent ?? "0", 10);
+
+    if (this.add && typeof max === "number" && value >= max) {
+      this.add.setAttribute("aria-disabled", "true");
+      this.add.setAttribute("disabled", "true");
+    } else if (this.add) {
+      this.add.removeAttribute("aria-disabled");
+      this.add.removeAttribute("disabled");
+    }
+    if (this.remove && typeof min === "number" && value <= min) {
+      this.remove.setAttribute("aria-disabled", "true");
+      this.remove.setAttribute("disabled", "true");
+    } else if (this.remove) {
+      this.remove.removeAttribute("aria-disabled");
+      this.remove.removeAttribute("disabled");
+    }
+  }
+
+  handleInputChange(e: Event): void {
+    const { min, max } = this.config;
+    const target = e.target as HTMLInputElement;
+    if (target) {
+      if (min && Number(target.value) <= min) {
+        target.value = String(min);
+      }
+      if (max && Number(target.value) >= max) {
+        target.value = String(max);
+      }
+    }
+  }
+
+  handleButtonClick(e: MouseEvent): void {
+    const { min, max } = this.config;
+    const target = e.target as HTMLElement;
+    let value = !this.config.nonEditableInput
+      ? parseInt(this.input?.value ?? "0", 10)
+      : parseInt(this.numberDisplay?.textContent ?? "0", 10);
+
+    if (target.classList.contains("input-stepper__button--minus")) {
+      if (min && value <= min) {
+        if (target.getAttribute("disabled") === "true") return;
+        target.setAttribute("aria-disabled", "true");
+        target.setAttribute("disabled", "true");
+        return;
+      }
+      value -= 1;
+    }
+    if (target.classList.contains("input-stepper__button--plus")) {
+      if (max && value >= max) {
+        if (target.getAttribute("disabled") === "true") return;
+        target.setAttribute("aria-disabled", "true");
+        target.setAttribute("disabled", "true");
+        return;
+      }
+      value += 1;
+    }
+    if (!this.config.nonEditableInput && this.input) {
+      this.input.value = String(value);
+    } else if (this.numberDisplay) {
+      this.numberDisplay.textContent = String(value);
+    }
+    this.handleButtonState();
+  }
+
+  init(): void {
+    const configAttr = this.element.getAttribute("data-inputstepper");
+    let parsedConfig: Partial<InputStepperConfig> = {};
+    try {
+      if (configAttr && configAttr.trim().startsWith("{")) {
+        parsedConfig = JSON.parse(configAttr);
+      }
+    } catch {
+      parsedConfig = {};
+    }
+    this.config = {
+      ...this.config,
+      ...parsedConfig,
+    };
+
+    if (!this.config.nonEditableInput) {
+      this.input = this.element.querySelector(
+        ".input-stepper__field",
+      ) as HTMLInputElement;
+      if (this.input) this.input.value = String(this.config.defaultValue);
+    } else {
+      this.numberDisplay = this.element.querySelector(".input-stepper__number");
+      if (this.numberDisplay)
+        this.numberDisplay.textContent = String(this.config.defaultValue);
+    }
+    this.add = this.element.querySelector(
+      ".input-stepper__button--plus",
+    ) as HTMLButtonElement;
+    this.remove = this.element.querySelector(
+      ".input-stepper__button--minus",
+    ) as HTMLButtonElement;
+
+    const { defaultValue } = this.config;
+
+    if (defaultValue !== undefined) {
+      if (!this.config.nonEditableInput && this.input) {
+        this.input.value = String(defaultValue);
+      } else if (this.numberDisplay) {
+        this.numberDisplay.textContent = String(defaultValue);
+      }
+    }
+
+    if (!this.element.classList.contains("input-stepper--disabled")) {
+      if (this.add) this.add.addEventListener("click", this.handleButtonClick);
+      if (this.remove)
+        this.remove.addEventListener("click", this.handleButtonClick);
+      if (!this.config.nonEditableInput && this.input) {
+        this.input.addEventListener("click", this.handleInputClick);
+        this.input.addEventListener("change", this.handleInputChange);
+      }
+      this.handleButtonState();
+    }
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  destroy(): void {
+    if (!this.config.nonEditableInput && this.input) {
+      this.input.removeEventListener("click", this.handleInputClick);
+      this.input.removeEventListener("change", this.handleInputChange);
+    }
+    if (this.add) this.add.removeEventListener("click", this.handleButtonClick);
+    if (this.remove)
+      this.remove.removeEventListener("click", this.handleButtonClick);
+  }
+
+  static getInstance(el: HTMLElement): InputStepperStatic | null {
+    return el && (el as any).ODS_InputStepper
+      ? (el as any).ODS_InputStepper
+      : null;
+  }
+}

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../../utils/hooks";
+import { TextInput } from "../TextInput/TextInput";
+
+import InputStepperStatic from "./InputStepper.static";
+
+const CLASS_ROOT = "input-stepper";
+
+export interface InputStepperConfig {
+  min?: number;
+  max?: number;
+  defaultValue?: number;
+  nonEditableInput?: boolean;
+}
+
+export interface InputStepperProps {
+  config?: InputStepperConfig;
+  id: string;
+  inputClassName?: string;
+  isDisabled?: boolean;
+  isInverse?: boolean;
+  name?: string;
+  nonEditableInput?: boolean;
+  className?: string;
+  [key: string]: any;
+}
+
+const InputStepper: React.FC<InputStepperProps> = ({
+  className,
+  inputClassName,
+  id,
+  config,
+  isDisabled,
+  isInverse,
+  nonEditableInput = false,
+  ...other
+}) => {
+  const [elementRef] = useStatic(InputStepperStatic, {
+    nonEditableInput,
+  });
+
+  const { name = id, ...props } = other;
+
+  const classes = cx(`${CLASS_ROOT}__field`, inputClassName);
+
+  return (
+    <div
+      className={cx(CLASS_ROOT, className, {
+        [`${CLASS_ROOT}--inverse`]: isInverse,
+        [`${CLASS_ROOT}--disabled`]: isDisabled,
+      })}
+      ref={elementRef}
+      data-inputstepper={config ? JSON.stringify(config) : true}
+      {...props}
+    >
+      <button
+        disabled={isDisabled}
+        className={`${CLASS_ROOT}__button ${CLASS_ROOT}__button--minus`}
+        aria-label="znížiť počet"
+      ></button>
+      {nonEditableInput || config?.nonEditableInput ? (
+        <p id={id} className={`${CLASS_ROOT}__number`}></p>
+      ) : (
+        <TextInput
+          className={classes}
+          id={id}
+          name={name}
+          disabled={isDisabled}
+          htmlType="number"
+          inputMode="numeric"
+        />
+      )}
+      <button
+        disabled={isDisabled}
+        className={`${CLASS_ROOT}__button ${CLASS_ROOT}__button--plus`}
+        aria-label="zvýšiť počet"
+      ></button>
+    </div>
+  );
+};
+
+InputStepper.displayName = "InputStepper";
+
+export { InputStepper };

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

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

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

@@ -0,0 +1,210 @@
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
+@use "../../../../styles/tokens/color";
+@use "../../../../styles/tokens/base";
+
+@layer components {
+  .input-stepper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &__field {
+      width: convert.to-rem(40px);
+      appearance: textfield;
+      z-index: 0;
+      border-radius: 0;
+      padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
+        space.get("xsmall");
+      text-align: center;
+      border-left: 0;
+      border-right: 0;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        appearance: none;
+      }
+      &:disabled {
+        color: var(--color-surface-moderate) !important;
+        -webkit-text-fill-color: var(--color-surface-moderate) !important;
+        background-color: color.$white;
+      }
+    }
+    &__number {
+      display: block;
+      font-weight: bold;
+      appearance: textfield;
+      width: convert.to-rem(40px);
+      height: convert.to-rem(40px);
+      z-index: 0;
+      padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
+        space.get("xsmall");
+      text-align: center;
+      border: 2px solid var(--color-surface-moderate);
+      border-left: 0;
+      border-right: 0;
+      margin-bottom: 0;
+      line-height: 1.5;
+    }
+    &__button {
+      position: relative;
+      z-index: 0;
+      height: 40px;
+      width: 40px;
+      border-top: 2px solid;
+      border-bottom: 2px solid;
+      border-color: var(--color-surface-moderate);
+
+      &::before {
+        content: "";
+        position: absolute;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__button--minus {
+      border-left: 2px solid var(--color-surface-moderate);
+      border-top-left-radius: convert.to-rem(5px);
+      border-bottom-left-radius: convert.to-rem(5px);
+      background-color: color.$white;
+
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+      }
+    }
+
+    &__button--plus {
+      border-right: 2px solid var(--color-surface-moderate);
+      border-top-right-radius: convert.to-rem(5px);
+      border-bottom-right-radius: convert.to-rem(5px);
+      background-color: color.$white;
+
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+      }
+    }
+
+    &__button:focus {
+      z-index: 1;
+    }
+
+    &__button--minus:disabled {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23CCCCCC"/></svg>');
+      }
+    }
+
+    &__button--plus:disabled {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23CCCCCC"/></svg>');
+      }
+    }
+
+    &__button:hover:not(:disabled) {
+      background-color: color.$black;
+      border-color: color.$black;
+    }
+
+    &__button--minus:hover:not(:disabled) {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
+      }
+    }
+
+    &__button--plus:hover:not(:disabled) {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
+      }
+    }
+
+    &__button--minus:active:not(:disabled) {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+      }
+    }
+
+    &__button--plus:active:not(:disabled) {
+      &::before {
+        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+      }
+    }
+
+    &__button:active:not(:disabled) {
+      background-color: color.$orange-dark;
+      border-color: color.$orange-dark;
+    }
+  }
+
+  // .input-stepper--inverse,
+  // .bg-black .input-stepper {
+  //   .input-stepper__field {
+  //     background-color: color.$black;
+  //     color: color.$white;
+  //     border-color: color.$gray-700;
+
+  //     &:disabled {
+  //       color: color.$gray-700;
+  //       -webkit-text-fill-color: color.$gray-700 !important;
+  //     }
+  //   }
+
+  //   .input-stepper__button {
+  //     border-color: color.$gray-700;
+
+  //     &--minus {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
+  //       }
+  //     }
+
+  //     &--plus {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
+  //       }
+  //     }
+
+  //     &--minus:disabled {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23666666"/></svg>');
+  //       }
+  //     }
+
+  //     &--plus:disabled {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23666666"/></svg>');
+  //       }
+  //     }
+
+  //     &:hover:not(:disabled) {
+  //       background-color: color.$white;
+  //       border-color: color.$white;
+  //     }
+
+  //     &:active:not(:disabled) {
+  //       background-color: color.$orange;
+  //       border-color: color.$orange;
+  //     }
+
+  //     &--minus:active:not(:disabled),
+  //     &--minus:hover:not(:disabled) {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+  //       }
+  //     }
+
+  //     &--plus:active:not(:disabled),
+  //     &--plus:hover:not(:disabled) {
+  //       &::before {
+  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+  //       }
+  //     }
+  //   }
+  // }
+}

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

@@ -0,0 +1,54 @@
+import { render } from "@testing-library/react";
+
+import { InputStepper } from "../InputStepper";
+
+describe("rendering InputStepper", () => {
+  describe("initial state", () => {
+    it("has default class radio", () => {
+      const { getByTestId } = render(
+        <InputStepper data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("input-stepper");
+    });
+  });
+  describe("passed props", () => {
+    it("has input-stepper--inverse class when isInverse prop is passed", () => {
+      const { getByTestId } = render(
+        <InputStepper data-testid="test-id" id="id" isInverse />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("input-stepper--inverse");
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <InputStepper data-testid="test-id" className="test-class" id="id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("input-stepper");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has input-stepper--disabled class and disabled controls when isDisabled prop is passed", () => {
+      const { getByTestId, getByLabelText, getByRole } = render(
+        <InputStepper data-testid="test-id" id="id" isDisabled />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("input-stepper--disabled");
+      expect(getByLabelText("znížiť počet")).toBeDisabled();
+      expect(getByLabelText("zvýšiť počet")).toBeDisabled();
+      expect(getByRole("spinbutton")).toBeDisabled();
+    });
+    it("has InputStepper removed input field, replaced it with text number and set defaultValue with when config prop is passed", () => {
+      const { getByText } = render(
+        <InputStepper
+          data-testid="test-id"
+          id="id"
+          config={{
+            nonEditableInput: true,
+            min: 2,
+            max: 10,
+            defaultValue: 3,
+          }}
+        />,
+      );
+
+      expect(getByText("3")).toBeInTheDocument();
+    });
+  });
+});