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

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

@@ -0,0 +1,48 @@
+@use "./config";
+@use "./mixins";
+@use "../../Megamenu/styles/mixins" as megamenuMixins;
+
+#{config.$class-root} {
+  @include mixins.globals;
+}
+
+#{config.$class-root},
+#{config.$class-root}.is-light {
+  @include megamenuMixins.light-vars;
+}
+
+#{config.$class-root}.is-dark {
+  @include megamenuMixins.dark-vars;
+}
+
+#{config.$class-root} {
+  @include mixins.base;
+
+  &__container {
+    @include mixins.container;
+  }
+
+  &__grid {
+    @include mixins.grid;
+  }
+
+  &__logo {
+    @include mixins.logo;
+  }
+
+  &__title {
+    @include mixins.title;
+  }
+
+  &__list {
+    @include mixins.list;
+
+    &--inline {
+      @include mixins.list-inline;
+    }
+  }
+
+  &__bottom {
+    @include mixins.bottom;
+  }
+}

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

@@ -1,13 +1,138 @@
+/**
+ * Conformance tests for the Footer component
+ *
+ * Covered use cases:
+ * 1. HTML Validity:
+ *    - Validates HTML structure compliance with default props
+ *    - Tests with custom data to ensure flexibility
+ *    - Tests with custom className
+ * 2. Accessibility (a11y):
+ *    - Tests with default props for comprehensive accessibility validation
+ *    - Tests logo accessibility with aria-label
+ *    - Tests navigation structure and semantic HTML
+ *    - Uses axe-core for comprehensive accessibility validation
+ * 3. Semantic HTML:
+ *    - Verifies correct HTML element rendering (footer, nav, headings)
+ *    - Tests proper heading hierarchy (h5 for section titles)
+ *    - Tests landmark roles (contentinfo for footer)
+ * 4. Theme Support:
+ *    - Tests light theme context
+ *    - Tests dark theme context
+ */
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe, toHaveNoViolations } from "jest-axe";
+import "jest-axe/extend-expect";
+
 import { Footer } from "../Footer";
 
