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

package/src/components/Footer/styles/mixins.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/visibility" as visibility;
 @use "../../Container/styles/mixins" as container;
+@use "../../Accordion/styles/mixins" as accordionMixins;
 @use "../../../styles/typography/mixins" as typography;
 @use "../../../styles/typography/config" as typographyConfig;
 
@@ -23,7 +25,8 @@
     &:focus,
     &:active {
       text-decoration: underline;
-      text-underline-offset: convert.to-rem(4px);
+      text-underline-offset: convert.to-rem(2px);
+      text-decoration-thickness: auto;
     }
 
     &:focus-visible {
@@ -47,8 +50,6 @@
 
   * {
     box-sizing: border-box;
-    letter-spacing: convert.to-rem(-0.1px);
-    line-height: convert.to-rem(18px);
   }
 
   ::selection {
@@ -61,17 +62,18 @@
     margin-bottom: convert.to-rem(30px);
     border: 0;
     border-top: 1px solid var(--color-border-subtle);
-  }
 
-  p,
-  ul {
-    font-size: convert.to-rem(14px);
-    line-height: convert.to-rem(17.5px);
+    @include breakpoint.get("xs", "down") {
+      margin-top: convert.to-rem(15px);
+      margin-bottom: convert.to-rem(15px);
+    }
   }
 }
 
 @mixin base {
   font-size: 1rem;
+  letter-spacing: convert.to-rem(-0.1px);
+  line-height: convert.to-rem(18px);
   color: var(--color-text-default);
   background-color: var(--color-surface-primary);
   box-sizing: border-box;
@@ -81,6 +83,12 @@
   @include breakpoint.get("md", "down") {
     padding: convert.to-rem(30px) 0;
   }
+
+  :where(p),
+  :where(ul) {
+    font-size: convert.to-rem(14px);
+    line-height: convert.to-rem(17.5px);
+  }
 }
 
 @mixin container {
@@ -90,19 +98,23 @@
   margin-bottom: 0;
 }
 
-@mixin grid {
+@mixin menu {
   display: grid;
-  gap: convert.to-rem(30px);
-  row-gap: convert.to-rem(40px);
+  row-gap: convert.to-rem(30px);
   grid-template-columns: repeat(1, 1fr);
 
+  @include breakpoint.get("xs", "down") {
+    row-gap: 0;
+    margin-bottom: convert.to-rem(30px);
+  }
+
   @include breakpoint.get("sm") {
     grid-template-columns: repeat(2, 1fr);
   }
 
   @include breakpoint.get("md") {
     grid-template-columns: repeat(3, 1fr);
-    gap: convert.to-rem(15px);
+    gap: convert.to-rem(20px);
     row-gap: convert.to-rem(20px);
   }
 
@@ -113,26 +125,80 @@
   }
 }
 
-@mixin logo {
-  display: inline-flex;
-  margin-bottom: convert.to-rem(60px);
+@mixin menu-section {
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.item;
 
-  @include breakpoint.get("md", "down") {
-    margin-bottom: convert.to-rem(30px);
+    &:first-child {
+      border-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--color-border-strong);
+    }
+
+    .footer__list {
+      margin-top: convert.to-rem(10px) !important;
+    }
   }
 }
 
+@mixin logo {
+  display: inline-flex;
+}
+
 @mixin title {
   @include generate.responsive-css-map(map.get(typographyConfig.$headings, 5));
   margin-top: 0;
   margin-bottom: convert.to-rem(30px);
   color: var(--color-text-default);
+  font-weight: 700;
 
   @include breakpoint.get("md", "down") {
     margin-bottom: convert.to-rem(25px);
   }
 }
 
