@orangesk/orange-design-system 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -27,7 +27,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.3.6",
+    "@next/mdx": "16.3.8",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -39,7 +39,7 @@
     "html-react-parser": "6.1.8",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.6",
+    "next": "16.3.8",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
@@ -52,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.2.0",
+    "swiper": "14.3.0",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -71,40 +71,36 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.63.5",
+    "@rollup/rollup-darwin-arm64": "^4.63.6",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
-    "@types/node": "26.6.2",
+    "@types/node": "26.6.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.1.1",
-    "@vitest/browser": "5.0.1",
-    "@vitest/browser-playwright": "5.0.1",
-    "@vitest/coverage-v8": "5.0.1",
-    "@vitest/ui": "5.0.1",
+    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/ui": "5.0.3",
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.1",
     "glob": "13.0.6",
-    "html-validate": "11.16.0",
+    "html-validate": "11.16.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.1.1",
-    "lint-staged": "17.5.1",
-    "playwright": "^1.63.0",
+    "lint-staged": "17.6.0",
     "prettier": "^3.9.9",
-    "rollup": "^4.63.5",
+    "rollup": "^4.63.6",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.105.0",
+    "sass": "^1.105.1",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "5.0.1",
-    "vitest-axe": "^0.1.0",
-    "vitest-browser-react": "^2.3.0"
+    "vitest": "5.0.3",
+    "vitest-axe": "^0.1.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",
@@ -133,8 +129,6 @@
     "format:biome": "biome format --write .",
     "format:prettier": "prettier --write '**/*.{mdx,scss}'",
     "test": "vitest",
-    "test:visual:docker": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual\"",
-    "test:visual:docker:update": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual:update\"",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"

package/src/components/Footer/Footer.tsx

@@ -140,10 +140,7 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
                 id={`${accordionIdPrefix}-footer-section-panel-${index}`}
               >
                 {column.links.map((link, linkIndex) => (
-                  <li
-                    className="mb-small"
-                    key={`footer-link-${index}-${linkIndex}`}
-                  >
+                  <li key={`footer-link-${index}-${linkIndex}`}>
                     <a href={link.url}>{link.label}</a>
                   </li>
                 ))}

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

@@ -48,7 +48,9 @@
     @include base.focusring;
   }
 
-  * {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 

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

@@ -3,6 +3,9 @@
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/breakpoint";
 @use "../../Megamenu/styles/mixins" as megamenuMixins;
+@use "../../SocialButton/styles/config" as socialButtonConfig;
+@use "../../SocialButton/styles/mixins" as socialButtonMixins;
+@use "../../Icon/styles/mixins" as iconMixins;
 
 #{config.$class-root} {
   @include mixins.globals;
@@ -112,4 +115,32 @@
       margin-bottom: convert.to-rem(30px);
     }
   }
+
+  // Keep shared component styles local so the standalone bundle works on legacy pages.
+  .social-button {
+    @include socialButtonMixins.base;
+    @include socialButtonMixins.size;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  @each $name, $props in socialButtonConfig.$social-colors {
+    .social-button--#{$name} {
+      @include socialButtonMixins.color($name);
+    }
+  }
+
+  .icon {
+    @include iconMixins.base;
+    @include iconMixins.sizes;
+    @include iconMixins.colors;
+
+    use {
+      pointer-events: none;
+    }
+  }
 }

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

