@orangesk/orange-design-system 3.6.1 → 3.7.0

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

@@ -0,0 +1,83 @@
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/typography/config" as typography;
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
+
+@mixin selection-tile-base {
+  position: relative;
+  display: flex;
+  width: 100%;
+  gap: space.get("small");
+  padding: space.get("medium");
+  border: 2px solid var(--color-border-subtle);
+  border-radius: space.get("small");
+  background: var(--color-fill-primary);
+  color: var(--color-text-default);
+}
+
+@mixin selection-tile-control {
+  flex: 0 0 auto;
+  width: space.get("medium");
+  min-height: space.get("medium");
+}
+
+@mixin selection-tile-body {
+  position: relative;
+  min-width: 0;
+  flex: 1 1 auto;
+  pointer-events: none;
+  gap: convert.to-rem(5px);
+  display: flex;
+  flex-direction: column;
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin selection-tile-hover {
+  border-color: var(--color-border-contrast);
+}
+@mixin selection-tile-focus {
+  outline: 2px solid var(--color-border-contrast);
+  outline-offset: 2px;
+}
+@mixin selection-tile-selected {
+  border-color: var(--color-border-accent);
+}
+@mixin selection-tile-warning {
+  border-color: var(--color-border-warning);
+}
+@mixin selection-tile-error {
+  border-color: var(--color-border-negative);
+}
+
+@mixin selection-tile-disabled {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+
+  > div {
+    cursor: not-allowed;
+  }
+}
+
+@mixin selection-tile-disabled-control {
+  background-color: var(--color-fill-primary);
+  border-color: var(--color-border-strong);
+}
+
+@mixin selection-tile-interactive {
+  position: relative;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+@mixin selection-tile-message {
+  margin-top: 0px;
+}
+
+@mixin selection-tile-expander-summary {
+  @include generate.css-map(typography.$caption, "default");
+  font-weight: 700;
+}

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

@@ -0,0 +1,58 @@
+@use "./mixins";
+
+@layer components {
+  .selection-tile {
+    @include mixins.selection-tile-base;
+
+    &__control {
+      @include mixins.selection-tile-control;
+    }
+    &__body {
+      @include mixins.selection-tile-body;
+    }
+
+    &:has(input:hover) {
+      @include mixins.selection-tile-hover;
+    }
+    &:has(input:focus-visible) {
+      @include mixins.selection-tile-focus;
+    }
+    &:has(input:checked) {
+      @include mixins.selection-tile-selected;
+    }
+
+    &--warning {
+      @include mixins.selection-tile-warning;
+    }
+    &--error,
+    &--invalid {
+      @include mixins.selection-tile-error;
+    }
+
+    &:has(input:disabled) {
+      @include mixins.selection-tile-disabled;
+
+      input:disabled {
+        cursor: default;
+      }
+
+      input:disabled:not(:checked) + .checkbox-display,
+      input:disabled:not(:checked) + .radio-display {
+        @include mixins.selection-tile-disabled-control;
+      }
+    }
+
+    .expander,
+    .block-action__override {
+      @include mixins.selection-tile-interactive;
+    }
+    .message {
+      @include mixins.selection-tile-message;
+    }
+
+    .expander__summary,
+    .expander__summary--opened {
+      @include mixins.selection-tile-expander-summary;
+    }
+  }
+}

package/src/components/Forms/SelectionTile/tests/SelectionTile.conformance.test.jsx

@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { BlockActionOverride } from "../../../BlockAction";
+import { Expander } from "../../../Expander";
+import { SelectionTile } from "..";
+
+it("is valid and accessible with radio, checkbox, and Expander content", async () => {
+  const { container } = render(
+    <fieldset>
+      <legend>Choose options</legend>
+      <SelectionTile
+        type="radio"
+        id="radio-a"
+        name="options"
+        label="Radio option"
+      >
+        <BlockActionOverride>
+          <Expander summary="Detail">Radio details</Expander>
+        </BlockActionOverride>
+      </SelectionTile>
+      <SelectionTile type="checkbox" id="check-a" label="Checkbox option">
+        Checkbox details
+      </SelectionTile>
+    </fieldset>,
+  );
+
+  expect(container).toHTMLValidate({
+    rules: { "element-permitted-content": "off" },
+  });
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/SelectionTile/tests/SelectionTile.unit.test.jsx

@@ -0,0 +1,146 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { BlockActionOverride } from "../../../BlockAction";
+import { Expander } from "../../../Expander";
+import { SelectionTile } from "..";
+
+describe("SelectionTile", () => {
+  it("renders a radio with an associated label", () => {
+    render(
+      <SelectionTile type="radio" id="choice-a" name="choices" label="Choice A">
+        <p>Additional content</p>
+      </SelectionTile>,
+    );
+
+    expect(screen.getByRole("radio", { name: "Choice A" })).toBeInTheDocument();
+    expect(screen.getByText("Additional content")).toBeInTheDocument();
+    expect(screen.getByRole("radio")).toHaveClass("radiocheck--fill");
+    expect(
+      screen.getByText("Additional content").closest(".block-action"),
+    ).toHaveClass("block-action");
+  });
+
+  it("renders a checkbox and preserves native interaction", () => {
+    render(<SelectionTile type="checkbox" id="choice-b" label="Choice B" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Choice B" });
+
+    expect(checkbox).not.toBeChecked();
+    fireEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+  });
+
+  it("renders a disabled native checkbox", () => {
+    render(
+      <SelectionTile
+        type="checkbox"
+        id="choice-disabled"
+        label="Unavailable choice"
+        isDisabled
+      />,
+    );
+
+    expect(screen.getByRole("checkbox")).toBeDisabled();
+  });
+
+  it("selects the option through its tile label", () => {
+    render(
+      <SelectionTile type="checkbox" id="choice-label" label="Choice label">
+        <p>Tile content</p>
+      </SelectionTile>,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Choice label" });
+
+    fireEvent.click(screen.getByText("Choice label"));
+
+    expect(checkbox).toBeChecked();
+  });
+
+  it("renders optional predefined slots and arbitrary children", () => {
+    render(
+      <SelectionTile
+        type="checkbox"
+        id="choice-slots"
+        inputProps={{ "aria-label": "Slot choice" }}
+        price="€9.99"
+        message="Feedback"
+      >
+        <span>Custom content</span>
+        <span>More details</span>
+      </SelectionTile>,
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: "Slot choice" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-describedby",
+      "choice-slots-message",
+    );
+    expect(screen.getByText("€9.99")).toHaveClass(
+      "caption",
+      "text-accent",
+      "bold",
+    );
+    expect(screen.getByText("Feedback")).toHaveClass("selection-tile__message");
+    expect(screen.getByText("Custom content")).toBeInTheDocument();
+    expect(screen.getByText("More details")).toBeInTheDocument();
+  });
+
+  it("marks error status invalid and warning status advisory", () => {
+    const { rerender } = render(
+      <SelectionTile
+        type="radio"
+        id="choice-c"
+        name="choices"
+        label="Choice C"
+        status="error"
+      />,
+    );
+    expect(screen.getByRole("radio")).toHaveAttribute("aria-invalid", "true");
+
+    rerender(
+      <SelectionTile
+        type="radio"
+        id="choice-c"
+        name="choices"
+        label="Choice C"
+        status="warning"
+      />,
+    );
+    expect(screen.getByRole("radio")).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("forwards explicit description relationships to the native input", () => {
+    render(
+      <SelectionTile
+        type="checkbox"
+        id="choice-message"
+        label="Choice with feedback"
+        inputProps={{ "aria-describedby": "choice-message-feedback" }}
+        message={<p id="choice-message-feedback">Additional feedback</p>}
+      />,
+    );
+
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-describedby",
+      "choice-message-feedback",
+    );
+  });
+
+  it("keeps an Expander in the override layer", () => {
+    render(
+      <SelectionTile type="checkbox" id="choice-d" label="Choice D">
+        <BlockActionOverride>
+          <Expander summary="Detail">Details</Expander>
+        </BlockActionOverride>
+      </SelectionTile>,
+    );
+
+    const checkbox = screen.getByRole("checkbox");
+    const summary = screen.getByText("Detail");
+
+    expect(summary.closest(".block-action__override")).toBeInTheDocument();
+    fireEvent.click(summary);
+
+    expect(checkbox).not.toBeChecked();
+  });
+});

package/src/components/Forms/index.ts

@@ -12,5 +12,6 @@ export { Message } from "./Message";
 export { Radio } from "./Radio";
 export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
+export { SelectionTile } from "./SelectionTile";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";

package/src/components/Megamenu/Megamenu.tsx

@@ -12,7 +12,6 @@ import {
   CLASS_CARD,
   CLASS_CONTAINER,
   CLASS_GRID,
-  CLASS_HIDE_LG_ONLY,
   CLASS_HIDE_LG_UP,
   CLASS_HIDE_MD_DOWN,
   CLASS_MAIN,
@@ -29,14 +28,15 @@ import {
   CLASS_NAV_ITEM,
   CLASS_NAV_ITEM_LEAD,
   CLASS_NAV_ITEM_MAIN,
+  CLASS_NAV_ITEM_PUSH,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_CTA,
   CLASS_NAV_LINK_LOCALE,
+  CLASS_NAV_LOCALE,
   CLASS_NAV_MOBILE_LOCALE,
   CLASS_NAV_SELECT,
   CLASS_NAV_SELECT_WRAPPER,
   CLASS_NAV_SPACE_SMALL,
-  CLASS_NAV_SPACER,
   CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
   CLASS_ROOT,
@@ -53,6 +53,7 @@ import {
   CLASS_TILE_LABEL,
   CLASS_TILES,
   CLASS_TOP,
+  CLASS_TOP_CONTENT,
 } from "./constants";
 import type { MegamenuTile, MenuItem, MenuSection } from "./data";
 import { megamenuTiles, menuSections } from "./data";
@@ -251,10 +252,10 @@ export const Megamenu = ({
           className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
           data-hide-when-sticky="true"
         >
-          <div className={CLASS_CONTAINER}>
+          <div className={cx(CLASS_CONTAINER, CLASS_TOP_CONTENT)}>
             <ul
               className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
-              aria-label="Top menu"
+              aria-label="Zákaznícke a kontaktné odkazy"
             >
               <li className={CLASS_NAV_ITEM}>
                 <a
@@ -270,14 +271,12 @@ export const Megamenu = ({
                   Podnikatelia a malé firmy
                 </a>
               </li>
-              <li className={CLASS_NAV_ITEM}>
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
                 <a href="/" className={CLASS_NAV_LINK}>
                   Velké firmy
                 </a>
               </li>
 
-              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_LEAD)}>
                 <a href="/" className={CLASS_NAV_LINK}>
                   <MegamenuIcon
@@ -290,6 +289,11 @@ export const Megamenu = ({
                   Kontakt
                 </a>
               </li>
+            </ul>
+            <ul
+              className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL, CLASS_NAV_LOCALE)}
+              aria-label="Výber jazyka"
+            >
               <li className={CLASS_NAV_ITEM}>
                 <a href="/" className={cx(CLASS_NAV_LINK, "is-active")}>
                   SK
@@ -307,7 +311,13 @@ export const Megamenu = ({
         <div className={CLASS_MAIN}>
           <div className={CLASS_CONTAINER}>
             <ul className={CLASS_NAV} aria-label="Hlavné menu">
-              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_NAV_ITEM_PUSH,
+                )}
+              >
                 <MegamenuLogoLink
                   compactLogoOnly={compactLogoOnly}
                   title={title}
@@ -373,6 +383,7 @@ export const Megamenu = ({
                 className={cx(
                   CLASS_NAV_ITEM,
                   CLASS_NAV_ITEM_MAIN,
+                  CLASS_NAV_ITEM_PUSH,
                   CLASS_HIDE_MD_DOWN,
                 )}
               >
@@ -388,11 +399,6 @@ export const Megamenu = ({
                 </a>
               </li>
 
-              <li
-                className={cx(CLASS_NAV_SPACER, CLASS_HIDE_LG_ONLY)}
-                aria-hidden="true"
-              ></li>
-
               <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
                 <button
                   type="button"
@@ -515,7 +521,7 @@ export const Megamenu = ({
           <div className={CLASS_MOBILE_HEADER}>
             <div className={CLASS_CONTAINER}>
               <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-                <li className={CLASS_NAV_ITEM}>
+                <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
                   <div
                     className={cx(
                       CLASS_NAV_BUTTON,
@@ -535,8 +541,6 @@ export const Megamenu = ({
                   </div>
                 </li>
 
-                <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-
                 <li className={CLASS_NAV_ITEM}>
                   <MegamenuCloseButton
                     ariaLabel="Zatvoriť menu"

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -16,10 +16,10 @@ import {
   CLASS_NAV_ICON_NO_GAP_MD_DOWN,
   CLASS_NAV_ITEM,
   CLASS_NAV_ITEM_MAIN,
+  CLASS_NAV_ITEM_PUSH,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_NO_LINE,
   CLASS_NAV_SPACE_SMALL,
-  CLASS_NAV_SPACER,
   CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
   CLASS_ROOT,
@@ -75,7 +75,13 @@ export const MegamenuBlog = ({
         <div className={CLASS_MAIN}>
           <div className={CLASS_CONTAINER}>
             <ul className={CLASS_NAV} aria-label="Hlavné menu">
-              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_NAV_ITEM_PUSH,
+                )}
+              >
                 <MegamenuLogoLink
                   compactLogoOnly={compactLogoOnly}
                   title={title}
@@ -88,6 +94,7 @@ export const MegamenuBlog = ({
                 className={cx(
                   CLASS_NAV_ITEM,
                   CLASS_NAV_ITEM_MAIN,
+                  CLASS_NAV_ITEM_PUSH,
                   CLASS_HIDE_MD_DOWN,
                 )}
               >
@@ -99,8 +106,6 @@ export const MegamenuBlog = ({
                 </a>
               </li>
 
-              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-
               <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
                 <button
                   type="button"
@@ -309,7 +314,7 @@ export const MegamenuBlog = ({
           <div className={CLASS_MOBILE_HEADER}>
             <div className={CLASS_CONTAINER}>
               <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-                <li className={CLASS_NAV_ITEM}>
+                <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
                   <MegamenuLogoLink
                     compactLogoOnly={compactLogoOnly}
                     title={title}
@@ -318,8 +323,6 @@ export const MegamenuBlog = ({
                   </MegamenuLogoLink>
                 </li>
 
-                <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-
                 <li className={CLASS_NAV_ITEM}>
                   <MegamenuCloseButton
                     ariaLabel="Zatvoriť menu"

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -19,8 +19,8 @@ import {
   CLASS_MOBILE_HEADER,
   CLASS_NAV,
   CLASS_NAV_ITEM,
+  CLASS_NAV_ITEM_PUSH,
   CLASS_NAV_SPACE_SMALL,
-  CLASS_NAV_SPACER,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
 } from "./constants";
@@ -51,8 +51,7 @@ export const MyOrangeMobilePanel = ({
       <div className={CLASS_MOBILE_HEADER}>
         <div className={CLASS_CONTAINER}>
           <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-            <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-            <li className={CLASS_NAV_ITEM}>
+            <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
               <MegamenuCloseButton
                 ariaLabel="Zatvoriť panel Môj Orange"
                 target="my-orange"

package/src/components/Megamenu/constants.ts

@@ -1,6 +1,7 @@
 export const CLASS_ROOT = "megamenu";
 
 export const CLASS_TOP = `${CLASS_ROOT}__top`;
+export const CLASS_TOP_CONTENT = `${CLASS_ROOT}__top-content`;
 export const CLASS_MAIN = `${CLASS_ROOT}__main`;
 export const CLASS_SUBMAIN = `${CLASS_ROOT}__submain`;
 export const CLASS_CONTAINER = `${CLASS_ROOT}__container`;
@@ -14,9 +15,11 @@ export const CLASS_TILE_LABEL = `${CLASS_ROOT}__tile-label`;
 export const CLASS_NAV = `${CLASS_ROOT}__nav`;
 export const CLASS_NAV_VERTICAL = `${CLASS_ROOT}__nav--vertical`;
 export const CLASS_NAV_SPACE_SMALL = `${CLASS_ROOT}__nav--space-small`;
+export const CLASS_NAV_LOCALE = `${CLASS_ROOT}__nav--locale`;
 export const CLASS_NAV_MOBILE_LOCALE = `${CLASS_ROOT}__nav--mobile-locale`;
 export const CLASS_NAV_ITEM = `${CLASS_ROOT}__nav-item`;
 export const CLASS_NAV_ITEM_LEAD = `${CLASS_ROOT}__nav-item--lead`;
+export const CLASS_NAV_ITEM_PUSH = `${CLASS_ROOT}__nav-item--push`;
 export const CLASS_NAV_ITEM_MAIN = `${CLASS_ROOT}__nav-item--main`;
 export const CLASS_NAV_LINK = `${CLASS_ROOT}__nav-link`;
 export const CLASS_NAV_LINK_LOCALE = `${CLASS_ROOT}__nav-link--locale`;
@@ -24,7 +27,6 @@ export const CLASS_NAV_LINK_NO_LINE = `${CLASS_ROOT}__nav-link--no-line`;
 export const CLASS_NAV_LINK_CTA = `${CLASS_ROOT}__nav-link--cta`;
 export const CLASS_NAV_SELECT = `${CLASS_ROOT}__nav-select`;
 export const CLASS_NAV_CART_ICON = `${CLASS_ROOT}__nav-cart-icon`;
-export const CLASS_NAV_SPACER = `${CLASS_ROOT}__nav-spacer`;
 export const CLASS_NAV_ICON = `${CLASS_ROOT}__nav-icon`;
 export const CLASS_NAV_ICON_NO_GAP_MD_DOWN = `${CLASS_NAV_ICON}--no-gap-md-down`;
 export const CLASS_NAV_ICON_CTA = `${CLASS_NAV_ICON}--cta`;

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

@@ -233,6 +233,10 @@
   gap: convert.to-rem(15px);
 }
 
+@mixin nav-locale {
+  flex: 0 0 auto;
+}
+
 @mixin nav-mobile-locale {
   position: relative;
   padding: convert.to-rem(15px) 0 !important;
@@ -261,6 +265,16 @@
   margin-right: convert.to-rem(10px);
 }
 
+@mixin nav-item-push {
+  margin-inline-end: auto;
+
+  &#{config.$class-root}__nav-item--main:first-child {
+    @include breakpoint.get("lg") {
+      margin-inline-end: 0;
+    }
+  }
+}
+
 @mixin nav-dropdown {
   position: absolute;
   top: calc(100% + 1px);
@@ -607,10 +621,25 @@
   }
 }
 
-@mixin nav-spacer {
-  display: flex;
-  flex: 1 0 1px;
-  visibility: hidden;
+@mixin top-content {
+  flex-direction: row;
+  align-items: center;
+  gap: convert.to-rem(15px);
+
+  > #{config.$class-root}__nav {
+    height: 100%;
+    margin-bottom: 0;
+  }
+
+  > #{config.$class-root}__nav:first-child {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  > #{config.$class-root}__nav:last-child {
+    flex: 0 0 auto;
+    width: auto;
+  }
 }
 
 @mixin subnav {
@@ -755,6 +784,11 @@
   height: convert.to-rem(80px);
   border-bottom: 1px solid var(--color-border-subtle);
 
+  #{config.$class-root}__nav-item--push:only-child {
+    margin-inline-start: auto;
+    margin-inline-end: 0;
+  }
+
   @include breakpoint.get("md", "down") {
     height: convert.to-rem(60px);
   }

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

@@ -36,6 +36,10 @@
       &--lead {
         @include mixins.nav-item-lead;
       }
+
+      &--push {
+        @include mixins.nav-item-push;
+      }
     }
 
     &--vertical {
@@ -46,6 +50,10 @@
       @include mixins.nav-space-small;
     }
 
+    &--locale {
+      @include mixins.nav-locale;
+    }
+
     &--mobile-locale {
       @include mixins.nav-mobile-locale;
     }
@@ -109,10 +117,6 @@
         @include mixins.nav-icon-cta;
       }
     }
-
-    &-spacer {
-      @include mixins.nav-spacer;
-    }
   }
 
   &__subnav {
@@ -222,6 +226,10 @@
 
   &__container {
     @include mixins.container;
+
+    &#{config.$class-root}__top-content {
+      @include mixins.top-content;
+    }
   }
 
   &__grid {