@orangesk/orange-design-system 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -24,9 +24,10 @@
     "./public/*": "./public/*"
   },
   "scripts": {
-    "dev": "npm run build:scss-exports && npm run build:search-index && next dev",
-    "build": "npm run build:scss-exports && npm run build:search-index && next build && npm run sprite",
+    "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
+    "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
     "build:bundle": "npm run build:scss-exports && pnpm exec rollup -c && npm run build:megamenu && npm run build:footer",
+    "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
     "build:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
     "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
     "build:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
@@ -55,7 +56,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.10",
+    "@next/mdx": "16.2.12",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -63,24 +64,24 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.11",
-    "html-react-parser": "6.1.3",
+    "dompurify": "^3.4.12",
+    "html-react-parser": "6.1.5",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.2.10",
+    "next": "16.2.12",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
     "query-string": "^9.4.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.7",
+    "react-is": "^19.2.8",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.0.1",
+    "swiper": "14.0.7",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -99,38 +100,38 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.62.2",
+    "@rollup/rollup-darwin-arm64": "^4.62.3",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "26.0.1",
+    "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.0.3",
-    "@vitest/browser": "^4.1.9",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/coverage-v8": "^4.1.9",
-    "@vitest/ui": "^4.1.9",
+    "@vitejs/plugin-react": "6.0.4",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/ui": "^4.1.10",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.3.6",
+    "fs-extra": "^11.4.0",
     "glob": "13.0.6",
-    "html-validate": "11.5.4",
+    "html-validate": "11.6.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "29.1.1",
-    "lint-staged": "17.0.8",
-    "playwright": "^1.61.1",
-    "prettier": "^3.9.4",
-    "rollup": "^4.62.2",
+    "jsdom": "30.0.1",
+    "lint-staged": "17.2.0",
+    "playwright": "^1.62.0",
+    "prettier": "^3.9.6",
+    "rollup": "^4.62.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.101.0",
+    "sass": "^1.102.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },

package/src/assets/icons/quote.svg

@@ -1,4 +1,4 @@
 <svg width="80" height="80" viewBox="0 0 80 80" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M33.8776 61.8775H15V43C15 39.5986 15.3402 36.424 16.0205 33.4762C16.8141 30.415 17.9479 27.7506 19.4218 25.483C21.0091 23.2154 22.9933 21.4014 25.3742 20.0408C27.7552 18.6803 30.5329 18 33.7075 18V26.5034C31.78 26.5034 30.1928 27.0136 28.9456 28.034C27.6984 28.941 26.678 30.1882 25.8844 31.7755C25.0907 33.3628 24.5238 35.1769 24.1837 37.2177C23.957 39.1451 23.8436 41.0725 23.8436 43H33.8776V61.8775ZM65 61.8775H46.1225V43C46.1225 39.5986 46.4626 36.424 47.1429 33.4762C47.9365 30.415 49.0703 27.7506 50.5442 25.483C52.1315 23.2154 54.1157 21.4014 56.4966 20.0408C58.8776 18.6803 61.6554 18 64.83 18V26.5034C62.9025 26.5034 61.3152 27.0136 60.068 28.034C58.8208 28.941 57.8004 30.1882 57.0068 31.7755C56.2131 33.3628 55.6462 35.1769 55.3061 37.2177C55.0794 39.1451 54.966 41.0725 54.966 43H65V61.8775Z" fill="currentColor"/>
+  <path d="M31.8256 67.9366H8.3335V44.4446C8.3335 40.2118 8.75685 36.2612 9.60341 32.5927C10.5911 28.7832 12.002 25.4675 13.8362 22.6457C15.8115 19.8238 18.2807 17.5663 21.2436 15.8732C24.2066 14.1801 27.6633 13.3335 31.6139 13.3335V23.9155C29.2153 23.9155 27.24 24.5504 25.688 25.8203C24.136 26.949 22.8662 28.501 21.8785 30.4763C20.8909 32.4517 20.1854 34.7091 19.7621 37.2488C19.4799 39.6474 19.3388 42.046 19.3388 44.4446H31.8256V67.9366ZM70.5557 67.9366H47.0637V44.4446C47.0637 40.2118 47.4869 36.2612 48.3335 32.5927C49.3212 28.7832 50.7321 25.4675 52.5663 22.6457C54.5416 19.8238 57.0108 17.5663 59.9737 15.8732C62.9367 14.1801 66.3935 13.3335 70.3441 13.3335V23.9155C67.9455 23.9155 65.9701 24.5504 64.4181 25.8203C62.8661 26.949 61.5963 28.501 60.6086 30.4763C59.621 32.4517 58.9155 34.7091 58.4922 37.2488C58.21 39.6474 58.0689 42.046 58.0689 44.4446H70.5557V67.9366Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/star-empty-thin.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.5175 11.5451L19.6298 11.7785L19.8857 11.8215L28.454 13.2482L22.0361 18.9543L21.8095 19.1555L21.8827 19.4494L24.0058 27.9426L16.2079 23.6887L15.9677 23.5588L15.7284 23.6887L7.92961 27.9426L10.0536 19.4494L10.1269 19.1555L9.90031 18.9543L3.48137 13.2482L12.0507 11.8215L12.3066 11.7785L12.4189 11.5451L15.9677 4.16132L19.5175 11.5451Z" stroke="currentColor"/>
+</svg>

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,36 @@
+import cx from "classnames";
+import React, { HTMLAttributes } from "react";
+
+import { Icon } from "../Icon";
+
+const CLASS_ROOT = "avatar";
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  alt?: string;
+  iconName?: string;
+  src: string;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  alt = "",
+  className,
+  iconName,
+  src,
+  ...other
+}) => {
+  const hasDecoration = Boolean(iconName);
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} {...other}>
+      {hasDecoration && (
+        <span className={`${CLASS_ROOT}__icon`} aria-hidden="true">
+          <Icon name={iconName!} size="small" />
+        </span>
+      )}
+      <img className={`${CLASS_ROOT}__image`} src={src} alt={alt} />
+    </div>
+  );
+};
+
+Avatar.displayName = "Avatar";

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export type { AvatarProps } from "./Avatar";
+export { Avatar } from "./Avatar";

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

