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

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}

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/Label/styles/config.scss

@@ -1,4 +1,7 @@
+@use "../../../../styles/tools/convert";
+
 $base: (
   display: inline,
   font-weight: bold,
+  font-size: convert.to-rem(16px),
 );

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

@@ -1,6 +1,6 @@
-@use '../../../../styles/tools/convert';
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/convert";
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -12,29 +12,30 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
   &:read-only {
-    @include generate.css-map($config, 'readonly');
+    @include generate.css-map($config, "readonly");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 
   &.is-valid {
     padding-right: 36px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");
     background-size: 16px;
-    background-position: top #{convert.to-rem(10px)} right #{convert.to-rem(10px)};
+    background-position: top #{convert.to-rem(10px)} right
+      #{convert.to-rem(10px)};
     background-repeat: no-repeat;
   }
 }

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

@@ -9,13 +9,14 @@ $default: (
 
 $focus: (
   border-color: var(--color-border-contrast),
-  box-shadow: base.$focus-shadow,
+  outline: 2px solid var(--color-border-contrast),
+  outline-offset: -2px,
 );
 
 $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 +25,7 @@ $disabled-checked: (
 
 $readonly: (
   background-color: var(--color-surface-subtle),
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $invalid: (
@@ -32,7 +33,7 @@ $invalid: (
 );
 
 $placeholder: (
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $radiocheck-sizes: (

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

@@ -7,7 +7,7 @@
     position: relative;
     width: convert.to-rem(220px);
     padding: 0;
-    margin: 0 0 space.get() 0;
+    margin: 0 0 space.get("large") 0;
     text-align: center;
 
     &__dial {

package/src/components/Grid/Grid.tsx

@@ -9,7 +9,7 @@ export type GridRowGapSize =
   | "large"
   | "xlarge"
   | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+export type GridColumnGapSize = "none" | "small" | "default" | "large";
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -1,10 +1,12 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ('medium', 'large', 'xlarge');
+$grid-row-gap-sizes: ("medium", "large", "xlarge");
 
 $column-gap: (
-  default: space.get('small'),
+  small: space.get("xsmall"),
+  default: space.get("small"),
+  large: space.get("medium"),
   none: 0,
 );