@orangesk/orange-design-system 2.0.0-beta.48 → 2.0.0-beta.49

package/build/search-index.json

@@ -13,7 +13,7 @@
   },
   {
     "href": "/components/alert",
-    "content": "Alert If you need to notify user about something specific, or if you want to explain something shortly, this is the element to do it. Variants Title Title and Description Title and Buttons Prihlásiť sa, Skryť, ]} /> Title, Description and Buttons Prihlásiť sa} /> Types There are four types of alert messages you can choose from. - Info - Success - Warning - Danger Info info is default type of alert. It's used for simple, not most important, messages for the user if something happend. }> Success Best feeling is when something went well. You can notify the user about successful things with success type. Warning If you need to warn user about anything use warning type. Danger If warning is not enought and you need to show error message, use danger type. Custom title renderer Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the renderTitle prop. ( <h3 className=\"alerttitle mb-medium\">{props.title}</h3> )} description={ } actionButtons={Prihlásiť sa} /> Full width If you need full width Alert, you can use isFullWidth prop. Max width on text remamains the same, because of readability. API React Props | Prop | Type | Default | Description | | --------------- | ---------------------------------------------- | -------- | ---------------------------------------------------------- | | title | string | - | Required.** Main text message | | description | React.ReactNode | - | Description of the alert | | type | \"info\" \\| \"success\" \\| \"warning\" \\| \"danger\" | \"info\" | Type of alert, sets icon and color | | headingLevel | number | 3 | Level of the heading in heading hierarchy (1-6) | | isFullWidth | boolean | - | Sets Alert to full width | | actionButtons | React.ReactNode | - | Additional action buttons to add interactivity | | renderTitle | (props: AlertProps) => React.ReactNode | - | Custom title renderer. Passes props as function parameter. | | onClose | () => void | - | Callback function when close button is clicked | | className | string | - | Additional CSS classes |"
+    "content": "Alert If you need to notify user about something specific, or if you want to explain something shortly, this is the element to do it. Variants Title Title and Description Title and Buttons Prihlásiť sa, Skryť, ]} /> Title, Description and Links Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením. </p> } actionButtons={[ Link Base , Link Base , ]} /> Types There are four types of alert messages you can choose from. - Info - Success - Warning - Danger Info info is default type of alert. It's used for simple, not most important, messages for the user if something happend. }> Success Best feeling is when something went well. You can notify the user about successful things with success type. Warning If you need to warn user about anything use warning type. Danger If warning is not enought and you need to show error message, use danger type. Custom title renderer Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the renderTitle prop. ( <h3 className=\"alerttitle mb-medium\">{props.title}</h3> )} description={ } actionButtons={Prihlásiť sa} /> Full width If you need full width Alert, you can use isFullWidth prop. Max width on text remamains the same, because of readability. API React Props | Prop | Type | Default | Description | | --------------- | ---------------------------------------------- | -------- | ---------------------------------------------------------- | | title | string | - | Required.** Main text message | | description | React.ReactNode | - | Description of the alert | | type | \"info\" \\| \"success\" \\| \"warning\" \\| \"danger\" | \"info\" | Type of alert, sets icon and color | | headingLevel | number | 3 | Level of the heading in heading hierarchy (1-6) | | isFullWidth | boolean | - | Sets Alert to full width | | actionButtons | React.ReactNode | - | Additional buttons or links to add interactivity | | renderTitle | (props: AlertProps) => React.ReactNode | - | Custom title renderer. Passes props as function parameter. | | onClose | () => void | - | Callback function when close button is clicked | | className | string | - | Additional CSS classes |"
   },
   {
     "href": "/components/anchor-navigation",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.48",
+  "version": "2.0.0-beta.49",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -63,7 +63,7 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.5",
+    "dompurify": "^3.4.6",
     "html-react-parser": "6.1.2",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
@@ -86,10 +86,10 @@
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@biomejs/biome": "latest",
     "@rollup/plugin-alias": "6.0.0",
     "@rollup/plugin-babel": "7.0.0",
@@ -116,7 +116,7 @@
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.5",
     "glob": "13.0.6",
-    "html-validate": "11.2.0",
+    "html-validate": "11.4.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "29.1.1",

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

@@ -6,7 +6,7 @@ $card-base: (
   background-color: var(--color-surface-primary),
   margin-bottom: space.get("large"),
   border-radius: convert.to-rem(10px),
-  border: 1px solid var(--color-border-strong),
+  border: 1px solid var(--color-border-subtle),
   overflow: hidden,
 );
 

package/src/components/CarouselHero/CarouselHero.static.ts

@@ -128,6 +128,13 @@ export default class CarouselHero {
       ? parseInt(this.element.getAttribute("data-interval")!) || 0
       : 0;
 
+    if (typeof this.config.a11y === "object" && this.config.a11y !== null) {
+      this.config.a11y = {
+        ...this.config.a11y,
+        slideRole: this.tabs.length > 0 ? "tabpanel" : "group",
+      };
+    }
+
     if (this.element.hasAttribute("data-swiper-options")) {
       try {
         const customOptions = JSON.parse(

package/src/components/CarouselHero/CarouselHero.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useId } from "react";
 import { useStatic } from "@/utils/hooks";
 import { Container } from "../Container";
 import { Controls } from "../Controls";
@@ -21,11 +21,35 @@ import {
   CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
 
+function getCarouselHeroSlides(children: ReactNode): React.ReactElement[] {
+  const slides: React.ReactElement[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+
+    if (child.type === React.Fragment) {
+      slides.push(
+        ...getCarouselHeroSlides(
+          (child.props as { children?: ReactNode }).children,
+        ),
+      );
+      return;
+    }
+
+    slides.push(child);
+  });
+
+  return slides;
+}
+
 interface TabItem {
   label: string;
+  id?: string;
   [key: string]: any;
 }
 
+type CarouselHeroSlideElement = React.ReactElement<Record<string, any>>;
+
 interface CarouselHeroProps {
   className?: string;
   swiperOptions?: Record<string, any>;
@@ -48,6 +72,24 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
   const [carouselRef] = useStatic(CarouselHeroStatic);
 
   const classes = cx(CLASS_ROOT, className);
+  const generatedId = `carousel-hero-${useId().replace(/:/g, "-")}`;
+  const carouselId =
+    typeof other.id === "string" && other.id ? other.id : generatedId;
+  const slideItems = getCarouselHeroSlides(
+    children,
+  ) as CarouselHeroSlideElement[];
+  const hasTabs = tabs.length > 0 && slideItems.length > 0;
+  const getTabId = (tab: TabItem | undefined, index: number) =>
+    typeof tab?.id === "string" && tab.id
+      ? tab.id
+      : `${carouselId}-tab-${index}`;
+  const getPanelId = (
+    slide: CarouselHeroSlideElement | undefined,
+    index: number,
+  ) =>
+    slide && typeof slide.props.id === "string" && slide.props.id
+      ? slide.props.id
+      : `${carouselId}-panel-${index}`;
 
   const elementClasses = {
     prev: CLASS_PREV,
@@ -75,6 +117,20 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
       !!(interval && interval >= 1000));
 
   const playPauseIcon = "pause";
+  const tabSlides = slideItems.map((slide, index) => {
+    if (!hasTabs) {
+      return slide;
+    }
+
+    const tabId = getTabId(tabs[index], index);
+    const panelId = getPanelId(slide, index);
+
+    return React.cloneElement(slide as CarouselHeroSlideElement, {
+      id: panelId,
+      role: "tabpanel",
+      "aria-labelledby": tabId,
+    });
+  });
 
   return (
     <div
@@ -91,21 +147,23 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
     >
       <div className={CLASS_VIEWPORT_WRAPPER}>
         <div className={CLASS_VIEWPORT}>
-          <div className={CLASS_TRACK}>{children}</div>
+          <div className={CLASS_TRACK}>{tabSlides}</div>
         </div>
       </div>
 
       {/* Controls container */}
       <Container className="d-flex">
         {/* Tab navigation */}
-        {tabs.length > 0 && (
+        {hasTabs && (
           <div className={elementClasses.tabs} role="tablist">
             {tabs.map((tab, index) => (
               <button
+                id={getTabId(tab, index)}
                 key={index}
                 type="button"
                 className={elementClasses.tab}
                 role="tab"
+                aria-controls={getPanelId(slideItems[index], index)}
                 aria-selected={index === 0 ? "true" : "false"}
                 tabIndex={index === 0 ? 0 : -1}
               >

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

@@ -156,13 +156,20 @@ describe("rendering CarouselHero", () => {
 
     it("sets proper ARIA attributes on tabs", () => {
       const { container } = render(
-        <CarouselHero tabs={tabs}>{children}</CarouselHero>,
+        <CarouselHero id="test-carousel" tabs={tabs}>
+          {children}
+        </CarouselHero>,
       );
 
       const tabButtons = container.querySelectorAll(".carousel-hero__tab");
 
       // First tab should be active
       expect(tabButtons[0]).toHaveAttribute("role", "tab");
+      expect(tabButtons[0]).toHaveAttribute("id", "test-carousel-tab-0");
+      expect(tabButtons[0]).toHaveAttribute(
+        "aria-controls",
+        "test-carousel-panel-0",
+      );
       expect(tabButtons[0]).toHaveAttribute("aria-selected", "true");
       expect(tabButtons[0]).toHaveAttribute("tabIndex", "0");
 
@@ -173,6 +180,29 @@ describe("rendering CarouselHero", () => {
       expect(tabButtons[2]).toHaveAttribute("tabIndex", "-1");
     });
 
+    it("links tabs to corresponding tabpanels", () => {
+      const { container } = render(
+        <CarouselHero id="test-carousel" tabs={tabs}>
+          {children}
+        </CarouselHero>,
+      );
+
+      const slides = container.getElementsByClassName("carousel-hero__slide");
+
+      expect(slides[0]).toHaveAttribute("role", "tabpanel");
+      expect(slides[0]).toHaveAttribute("id", "test-carousel-panel-0");
+      expect(slides[0]).toHaveAttribute(
+        "aria-labelledby",
+        "test-carousel-tab-0",
+      );
+      expect(slides[1]).toHaveAttribute("role", "tabpanel");
+      expect(slides[1]).toHaveAttribute("id", "test-carousel-panel-1");
+      expect(slides[1]).toHaveAttribute(
+        "aria-labelledby",
+        "test-carousel-tab-1",
+      );
+    });
+
     it("shows play/pause button when autoplay is enabled and interval is provided", () => {
       const { container } = render(
         <CarouselHero enableAutoplay interval={3000}>

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

@@ -27,9 +27,21 @@
     margin-bottom: 0;
   }
 
+  > .icon,
+  > svg {
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
+  }
+
   @include breakpoint.get("md") {
     flex-direction: column;
     padding: space.get("large");
+
+    > .icon,
+    > svg {
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
+    }
   }
 }