@orangesk/orange-design-system 2.0.0-beta.10 → 2.0.0-beta.12

package/src/components/Pill/tests/Pill.unit.test.js

@@ -35,28 +35,78 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has default black styling without modifier", () => {
+    it("supports all available sizes", () => {
+      const sizes = ["small", "medium", "large", "xlarge", "xxlarge"];
+
+      sizes.forEach((size) => {
+        const { getByTestId } = render(
+          <Pill size={size} data-testid={`test-${size}`}>
+            {size}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${size}`)).toHaveClass(`pill--${size}`);
+      });
+    });
+
+    it("has default styling without color modifier", () => {
       const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
       expect(getByTestId("test-id")).toHaveClass("pill");
-      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-secondary");
+    });
+
+    it("has surface-secondary class when color is surface-secondary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-secondary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+    });
+
+    it("has surface-tertiary class when color is surface-tertiary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-tertiary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-tertiary");
+    });
+
+    it("has surface-subtle class when color is surface-subtle", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-subtle" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-subtle");
+    });
+
+    it("has surface-moderate class when color is surface-moderate", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-moderate" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-moderate");
     });
 
-    it("has white class when color is white", () => {
+    it("has surface-contrast class when color is surface-contrast", () => {
       const { getByTestId } = render(
-        <Pill color="white" data-testid="test-id">
+        <Pill color="surface-contrast" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--white");
+      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
     });
 
-    it("has gray class when color is gray", () => {
+    it("has surface-accent class when color is surface-accent", () => {
       const { getByTestId } = render(
-        <Pill color="gray" data-testid="test-id">
+        <Pill color="surface-accent" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--gray");
+      expect(getByTestId("test-id")).toHaveClass("surface-accent");
     });
 
     it("has transparent class when color is transparent", () => {
@@ -65,11 +115,19 @@ describe("rendering Pill", () => {
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--transparent");
+      expect(getByTestId("test-id")).toHaveClass("transparent");
     });
 
     it("supports all available colors", () => {
-      const colors = ["white", "gray", "transparent"];
+      const colors = [
+        "surface-secondary",
+        "surface-tertiary",
+        "surface-subtle",
+        "surface-moderate",
+        "surface-contrast",
+        "surface-accent",
+        "transparent",
+      ];
 
       colors.forEach((color) => {
         const { getByTestId } = render(
@@ -78,7 +136,7 @@ describe("rendering Pill", () => {
           </Pill>,
         );
 
-        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
+        expect(getByTestId(`test-${color}`)).toHaveClass(color);
       });
     });
 

package/src/components/PromoBanner/PromoBanner.tsx

@@ -14,7 +14,7 @@ interface PromoBannerProps {
   children?: React.ReactNode;
   itemClassName?: string;
   imageClassName?: string;
-  variant?: "vertical";
+  variant?: "vertical" | "reverse";
 }
 
 const CLASS_ROOT = "promo-banner";
@@ -40,6 +40,23 @@ export const PromoBanner = ({
   );
   return (
     <Grid className={classes}>
+      {variant === "reverse" && image && (
+        <GridCol
+          size={{ xs: 12, md: 6 }}
+          className={cx(
+            `${CLASS_ROOT}__image`,
+            "align-center align-md-left",
+            imageClassName,
+          )}
+        >
+          <Image
+            src={image}
+            alt="Obrázok"
+            className={cx("mb-none", { fullwidth: imageFullWidth })}
+          />
+        </GridCol>
+      )}
+
       <GridCol
         size={
           variant === "vertical"
@@ -58,7 +75,7 @@ export const PromoBanner = ({
         {children}
       </GridCol>
 
-      {image && (
+      {image && variant !== "reverse" && (
         <GridCol
           size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
           className={cx(

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

@@ -12,7 +12,7 @@
 
   @include breakpoint.get("md", "down") {
     padding-top: space.get("large");
-    padding-bottom: space.get("medium");
+    padding-bottom: space.get("large");
   }
 
   display: flex;

package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js

@@ -178,6 +178,16 @@ describe("PromoBanner Component Conformance Tests", () => {
       );
       expect(container).toHTMLValidate();
     });
+
+    it("is valid HTML with reverse variant", () => {
+      const { container } = render(
+        <PromoBanner variant="reverse" image="https://example.com/reverse.jpg">
+          <h2>Reverse Layout</h2>
+          <p>Content with reverse layout</p>
+        </PromoBanner>,
+      );
+      expect(container).toHTMLValidate();
+    });
   });
 
   describe("Accessibility (A11y)", () => {
@@ -307,6 +317,17 @@ describe("PromoBanner Component Conformance Tests", () => {
       );
       expect(await axe(container)).toHaveNoViolations();
     });
+
+    it("is accessible with reverse variant", async () => {
+      const { container } = render(
+        <PromoBanner variant="reverse" image="https://example.com/test.jpg">
+          <h2>Accessible Reverse Layout</h2>
+          <p>This content is accessible in reverse layout</p>
+          <button type="button">Action Button</button>
+        </PromoBanner>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
   });
 
   describe("Functional Behavior", () => {
@@ -343,6 +364,11 @@ describe("PromoBanner Component Conformance Tests", () => {
       const { container: verticalContainer } = render(
         <PromoBanner variant="vertical">Vertical Content</PromoBanner>,
       );
+      const { container: reverseContainer } = render(
+        <PromoBanner variant="reverse" image="test.jpg">
+          Reverse Content
+        </PromoBanner>,
+      );
 
       const horizontalItem = horizontalContainer.querySelector(
         ".promo-banner__item",
@@ -350,6 +376,7 @@ describe("PromoBanner Component Conformance Tests", () => {
       const verticalItem = verticalContainer.querySelector(
         ".promo-banner__item",
       );
+      const reverseItem = reverseContainer.querySelector(".promo-banner__item");
 
       expect(horizontalItem).not.toHaveClass(
         "align-items-center",
@@ -361,6 +388,11 @@ describe("PromoBanner Component Conformance Tests", () => {
         "align-center",
         "align-self-center",
       );
+      expect(reverseItem).not.toHaveClass(
+        "align-items-center",
+        "align-center",
+        "align-self-center",
+      );
     });
 
     it("applies image-related classes correctly", () => {

package/src/components/PromoBanner/tests/PromoBanner.unit.test.js

@@ -217,6 +217,58 @@ describe("PromoBanner", () => {
           expect(imageElement).toHaveClass("align-center");
         });
       });
+
+      describe("reverse variant", () => {
+        it("applies reverse variant column layout", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          expect(contentCol).toHaveClass("grid__col");
+          expect(imageCol).toHaveClass("grid__col");
+        });
+
+        it("renders image before content in DOM order", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const grid = document.querySelector(".grid");
+          const children = Array.from(grid.children);
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+
+          expect(children.indexOf(imageCol)).toBeLessThan(
+            children.indexOf(contentCol),
+          );
+        });
+
+        it("does not apply vertical-specific classes", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).not.toHaveClass(
+            "align-items-center",
+            "align-center",
+            "align-self-center",
+          );
+        });
+      });
     });
 
     describe("image", () => {

package/src/components/Table/Row.tsx

@@ -14,8 +14,9 @@ interface RowProps {
 }
 
 const Row = ({ row }: RowProps) => {
-  const { headers, expandableRows } = React.useContext(TableContext);
-  return headers.map(({ key, cellProps }, index, array) => {
+  const { headers, expandableRows, isResponsive } =
+    React.useContext(TableContext);
+  return headers.map(({ key, label, cellProps }, index, array) => {
     const cell = row[key];
     const isObject = typeof cell === "object" && cell !== null;
     const value = isObject && "value" in cell ? cell.value : cell;
@@ -26,9 +27,14 @@ const Row = ({ row }: RowProps) => {
             .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
         : {};
     const rl = row?.expand?.length || 0;
+
     return (
       <React.Fragment key={key}>
-        <Cell {...cellProps} {...props}>
+        <Cell
+          {...cellProps}
+          {...props}
+          {...(isResponsive && { "data-label": label })}
+        >
           {value ? (value as React.ReactNode) : ""}
         </Cell>
         {index === array.length - 1 &&

package/src/components/Table/Table.tsx

@@ -23,6 +23,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   headers: TableHeader[];
   /** Compact table only takes spaced needed to display its content */
   isCompact?: boolean;
+  /** Enable responsive card layout below md breakpoint for better accessibility */
+  isResponsive?: boolean;
   /** If table has horizontal scrollbar */
   isScrollable?: boolean;
   /** Different colors for even and odd rows. */
@@ -43,6 +45,7 @@ const Table: React.FC<TableProps> = ({
   rows,
   footers,
   isCompact,
+  isResponsive,
   isStriped,
   isScrollable,
   colorScheme,
@@ -60,6 +63,7 @@ const Table: React.FC<TableProps> = ({
     {
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
+      [`${CLASS_ROOT}--responsive`]: isResponsive,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
     },
@@ -94,6 +98,7 @@ const Table: React.FC<TableProps> = ({
     footers,
     rows: customRows,
     expandableRows,
+    isResponsive,
   };
 
   const table = (
@@ -108,7 +113,12 @@ const Table: React.FC<TableProps> = ({
           />
         }
       >
-        <table ref={tableRef} className={classes} {...other}>
+        <table
+          ref={tableRef}
+          className={classes}
+          {...(isResponsive && { "data-table": "responsive" })}
+          {...other}
+        >
           {caption && (
             <caption {...(isScrollable && { id: captionId })}>
               {caption}

package/src/components/Table/TableContext.ts

@@ -6,6 +6,7 @@ import { TableContextType } from "./types";
 const TableContext = React.createContext<TableContextType>({
   headers: [],
   rows: [],
+  isResponsive: false,
 });
 
 export default TableContext;

package/src/components/Table/docsData.ts

@@ -208,3 +208,28 @@ export const fillRows: TableRow[] = [
     col2: "3",
   },
 ];
+
+export const responsiveHeaders: TableHeader[] = [
+  {
+    key: "account",
+    label: "Účel spracovania",
+  },
+  {
+    key: "legal",
+    label: "Právny základ a doba spracovania",
+  },
+];
+
+export const responsiveRows: TableRow[] = [
+  {
+    account: "Mesačný poplatok (bez Digitálnej odmeny)",
+    legal:
+      "Právny základ - Súhlas (čl. 6 ods. 1 písm. a) GDPR) a zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu.",
+  },
+  {
+    account:
+      "Online predaj tovarov a poskytovanie doplnkových a asistenčných služieb",
+    legal:
+      "Právny základ - Zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu a uplynutia záručnej doby na predaný tovar.",
+  },
+];

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

@@ -7,11 +7,10 @@
   width: 100%;
   margin-bottom: space.get();
   color: var(--color-text-default);
-  background-color: var(--color-background-primary);
 }
 
 @mixin cells {
-  padding: space.get("small") space.get("small") space.get("small") 0;
+  padding: space.get("medium");
   vertical-align: middle;
   font-size: inherit;
   line-height: inherit;
@@ -20,7 +19,7 @@
 @mixin header-cells {
   vertical-align: bottom;
   text-align: left;
-  border-bottom: config.$fat-border-size solid var(--color-border-strong);
+  border-bottom: config.$fat-border-size solid var(--color-border-contrast);
   font-weight: 700;
 }
 
@@ -38,7 +37,7 @@
 }
 
 @mixin rows-first-cell {
-  padding-left: space.get("small");
+  padding-left: 0;
 }
 
 @mixin body-sibling {
@@ -113,3 +112,40 @@
 @mixin compact {
   width: auto;
 }
+
+@mixin responsive-table {
+  thead {
+    display: none;
+  }
+
+  tbody,
+  tbody tr,
+  tbody td {
+    display: block;
+  }
+
+  tbody tr {
+    padding: space.get("small") 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  tbody td {
+    padding: space.get("medium") 0;
+    border-bottom: none;
+    text-align: left !important;
+
+    &:before {
+      content: attr(data-label);
+      display: block;
+      font-weight: 700;
+      margin-bottom: space.get("xsmall");
+    }
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}

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

@@ -47,6 +47,12 @@
       @include mixins.compact;
     }
 
+    &--responsive {
+      @include breakpoint.get("md", "down") {
+        @include mixins.responsive-table;
+      }
+    }
+
     @each $breakpoint in ("default", "sm", "md", "lg", "xl", "xxl") {
       @include breakpoint.get($breakpoint, "down") {
         &-scrollable#{generate.variant-name($breakpoint)} {

package/src/components/Table/types.ts

@@ -37,4 +37,5 @@ export interface TableContextType {
   rows: TableRow[];
   footers?: TableRow[];
   expandableRows?: ExpandableRows;
+  isResponsive?: boolean;
 }

package/src/components/Tile/CHANGELOG.md

@@ -2,11 +2,25 @@
 
 ## [Unreleased]
 
+### Breaking Changes
+
+- **Refactored color prop**: The `color` prop now uses global utility classes instead of component-specific color modifiers:
+  - Old: `color="white"` applied `.tile--white` class with custom CSS
+  - New: Uses global classes like `surface-primary`, `surface-secondary`, `background-contrast`, etc.
+  - Removed `"default"` and `"white"` color options
+  - Added support for: `"surface-primary"`, `"surface-secondary"`, `"surface-tertiary"`, `"surface-subtle"`, `"surface-moderate"`, `"surface-contrast"`, `"background-primary"`, `"background-secondary"`, `"background-contrast"`, `"background-accent"`
+
+### Migration Guide
+
+- Replace `color="white"` with `color="surface-primary"`
+- Replace any custom styling that relied on `.tile--white` with global surface utility classes
+- The new color system provides consistent styling across all components in the design system
+
 ### Changed
 
 - Update `Tile` component documentation and usage examples:
   - Expanded usage examples in `Tile.mdx` and `/app/components/tile/page.mdx` to demonstrate:
-    - New color options (including `black`)
+    - New color options using global utility classes
     - Background image and icon support
     - Alignment options with `hAlign` and `vAlign` props
     - Block link and action variants

package/src/components/Tile/Tile.tsx

@@ -5,7 +5,12 @@ import { Image } from "../Image";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
 
-export type TileColor = "default" | "white";
+export const tileColors = [
+  "surface-primary",
+  "surface-subtle",
+  "surface-contrast",
+] as const;
+export type TileColor = (typeof tileColors)[number];
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";
 
@@ -35,7 +40,7 @@ const Tile: React.FC<TileProps> = ({
   backgroundImage,
   vAlign,
   hAlign,
-  color = "default",
+  color,
   space,
   ...other
 }) => {
@@ -43,7 +48,10 @@ const Tile: React.FC<TileProps> = ({
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--${variant}`]: variant,
-      [`tile--${color}`]: color !== "default",
+      ...(color && color !== "surface-contrast" ? { [color]: true } : {}),
+      ...(color === "surface-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
     },
     className,
   );

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

@@ -1,17 +1,6 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 
-$colors: (
-  default: (
-    background-color: transparent,
-    color: var(--color-text-default),
-  ),
-  white: (
-    background-color: var(--color-surface-primary),
-    color: var(--color-text-default),
-  ),
-);
-
 $spacing: (
   xs: convert.to-rem(15px),
   md: space.get("large"),

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

@@ -1,5 +1,3 @@
-@use "../../../styles/tools/generate";
-@use "./config";
 @use "./mixins";
 
 @layer components {
@@ -10,8 +8,6 @@
       @include mixins.tile-image-aspect;
     }
 
-    @include generate.variants(config.$colors);
-
     &::after {
       content: "";
       position: absolute;

package/src/components/Tile/tests/Tile.unit.test.js

@@ -87,11 +87,18 @@ describe("rendering Tile", () => {
       expect(container.querySelector("img")).toHaveClass("tile__bg");
       expect(container.querySelector("img")).toHaveClass("test-class");
     });
-    it("has class tile--black when color is set to black", () => {
+    it("has surface class when color prop is set", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" color="black" />,
+        <Tile data-testid="test-id" color="surface-secondary" />,
       );
-      expect(getByTestId("test-id")).toHaveClass("tile--black");
+      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+    });
+    it("applies surface-contrast and text-inverse classes when color is surface-contrast", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" color="surface-contrast" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
     });
     it("applies hAlign and vAlign classes to body", () => {
       const { getByTestId } = render(

package/src/components/Tooltip/InfoTooltip.tsx

@@ -26,11 +26,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({
     )}
     {...other}
   >
-    <Icon
-      name="assistance"
-      color="info"
-      className={cx(`${CLASS_ROOT}__icon`, className)}
-    />
+    <Icon name="assistance" className={cx(`${CLASS_ROOT}__icon`, className)} />
     <span className="sr-only">Info</span>
   </Tooltip>
 );

package/src/styles/base/globals.scss

@@ -4,6 +4,8 @@
 
 // Consider to add more conditions for light and dark themes
 :root,
+:host,
+:host(.is-light),
 .is-light,
 .bg-white,
 #root.is-light,
@@ -16,6 +18,7 @@
   color: var(--color-text-default);
 }
 
+:host(.is-dark),
 .is-dark,
 .bg-black,
 #root.is-dark,
@@ -28,13 +31,15 @@
   color: var(--color-text-default);
 }
 
-:root {
+:root,
+:host {
   --extra-scroll-margin: 0;
   --header-height: 80px;
 }
 
 @media screen and (min-width: 992px) {
-  :root {
+  :root,
+  :host {
     --header-height: 120px;
   }
 }

package/src/styles/tokens/color.scss

@@ -112,7 +112,7 @@ $colors-dark: (
 $orange: map.get($colors-light, icon-brand);
 $orange-dark: map.get($colors-light, surface-tertiary);
 $black: map.get($colors-light, icon-default);
-$white: map.get($colors-light, icon-inverse);
+$white: map.get($colors-light, text-inverse);
 $blue: map.get($colors-light, fill-accent1);
 $green: map.get($colors-light, fill-accent2);
 $pink: map.get($colors-light, fill-accent3);