@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/src/components/Forms/Autocomplete/Autocomplete.tsx

@@ -1,18 +1,21 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useStatic } from "../../../utils/hooks";
-import AutocompleteStatic from "./Autocomplete.static";
 import { Select } from "../Select";
+import AutocompleteStatic from "./Autocomplete.static";
 
 const CLASS_ROOT = "autocomplete";
 
 export type AutocompleteOption = string | { title: string; value: string };
 
 export interface AutocompleteProps
-  extends React.HTMLAttributes<HTMLSelectElement> {
+  extends Omit<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    "size" | "value"
+  > {
   /** Module config. For more see accessible-autocomplete docs */
   autocompleteConfig?: Record<string, any>;
   /** Array of string options */
@@ -21,6 +24,8 @@ export interface AutocompleteProps
   placeholder?: string;
   /** Additional CSS classes */
   className?: string;
+  /** Select value */
+  value?: string | string[];
 }
 
 const Autocomplete: React.FC<AutocompleteProps> = ({

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

@@ -1,7 +1,7 @@
-@use '../../../../styles/tools/convert.scss';
-@use '../../TextInput/styles/config' as textConfig;
+@use "../../../../styles/tools/convert.scss";
+@use "../../TextInput/styles/config" as textConfig;
 
 $states: textConfig.$states;
 $sizes: textConfig.$sizes;
 
-$menu-height: convert.to-rem(243px);
+$menu-height: convert.to-rem(243px);

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

@@ -1,8 +1,10 @@
 @use "./config";
 @use "./mixins";
 @use "../../TextInput/styles/mixins" as textMixins;
+@use "../../TextInput/styles/config" as textConfig;
 @use "../../styles/config" as commonConfig;
 @use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
 
 @layer components {
   .autocomplete {
@@ -15,6 +17,99 @@
 
     &__wrapper {
       @include mixins.wrapper();
+
+      &--search-icon,
+      &--search-icon-with-placeholder {
+        isolation: isolate;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: convert.to-rem(10px);
+          width: convert.to-rem(20px);
+          height: convert.to-rem(20px);
+          transform: translateY(-50%);
+          background-color: var(--color-icon-brand);
+          mask-image: textConfig.$mask-image-search-icon;
+          mask-position: center;
+          mask-repeat: no-repeat;
+          mask-size: contain;
+          pointer-events: none;
+          z-index: 3;
+        }
+
+        &:has(.autocomplete__input:not(:placeholder-shown))::before {
+          background-color: var(--color-icon-default);
+        }
+
+        &:has(.autocomplete__input:disabled)::before {
+          background-color: var(--color-icon-disabled);
+        }
+
+        &:has(.autocomplete__input.is-invalid)::before,
+        &:has(.autocomplete__input[aria-invalid="true"])::before {
+          background-color: var(--color-icon-negative);
+        }
+
+        .autocomplete__input {
+          background-image: none !important;
+          padding-left: convert.to-rem(40px);
+          position: relative;
+          z-index: 1;
+        }
+
+        .autocomplete__hint {
+          padding-left: convert.to-rem(40px);
+        }
+      }
+
+      &--search-icon-with-placeholder {
+        .autocomplete__input {
+          padding-right: convert.to-rem(44px);
+        }
+
+        .autocomplete__hint {
+          padding-right: convert.to-rem(44px);
+        }
+      }
+    }
+
+    &__clear {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      z-index: 4;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: convert.to-rem(44px);
+      height: convert.to-rem(36px);
+      padding: 0;
+      background: transparent;
+      border: 0;
+      transform: translateY(-50%);
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: convert.to-rem(24px);
+        height: convert.to-rem(24px);
+        background-color: var(--color-icon-default);
+        mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 20L10 12L18 4L20 6L14 12L20 18L18 20Z" fill="%23000"/><path d="M6 4L14 12L6 20L4 18L10 12L4 6L6 4Z" fill="%23000"/></svg>');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-border-contrast);
+        outline-offset: -2px;
+      }
+
+      &[hidden] {
+        display: none;
+      }
     }
 
     &__input {

package/src/components/Forms/Autocomplete/tests/Autocomplete.static.test.ts

@@ -0,0 +1,187 @@
+import { fireEvent, waitFor } from "@testing-library/dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AutocompleteStatic from "../Autocomplete.static";
+
+const renderAutocomplete = (options: any) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = ["autocomplete__wrapper", options.wrapperClassName]
+    .filter(Boolean)
+    .join(" ");
+
+  const input = document.createElement("input");
+  input.className = ["autocomplete__input", options.customInputClassName]
+    .filter(Boolean)
+    .join(" ");
+  input.value = options.defaultValue ?? "";
+
+  wrapper.appendChild(input);
+  options.element.appendChild(wrapper);
+};
+
+const renderAutocompleteAsync = (options: any) => {
+  window.setTimeout(() => renderAutocomplete(options), 0);
+};
+
+const accessibleAutocompleteMock: any = vi.fn(renderAutocompleteAsync);
+
+accessibleAutocompleteMock.enhanceSelectElement = vi.fn((options: any) => {
+  const element = document.createElement("div");
+  const selectedOption =
+    options.selectElement.options[options.selectElement.selectedIndex];
+
+  options.selectElement.parentNode.insertBefore(element, options.selectElement);
+
+  renderAutocompleteAsync({
+    ...options,
+    element,
+    defaultValue: selectedOption?.textContent ?? "",
+  });
+});
+
+vi.mock("@orangesk/accessible-autocomplete", () => ({
+  default: accessibleAutocompleteMock,
+}));
+
+describe("Autocomplete.static", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.clearAllMocks();
+  });
+
+  it("moves search icon classes from input config to wrapper config", async () => {
+    const select = document.createElement("select");
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder custom-class",
+    });
+
+    await waitFor(() => {
+      expect(
+        accessibleAutocompleteMock.enhanceSelectElement,
+      ).toHaveBeenCalled();
+    });
+
+    const config =
+      accessibleAutocompleteMock.enhanceSelectElement.mock.calls[0][0];
+
+    expect(config.wrapperClassName).toContain(
+      "autocomplete__wrapper--search-icon-with-placeholder",
+    );
+    expect(config.customInputClassName).toBe("custom-class");
+  });
+
+  it("passes invalid state to generated input", async () => {
+    const select = document.createElement("select");
+    select.className = "autocomplete is-invalid";
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__input")).toHaveClass(
+        "is-invalid",
+      );
+      expect(document.querySelector(".autocomplete__input")).toHaveAttribute(
+        "aria-invalid",
+        "true",
+      );
+    });
+  });
+
+  it("passes disabled state to generated input and hides clear button", async () => {
+    const select = document.createElement("select");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(appleOption);
+    select.disabled = true;
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__input")).toBeDisabled();
+      expect(document.querySelector(".autocomplete__clear")).not.toBeVisible();
+    });
+  });
+
+  it("clears input and select value from search icon autocomplete", async () => {
+    const select = document.createElement("select");
+    const emptyOption = new Option("", "");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(emptyOption, appleOption);
+    document.body.appendChild(select);
+
+    const onConfirm = vi.fn();
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+      onConfirm,
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__clear")).toBeVisible();
+    });
+
+    expect(
+      document
+        .querySelector(".autocomplete__wrapper")
+        ?.contains(document.querySelector(".autocomplete__clear")),
+    ).toBe(true);
+
+    const input = document.querySelector<HTMLInputElement>(
+      ".autocomplete__input",
+    );
+    const clearButton = document.querySelector<HTMLButtonElement>(
+      ".autocomplete__clear",
+    );
+
+    expect(input?.value).toBe("apple");
+
+    fireEvent.click(clearButton as HTMLButtonElement);
+
+    expect(input?.value).toBe("");
+    expect(select.value).toBe("");
+    expect(clearButton).not.toBeVisible();
+    expect(onConfirm).toHaveBeenCalledWith("");
+  });
+
+  it("keeps clear button keyboard events from reaching autocomplete wrapper", async () => {
+    const select = document.createElement("select");
+    const emptyOption = new Option("", "");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(emptyOption, appleOption);
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__clear")).toBeVisible();
+    });
+
+    const wrapper = document.querySelector(".autocomplete__wrapper");
+    const clearButton = document.querySelector<HTMLButtonElement>(
+      ".autocomplete__clear",
+    );
+    const onWrapperKeydown = vi.fn();
+
+    wrapper?.addEventListener("keydown", onWrapperKeydown);
+
+    fireEvent.keyDown(clearButton as HTMLButtonElement, {
+      key: " ",
+      code: "Space",
+      keyCode: 32,
+    });
+
+    expect(onWrapperKeydown).not.toHaveBeenCalled();
+  });
+});

