@orangesk/orange-design-system 3.6.2 → 3.8.0

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

@@ -11,6 +11,8 @@ export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
 export { RangeSlider } from "./RangeSlider";
+export { SegmentedControl, SegmentedControlItem } from "./SegmentedControl";
 export { Select } from "./Select";
+export { SelectionTile } from "./SelectionTile";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";

package/src/components/Icon/index.ts

@@ -1,3 +1,4 @@
+export type { IconColor } from "./Icon";
 export { Icon } from "./Icon";
 export { Pictogram } from "./Pictogram";
 export { SpritePathContext, SpritePathProvider } from "./SpritePathContext";

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

@@ -17,6 +17,7 @@
 @use "../../Button/styles/mixins" as button;
 @use "../../Card/styles/mixins" as card;
 @use "../../../styles/typography/mixins" as typography;
+@use "../../../styles/tokens/overlay";
 
 @use "./config";
 
@@ -233,6 +234,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 +266,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 +622,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 {
@@ -623,10 +653,16 @@
 
 @mixin subnav-item {
   display: flex;
-  gap: convert.to-rem(10px);
+  column-gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
+  > #{config.$class-root}__tag {
+    align-self: flex-start;
+  }
+
   a {
+    min-width: 0;
+
     &:hover,
     &:focus,
     &:focus-visible,
@@ -686,13 +722,9 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: color-mix(
-      in srgb,
-      var(--color-surface-contrast) 75%,
-      transparent
-    );
+    background-color: overlay.$background;
     opacity: 0;
-    transition: opacity 0.2s ease-out;
+    transition: opacity overlay.$transition;
   }
 
   &.is-active {
@@ -755,6 +787,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);
   }
@@ -1101,11 +1138,7 @@
   left: 0;
   width: 100%;
   height: 0;
-  background-color: color-mix(
-    in srgb,
-    var(--color-surface-contrast) 75%,
-    transparent
-  );
+  background-color: overlay.$background;
   border: none;
   appearance: none;
   -webkit-appearance: none;
@@ -1114,8 +1147,8 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 0.15s ease-out,
-    visibility 0.15s ease-out;
+    opacity overlay.$transition,
+    visibility overlay.$transition;
   outline: none;
 
   &.is-active {
@@ -1293,6 +1326,8 @@
 
 @mixin tag {
   @include tag.base;
+  flex: 0 0 auto;
+  white-space: nowrap;
   text-decoration: none !important;
 
   @each $name, $props in tagConfig.$sizes {

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 {