+@mixin accordion-toggle {
+  margin: 0;
+  margin-bottom: convert.to-rem(30px);
+  padding: 0;
+  border: 0;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+
+  @include breakpoint.get("sm") {
+    display: block;
+    pointer-events: none;
+  }
+
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.button-base;
+    gap: convert.to-rem(12px);
+    padding: convert.to-rem(15px) 0;
+    margin-bottom: 0;
+
+    .footer__title {
+      margin: 0;
+    }
+  }
+}
+
+@mixin accordion-icon {
+  @include accordionMixins.icon;
+
+  @include breakpoint.get("sm") {
+    display: none;
+  }
+}
+
+@mixin accordion-list {
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.body;
+  }
+}
+
 @mixin list {
   @include typography.list-unstyled;
 
@@ -141,16 +207,64 @@
   }
 }
 
+@mixin list-space-small {
+  gap: convert.to-rem(10px);
+}
+
 @mixin list-inline {
   display: flex;
   flex-wrap: wrap;
-  gap: convert.to-rem(10px);
+  gap: convert.to-rem(20px);
+  row-gap: convert.to-rem(10px);
 
   li {
     margin: 0;
   }
 }
 
+@mixin list-stack-sm-down {
+  @include breakpoint.get("sm", "down") {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: convert.to-rem(10px);
+  }
+}
+
+@mixin list-break-sm-down() {
+  display: none;
+  flex-basis: 100%;
+  width: 100%;
+  height: 0;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+
+  @include breakpoint.get("sm", "down") {
+    display: block;
+  }
+}
+
+@mixin list-item-lead {
+  margin-right: convert.to-rem(10px) !important;
+
+  @include breakpoint.get("sm", "down") {
+    margin-right: 0 !important;
+  }
+}
+
+@mixin bar {
+  display: flex;
+  gap: space.get();
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @include breakpoint.get("sm", "down") {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 @mixin bottom {
   display: grid;
   gap: convert.to-rem(30px);
@@ -165,6 +279,7 @@
 
 @mixin bottom-copyright {
   text-align: right;
+  @include generate.css-map(map.get(typographyConfig.$caption, "small"));
 
   @include breakpoint.get("md", "down") {
     text-align: inherit;

package/src/components/Footer/styles/style.scss

@@ -1,5 +1,7 @@
 @use "./config";
 @use "./mixins";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/breakpoint";
 @use "../../Megamenu/styles/mixins" as megamenuMixins;
 
 #{config.$class-root} {
@@ -22,8 +24,12 @@
     @include mixins.container;
   }
 
-  &__grid {
-    @include mixins.grid;
+  &__menu {
+    @include mixins.menu;
+  }
+
+  &__menu-section {
+    @include mixins.menu-section;
   }
 
   &__logo {
@@ -34,15 +40,74 @@
     @include mixins.title;
   }
 
+  &__accordion-toggle {
+    @include mixins.accordion-toggle;
+  }
+
+  &__accordion-icon {
+    @include mixins.accordion-icon;
+    transition: none;
+  }
+
+  &__divider {
+    &--hide-xs-down {
+      @include breakpoint.get("xs", "down") {
+        display: none;
+      }
+    }
+  }
+
+  [data-footer-toggle][aria-expanded="false"] > &__accordion-icon {
+    transform: rotate(0deg);
+  }
+
+  [data-footer-toggle][aria-expanded="true"] > &__accordion-icon {
+    transform: rotate(180deg);
+  }
+
   &__list {
     @include mixins.list;
 
     &--inline {
       @include mixins.list-inline;
+      align-items: center;
+    }
+
+    &-break--sm-down {
+      @include mixins.list-break-sm-down;
     }
+
+    &--space-small {
+      @include mixins.list-space-small;
+    }
+
+    &--stack-sm-down {
+      @include mixins.list-stack-sm-down;
+    }
+  }
+
+  &__menu-section > &__list {
+    @include mixins.accordion-list;
+  }
+
+  &__list-item--lead {
+    @include mixins.list-item-lead;
+  }
+
+  &__bar {
+    @include mixins.bar;
   }
 
   &__bottom {
     @include mixins.bottom;
+    @include mixins.bottom-copyright;
+  }
+
+  &--mb-xlarge {
+    margin-bottom: convert.to-rem(60px);
+
+    @include breakpoint.get("md", "down") {
+      margin-bottom: convert.to-rem(30px);
+    }
   }
 }

package/src/components/Footer/tests/{Footer.conformance.test.js → Footer.conformance.test.jsx}

@@ -20,14 +20,10 @@
  *    - Tests dark theme context
  */
 import { render } from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
-import "jest-axe/extend-expect";
+import { axe } from "vitest-axe";
 
 import { Footer } from "../Footer";
 
-// Extension of expect for axe
-expect.extend(toHaveNoViolations);
-
 describe("Footer Conformance Tests", () => {
   describe("HTML Validity", () => {
     it("is valid html with default props", () => {
@@ -107,14 +103,14 @@ describe("Footer Conformance Tests", () => {
 
   describe("Semantic HTML", () => {
     it("uses proper semantic elements", () => {
-      const { getByRole, getAllByRole } = render(<Footer />);
+      const { getByRole, getAllByRole, container } = render(<Footer />);
 
       // Footer should be a landmark
       expect(getByRole("contentinfo")).toBeInTheDocument();
 
-      // Should have proper heading structure
-      const headings = getAllByRole("heading", { level: 5 });
-      expect(headings.length).toBe(4); // One for each column
+      // Should have proper column titles (now rendered as paragraphs with footer__title class)
+      const titles = container.querySelectorAll(".footer__title");
+      expect(titles.length).toBe(4); // One for each column
 
       // Should have navigation lists
       const lists = getAllByRole("list");

package/src/components/Footer/tests/{Footer.unit.test.js → Footer.unit.test.jsx}

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
-import { Footer } from "../Footer";
 import footerData from "../data";
+import { Footer } from "../Footer";
 
 describe("Footer", () => {
   it("renders without crashing", () => {
@@ -73,12 +73,12 @@ describe("Footer", () => {
     const { container } = render(<Footer />);
     const footer = container.querySelector("footer");
     const container_ = footer?.querySelector(".footer__container");
-    const grid = container_?.querySelector(".footer__grid");
+    const menu = container_?.querySelector(".footer__menu");
     const bottom = container_?.querySelector(".footer__bottom");
 
     expect(footer).toBeInTheDocument();
     expect(container_).toBeInTheDocument();
-    expect(grid).toBeInTheDocument();
+    expect(menu).toBeInTheDocument();
     expect(bottom).toBeInTheDocument();
   });
 
@@ -115,14 +115,14 @@ describe("Footer", () => {
   });
 
   it("has proper semantic structure", () => {
-    const { getByRole, getAllByRole } = render(<Footer />);
+    const { getByRole, getAllByRole, container } = render(<Footer />);
 
     // Should have footer landmark
     expect(getByRole("contentinfo")).toBeInTheDocument();
 
-    // Should have headings for each column
-    const headings = getAllByRole("heading", { level: 5 });
-    expect(headings).toHaveLength(4); // 4 columns
+    // Should have column titles (now rendered as paragraphs with footer__title class)
+    const titles = container.querySelectorAll(".footer__title");
+    expect(titles).toHaveLength(4); // 4 columns
 
     // Should have lists for navigation
     const lists = getAllByRole("list");

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

@@ -1,10 +1,13 @@
 export interface AutocompleteConfig {
   autoselect: boolean;
+  autocomplete?: string;
   wrapperClassName: string;
   menuClassName: string;
   optionClassName: string;
   customInputClassName: string;
   displayMenu: string;
+  onConfirm?: (value: unknown) => void;
+  tClearButton: () => string;
   tAssistiveHint: () => string;
 }
 
@@ -15,25 +18,39 @@ export const defaultConfig: AutocompleteConfig = {
   optionClassName: "",
   customInputClassName: "",
   displayMenu: "overlay",
+  tClearButton: () => "Vymazať text",
   tAssistiveHint: () =>
     "Pre prezeranie výsledkov automatického dopĺňania použite šípky nahor a nadol a pre výber konkrétneho výsledku použite tlačidlo Enter. Pri dotykových zariadeniach použite dotyk alebo potiahnutie prstom do strany.",
 };
 
+const addClassToken = (className: string, token: string) => {
+  const classTokens = className.split(/\s+/).filter(Boolean);
+
+  if (classTokens.includes(token)) {
+    return className;
+  }
+
+  return [...classTokens, token].join(" ");
+};
+
 export default class Autocomplete {
   private element: HTMLElement;
   private config: AutocompleteConfig;
   private instance: any;
+  private teardownClearButton: (() => void) | null;
 
   constructor(element: HTMLElement, config?: Partial<AutocompleteConfig>) {
     this.element = element;
     this.config = { ...defaultConfig, ...config };
     this.onPageshow = this.onPageshow.bind(this);
+    this.onClearButtonClick = this.onClearButtonClick.bind(this);
     this.instance = null;
+    this.teardownClearButton = null;
 
     (this.element as any).ODS_Autocomplete = this;
 
     // Initialize asynchronously to handle dynamic imports
-    this.init().catch(console.error);
+    this.init().catch(() => undefined);
 
     return this;
   }
@@ -50,6 +67,53 @@ export default class Autocomplete {
     }
     this.config = { ...this.config, ...elementConfig };
 
+    const customInputClassName = this.config.customInputClassName || "";
+    const customInputClassTokens = customInputClassName
+      .split(/\s+/)
+      .filter(Boolean);
+    const wrapperClassTokens = this.config.wrapperClassName
+      .split(/\s+/)
+      .filter(Boolean);
+
+    const hasSearchIcon =
+      customInputClassTokens.includes("input--search-icon") ||
+      wrapperClassTokens.includes("autocomplete__wrapper--search-icon");
+    const hasSearchIconWithPlaceholder =
+      customInputClassTokens.includes("input--search-icon-with-placeholder") ||
+      wrapperClassTokens.includes(
+        "autocomplete__wrapper--search-icon-with-placeholder",
+      );
+    const isInvalid = this.element.classList.contains("is-invalid");
+
+    this.config.customInputClassName = customInputClassTokens
+      .filter(
+        (token) =>
+          token !== "input--search-icon" &&
+          token !== "input--search-icon-with-placeholder",
+      )
+      .join(" ");
+
+    if (isInvalid) {
+      this.config.customInputClassName = addClassToken(
+        this.config.customInputClassName,
+        "is-invalid",
+      );
+    }
+
+    if (hasSearchIcon) {
+      this.config.wrapperClassName = addClassToken(
+        this.config.wrapperClassName,
+        "autocomplete__wrapper--search-icon",
+      );
+    }
+
+    if (hasSearchIconWithPlaceholder) {
+      this.config.wrapperClassName = addClassToken(
+        this.config.wrapperClassName,
+        "autocomplete__wrapper--search-icon-with-placeholder",
+      );
+    }
+
     // Dynamic import to avoid SSR issues
     const accessibleAutocomplete = (
       await import("@orangesk/accessible-autocomplete")
@@ -67,9 +131,156 @@ export default class Autocomplete {
       });
     }
 
+    this.initEnhancedControls(hasSearchIconWithPlaceholder);
+
     window.addEventListener("pageshow", this.onPageshow);
   }
 
+  private getWrapper(): HTMLElement | null {
+    if (this.element.tagName === "SELECT") {
+      const rootElement = this.element.previousElementSibling;
+      if (!(rootElement instanceof HTMLElement)) {
+        return null;
+      }
+
+      if (rootElement.classList.contains("autocomplete__wrapper")) {
+        return rootElement;
+      }
+
+      return rootElement.querySelector(".autocomplete__wrapper");
+    }
+
+    return this.element.querySelector(".autocomplete__wrapper");
+  }
+
+  private getInput(): HTMLInputElement | null {
+    return this.getWrapper()?.querySelector(".autocomplete__input") ?? null;
+  }
+
+  private initEnhancedControls(
+    hasSearchIconWithPlaceholder: boolean,
+    retries = 10,
+  ): void {
+    if (!this.getInput()) {
+      if (retries > 0) {
+        window.setTimeout(
+          () =>
+            this.initEnhancedControls(
+              hasSearchIconWithPlaceholder,
+              retries - 1,
+            ),
+          0,
+        );
+      }
+
+      return;
+    }
+
+    this.syncInputState();
+
+    if (hasSearchIconWithPlaceholder) {
+      this.initClearButton();
+    }
+  }
+
+  private syncInputState(): void {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+
+    if (this.element.classList.contains("is-invalid")) {
+      input.classList.add("is-invalid");
+      input.setAttribute("aria-invalid", "true");
+    }
+
+    if (this.element instanceof HTMLSelectElement && this.element.disabled) {
+      input.disabled = true;
+    }
+  }
+
+  private initClearButton(): void {
+    this.teardownClearButton?.();
+
+    const wrapper = this.getWrapper();
+    const input = this.getInput();
+
+    if (!wrapper || !input) {
+      return;
+    }
+
+    const clearButton = document.createElement("button");
+    clearButton.type = "button";
+    clearButton.className = "autocomplete__clear";
+    clearButton.setAttribute("aria-label", this.config.tClearButton());
+
+    const updateClearButton = () => {
+      clearButton.hidden = input.disabled || input.value.length === 0;
+    };
+    const scheduleUpdateClearButton = () => {
+      window.setTimeout(updateClearButton, 0);
+    };
+
+    clearButton.addEventListener("mousedown", this.preventDefault);
+    clearButton.addEventListener("keydown", this.stopPropagation);
+    clearButton.addEventListener("click", this.onClearButtonClick);
+    input.addEventListener("input", updateClearButton);
+    input.addEventListener("change", updateClearButton);
+    wrapper.addEventListener("click", scheduleUpdateClearButton);
+    wrapper.addEventListener("keyup", scheduleUpdateClearButton);
+
+    updateClearButton();
+    wrapper.appendChild(clearButton);
+
+    this.teardownClearButton = () => {
+      clearButton.removeEventListener("mousedown", this.preventDefault);
+      clearButton.removeEventListener("keydown", this.stopPropagation);
+      clearButton.removeEventListener("click", this.onClearButtonClick);
+      input.removeEventListener("input", updateClearButton);
+      input.removeEventListener("change", updateClearButton);
+      wrapper.removeEventListener("click", scheduleUpdateClearButton);
+      wrapper.removeEventListener("keyup", scheduleUpdateClearButton);
+      clearButton.remove();
+    };
+  }
+
+  private preventDefault(event: Event): void {
+    event.preventDefault();
+  }
+
+  private stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
+  private onClearButtonClick(): void {
+    const input = this.getInput();
+
+    if (!input) {
+      return;
+    }
+
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+
+    if (this.element instanceof HTMLSelectElement) {
+      const emptyOption = Array.from(this.element.options).find(
+        (option) => option.value === "",
+      );
+
+      if (emptyOption) {
+        emptyOption.selected = true;
+      } else {
+        this.element.selectedIndex = -1;
+      }
+
+      this.element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    this.config.onConfirm?.("");
+    input.focus();
+  }
+
   private onPageshow(e: PageTransitionEvent): void {
     if (e.persisted && window) {
       window.location.reload();
@@ -77,13 +288,15 @@ export default class Autocomplete {
   }
 
   public destroy(): void {
+    this.teardownClearButton?.();
+    this.teardownClearButton = null;
     window.removeEventListener("pageshow", this.onPageshow);
     (this.element as any).ODS_Autocomplete = null;
   }
 
   public update(): void {
     this.destroy();
-    this.init().catch(console.error);
+    this.init().catch(() => undefined);
   }
 
   static getInstance(el: HTMLElement): Autocomplete | null {