@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.20

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

@@ -25,13 +25,14 @@ import { Section } from "../";
  * - Screen reader compatibility
  *
  * 🎨 FUNCTIONAL BEHAVIOR
- * - Correct application of CSS classes (section, bg-*, section--*)
- * - All colors: white (default), gray, black, orange
+ * - Correct application of CSS classes (section, section--*)
+ * - All colors: background-primary (default), background-secondary, background-contrast, background-accent, etc.
  * - All spacing variants: default, small, xsmall
  * - Multiple props combinations
  * - Custom tag rendering (section, article, main, aside, header, footer)
  * - Passing through additional props (id, role, aria-*)
  * - Container integration and structure
+ * - Text inverse functionality for background-contrast
  *
  * 📝 CONTENT RENDERING
  * - Text children rendering through Container
@@ -72,7 +73,7 @@ describe("Section Conformance Tests", () => {
     it("is valid HTML with all props", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           tag="section"
           className="test-class"
@@ -121,7 +122,7 @@ describe("Section Conformance Tests", () => {
 
     it("is accessible with complex content", async () => {
       const { container } = render(
-        <Section color="gray" spacing="small">
+        <Section color="background-secondary" spacing="small">
           <header>
             <h1>Page Title</h1>
             <nav aria-label="Main navigation">
@@ -194,14 +195,15 @@ describe("Section Conformance Tests", () => {
       const { container } = render(<Section data-testid="test-section" />);
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).not.toHaveClass("background-primary");
     });
 
     it("applies color classes correctly", () => {
       const colors = [
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -210,10 +212,19 @@ describe("Section Conformance Tests", () => {
           <Section color={color} data-testid="test-section" />,
         );
         const section = container.querySelector('[data-testid="test-section"]');
-        expect(section).toHaveClass(`bg-${color}`);
+        expect(section).toHaveClass(color);
       });
     });
 
+    it("applies background-contrast with text-inverse correctly", () => {
+      const { container } = render(
+        <Section color="background-contrast" data-testid="test-section" />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
+    });
+
     it("applies spacing classes correctly", () => {
       const spacings = ["default", "small", "xsmall"];
       spacings.forEach((spacing) => {
@@ -228,7 +239,7 @@ describe("Section Conformance Tests", () => {
     it("combines multiple props correctly", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
           data-testid="test-section"
@@ -236,7 +247,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
       expect(section).toHaveClass("custom-class");
     });
@@ -400,7 +411,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

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

@@ -38,12 +38,13 @@ import { Section } from "../Section";
  * - Multiple children
  *
  * 🎯 SPECIFIC FUNCTIONALITY
- * - Color prop behavior (white, gray, black, orange)
+ * - Color prop behavior (background-secondary, background-contrast, background-accent, etc.)
  * - Spacing prop behavior (default, small, xsmall)
  * - Tag prop behavior (div, section, article, etc.)
  * - ClassName prop merging
  * - Additional props spreading
  * - Container integration
+ * - Text inverse functionality for background-contrast
  *
  * ⚡ PERFORMANCE & OPTIMIZATION
  * - Component re-rendering
@@ -102,7 +103,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
         />,
@@ -156,72 +157,86 @@ describe("Section Component Unit Tests", () => {
   });
 
   describe("Color Prop Behavior", () => {
-    it("applies no background class for white color (default)", () => {
+    it("applies correct color class for background-secondary color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="white" />,
+        <Section data-testid="test-section" color="background-secondary" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).toHaveClass("background-secondary");
     });
 
-    it("applies correct background class for gray color", () => {
+    it("applies correct color class and text-inverse for background-contrast color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" />,
+        <Section data-testid="test-section" color="background-contrast" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
     });
 
-    it("applies correct background class for black color", () => {
+    it("applies correct color class for background-accent color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="black" />,
+        <Section data-testid="test-section" color="background-accent" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-accent");
     });
 
-    it("applies correct background class for orange color", () => {
+    it("applies correct color class for background-accent1-blog color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="orange" />,
+        <Section data-testid="test-section" color="background-accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent1-blog");
     });
 
-    it("applies correct background class for accent1-blog color", () => {
+    it("applies correct color class for background-accent2-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="background-accent2-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("background-accent2-blog");
+    });
+
+    it("applies correct color class for accent1-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent1-blog");
+      expect(section).toHaveClass("accent1-blog");
     });
 
-    it("applies correct background class for accent2-blog color", () => {
+    it("applies correct color class for accent2-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent2-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent2-blog");
+      expect(section).toHaveClass("accent2-blog");
     });
 
     it("handles all color variants correctly", () => {
       const colors = [
-        "white",
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-contrast",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
+        "background-none",
+        "surface-subtle",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -234,10 +249,11 @@ describe("Section Component Unit Tests", () => {
 
         expect(section).toHaveClass("section");
 
-        if (color === "white") {
-          expect(section).not.toHaveClass("bg-white");
+        if (color === "background-contrast") {
+          expect(section).toHaveClass("background-contrast");
+          expect(section).toHaveClass("text-inverse");
         } else {
-          expect(section).toHaveClass(`bg-${color}`);
+          expect(section).toHaveClass(color);
         }
       });
     });
@@ -500,12 +516,16 @@ describe("Section Component Unit Tests", () => {
   describe("Props Combinations", () => {
     it("combines color and spacing props correctly", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" spacing="small" />,
+        <Section
+          data-testid="test-section"
+          color="background-secondary"
+          spacing="small"
+        />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
     });
 
@@ -513,7 +533,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="black"
+          color="background-contrast"
           spacing="xsmall"
           tag="article"
         />,
@@ -522,7 +542,8 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("article");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
       expect(section).toHaveClass("section--xsmall");
     });
 
@@ -530,7 +551,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="orange"
+          color="background-accent"
           spacing="default"
           tag="main"
           className="custom-class"
@@ -542,7 +563,7 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("main");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent");
       expect(section).toHaveClass("section--default");
       expect(section).toHaveClass("custom-class");
       expect(screen.getByText("Content")).toBeInTheDocument();
@@ -616,7 +637,7 @@ describe("Section Component Unit Tests", () => {
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

package/src/components/Stepbar/Stepbar.tsx

@@ -19,8 +19,6 @@ export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
   showTitlesFrom?: ShowTitlesFrom;
   /** Array of step objects */
   steps: StepbarStep[];
-  /** Visual variant of the stepbar */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "stepbar";
@@ -29,7 +27,6 @@ const Stepbar: React.FC<StepbarProps> = ({
   showTitlesFrom,
   steps,
   label = "krok",
-  colorScheme,
   className,
   ...other
 }) => {
@@ -68,8 +65,6 @@ const Stepbar: React.FC<StepbarProps> = ({
       className={cx(
         CLASS_ROOT,
         {
-          "is-dark": colorScheme === "dark",
-          "is-light": colorScheme === "light",
           [`${CLASS_ROOT}--wide-${showTitlesFrom}`]: showTitlesFrom,
         },
         className,

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

@@ -12,7 +12,7 @@
   flex-wrap: nowrap;
   list-style-type: none;
   padding-left: 0;
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   max-width: none;
   font-weight: bold;
 }

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. */
@@ -30,8 +32,6 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /** rows to print out in the table. */
   rows: TableRow[];
   className?: string;
-  /** Sets color scheme */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "table";
@@ -43,9 +43,9 @@ const Table: React.FC<TableProps> = ({
   rows,
   footers,
   isCompact,
+  isResponsive,
   isStriped,
   isScrollable,
-  colorScheme,
   expandableRowsCaptions = {
     header: "Rozšíriteľný",
     emptyRow: "Nerozšíriteľný riadok",
@@ -60,8 +60,7 @@ const Table: React.FC<TableProps> = ({
     {
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
+      [`${CLASS_ROOT}--responsive`]: isResponsive,
     },
     className,
   );
@@ -94,6 +93,7 @@ const Table: React.FC<TableProps> = ({
     footers,
     rows: customRows,
     expandableRows,
+    isResponsive,
   };
 
   const table = (
@@ -108,7 +108,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

@@ -5,13 +5,12 @@
 
 @mixin base {
   width: 100%;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   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/tests/Table.conformance.test.js

@@ -64,7 +64,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "attribute-boolean-style": "off", "valid-id": "off" },
+    rules: {
+      "attribute-boolean-style": "off",
+      "valid-id": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

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

@@ -51,37 +51,6 @@ describe("rendering Table", () => {
       expect(getByTestId("test-id").tagName).toBe("TABLE");
       expect(getByTestId("test-id")).toHaveClass("table");
     });
-    it("applies dark colorScheme class", () => {
-      const { getByTestId } = render(
-        <Table
-          data-testid="test-id"
-          headers={[]}
-          rows={[]}
-          colorScheme="dark"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-    it("applies light colorScheme class", () => {
-      const { getByTestId } = render(
-        <Table
-          data-testid="test-id"
-          headers={[]}
-          rows={[]}
-          colorScheme="light"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-    });
-    it("does not apply colorScheme class by default", () => {
-      const { getByTestId } = render(
-        <Table data-testid="test-id" headers={[]} rows={[]} />,
-      );
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
   });
   describe("testing headers", () => {
     it("renders headers", () => {

package/src/components/Table/types.ts

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

package/src/components/Tabs/Tabs.tsx

@@ -17,8 +17,6 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   activeTabIndex?: number;
   /** Additional classes for tabs header. */
   classesTabNav?: string;
-  /** Color theme for the tabs */
-  colorScheme?: "dark" | "light";
   /** All tabs have equal width inside a full-width container */
   hasEqualTabWidth?: boolean;
   /** Fullwidth container */
@@ -40,7 +38,6 @@ const Tabs: React.FC<TabsProps> = ({
   hasEqualTabWidth,
   variant = "standard",
   children,
-  colorScheme,
   ...other
 }) => {
   const CLASS_TABNAV = "tab-list";
@@ -50,8 +47,6 @@ const Tabs: React.FC<TabsProps> = ({
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
     { [`${CLASS_TABNAV}--light`]: variant === "light" },
-    { "is-dark": colorScheme === "dark" },
-    { "is-light": colorScheme === "light" },
     classesTabNav,
     className,
   );

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

@@ -8,7 +8,7 @@
   display: flex;
   overflow-x: auto;
   overflow-y: visible;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   align-items: stretch;
 
   @include generate.css-map($spacing);

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

@@ -99,14 +99,6 @@ describe("rendering Tabs", () => {
         }
       }
     });
-    it("has class is-dark when colorScheme is set to dark", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="dark" />);
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-    });
-    it("has class is-light when colorScheme is set to light", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="light" />);
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-    });
   });
   describe("checking fireEvents", () => {
     it("click in disabled tab button doesnt cause change", () => {