@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.2

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

@@ -1,35 +1,35 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import React from "react";
+import { render, screen } from "@testing-library/react";
 
 // Mock breakpoints since SCSS modules don't work in tests
-jest.mock('../../../styles/export/breakpoint', () => ({
-  xs: '0px',
-  sm: '480px',
-  md: '768px',
-  lg: '992px',
-  xl: '1240px',
-  xxl: '1380px',
-  xxxl: '1920px',
+jest.mock("../../../styles/export/breakpoint", () => ({
+  xs: "0px",
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1240px",
+  xxl: "1380px",
+  xxxl: "1920px",
 }));
 
-import Image from '../Image';
+import { Image } from "../Image";
 
 /**
  * Unit testy pre Image komponentu
- * 
+ *
  * Testy pokrývajú:
- * 
+ *
  * **Základné renderovanie:**
  * • Renderovanie s predvolenou CSS triedou 'img'
  * • Pridávanie dodatočných CSS tried cez className prop
  * • Správne nastavenie alt atribútu
  * • Správne nastavenie src atribútu pre string src
  * • Predávanie dodatočných props do img elementu
- * 
+ *
  * **String src (jednoduché obrázky):**
  * • Renderovanie ako img element keď je src string
  * • Žiadne source elementy pre string src
- * 
+ *
  * **Object src (responzívne obrázky):**
  * • Renderovanie ako picture element keď je src objekt
  * • Nastavenie default src pre img element
@@ -38,301 +38,279 @@ import Image from '../Image';
  * • Správne srcSet atribúty pre source elementy
  * • Správne media atribúty pre source elementy
  * • Sortovanie breakpointov v zostupnom poradí
- * 
+ *
  * **Všetky breakpointy:**
  * • Správne spracovanie všetkých možných breakpointov (xxxl, xxl, xl, lg, md, sm, xs)
  * • Sortovanie všetkých breakpointov v správnom zostupnom poradí
  * • Správne media queries pre všetky breakpointy
- * 
+ *
  * **Edge cases:**
  * • Objekt s len default vlastnosťou
  * • Objekt bez default vlastnosti
  * • Prázdny objekt
  * • Objekt s vlastnými breakpoint kľúčmi
- * 
+ *
  * **Accessibility:**
  * • Vždy má alt atribút
  * • Prázdny alt pre dekoratívne obrázky
  * • Zachovanie alt atribútu v picture elemente
- * 
+ *
  * **Component metadata:**
  * • Správny displayName
  */
 
-const singleSource = '/__image_snapshots__/picture-element-md-snap.png';
+const singleSource = "/__image_snapshots__/picture-element-md-snap.png";
 const multipleSources = {
-  default: '/__image_snapshots__/picture-element-md-snap.png',
-  xl: '/__image_snapshots__/picture-element-xl-snap.png',
-  lg: '/__image_snapshots__/picture-element-lg-snap.png',
+  default: "/__image_snapshots__/picture-element-md-snap.png",
+  xl: "/__image_snapshots__/picture-element-xl-snap.png",
+  lg: "/__image_snapshots__/picture-element-lg-snap.png",
 };
 
 const allBreakpoints = {
-  default: '/__image_snapshots__/default.png',
-  xxxl: '/__image_snapshots__/xxxl.png',
-  xxl: '/__image_snapshots__/xxl.png',
-  xl: '/__image_snapshots__/xl.png',
-  lg: '/__image_snapshots__/lg.png',
-  md: '/__image_snapshots__/md.png',
-  sm: '/__image_snapshots__/sm.png',
-  xs: '/__image_snapshots__/xs.png',
+  default: "/__image_snapshots__/default.png",
+  xxxl: "/__image_snapshots__/xxxl.png",
+  xxl: "/__image_snapshots__/xxl.png",
+  xl: "/__image_snapshots__/xl.png",
+  lg: "/__image_snapshots__/lg.png",
+  md: "/__image_snapshots__/md.png",
+  sm: "/__image_snapshots__/sm.png",
+  xs: "/__image_snapshots__/xs.png",
 };
 
-describe('Image Component', () => {
-  describe('Basic rendering', () => {
-    it('renders with default class when no className provided', () => {
+describe("Image Component", () => {
+  describe("Basic rendering", () => {
+    it("renders with default class when no className provided", () => {
       const { getByTestId } = render(
-        <Image data-testid="test-id" alt="test" src={singleSource} />
+        <Image data-testid="test-id" alt="test" src={singleSource} />,
       );
-      expect(getByTestId('test-id')).toHaveClass('img');
+      expect(getByTestId("test-id")).toHaveClass("img");
     });
 
-    it('renders with additional class when className is provided', () => {
+    it("renders with additional class when className is provided", () => {
       const { getByTestId } = render(
         <Image
           data-testid="test-id"
           className="test-class"
           alt="test"
           src={singleSource}
-        />
+        />,
       );
-      expect(getByTestId('test-id')).toHaveClass('img', 'test-class');
+      expect(getByTestId("test-id")).toHaveClass("img", "test-class");
     });
 
-    it('renders with correct alt attribute', () => {
+    it("renders with correct alt attribute", () => {
       render(<Image alt="Test alt text" src={singleSource} />);
-      expect(screen.getByAltText('Test alt text')).toBeInTheDocument();
+      expect(screen.getByAltText("Test alt text")).toBeInTheDocument();
     });
 
-    it('renders with correct src attribute for string src', () => {
-      const { container } = render(
-        <Image alt="test" src={singleSource} />
-      );
-      expect(container.querySelector('img').src).toEqual(
-        'http://localhost' + singleSource
+    it("renders with correct src attribute for string src", () => {
+      const { container } = render(<Image alt="test" src={singleSource} />);
+      expect(container.querySelector("img").src).toEqual(
+        "http://localhost" + singleSource,
       );
     });
 
-    it('passes through additional props to img element', () => {
+    it("passes through additional props to img element", () => {
       const { container } = render(
         <Image
           alt="test"
           src={singleSource}
           data-custom="custom-value"
           id="test-id"
-        />
+        />,
       );
-      const img = container.querySelector('img');
-      expect(img.getAttribute('data-custom')).toBe('custom-value');
-      expect(img.getAttribute('id')).toBe('test-id');
+      const img = container.querySelector("img");
+      expect(img.getAttribute("data-custom")).toBe("custom-value");
+      expect(img.getAttribute("id")).toBe("test-id");
     });
   });
 
-  describe('String src (simple image)', () => {
-    it('renders as img element when src is string', () => {
-      const { container } = render(
-        <Image alt="test" src={singleSource} />
-      );
-      expect(container.querySelector('img')).toBeTruthy();
-      expect(container.querySelector('picture')).toBeFalsy();
+  describe("String src (simple image)", () => {
+    it("renders as img element when src is string", () => {
+      const { container } = render(<Image alt="test" src={singleSource} />);
+      expect(container.querySelector("img")).toBeTruthy();
+      expect(container.querySelector("picture")).toBeFalsy();
     });
 
-    it('does not render source elements when src is string', () => {
-      const { container } = render(
-        <Image alt="test" src={singleSource} />
-      );
-      expect(container.querySelectorAll('source')).toHaveLength(0);
+    it("does not render source elements when src is string", () => {
+      const { container } = render(<Image alt="test" src={singleSource} />);
+      expect(container.querySelectorAll("source")).toHaveLength(0);
     });
   });
 
-  describe('Object src (responsive image)', () => {
-    it('renders as picture element when src is object', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
-      );
-      expect(container.querySelector('picture')).toBeTruthy();
+  describe("Object src (responsive image)", () => {
+    it("renders as picture element when src is object", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      expect(container.querySelector("picture")).toBeTruthy();
     });
 
-    it('renders img with default src when src is object', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
-      );
-      const img = container.querySelector('img');
-      expect(img.getAttribute('src')).toEqual(multipleSources.default);
+    it("renders img with default src when src is object", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      const img = container.querySelector("img");
+      expect(img.getAttribute("src")).toEqual(multipleSources.default);
     });
 
-    it('renders correct number of source elements', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
-      );
+    it("renders correct number of source elements", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
       // Should have 2 source elements (xl and lg, excluding default)
-      expect(container.querySelectorAll('source')).toHaveLength(2);
+      expect(container.querySelectorAll("source")).toHaveLength(2);
     });
 
-    it('excludes default from source elements', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
-      );
-      const sources = container.querySelectorAll('source');
-      sources.forEach(source => {
-        expect(source.getAttribute('srcSet')).not.toBe(multipleSources.default);
+    it("excludes default from source elements", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      const sources = container.querySelectorAll("source");
+      sources.forEach((source) => {
+        expect(source.getAttribute("srcSet")).not.toBe(multipleSources.default);
       });
     });
 
-    it('renders source elements with correct srcSet attributes', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
+    it("renders source elements with correct srcSet attributes", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      const sources = container.querySelectorAll("source");
+
+      const srcSetValues = Array.from(sources).map((s) =>
+        s.getAttribute("srcSet"),
       );
-      const sources = container.querySelectorAll('source');
-      
-      const srcSetValues = Array.from(sources).map(s => s.getAttribute('srcSet'));
       expect(srcSetValues).toContain(multipleSources.xl);
       expect(srcSetValues).toContain(multipleSources.lg);
     });
 
-    it('renders source elements with correct media attributes', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
+    it("renders source elements with correct media attributes", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      const sources = container.querySelectorAll("source");
+
+      const mediaValues = Array.from(sources).map((s) =>
+        s.getAttribute("media"),
       );
-      const sources = container.querySelectorAll('source');
-      
-      const mediaValues = Array.from(sources).map(s => s.getAttribute('media'));
-      expect(mediaValues).toContain('(min-width: 1240px)'); // xl
-      expect(mediaValues).toContain('(min-width: 992px)');  // lg
+      expect(mediaValues).toContain("(min-width: 1240px)"); // xl
+      expect(mediaValues).toContain("(min-width: 992px)"); // lg
     });
 
-    it('sorts breakpoints in descending order', () => {
-      const { container } = render(
-        <Image alt="test" src={multipleSources} />
-      );
-      const sources = container.querySelectorAll('source');
-      
+    it("sorts breakpoints in descending order", () => {
+      const { container } = render(<Image alt="test" src={multipleSources} />);
+      const sources = container.querySelectorAll("source");
+
       // First source should be xl (larger breakpoint)
-      expect(sources[0].getAttribute('media')).toBe('(min-width: 1240px)');
+      expect(sources[0].getAttribute("media")).toBe("(min-width: 1240px)");
       // Second source should be lg (smaller breakpoint)
-      expect(sources[1].getAttribute('media')).toBe('(min-width: 992px)');
+      expect(sources[1].getAttribute("media")).toBe("(min-width: 992px)");
     });
   });
 
-  describe('All breakpoints support', () => {
-    it('handles all possible breakpoints correctly', () => {
-      const { container } = render(
-        <Image alt="test" src={allBreakpoints} />
-      );
-      const sources = container.querySelectorAll('source');
-      
+  describe("All breakpoints support", () => {
+    it("handles all possible breakpoints correctly", () => {
+      const { container } = render(<Image alt="test" src={allBreakpoints} />);
+      const sources = container.querySelectorAll("source");
+
       // Should have 7 source elements (all except default)
       expect(sources).toHaveLength(7);
     });
 
-    it('sorts all breakpoints in correct descending order', () => {
-      const { container } = render(
-        <Image alt="test" src={allBreakpoints} />
-      );
-      const sources = container.querySelectorAll('source');
-      
-      const expectedOrder = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-      const actualOrder = Array.from(sources).map(s => {
-        const srcSet = s.getAttribute('srcSet');
-        return Object.keys(allBreakpoints).find(key => allBreakpoints[key] === srcSet);
+    it("sorts all breakpoints in correct descending order", () => {
+      const { container } = render(<Image alt="test" src={allBreakpoints} />);
+      const sources = container.querySelectorAll("source");
+
+      const expectedOrder = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"];
+      const actualOrder = Array.from(sources).map((s) => {
+        const srcSet = s.getAttribute("srcSet");
+        return Object.keys(allBreakpoints).find(
+          (key) => allBreakpoints[key] === srcSet,
+        );
       });
-      
+
       expect(actualOrder).toEqual(expectedOrder);
     });
 
-    it('renders correct media queries for all breakpoints', () => {
-      const { container } = render(
-        <Image alt="test" src={allBreakpoints} />
-      );
-      const sources = container.querySelectorAll('source');
-      
+    it("renders correct media queries for all breakpoints", () => {
+      const { container } = render(<Image alt="test" src={allBreakpoints} />);
+      const sources = container.querySelectorAll("source");
+
       const expectedMediaQueries = [
-        '(min-width: 1920px)', // xxxl (custom)
-        '(min-width: 1380px)', // xxl (from SCSS)
-        '(min-width: 1240px)', // xl
-        '(min-width: 992px)',  // lg
-        '(min-width: 768px)',  // md
-        '(min-width: 480px)',  // sm
-        '(min-width: 0px)',    // xs
+        "(min-width: 1920px)", // xxxl (custom)
+        "(min-width: 1380px)", // xxl (from SCSS)
+        "(min-width: 1240px)", // xl
+        "(min-width: 992px)", // lg
+        "(min-width: 768px)", // md
+        "(min-width: 480px)", // sm
+        "(min-width: 0px)", // xs
       ];
-      
-      const actualMediaQueries = Array.from(sources).map(s => s.getAttribute('media'));
+
+      const actualMediaQueries = Array.from(sources).map((s) =>
+        s.getAttribute("media"),
+      );
       expect(actualMediaQueries).toEqual(expectedMediaQueries);
     });
   });
 
-  describe('Edge cases', () => {
-    it('handles object with only default property', () => {
+  describe("Edge cases", () => {
+    it("handles object with only default property", () => {
       const srcOnlyDefault = { default: singleSource };
-      const { container } = render(
-        <Image alt="test" src={srcOnlyDefault} />
+      const { container } = render(<Image alt="test" src={srcOnlyDefault} />);
+
+      expect(container.querySelector("picture")).toBeTruthy();
+      expect(container.querySelectorAll("source")).toHaveLength(0);
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        singleSource,
       );
-      
-      expect(container.querySelector('picture')).toBeTruthy();
-      expect(container.querySelectorAll('source')).toHaveLength(0);
-      expect(container.querySelector('img').getAttribute('src')).toBe(singleSource);
     });
 
-    it('handles object with missing default property gracefully', () => {
-      const srcWithoutDefault = { xl: '/test-xl.png', lg: '/test-lg.png' };
+    it("handles object with missing default property gracefully", () => {
+      const srcWithoutDefault = { xl: "/test-xl.png", lg: "/test-lg.png" };
       const { container } = render(
-        <Image alt="test" src={srcWithoutDefault} />
+        <Image alt="test" src={srcWithoutDefault} />,
       );
-      
-      expect(container.querySelector('picture')).toBeTruthy();
-      expect(container.querySelectorAll('source')).toHaveLength(2);
+
+      expect(container.querySelector("picture")).toBeTruthy();
+      expect(container.querySelectorAll("source")).toHaveLength(2);
       // Should still render img but with undefined src
-      expect(container.querySelector('img')).toBeTruthy();
+      expect(container.querySelector("img")).toBeTruthy();
     });
 
-    it('handles empty object gracefully', () => {
+    it("handles empty object gracefully", () => {
       const emptySrc = {};
-      const { container } = render(
-        <Image alt="test" src={emptySrc} />
-      );
-      
-      expect(container.querySelector('picture')).toBeTruthy();
-      expect(container.querySelectorAll('source')).toHaveLength(0);
-      expect(container.querySelector('img')).toBeTruthy();
+      const { container } = render(<Image alt="test" src={emptySrc} />);
+
+      expect(container.querySelector("picture")).toBeTruthy();
+      expect(container.querySelectorAll("source")).toHaveLength(0);
+      expect(container.querySelector("img")).toBeTruthy();
     });
 
-    it('handles object with custom breakpoint keys', () => {
+    it("handles object with custom breakpoint keys", () => {
       const customSrc = {
-        default: '/default.png',
-        custom: '/custom.png',
-        another: '/another.png'
+        default: "/default.png",
+        custom: "/custom.png",
+        another: "/another.png",
       };
-      const { container } = render(
-        <Image alt="test" src={customSrc} />
-      );
-      
-      expect(container.querySelector('picture')).toBeTruthy();
-      expect(container.querySelectorAll('source')).toHaveLength(2);
+      const { container } = render(<Image alt="test" src={customSrc} />);
+
+      expect(container.querySelector("picture")).toBeTruthy();
+      expect(container.querySelectorAll("source")).toHaveLength(2);
     });
   });
 
-  describe('Accessibility', () => {
-    it('always has alt attribute', () => {
+  describe("Accessibility", () => {
+    it("always has alt attribute", () => {
       render(<Image alt="Accessible image" src={singleSource} />);
-      expect(screen.getByAltText('Accessible image')).toBeInTheDocument();
+      expect(screen.getByAltText("Accessible image")).toBeInTheDocument();
     });
 
-    it('works with empty alt for decorative images', () => {
+    it("works with empty alt for decorative images", () => {
       render(<Image alt="" src={singleSource} />);
-      expect(screen.getByAltText('')).toBeInTheDocument();
+      expect(screen.getByAltText("")).toBeInTheDocument();
     });
 
-    it('maintains alt attribute in picture element', () => {
+    it("maintains alt attribute in picture element", () => {
       const { container } = render(
-        <Image alt="Responsive image" src={multipleSources} />
+        <Image alt="Responsive image" src={multipleSources} />,
       );
-      const img = container.querySelector('img');
-      expect(img.getAttribute('alt')).toBe('Responsive image');
+      const img = container.querySelector("img");
+      expect(img.getAttribute("alt")).toBe("Responsive image");
     });
   });
 
-  describe('Component metadata', () => {
-    it('has correct displayName', () => {
-      expect(Image.displayName).toBe('Image');
+  describe("Component metadata", () => {
+    it("has correct displayName", () => {
+      expect(Image.displayName).toBe("Image");
     });
   });
 });

package/src/components/Link/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Link Component Changelog
+
+## [Unreleased]
+
+### Added
+
+- Added `isNormal` prop to the Link component to allow normal font weight.
+- Added unit test for `isNormal` prop.
+
+### Removed
+
+- Removed `isInverse` prop and all related inverse styling logic from the Link component.
+- Removed support for inverse color variants and associated CSS classes.
+- Cleaned up tests and documentation to eliminate references to inverse styling.
+
+### Changed
+
+- Simplified Link component props and class logic to only support standard color variants.
+- Updated integration and unit tests to reflect the removal of inverse support.
+- Updated documentation and usage examples to remove inverse-related content.
+
+### Migration Notes
+
+- If you previously used the `isInverse` prop or relied on inverse color styling, update your usage to use standard color variants or custom styles as needed.
+- No breaking changes for standard usage without the `isInverse` prop.

package/src/components/Link/Link.tsx

@@ -4,25 +4,28 @@ import cx from "classnames";
 const CLASS_ROOT = "link";
 
 export interface LinkProps {
-  /** link color. default color is black, and inverts to white */
-  color?: "default" | "orange" | "black";
   /** destination address */
   href?: string;
-  /** invert link color for dark background */
-  isInverse?: boolean;
-  /** rendereded HTML element */
+  /** rendered HTML element */
   tag?: "a" | "button";
   /** additional CSS classes */
   className?: string;
   /** link content */
   children?: React.ReactNode;
+  /** color scheme for link: dark (white text) or light (black text) */
+  colorScheme?: "dark" | "light";
+  /** whether the link should be underlined */
+  isUnderline?: boolean;
+  /** whether the link should have normal font weight */
+  isNormal?: boolean;
 }
 
 export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   className,
   children,
-  color,
-  isInverse,
+  colorScheme,
+  isUnderline,
+  isNormal,
   tag = "a",
   href,
   ...other
@@ -30,8 +33,10 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   const classes = cx(
     CLASS_ROOT,
     {
-      [`${CLASS_ROOT}--is-inverse`]: isInverse,
-      [`${CLASS_ROOT}--${color}`]: color,
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+      underline: isUnderline,
+      normal: isNormal,
     },
     className,
   );

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

@@ -1,10 +1,13 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use 'config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
 
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
+  color: var(--color-text-default);
+  background: none;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 @mixin base-inherit {
@@ -16,27 +19,15 @@
   }
 }
 
-@mixin color-variant($variant, $config: config.$variants) {
-  @include generate.css-map($config, $variant, 'default');
-
-  &:hover {
-    @include generate.css-map($config, $variant, 'hover');
-  }
-
-  &:focus {
-    @include generate.css-map($config, $variant, 'focus');
-  }
-}
-
 @mixin icon {
   vertical-align: middle;
   transform: translateY(-4%);
 }
 
 @mixin icon-left {
-  margin-right: space.get('xsmall');
+  margin-right: space.get("xsmall");
 }
 
 @mixin icon-right {
-  margin-left: space.get('xsmall');
+  margin-left: space.get("xsmall");
 }