@@ -0,0 +1,62 @@
+import * as sass from "sass";
+
+describe("Footer standalone styles", () => {
+  let stylesheet;
+  let rules;
+
+  beforeAll(() => {
+    stylesheet = document.createElement("style");
+    stylesheet.textContent = sass.compile(
+      "src/components/Footer/styles/style.scss",
+    ).css;
+    document.head.append(stylesheet);
+
+    const flattenRules = (cssRules) =>
+      Array.from(cssRules).flatMap((rule) =>
+        rule.selectorText ? [rule] : flattenRules(rule.cssRules || []),
+      );
+    rules = flattenRules(stylesheet.sheet.cssRules);
+  });
+
+  afterAll(() => stylesheet.remove());
+
+  const styleFor = (selector) =>
+    rules.find((rule) => rule.selectorText === selector)?.style;
+
+  it("sizes social buttons and icons without global ODS styles", () => {
+    expect(styleFor(".footer .social-button")?.display).toBe("inline-flex");
+    expect(styleFor(".footer .social-button")?.width).toBe("2.5rem");
+    expect(styleFor(".footer .icon")?.getPropertyValue("fill")).toBe(
+      "currentcolor",
+    );
+    expect(styleFor(".footer .icon")?.width).toBe("var(--icon-size)");
+    expect(styleFor(".footer .icon")?.height).toBe("var(--icon-size)");
+    expect(
+      styleFor(".footer .icon--medium")?.getPropertyValue("--icon-size"),
+    ).toBe("1.5rem");
+  });
+
+  it.each(["facebook-2", "x", "linkedin-2", "youtube", "instagram"])(
+    "includes theme and interaction colors for %s",
+    (name) => {
+      const selector = `.footer .social-button--${name}`;
+      expect(styleFor(selector)?.color).toBe("var(--color-text-default)");
+      expect(styleFor(`${selector}:hover`)?.color).toBe("rgb(255, 255, 255)");
+      expect(styleFor(`${selector}:active, ${selector}.is-active`)?.color).toBe(
+        "var(--color-text-inverse)",
+      );
+    },
+  );
+
+  it("keeps reused component styles inside the footer", () => {
+    const componentRules = rules.filter((rule) =>
+      /\.(social-button|icon)\b/.test(rule.selectorText),
+    );
+    expect(componentRules.length).toBeGreaterThan(0);
+    for (const rule of componentRules) {
+      for (const selector of rule.selectorText.split(",")) {
+        expect(selector.trim()).toMatch(/^\.footer /);
+      }
+    }
+  });
+});

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

@@ -102,11 +102,16 @@
   }
 
   * {
-    box-sizing: border-box;
     letter-spacing: convert.to-rem(-0.1px);
     line-height: convert.to-rem(18px);
   }
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   ::selection {
     background-color: base.$selection-background;
     color: base.$text-color;
@@ -263,7 +268,7 @@
 }
 
 @mixin nav-item-lead {
-  margin-right: convert.to-rem(10px);
+  margin-right: 0;
 }
 
 @mixin nav-item-push {
@@ -418,7 +423,7 @@
   }
 
   &.is-active {
-    color: var(--color-border-accent);
+    color: var(--color-border-accent) !important;
   }
 }
 
@@ -637,7 +642,7 @@
     min-width: 0;
   }
 
-  > #{config.$class-root}__nav:last-child {
+  > #{config.$class-root}__nav:last-child:not(:first-child) {
     flex: 0 0 auto;
     width: auto;
   }

package/src/components/Alert/tests/Alert.visual.test.jsx

