@orangesk/orange-design-system 3.4.0 → 3.6.0

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

@@ -85,9 +85,8 @@
 
 @function get-breakout-media-query($min, $max) {
   @return if(
-    $max,
-    "(min-width: #{$min}) and (max-width: #{$max})",
-    "(min-width: #{$min})"
+    sass($max): "(min-width: #{$min}) and (max-width: #{$max})";
+      else: "(min-width: #{$min})"
   );
 }
 

package/src/components/Countdown/Countdown.react.ts

@@ -1,9 +1,9 @@
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import { countdownUnits } from "./Countdown.static";
 
 const defaultCountdownLabels: Required<CountdownLabels> = {
   days: {

package/src/components/Countdown/Countdown.static.ts

@@ -1,11 +1,13 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
+  DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
   calculateState,
   countdownUnits,
-  DayLabels,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/Countdown.tsx

@@ -12,12 +12,12 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import CountdownStatic, {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import CountdownStatic, { countdownUnits } from "./Countdown.static";
 import {
   ATTR_COUNTDOWN,
   ATTR_COUNTDOWN_CONFIG,

package/src/components/Countdown/CountdownTag.static.ts

@@ -1,10 +1,12 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  calculateState,
   DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
+  calculateState,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/CountdownTag.tsx

@@ -12,7 +12,7 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/Dropdown/Dropdown.static.ts

@@ -1,5 +1,6 @@
 import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
-import { createPopper, Instance, Options } from "@popperjs/core";
+import type { Instance, Options } from "@popperjs/core";
+import { createPopper } from "@popperjs/core";
 
 import { keys } from "../../utils";
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import { Bar, BarItem } from "../Bar";
 import { IconButton } from "../Button";
-import { ButtonProps } from "../Button/Button";
+import type { ButtonProps } from "../Button/Button";
+import { CLASS_ROOT } from "./constants";
 import DropdownButtonStatic from "./Dropdown.static";
 import { DropdownToggleButton } from "./DropdownToggleButton";
 
-export const CLASS_ROOT = "dropdown";
+export { CLASS_ROOT } from "./constants";
 
 export type DropdownButtonProps = {
   className?: string;

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "dropdown__item";
 

package/src/components/Dropdown/DropdownToggleButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import ToggleButton from "../../docs/utils/ToggleButton";
 
-import { CLASS_ROOT } from "./Dropdown";
+import { CLASS_ROOT } from "./constants";
 
 interface DropdownToggleButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {

package/src/components/Dropdown/constants.ts

@@ -0,0 +1 @@
+export const CLASS_ROOT = "dropdown";

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { RefCallback, useMemo } from "react";
+import type { RefCallback } from "react";
+import React, { useMemo } from "react";
 import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
 import { Image } from "../Image";

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -2,7 +2,8 @@
 
 import cx from "classnames";
 import React from "react";
-import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
+import type { AccordionItemProps } from "../Accordion/AccordionItem";
+import { AccordionItem } from "../Accordion/AccordionItem";
 import type { FeatureAccordionImage } from "./FeatureAccordion";
 
 const CLASS_ROOT = "feature-accordion__item";

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

@@ -9,10 +9,12 @@
 }
 
 #{config.$class-root},
+.is-light #{config.$class-root},
 #{config.$class-root}.is-light {
   @include megamenuMixins.light-vars;
 }
 
+.is-dark #{config.$class-root},
 #{config.$class-root}.is-dark {
   @include megamenuMixins.dark-vars;
 }

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

@@ -176,7 +176,7 @@ export default class Autocomplete {
   ): void {
     if (!this.getInput()) {
       if (retries > 0) {
-        window.setTimeout(
+        this.element.ownerDocument.defaultView?.setTimeout(
           () =>
             this.initEnhancedControls(
               hasSearchIconWithPlaceholder,
@@ -231,7 +231,7 @@ export default class Autocomplete {
       clearButton.hidden = input.disabled || input.value.length === 0;
     };
     const scheduleUpdateClearButton = () => {
-      window.setTimeout(updateClearButton, 0);
+      this.element.ownerDocument.defaultView?.setTimeout(updateClearButton, 0);
     };
 
     clearButton.addEventListener("mousedown", this.preventDefault);

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

@@ -5,7 +5,8 @@ import React from "react";
 import { Bar, BarBreak, BarItem } from "../../Bar";
 import { Control } from "./Control";
 import { Description } from "./Description";
-import { FieldContext, FieldContextType } from "./FieldContext";
+import type { FieldContextType } from "./FieldContext";
+import { FieldContext } from "./FieldContext";
 import { FieldLabel } from "./Label";
 import { Messages } from "./Messages";
 import { FormTooltip } from "./Tooltip";

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

@@ -4,7 +4,8 @@ import cx from "classnames";
 import React from "react";
 
 import { Label } from "../Label";
-import { FieldContext, FieldContextType } from "./FieldContext";
+import type { FieldContextType } from "./FieldContext";
+import { FieldContext } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__label";
 

package/src/components/Forms/Fieldset/Fieldset.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { Messages } from "../Field/Messages";
 

package/src/components/Forms/File/File.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
 import FileStatic from "./File.static";
 

package/src/components/Forms/Group/Group.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 import { Autocomplete } from "../Autocomplete/Autocomplete";
 import { Select } from "../Select/Select";
 import { TextInput } from "../TextInput/TextInput";

package/src/components/Forms/Group/Item.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "control-group__item";
 

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

@@ -1,5 +1,7 @@
-import noUiSlider, { API as NoUiSliderInstance } from "nouislider";
-import wnumb, { Instance as WNumbInstance } from "wnumb";
+import type { API as NoUiSliderInstance } from "nouislider";
+import noUiSlider from "nouislider";
+import type { Instance as WNumbInstance } from "wnumb";
+import wnumb from "wnumb";
 
 import defaultConfig from "./data";
 

package/src/components/Forms/Select/index.tsx

@@ -1,4 +1,5 @@
-import { Select, SelectProps } from "./Select";
+import type { SelectProps } from "./Select";
+import { Select } from "./Select";
 
 export { Select };
 

package/src/components/Gauge/Gauge.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ForwardedRef } from "react";
+import type { ForwardedRef } from "react";
+import React from "react";
 
 const getMaxValue = (radius: number): number =>
   Math.PI * (radius + radius * 0.22) * 2;

package/src/components/Icon/Pictogram.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React from "react";
-import { Icon, IconProps } from "./Icon";
+import type { IconProps } from "./Icon";
+import { Icon } from "./Icon";
 
 export interface PictogramProps extends Omit<IconProps, "type"> {
   /**

package/src/components/Icon/SpritePathContext.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 export const SpritePathContext = React.createContext("/sprite.svg");
 

package/src/components/Icon/styles/config.scss

@@ -1,4 +1,3 @@
-@use "sass:map" as sass-map;
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
 
@@ -6,18 +5,34 @@ $sizes: (
   default: (
     small: convert.to-rem(16px),
     medium: convert.to-rem(24px),
-    large: convert.to-rem(32px),
+    large: convert.to-rem(24px),
     xlarge: convert.to-rem(40px),
     xxlarge: convert.to-rem(48px),
     huge: convert.to-rem(56px),
   ),
   md: (
+    large: convert.to-rem(32px),
+    xlarge: convert.to-rem(48px),
+    xxlarge: convert.to-rem(56px),
+    huge: convert.to-rem(64px),
+  ),
+  lg: (
+    large: convert.to-rem(32px),
     xlarge: convert.to-rem(48px),
     xxlarge: convert.to-rem(64px),
     huge: convert.to-rem(80px),
   ),
 );
 
+$pictogram-sizes: (
+  small: convert.to-rem(16px),
+  medium: convert.to-rem(24px),
+  large: convert.to-rem(32px),
+  xlarge: convert.to-rem(48px),
+  xxlarge: convert.to-rem(64px),
+  huge: convert.to-rem(80px),
+);
+
 $colors: (
   info: var(--color-icon-information),
   success: var(--color-icon-positive),

package/src/components/Icon/styles/export/size.js

@@ -4,13 +4,14 @@
 export const exports = {
   "small": "1rem",
   "medium": "1.5rem",
-  "large": "2rem",
+  "large": "1.5rem",
   "xlarge": "2.5rem",
   "xxlarge": "3rem",
   "huge": "3.5rem",
+  "large-md": "2rem",
   "xlarge-md": "3rem",
-  "xxlarge-md": "4rem",
-  "huge-md": "5rem"
+  "xxlarge-md": "3.5rem",
+  "huge-md": "4rem"
 };
 
 export default exports;

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

@@ -32,6 +32,15 @@
     @include mixins.sizes;
     @include mixins.colors;
 
+    // Pictogram sizes stay fixed. Responsive sizing belongs to icons only.
+    &--pictogram {
+      @each $variant, $size in config.$pictogram-sizes {
+        &.icon#{generate.variant-name($variant)} {
+          --icon-size: #{$size};
+        }
+      }
+    }
+
     &__use {
       &--light {
         display: block;

package/src/components/Icon/tests/Icon.styles.unit.test.jsx

@@ -0,0 +1,12 @@
+import * as sass from "sass";
+
+describe("Icon styles", () => {
+  it("keeps pictogram sizes fixed across breakpoints", () => {
+    const { css } = sass.compile("src/components/Icon/styles/style.scss");
+
+    expect(css).toMatch(
+      /\.icon--pictogram\.icon--xlarge \{\s+--icon-size: 3rem;\s+\}/,
+    );
+    expect(css.match(/\.icon--pictogram\.icon--xlarge/g)).toHaveLength(1);
+  });
+});

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { useStatic } from "../../utils/hooks";
 

package/src/components/Loader/LoaderFullscreen.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { Container } from "../Container";
 import { Loader } from "./Loader";
 

package/src/components/Megamenu/Megamenu.tsx

@@ -54,13 +54,8 @@ import {
   CLASS_TILES,
   CLASS_TOP,
 } from "./constants";
-import {
-  MegamenuTile,
-  MenuItem,
-  MenuSection,
-  megamenuTiles,
-  menuSections,
-} from "./data";
+import type { MegamenuTile, MenuItem, MenuSection } from "./data";
+import { megamenuTiles, menuSections } from "./data";
 import { getMegamenuIds } from "./ids";
 import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
@@ -81,8 +76,12 @@ export type MegamenuProps = {
   searchFilled?: boolean;
   compactLogoOnly?: boolean;
   isB2B?: boolean;
-  /** Optional number of items displayed on the cart badge. */
+  /** Controls whether My Orange panel shows logged-in or logged-out content. */
+  isLoggedIn?: boolean;
+  /** Number of items displayed on the cart badge. Empty cart when omitted or zero. */
   cartItems?: number;
+  /** Shows an orange dot for a non-empty cart when item count is unavailable. */
+  cartHasItems?: boolean;
   /** Tiles displayed below every desktop and mobile menu section. */
   tiles?: MegamenuTile[];
 };
@@ -228,13 +227,16 @@ export const Megamenu = ({
   searchFilled,
   compactLogoOnly = false,
   isB2B = false,
+  isLoggedIn = true,
   cartItems,
+  cartHasItems = false,
   tiles = megamenuTiles,
 }: MegamenuProps) => {
   const ids = getMegamenuIds("main");
   const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
     getMegamenuSearchState(searchEmpty, searchFilled);
-  const hasCartItems = cartItems !== undefined;
+  const hasCartItems = cartItems !== undefined && cartItems > 0;
+  const showCartDot = cartHasItems && !hasCartItems;
 
   return (
     <header>
@@ -440,7 +442,11 @@ export const Megamenu = ({
                       />
                     </span>
                   ) : (
-                    <span className={CLASS_NAV_CART_ICON} aria-hidden="true">
+                    <span
+                      className={CLASS_NAV_CART_ICON}
+                      data-cart-has-items={showCartDot ? "true" : undefined}
+                      aria-hidden="true"
+                    >
                       <MegamenuIcon
                         width={24}
                         height={24}
@@ -745,6 +751,7 @@ export const Megamenu = ({
           panelId={ids.myOrangePanelId}
           titleId={ids.myOrangeTitleId}
           isB2B={isB2B}
+          isLoggedIn={isLoggedIn}
         />
 
         <button

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -31,7 +31,7 @@ import {
 } from "./constants";
 import { getMegamenuIds } from "./ids";
 import { MegamenuIcon } from "./MegaMenuIcon";
-import { MegamenuProps } from "./Megamenu";
+import type { MegamenuProps } from "./Megamenu";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 import {

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -31,12 +31,14 @@ type MyOrangeMobilePanelProps = {
   titleId: string;
   panelId?: string;
   isB2B?: boolean;
+  isLoggedIn?: boolean;
 };
 
 export const MyOrangeMobilePanel = ({
   titleId,
   panelId,
   isB2B = false,
+  isLoggedIn = true,
 }: MyOrangeMobilePanelProps) => {
   return (
     <MegamenuMobilePanel
@@ -65,18 +67,29 @@ export const MyOrangeMobilePanel = ({
             <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
               <MegamenuIcon name="user" width={72} height={72} />
             </div>
-            <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
-            <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
-              Odhlásiť
-            </a>
-            <a href="#" className={CLASS_BUTTON}>
-              Orange Business
-            </a>
-            {isB2B ? (
-              <a href="#" className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}>
-                My Orange
+            {isLoggedIn ? (
+              <>
+                <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
+                  Odhlásiť
+                </a>
+                <a href="#" className={CLASS_BUTTON}>
+                  Orange Business
+                </a>
+                {isB2B ? (
+                  <a
+                    href="#"
+                    className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}
+                  >
+                    My Orange
+                  </a>
+                ) : null}
+              </>
+            ) : (
+              <a href="#" className={CLASS_BUTTON}>
+                Prihlásenie
               </a>
-            ) : null}
+            )}
           </div>
         </div>
 

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

@@ -461,7 +461,7 @@
 @mixin nav-cart-icon {
   position: relative;
 
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     right: -2px;
@@ -470,6 +470,11 @@
     height: convert.to-rem(8px);
     background-color: var(--color-icon-brand);
     border-radius: 50%;
+    display: none;
+  }
+
+  &[data-cart-has-items]::after {
+    display: block;
   }
 
   &[data-items-in-cart]::after {

package/src/components/Megamenu/tests/Megamenu.unit.test.jsx

@@ -85,11 +85,11 @@ describe("Megamenu logo markup", () => {
     ).toHaveTextContent("Chcem nové číslo");
   });
 
-  it("renders orange cart dot by default", () => {
+  it("renders empty cart by default", () => {
     const { container } = render(<Megamenu notSticky />);
 
     const cart = container.querySelector(
-      ".megamenu__nav-cart-icon:not([data-items-in-cart])",
+      ".megamenu__nav-cart-icon:not([data-items-in-cart]):not([data-cart-has-items])",
     );
 
     expect(cart).toBeInTheDocument();
@@ -97,6 +97,25 @@ describe("Megamenu logo markup", () => {
     expect(cart?.nextElementSibling).not.toBeInTheDocument();
   });
 
+  it("renders optional orange cart dot", () => {
+    const { container } = render(<Megamenu cartHasItems notSticky />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon[data-cart-has-items]",
+    );
+
+    expect(cart).toBeInTheDocument();
+    expect(cart).toHaveAttribute("data-cart-has-items", "true");
+  });
+
+  it("renders logged-out My Orange panel content", () => {
+    const { container } = render(<Megamenu isLoggedIn={false} notSticky />);
+
+    expect(container).toHaveTextContent("Prihlásenie");
+    expect(container).not.toHaveTextContent("Odhlásiť");
+    expect(container).not.toHaveTextContent("0905 123 456");
+  });
+
   it("renders optional cart item count", () => {
     const { container } = render(<Megamenu cartItems={3} notSticky />);
 
@@ -111,4 +130,16 @@ describe("Megamenu logo markup", () => {
     );
     expect(cart?.nextElementSibling).toHaveTextContent("3 položka v košíku");
   });
+
+  it("renders empty cart without a badge", () => {
+    const { container } = render(<Megamenu cartItems={0} notSticky />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon:not([data-items-in-cart])",
+    );
+
+    expect(cart).toBeInTheDocument();
+    expect(cart?.parentElement).toHaveAttribute("aria-label", "Košík");
+    expect(cart?.nextElementSibling).not.toBeInTheDocument();
+  });
 });

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "../Button";
-import { ButtonType } from "../Button/Button";
-import { IconButtonProps } from "../Button/IconButton";
+import type { ButtonType } from "../Button/Button";
+import type { IconButtonProps } from "../Button/IconButton";
 
 interface ExtendedIconButtonProps extends IconButtonProps {
   type?: ButtonType;