-it("is valid html", () => {
-  const { container } = render(<Footer />);
-  expect(container).toHTMLValidate();
-});
+// Extension of expect for axe
+expect.extend(toHaveNoViolations);
+
+describe("Footer Conformance Tests", () => {
+  describe("HTML Validity", () => {
+    it("is valid html with default props", () => {
+      const { container } = render(<Footer />);
+      expect(container).toHTMLValidate();
+    });
+
+    it("is valid html with custom data", () => {
+      const customData = {
+        columns: [
+          {
+            title: "Test Column",
+            links: [
+              { label: "Test Link 1", url: "/test1" },
+              { label: "Test Link 2", url: "/test2" },
+            ],
+          },
+        ],
+        bottomLinks: [
+          { label: "Privacy", url: "/privacy" },
+          { label: "Terms", url: "/terms" },
+        ],
+        copyright: "© 2024 Test Company",
+      };
+      const { container } = render(<Footer data={customData} />);
+      expect(container).toHTMLValidate();
+    });
+
+    it("is valid html with custom className", () => {
+      const { container } = render(<Footer className="custom-footer-class" />);
+      expect(container).toHTMLValidate();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("is accessible with default props", async () => {
+      const { container } = render(<Footer />);
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with custom data", async () => {
+      const customData = {
+        columns: [
+          {
+            title: "Accessibility Test",
+            links: [
+              { label: "Link with Special Chars & Symbols", url: "/test" },
+              { label: "Another Link", url: "/another" },
+            ],
+          },
+        ],
+        bottomLinks: [{ label: "Legal Info", url: "/legal" }],
+        copyright: "© 2024 Accessible Company",
+      };
+      const { container } = render(<Footer data={customData} />);
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible in light theme context", async () => {
+      const { container } = render(
+        <div className="is-light">
+          <Footer />
+        </div>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible in dark theme context", async () => {
+      const { container } = render(
+        <div className="is-dark">
+          <Footer />
+        </div>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+
+  describe("Semantic HTML", () => {
+    it("uses proper semantic elements", () => {
+      const { getByRole, getAllByRole } = render(<Footer />);
+
+      // Footer should be a landmark
+      expect(getByRole("contentinfo")).toBeInTheDocument();
+
+      // Should have proper heading structure
+      const headings = getAllByRole("heading", { level: 5 });
+      expect(headings.length).toBe(4); // One for each column
+
+      // Should have navigation lists
+      const lists = getAllByRole("list");
+      expect(lists.length).toBeGreaterThanOrEqual(4); // At least 4 column lists
+    });
+
+    it("has proper link structure", () => {
+      const { getAllByRole } = render(<Footer />);
+
+      // Should have multiple links
+      const links = getAllByRole("link");
+      expect(links.length).toBeGreaterThan(20); // Many navigation links
 
-it("is accessible", async () => {
-  const { container } = render(<Footer />);
-  expect(await axe(container)).toHaveNoViolations();
+      // Logo link should exist
+      const logoLink = links.find(
+        (link) => link.getAttribute("aria-label") === "Odkaz na úvodnú stránku",
+      );
+      expect(logoLink).toBeInTheDocument();
+    });
+  });
 });

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

@@ -9,9 +9,9 @@ describe("Footer", () => {
     expect(getByRole("contentinfo")).toBeInTheDocument();
   });
 
-  it("renders logo image", () => {
-    const { getByAltText } = render(<Footer />);
-    expect(getByAltText("logo")).toBeInTheDocument();
+  it("renders logo with aria-label", () => {
+    const { getByLabelText } = render(<Footer />);
+    expect(getByLabelText("Odkaz na úvodnú stránku")).toBeInTheDocument();
   });
 
   it("renders all columns and links", () => {
@@ -36,9 +36,14 @@ describe("Footer", () => {
     expect(getByText(footerData.copyright)).toBeInTheDocument();
   });
 
-  it("applies inverse class when isInverse is true", () => {
-    const { container } = render(<Footer isInverse />);
-    expect(container.querySelector(".footer--inverse")).toBeInTheDocument();
+  it("applies is-dark class when container has dark theme", () => {
+    const { container } = render(
+      <div className="is-dark">
+        <Footer />
+      </div>,
+    );
+    expect(container.querySelector(".footer")).toBeInTheDocument();
+    expect(container.querySelector(".is-dark")).toBeInTheDocument();
   });
 
   it("accepts custom className", () => {
@@ -63,4 +68,64 @@ describe("Footer", () => {
     expect(getByText("Bottom")).toBeInTheDocument();
     expect(getByText("Custom Copyright")).toBeInTheDocument();
   });
+
+  it("renders proper HTML structure", () => {
+    const { container } = render(<Footer />);
+    const footer = container.querySelector("footer");
+    const container_ = footer?.querySelector(".footer__container");
+    const grid = container_?.querySelector(".footer__grid");
+    const bottom = container_?.querySelector(".footer__bottom");
+
+    expect(footer).toBeInTheDocument();
+    expect(container_).toBeInTheDocument();
+    expect(grid).toBeInTheDocument();
+    expect(bottom).toBeInTheDocument();
+  });
+
+  it("renders logo with correct href", () => {
+    const { container } = render(<Footer />);
+    const logoLink = container.querySelector(".footer__logo");
+    expect(logoLink).toBeInTheDocument();
+    expect(logoLink).toHaveAttribute("href", "/");
+  });
+
+  it("renders all links with correct hrefs", () => {
+    const { container } = render(<Footer />);
+    const firstColumnFirstLink = container.querySelector(
+      'a[href="/eshop/telefony"]',
+    );
+    expect(firstColumnFirstLink).toBeInTheDocument();
+  });
+
+  it("renders copyright with current year", () => {
+    const { getByText } = render(<Footer />);
+    const currentYear = new Date().getFullYear();
+    expect(getByText(`© 1997 - ${currentYear} Orange`)).toBeInTheDocument();
+  });
+
+  it("renders follow us section", () => {
+    const { getByText } = render(<Footer />);
+    expect(getByText("Sledujte nás")).toBeInTheDocument();
+  });
+
+  it("renders horizontal separators", () => {
+    const { container } = render(<Footer />);
+    const hrs = container.querySelectorAll("hr");
+    expect(hrs).toHaveLength(2);
+  });
+
+  it("has proper semantic structure", () => {
+    const { getByRole, getAllByRole } = render(<Footer />);
+
+    // Should have footer landmark
+    expect(getByRole("contentinfo")).toBeInTheDocument();
+
+    // Should have headings for each column
+    const headings = getAllByRole("heading", { level: 5 });
+    expect(headings).toHaveLength(4); // 4 columns
+
+    // Should have lists for navigation
+    const lists = getAllByRole("list");
+    expect(lists.length).toBeGreaterThanOrEqual(5); // 4 column lists + 1 bottom list
+  });
 });

package/src/components/Forms/DatePicker/styles/style.scss

@@ -165,7 +165,7 @@
     }
 
     &[aria-disabled="true"] {
-      color: color.$gray-600;
+      color: var(--color-text-disabled);
     }
   }
 

package/src/components/Forms/File/styles/mixins.scss

@@ -69,7 +69,7 @@
 }
 
 @mixin drag-drop-highlight {
-  outline: 2px dashed color.$orange-dark;
+  outline: 2px dashed var(--color-border-accent);
   outline-offset: 2px;
 }
 

package/src/components/Forms/InputStepper/styles/style.scss

@@ -141,70 +141,4 @@
       border-color: color.$orange-dark;
     }
   }
-
-  // .input-stepper--inverse,
-  // .bg-black .input-stepper {
-  //   .input-stepper__field {
-  //     background-color: color.$black;
-  //     color: color.$white;
-  //     border-color: color.$gray-700;
-
-  //     &:disabled {
-  //       color: color.$gray-700;
-  //       -webkit-text-fill-color: color.$gray-700 !important;
-  //     }
-  //   }
-
-  //   .input-stepper__button {
-  //     border-color: color.$gray-700;
-
-  //     &--minus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--minus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &:hover:not(:disabled) {
-  //       background-color: color.$white;
-  //       border-color: color.$white;
-  //     }
-
-  //     &:active:not(:disabled) {
-  //       background-color: color.$orange;
-  //       border-color: color.$orange;
-  //     }
-
-  //     &--minus:active:not(:disabled),
-  //     &--minus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:active:not(:disabled),
-  //     &--plus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-  //       }
-  //     }
-  //   }
-  // }
 }

package/src/components/Forms/RangeSlider/styles/mixins.scss

@@ -135,5 +135,5 @@
 }
 
 @mixin disabled-connect() {
-  background: color.$gray-600;
+  background: var(--color-surface-moderate);
 }

package/src/components/Forms/Select/index.tsx

@@ -1,5 +1,3 @@
-import "./styles/style.scss";
-
 import { Select, SelectProps } from "./Select";
 
 export { Select };

package/src/components/Forms/TextInput/styles/config.scss

@@ -8,7 +8,7 @@ $base: (
   border-radius: convert.to-rem(5px),
 );
 
-$disabled: color.$gray-700;
+$disabled: var(--color-text-secondary);
 
 $background-search: (
   default: (

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

@@ -15,7 +15,7 @@ $focus: (
 $disabled: (
   background-color: var(--color-surface-subtle),
   border-color: var(--color-surface-moderate),
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $disabled-checked: (
@@ -24,7 +24,7 @@ $disabled-checked: (
 
 $readonly: (
   background-color: var(--color-surface-subtle),
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $invalid: (
@@ -32,7 +32,7 @@ $invalid: (
 );
 
 $placeholder: (
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $radiocheck-sizes: (