package/src/components/Forms/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "checkbox";
 

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

@@ -6,7 +6,10 @@ $invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/200
 
 $states: (
   default: commonConfig.$default,
-  focus: commonConfig.$focus,
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
   checked: (
     border-color: var(--color-surface-tertiary),
     background-color: var(--color-surface-tertiary),
@@ -17,8 +20,8 @@ $states: (
   disabled-checked: commonConfig.$disabled-checked,
   invalid: commonConfig.$invalid,
   invalid-checked: (
-    background-color: var(--color-surface-primary),
-    background-image: $invalid-checked-bg,
+    background-color: var(--color-icon-negative),
+    background-image: $checked-bg,
   ),
 );
 

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

@@ -1,2 +1,2 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";

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

@@ -37,11 +37,17 @@
 
   .checkbox--toggle .checkbox + .checkbox-display {
     position: relative;
-    background: color.$black;
-    border-color: color.$black;
+    background: var(--color-fill-contrast);
+    border-color: var(--color-fill-contrast);
     background-image:
-      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23000'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
       url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");
+
+    .is-dark & {
+      background-image:
+        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
+        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23000'/%3E%3C/svg%3E");
+    }
     background-position:
       5px center,
       right 7px center;
@@ -51,19 +57,20 @@
       content: "";
       pointer-events: none;
       position: absolute;
-      background: color.$white;
+      background: var(--color-fill-primary);
       top: 0;
       left: 0;
       width: 50%;
       height: 100%;
       transform: translateX(0);
       transition: transform 200ms ease-out;
+      border-radius: convert.to-rem(3px);
     }
   }
 
   .checkbox--toggle .checkbox:checked + .checkbox-display {
-    background-color: var(--color-surface-secondary);
-    border-color: var(--color-surface-secondary);
+    background-color: var(--color-surface-tertiary);
+    border-color: var(--color-surface-tertiary);
 
     &::after {
       transform: translateX(100%);

package/src/components/Forms/DatePicker/DatePicker.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import DatePickerStatic from "./DatePicker.static";
 import { useStatic } from "../../../utils/hooks";
+import DatePickerStatic from "./DatePicker.static";
 
 // Type definitions for daypickr config
 interface DayPickrWeekday {

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

@@ -70,7 +70,7 @@
       border-color: var(--color-surface-moderate);
     }
   }
-  .bg-black .daypickr__select,
+
   .is-dark .daypickr__select {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10L12 18L4 10L6 8L12 14L18 8L20 10Z'/%3E%3C/svg%3E%0A");
   }
@@ -109,7 +109,6 @@
     }
   }
 