@@ -0,0 +1,11 @@
+@use "sass:math";
+@use "../../../styles/tools/convert";
+
+$avatar-size: convert.to-rem(64px);
+$badge-size: convert.to-rem(24px);
+$badge-offset: convert.to-rem(4px);
+$badge-top: -$badge-offset;
+$badge-right: -$badge-offset;
+$badge-anchor-x: math.div($badge-size, 2) - $badge-offset;
+$badge-anchor-y: math.div($badge-size, 2) - $badge-offset;
+$badge-cutout-radius: convert.to-rem(12px);

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

@@ -0,0 +1,53 @@
+@use "./config";
+
+@mixin base {
+  position: relative;
+  display: inline-flex;
+  width: config.$avatar-size;
+  height: config.$avatar-size;
+  flex-shrink: 0;
+  vertical-align: top;
+  border-radius: 50%;
+}
+
+@mixin image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+}
+
+@mixin image-with-decoration {
+  -webkit-mask-image: radial-gradient(
+    circle at calc(100% - #{config.$badge-anchor-x}) #{config.$badge-anchor-y},
+    transparent #{config.$badge-cutout-radius},
+    black calc(#{config.$badge-cutout-radius} + 1px)
+  );
+  mask-image: radial-gradient(
+    circle at calc(100% - #{config.$badge-anchor-x}) #{config.$badge-anchor-y},
+    transparent #{config.$badge-cutout-radius},
+    black calc(#{config.$badge-cutout-radius} + 1px)
+  );
+}
+
+@mixin icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: config.$badge-size;
+  height: config.$badge-size;
+  background-color: transparent;
+  color: var(--color-icon-default);
+  line-height: 1;
+}
+
+@mixin badge {
+  position: absolute;
+  top: config.$badge-top;
+  right: config.$badge-right;
+  z-index: 1;
+  width: config.$badge-size;
+  height: config.$badge-size;
+}

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

@@ -0,0 +1,20 @@
+@use "./mixins";
+
+@layer components {
+  .avatar {
+    @include mixins.base;
+
+    &__image {
+      @include mixins.image;
+    }
+
+    &__icon {
+      @include mixins.icon;
+      @include mixins.badge;
+    }
+
+    &__icon ~ &__image {
+      @include mixins.image-with-decoration;
+    }
+  }
+}

package/src/components/Avatar/tests/Avatar.conformance.test.jsx

@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Avatar } from "../";
+
+const example = (
+  <Avatar
+    className="surface-secondary"
+    src="/avatar.png"
+    alt="Person avatar"
+    iconName="quote"
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,45 @@
+import { render } from "@testing-library/react";
+
+import { Avatar } from "../Avatar";
+
+describe("rendering Avatar", () => {
+  it("has default avatar class", () => {
+    const { getByTestId } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" data-testid="test-id" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("avatar");
+  });
+
+  it("renders image when src is set", () => {
+    const { getByAltText } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" />,
+    );
+    expect(getByAltText("Person avatar")).toHaveAttribute("src", "/avatar.png");
+  });
+
+  it("does not render decoration by default", () => {
+    const { container } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" />,
+    );
+    expect(container.getElementsByClassName("avatar__icon").length).toBe(0);
+  });
+
+  it("renders decoration when image and iconName are set", () => {
+    const { container } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" iconName="quote" />,
+    );
+    expect(container.getElementsByClassName("avatar__icon").length).toBe(1);
+  });
+
+  it("passes custom classes through", () => {
+    const { getByTestId } = render(
+      <Avatar
+        src="/avatar.png"
+        alt="Person avatar"
+        data-testid="test-id"
+        className="surface-secondary"
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+  });
+});

package/src/components/Carousel/Carousel.static.ts

@@ -177,6 +177,19 @@ export default class Carousel {
   }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    const scrollbarEl = element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    const configScrollbar =
+      typeof config?.scrollbar === "object" && config.scrollbar !== null
+        ? config.scrollbar
+        : undefined;
+    const defaultScrollbar =
+      typeof defaultConfig.scrollbar === "object" &&
+      defaultConfig.scrollbar !== null
+        ? defaultConfig.scrollbar
+        : undefined;
+
     this.element = element;
     this.config = {
       ...defaultConfig,
@@ -184,9 +197,10 @@ export default class Carousel {
       scrollbar: {
         ...((defaultConfig.scrollbar ?? {}) as object),
         ...((config?.scrollbar ?? {}) as object),
-        el: this.element.querySelector(
-          SELECTOR_SCROLLBAR,
-        ) as HTMLElement | null,
+        el: scrollbarEl,
+        enabled: scrollbarEl
+          ? (configScrollbar?.enabled ?? defaultScrollbar?.enabled)
+          : false,
       },
     };
 

package/src/components/Carousel/Carousel.tsx

@@ -3,11 +3,13 @@
 import cx from "classnames";
 import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
 import { useStatic } from "@/utils/hooks";
-import { Icon } from "../Icon";
+import { Controls } from "../Controls";
 import CarouselStatic from "./Carousel.static";
 import { CarouselItem } from "./CarouselItem";
 import {
+  CLASS_CONTROLS,
   CLASS_DOTS,
+  CLASS_NAVIGATION,
   CLASS_NEXT,
   CLASS_PREV,
   CLASS_ROOT,
@@ -72,9 +74,11 @@ const Carousel = <T,>({
   });
 
   const elementClasses = {
+    navigation: cx(CLASS_NAVIGATION),
+    controls: cx(CLASS_CONTROLS),
     prev: cx(CLASS_PREV),
     next: cx(CLASS_NEXT),
-    dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
+    dots: cx(CLASS_DOTS),
   };
 
   const customSwiperOptions = showScrollbar
@@ -100,31 +104,31 @@ const Carousel = <T,>({
         <div className={CLASS_VIEWPORT}>
           <div className={CLASS_TRACK}>{carouselItems}</div>
         </div>
-        {showScrollbar ? null : (
-          <>
-            <button
-              type="button"
-              aria-label="Naspäť"
-              className={elementClasses.prev}
-            >
-              <Icon size="medium" name="chevron-left" />
-            </button>
-            <button
-              type="button"
-              aria-label="Ďalej"
-              className={elementClasses.next}
-            >
-              <Icon size="medium" name="chevron-right" />
-            </button>
-          </>
-        )}
       </div>
 
-      {!showScrollbar && <div role="tablist" className={elementClasses.dots} />}
+      {!showScrollbar && (
+        <div className={elementClasses.navigation}>
+          <div role="tablist" className={elementClasses.dots} />
+          <div className={elementClasses.controls}>
+            <Controls
+              className={elementClasses.prev}
+              icon="chevron-left"
+              aria-label="Naspäť"
+            />
+            <Controls
+              className={elementClasses.next}
+              icon="chevron-right"
+              aria-label="Ďalej"
+            />
+          </div>
+        </div>
+      )}
 
-      <div className={cx(CLASS_SCROLLBAR, !showScrollbar && "hide-md")}>
-        <div className={CLASS_SCROLLBAR_DRAG} />
-      </div>
+      {showScrollbar && (
+        <div className={CLASS_SCROLLBAR}>
+          <div className={CLASS_SCROLLBAR_DRAG} />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/Carousel/constants.ts

@@ -9,6 +9,8 @@ export const CLASS_SLIDE_PREV = `${CLASS_ROOT}__slide-prev`;
 export const CLASS_PREV = `${CLASS_ROOT}__prev`;
 export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
+export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
+export const CLASS_CONTROLS = `${CLASS_ROOT}__controls`;
 export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;

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

@@ -6,11 +6,13 @@
 $space: space.get();
 
 $dot-layout: (
-  width: space.get("medium"),
-  height: space.get("medium"),
-  margin: space.get("small"),
+  width: convert.to-rem(10px),
+  height: convert.to-rem(10px),
+  margin: convert.to-rem(8px),
 );
 
+$navigation-gap: convert.to-rem(16px);
+
 $dot: (
   default: var(--color-icon-default),
   hover: var(--color-icon-brand),
@@ -23,8 +25,3 @@ $breakout-buttons-breakpoints: (
   (1340px, 1379px),
   (1460px)
 );
-
-$viewport-horizontal-spacing: (
-  // button dimension + space - slide padding,
-  "md": convert.to-rem(50px)
-);