@@ -1,137 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../../Button";
-import { Alert } from "../";
-
-describe("Alert visual regression", () => {
-  beforeEach(async () => {
-    await page.viewport(1280, 720);
-  });
-
-  test("Preview: title", async () => {
-    render(
-      <Alert data-testid="alert-title" title="Toto je jednoduchá sprava" />,
-    );
-
-    await expect(page.getByTestId("alert-title")).toMatchScreenshot(
-      "alert-preview-title",
-    );
-  });
-
-  test("Preview: title and description", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description"
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-description")).toMatchScreenshot(
-      "alert-preview-title-description",
-    );
-  });
-
-  test("Preview: title and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-buttons"
-        title="Prosim prihlaste sa."
-        actionButtons={[
-          <Button key="login">Prihlasit sa</Button>,
-          <Button key="hide">Skryt</Button>,
-        ]}
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-buttons")).toMatchScreenshot(
-      "alert-preview-title-buttons",
-    );
-  });
-
-  test("Preview: title, description and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description-buttons"
-        title="Prihlasit sa je jednoduche a rozumne"
-        description="Napr. prihlaseni pouzivatelia vidia krajsie ceny."
-        actionButtons={<Button>Prihlasit sa</Button>}
-      />,
-    );
-
-    await expect(
-      page.getByTestId("alert-title-description-buttons"),
-    ).toMatchScreenshot("alert-preview-title-description-buttons");
-  });
-
-  test("Preview: success type", async () => {
-    render(
-      <Alert
-        data-testid="alert-success"
-        type="success"
-        title="Vyborne. Vsetko prebehlo rychlo a hladko"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-success")).toMatchScreenshot(
-      "alert-preview-success",
-    );
-  });
-
-  test("Preview: warning type", async () => {
-    render(
-      <Alert
-        data-testid="alert-warning"
-        type="warning"
-        title="Na toto si daj pozor!"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-warning")).toMatchScreenshot(
-      "alert-preview-warning",
-    );
-  });
-
-  test("Preview: danger type", async () => {
-    render(
-      <Alert data-testid="alert-danger" type="danger" title="Stala sa chyba" />,
-    );
-
-    await expect(page.getByTestId("alert-danger")).toMatchScreenshot(
-      "alert-preview-danger",
-    );
-  });
-
-  test("Preview: custom title renderer", async () => {
-    render(
-      <Alert
-        data-testid="alert-custom-title"
-        title="Prihlasit sa je jednoduche a rozumne"
-        renderTitle={(props) => (
-          <h3 className="alert__title mb-medium">{props.title}</h3>
-        )}
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-custom-title")).toMatchScreenshot(
-      "alert-preview-custom-title",
-    );
-  });
-
-  test("Preview: full width", async () => {
-    render(
-      <Alert
-        data-testid="alert-full-width"
-        isFullWidth
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-full-width")).toMatchScreenshot(
-      "alert-preview-full-width",
-    );
-  });
-});

package/src/components/CarouselHero/tests/CarouselHero.visual.test.jsx

@@ -1,90 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-
-import { CarouselHero, CarouselHeroItem } from "../";
-
-const slides = (
-  <>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
-      <h2>Slide 1</h2>
-      <p>First slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
-      <h2>Slide 2</h2>
-      <p>Second slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
-      <h2>Slide 3</h2>
-      <p>Third slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+4">
-      <h2>Slide 4</h2>
-      <p>Fourth slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+5">
-      <h2>Slide 5</h2>
-      <p>Fifth slide content</p>
-    </CarouselHeroItem>
-  </>
-);
-
-const tabs = [
-  { label: "Motorola Edge 50 Fusion" },
-  { label: "3 mesiace zadarmo" },
-  { label: "Nekonečné dáta" },
-  { label: "iPhone16 Pro" },
-  { label: "HONOR 200" },
-];
-
-async function getCarouselState() {
-  return page.evaluate(() => {
-    const element = document.getElementById("carousel-hero-regression");
-    const instance = element?.ODS_CarouselHero?.instance;
-
-    return {
-      activeIndex: instance?.activeIndex,
-      realIndex: instance?.realIndex,
-      transform: instance?.wrapperEl?.style.transform ?? "",
-    };
-  });
-}
-
-describe("CarouselHero visual flow", () => {
-  beforeEach(async () => {
-    await page.viewport(1280, 720);
-  });
-
-  test("wraps and keeps adjacent tab navigation short", async () => {
-    render(
-      <CarouselHero id="carousel-hero-regression" tabs={tabs}>
-        {slides}
-      </CarouselHero>,
-    );
-
-    await expect(page.getByRole("tab", { name: "HONOR 200" })).toBeVisible();
-
-    await page.getByRole("tab", { name: "HONOR 200" }).click();
-    await page.waitForTimeout(500);
-
-    let state = await getCarouselState();
-    expect(state.realIndex).toBe(4);
-    expect(state.activeIndex).toBe(4);
-
-    await page.getByRole("button", { name: "Nasledujúci snímok" }).click();
-    await page.waitForTimeout(500);
-
-    state = await getCarouselState();
-    expect(state.realIndex).toBe(0);
-    expect(state.activeIndex).toBe(0);
-
-    await page.getByRole("tab", { name: "3 mesiace zadarmo" }).click();
-    await page.waitForTimeout(500);
-
-    state = await getCarouselState();
-    expect(state.realIndex).toBe(1);
-    expect(state.activeIndex).toBe(1);
-    expect(state.transform).toContain("translate3d");
-    expect(state.transform).toContain("-");
-  });
-});