-  .bg-black .daypickr__button--pagination,
   .is-dark .daypickr__button--pagination {
     &-prev::before {
       background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20L6 12L14 4L16 6L10 12L16 18L14 20Z'/%3E%3C/svg%3E%0A");
@@ -165,7 +164,7 @@
     }
 
     &[aria-disabled="true"] {
-      color: color.$gray-600;
+      color: var(--color-text-disabled);
     }
   }
 

package/src/components/Forms/Field/Control.tsx

@@ -1,26 +1,26 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
 import dynamic from "next/dynamic";
+import React from "react";
 
 // Importing Autocomplete dynamically to avoid server-side rendering issues
 const Autocomplete = dynamic(() =>
   import("../Autocomplete").then((mod) => ({ default: mod.Autocomplete })),
 );
 
-import { Checkbox } from "../Checkbox";
 import ConditionalWrapper from "../../../utils/ConditionalWrapper";
+import { Checkbox } from "../Checkbox";
 import { DatePicker } from "../DatePicker";
 import { FieldsetContext } from "../Fieldset/FieldsetContext";
 import { File } from "../File";
 import { Group } from "../Group";
+import { InputStepper } from "../InputStepper";
 import { Radio } from "../Radio";
 import { RangeSlider } from "../RangeSlider";
 import { Select } from "../Select";
 import { TextArea } from "../TextArea";
 import { TextInput } from "../TextInput";
-import { InputStepper } from "../InputStepper";
 import { FieldContext } from "./FieldContext";
 import { getDescribedBy } from "./utils";
 
@@ -30,6 +30,33 @@ export interface ControlProps {
   className?: string;
 }
 
