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

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

@@ -28,6 +28,21 @@
           display: block;
         }
       }
+
+      // In light theme, explicitly show light and hide dark
+      .is-light & {
+        &--light {
+          display: block;
+        }
+
+        &--dark {
+          display: none;
+        }
+      }
+    }
+
+    &--with-text-end {
+      margin-inline-end: convert.to-rem(5px);
     }
   }
 

package/src/components/Icon/tests/Pictogram.unit.test.js

@@ -117,4 +117,42 @@ describe("Pictogram component", () => {
       expect(getByTestId("test-pictogram")).toHaveClass("custom-class");
     });
   });
+
+  describe("theme switching", () => {
+    it("shows light version by default", () => {
+      const { container } = render(<Pictogram name="pictogram-skylink" />);
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+      // Note: CSS display logic is tested via CSS rules, not inline styles
+    });
+
+    it("renders correctly within is-light context", () => {
+      const { container } = render(
+        <div className="is-light">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+
+    it("renders correctly within is-dark context", () => {
+      const { container } = render(
+        <div className="is-dark">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+  });
 });

package/src/components/IconList/index.ts

@@ -1,3 +1,2 @@
-import './styles/style.scss';
-export { IconList } from './IconList';
-export { Item } from './Item';
+export { IconList } from "./IconList";
+export { Item } from "./Item";

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

@@ -5,6 +5,7 @@
     .link,
     .btn,
     .mm-link,
+    .megamenu-link,
     .list__control,
     .tab-list__tab,
     .stepbar__link,
@@ -13,14 +14,17 @@
     .dropdown__item,
     .carousel-promotions__slide,
     .osk-footer a,
-    .mm-header a
+    .mm-header a,
+    .megamenu-header a,
+    .tag,
+    small a
   ),
   .link {
     @include mixins.base();
     @include mixins.base-inherit();
 
     &:hover {
-      color: var(--color-fill-tertiary);
+      color: var(--color-text-accent) !important;
       text-decoration: underline;
     }
     &:focus {

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

@@ -125,21 +125,6 @@ describe("Link Conformance Tests", () => {
       expect(results).toHaveNoViolations();
     });
 
-    it("has no accessibility violations for inverse links", async () => {
-      const { container } = render(
-        <div>
-          <Link href="#" isInverse>
-            Inverse link
-          </Link>
-          <Link href="#" color="orange" isInverse>
-            Orange inverse link
-          </Link>
-        </div>,
-      );
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
     it("has no accessibility violations for links with custom attributes", async () => {
       const { container } = render(
         <div>
@@ -212,11 +197,11 @@ describe("Link Conformance Tests", () => {
   describe("Cross-browser Compatibility", () => {
     it("renders consistently across different prop combinations", () => {
       const testCases = [
-        { href: "/", color: "default", isInverse: false },
-        { href: "/", color: "orange", isInverse: true },
-        { href: "/", color: "black", isInverse: false },
-        { tag: "button", type: "button", color: "default", isInverse: false },
-        { tag: "button", type: "button", color: "orange", isInverse: true },
+        { href: "/", color: "default" },
+        { href: "/", color: "orange" },
+        { href: "/", color: "black" },
+        { tag: "button", type: "button", color: "default" },
+        { tag: "button", type: "button", color: "orange" },
       ];
 
       testCases.forEach((props, index) => {

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

@@ -8,9 +8,6 @@ Unit tests for the Link component:
 - Color Variants:
   - Applies correct class for each color variant (default, orange, black).
   - Combines color with inverse class when both are set.
-- Inverse Styling:
-  - Applies inverse class when isInverse is true.
-  - Does not apply inverse class when isInverse is false.
 - Props Forwarding:
   - Forwards additional HTML attributes (target, rel, aria-label, etc.).
   - Forwards event handlers (onClick, onMouseEnter, etc.).
@@ -222,13 +219,7 @@ describe("Link Component", () => {
 
     it("handles null and undefined props gracefully", () => {
       render(
-        <Link
-          href="/"
-          data-testid="link"
-          color={null}
-          isInverse={undefined}
-          className={null}
-        >
+        <Link href="/" data-testid="link" color={null} className={null}>
           Test
         </Link>,
       );

package/src/components/List/index.ts

@@ -1,3 +1,2 @@
-import './styles/style.scss';
-export { List } from './List';
-export { ListItem } from './ListItem';
+export { List } from "./List";
+export { ListItem } from "./ListItem";

package/src/components/Loader/Loader.tsx

@@ -44,16 +44,8 @@ const Loader: React.FC<LoaderProps> = ({
 
   return (
     <div className={classes} {...other}>
-      <div
-        className={cx(`${CLASS_ROOT}__body`, {
-          [`${CLASS_ROOT}__body--inverse`]: colour !== "default",
-        })}
-      >
-        <div
-          className={cx(`${CLASS_ROOT}__line`, {
-            [`${CLASS_ROOT}__line--inverse`]: colour !== "default",
-          })}
-        />
+      <div className={`${CLASS_ROOT}__body`}>
+        <div className={`${CLASS_ROOT}__line`} />
       </div>
       {messages && (
         <div

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

@@ -30,7 +30,7 @@
 @mixin body-base {
   flex: 0 0 auto;
   overflow: hidden;
-  background-color: var(--color-icon-brand);
+  background-color: var(--color-surface-secondary);
 }
 
 @mixin size($size: default) {

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

@@ -12,8 +12,9 @@
         @include mixins.size(large);
       }
 
-      &--inverse,
-      .bg-orange & {
+      .bg-orange &,
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.color-inverse();
       }
     }
@@ -21,8 +22,9 @@
     &__line {
       @include mixins.line-base;
 
-      &--inverse,
-      .bg-orange & {
+      .bg-orange &,
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.line-color-inverse();
       }
     }

package/src/components/Megamenu/MegaMenuIcon.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import cx from "classnames";
+
+export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
+  /** Accessible label for the icon. */
+  alt?: string;
+  /** Icon name (required). */
+  name: string;
+  /** Path to the SVG sprite. */
+  spritePath?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const CLASS_ROOT = "megamenu-icon";
+
+const MegamenuIcon: React.FC<MegaMenuIconProps> = ({
+  className,
+  alt,
+  name,
+  spritePath = "/sprite.svg",
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <svg
+      className={classes}
+      aria-hidden={alt !== undefined ? undefined : "true"}
+      role={alt !== undefined ? "img" : undefined}
+      {...other}
+    >
+      {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
+      {/* Light theme version (default) */}
+      <use
+        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--light`}
+        xlinkHref={`${spritePath}#${name}`}
+      />
+      {/* Dark theme version */}
+      <use
+        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--dark`}
+        xlinkHref={`${spritePath}#${name}`}
+      />
+    </svg>
+  );
+};
+
+export { MegamenuIcon };