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

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

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/visibility" as visibility;
+@use "../../Container/styles/mixins" as container;
+@use "../../../styles/typography/mixins" as typography;
+@use "../../../styles/typography/config" as typographyConfig;
+
+@mixin globals {
+  .sr-only {
+    @include visibility.visually-hidden;
+  }
+
+  a {
+    color: var(--color-text-default);
+    text-decoration: none;
+    font-size: inherit;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+      text-underline-offset: convert.to-rem(4px);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  a[href],
+  area[href],
+  input,
+  select,
+  textarea,
+  button,
+  [type="button"],
+  iframe,
+  [tabindex]:not([tabindex="-1"]),
+  [contentEditable="true"] {
+    @include base.focusring;
+  }
+
+  * {
+    box-sizing: border-box;
+    letter-spacing: convert.to-rem(-0.1px);
+    line-height: convert.to-rem(18px);
+  }
+
+  ::selection {
+    background-color: base.$selection-background;
+    color: base.$text-color;
+  }
+
+  hr {
+    margin-top: convert.to-rem(30px);
+    margin-bottom: convert.to-rem(30px);
+    border: 0;
+    border-top: 1px solid var(--color-border-subtle);
+  }
+
+  p,
+  ul {
+    font-size: convert.to-rem(14px);
+    line-height: convert.to-rem(17.5px);
+  }
+}
+
+@mixin base {
+  font-size: 1rem;
+  color: var(--color-text-default);
+  background-color: var(--color-surface-primary);
+  box-sizing: border-box;
+  font-family: #{base.$font-family};
+  padding: convert.to-rem(60px) 0;
+
+  @include breakpoint.get("md", "down") {
+    padding: convert.to-rem(30px) 0;
+  }
+}
+
+@mixin container {
+  @include container.base;
+
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@mixin grid {
+  display: grid;
+  gap: convert.to-rem(30px);
+  row-gap: convert.to-rem(40px);
+  grid-template-columns: repeat(1, 1fr);
+
+  @include breakpoint.get("sm") {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include breakpoint.get("md") {
+    grid-template-columns: repeat(3, 1fr);
+    gap: convert.to-rem(15px);
+    row-gap: convert.to-rem(20px);
+  }
+
+  @include breakpoint.get("lg") {
+    grid-template-columns: repeat(4, 1fr);
+    gap: convert.to-rem(30px);
+    row-gap: convert.to-rem(40px);
+  }
+}
+
+@mixin logo {
+  display: inline-flex;
+  margin-bottom: convert.to-rem(60px);
+
+  @include breakpoint.get("md", "down") {
+    margin-bottom: convert.to-rem(30px);
+  }
+}
+
+@mixin title {
+  @include generate.responsive-css-map(map.get(typographyConfig.$headings, 5));
+  margin-top: 0;
+  margin-bottom: convert.to-rem(30px);
+  color: var(--color-text-default);
+  font-weight: 700;
+
+  @include breakpoint.get("md", "down") {
+    margin-bottom: convert.to-rem(25px);
+  }
+}
+
+@mixin list {
+  @include typography.list-unstyled;
+
+  li {
+    margin-bottom: convert.to-rem(10px);
+  }
+}
+
+@mixin list-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: convert.to-rem(10px);
+
+  li {
+    margin: 0;
+  }
+}
+
+@mixin bottom {
+  display: grid;
+  gap: convert.to-rem(30px);
+  row-gap: convert.to-rem(40px);
+  grid-template-columns: repeat(1, 1fr);
+  align-items: end;
+
+  @include breakpoint.get("md") {
+    grid-template-columns: 3fr 1fr;
+  }
+}
+
+@mixin bottom-copyright {
+  text-align: right;
+
+  @include breakpoint.get("md", "down") {
+    text-align: inherit;
+  }
+}

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, container } = render(<Footer />);
+
+      // Footer should be a landmark
+      expect(getByRole("contentinfo")).toBeInTheDocument();
+
+      // Should have proper column titles (now rendered as paragraphs with footer__title class)
+      const titles = container.querySelectorAll(".footer__title");
+      expect(titles.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, container } = render(<Footer />);
+
+    // Should have footer landmark
+    expect(getByRole("contentinfo")).toBeInTheDocument();
+
+    // Should have column titles (now rendered as paragraphs with footer__title class)
+    const titles = container.querySelectorAll(".footer__title");
+    expect(titles).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/Field/styles/config.scss

@@ -1,25 +1,25 @@
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
 
 $layout: (
-  margin-bottom: space.get('medium'),
+  margin-bottom: space.get("large"),
 );
 
 $description: (
-  margin-bottom: space.get('xsmall'),
+  margin-bottom: space.get("xsmall"),
   max-width: convert.to-rem(350px),
 );
 
 $input-control: (
-  margin-bottom: space.get('xsmall'),
+  margin-bottom: space.get("xsmall"),
 );
 
 $radiocheck-control: (
-  margin-right: space.get('small'),
+  margin-right: space.get("small"),
   margin-bottom: 0,
 );
 
 $hint: (
-  margin-top: space.get('xsmall'),
-  margin-bottom: space.get('xsmall'),
+  margin-top: space.get("xsmall"),
+  margin-bottom: space.get("xsmall"),
 );

package/src/components/Forms/Field/tests/Autocomplete.Field.conformance.test.js

@@ -35,7 +35,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "prefer-native-element": "off",
-      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Checkbox.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/File.Field.conformance.test.js

@@ -37,6 +37,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -37,6 +37,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Radio.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Rangeslider.Field.test.js

@@ -50,6 +50,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Select.Field.conformance.test.js

@@ -35,6 +35,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Text.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Textarea.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

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

@@ -1,6 +1,6 @@
-@use '../../../../styles/tokens/space';
+@use "../../../../styles/tokens/space";
 
 @mixin legend-base {
   font-weight: bold;
-  margin-bottom: space.get();
-};
+  margin-bottom: space.get("large");
+}

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/Group/styles/mixins.scss

@@ -34,6 +34,20 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  > *:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  > *:first-child:not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > *:last-child:not(:first-child) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
 }
 
 @mixin item($config: config.$item) {

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -22,7 +22,6 @@ export interface InputStepperProps {
   id: string;
   inputClassName?: string;
   isDisabled?: boolean;
-  colorScheme?: "light" | "dark";
   name?: string;
   nonEditableInput?: boolean;
   className?: string;
@@ -35,7 +34,6 @@ const InputStepper: React.FC<InputStepperProps> = ({
   id,
   config,
   isDisabled,
-  colorScheme,
   nonEditableInput = false,
   ...other
 }) => {
@@ -50,8 +48,6 @@ const InputStepper: React.FC<InputStepperProps> = ({
   return (
     <div
       className={cx(CLASS_ROOT, className, {
-        "is-dark": colorScheme === "dark",
-        "is-light": colorScheme === "light",
         [`${CLASS_ROOT}--disabled`]: isDisabled,
       })}
       ref={elementRef}