+const getControlElement = (type: string) => {
+  switch (type) {
+    case "autocomplete":
+      return Autocomplete;
+    case "checkbox":
+      return Checkbox;
+    case "datepicker":
+      return DatePicker;
+    case "file":
+      return File;
+    case "group":
+      return Group;
+    case "radio":
+      return Radio;
+    case "range":
+      return RangeSlider;
+    case "select":
+      return Select;
+    case "input-stepper":
+      return InputStepper;
+    case "textarea":
+      return TextArea;
+    default:
+      return TextInput;
+  }
+};
+
 const Control: React.FC<ControlProps> = ({ className }) => {
   const context = React.useContext(FieldContext);
   const fieldsetContext = React.useContext(FieldsetContext);
@@ -46,66 +73,42 @@ const Control: React.FC<ControlProps> = ({ className }) => {
     type,
     control: innerControl,
     renderControl,
+    prefix,
+    suffix,
+    id: controlConfigId,
     ...controlProps
   } = control;
 
   const describedby = getDescribedBy(hint, messages, tooltip, controlId);
   const renderWrapper = isRadioCheck || type === "autocomplete";
 
-  const ControlElement = (props: any) => {
-    switch (type) {
-      case "autocomplete":
-        return <Autocomplete {...props} />;
-      case "checkbox":
-        return <Checkbox {...props} />;
-      case "datepicker":
-        return <DatePicker {...props} />;
-      case "file":
-        return <File {...props} />;
-      case "group":
-        return <Group {...props} />;
-      case "radio":
-        return <Radio {...props} />;
-      case "range":
-        return <RangeSlider {...props} />;
-      case "select":
-        return <Select {...props} />;
-      case "input-stepper":
-        return <InputStepper {...props} />;
-      case "textarea":
-        return <TextArea {...props} />;
-      default:
-        return <TextInput {...props} />;
-    }
-  };
+  const ControlElement = getControlElement(type ?? "text");
 
   const { isInvalid, isValid } = controlProps;
 
-  const isReallyInvalid =
+  const hasValidationError =
     isInvalid ??
     ((fieldsetMessages.some((msg: any) => msg.isMain) ||
       messages.some((msg: any) => msg.type === "error")) &&
       !isValid);
 
-  const props = (() => {
-    let calculatedControlProps: any = {
-      id: controlId,
-      ...(describedby.length && { "aria-describedby": describedby }),
-      ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
-      ...(type === "text" ? { isInvalid: isReallyInvalid } : {}),
-    };
-
-    if (type === "group") {
-      calculatedControlProps = {
-        control: { type, ...innerControl, ...calculatedControlProps },
-      };
-    }
-
-    return {
-      ...controlProps,
-      ...calculatedControlProps,
-    };
-  })();
+  const props = {
+    ...controlProps,
+    ...(type !== "group" && { id: controlId }),
+    ...(describedby.length && { "aria-describedby": describedby }),
+    ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
+    isInvalid: hasValidationError,
+    ...(type === "group" &&
+      innerControl && {
+        addonPrefix: prefix,
+        addonSuffix: suffix,
+        control: {
+          ...innerControl,
+          id: controlId,
+          isInvalid: hasValidationError,
+        },
+      }),
+  };
 
   if (renderControl) {
     return renderControl(props);

package/src/components/Forms/Field/Description.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 import { Hint } from "../Hint";
+import { FieldContext } from "./FieldContext";
 import { FieldLabel } from "./Label";
 import { FormTooltip } from "./Tooltip";
-import { FieldContext } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__description";
 

package/src/components/Forms/Field/Field.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Bar, BarBreak, BarItem } from "../../Bar";
-import { FieldLabel } from "./Label";
-import { FormTooltip } from "./Tooltip";
-import { Messages } from "./Messages";
 import { Control } from "./Control";
 import { Description } from "./Description";
 import { FieldContext, FieldContextType } from "./FieldContext";
+import { FieldLabel } from "./Label";
+import { Messages } from "./Messages";
+import { FormTooltip } from "./Tooltip";
 import { getControlId } from "./utils";
 
 export interface InputFieldProps {

package/src/components/Forms/Field/Label.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Label } from "../Label";
 import { FieldContext, FieldContextType } from "./FieldContext";

package/src/components/Forms/Field/Messages.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { Message } from "../Message";
 import { FieldsetContext } from "../Fieldset/FieldsetContext";
-import { FieldContext } from "./FieldContext";
+import { Message } from "../Message";
 import type { MessageType as MessageTypeEnum } from "../Message/Message";
+import { FieldContext } from "./FieldContext";
 
 export interface MessageType {
   isMain: boolean;