@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.38

package/src/components/Hero/tests/Hero.conformance.test.jsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Hero } from "../";
 

package/src/components/Hero/tests/Hero.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { Hero } from "../";

package/src/components/Hero/tests/data.js

@@ -1,40 +1,40 @@
 export const singleImage = {
-  src: 'https://placehold.co/626x540',
-  srcSet: 'https://placehold.co/626x540, https://placehold.co/1252x1080 2x',
+  src: "https://placehold.co/626x540",
+  srcSet: "https://placehold.co/626x540, https://placehold.co/1252x1080 2x",
 };
 
 export const halfImages = {
-  default: 'https://placehold.co/768x540',
-  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
-  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
-  lg: 'https://placehold.co/470x540, https://placehold.co/940x1080 2x',
-  xl: 'https://placehold.co/590x540, https://placehold.co/1180x1080 2x',
-  xxl: 'https://placehold.co/650x540, https://placehold.co/1300x1080 2x',
+  default: "https://placehold.co/768x540",
+  sm: "https://placehold.co/768x540, https://placehold.co/1536x1080 2x",
+  md: "https://placehold.co/768x510, https://placehold.co/1536x1080 2x",
+  lg: "https://placehold.co/470x540, https://placehold.co/940x1080 2x",
+  xl: "https://placehold.co/590x540, https://placehold.co/1180x1080 2x",
+  xxl: "https://placehold.co/650x540, https://placehold.co/1300x1080 2x",
 };
 
 export const halfImagesDark = {
-  default: 'https://placehold.co/768x540/222/666',
-  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
-  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
-  lg: 'https://placehold.co/470x540/222/666, https://placehold.co/940x1080/222/666 2x',
-  xl: 'https://placehold.co/590x540/222/666, https://placehold.co/1180x1080/222/666 2x',
-  xxl: 'https://placehold.co/650x540/222/666, https://placehold.co/1300x1080/222/666 2x',
+  default: "https://placehold.co/768x540/222/666",
+  sm: "https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x",
+  md: "https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x",
+  lg: "https://placehold.co/470x540/222/666, https://placehold.co/940x1080/222/666 2x",
+  xl: "https://placehold.co/590x540/222/666, https://placehold.co/1180x1080/222/666 2x",
+  xxl: "https://placehold.co/650x540/222/666, https://placehold.co/1300x1080/222/666 2x",
 };
 
 export const fullwidthImages = {
-  default: 'https://placehold.co/768x540',
-  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
-  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
-  lg: 'https://placehold.co/1024x540, https://placehold.co/2048x1080 2x',
-  xl: 'https://placehold.co/1280x540, https://placehold.co/2520x1080 2x',
-  xxl: 'https://placehold.co/1400x540, https://placehold.co/2800x1080 2x',
+  default: "https://placehold.co/768x540",
+  sm: "https://placehold.co/768x540, https://placehold.co/1536x1080 2x",
+  md: "https://placehold.co/768x510, https://placehold.co/1536x1080 2x",
+  lg: "https://placehold.co/1024x540, https://placehold.co/2048x1080 2x",
+  xl: "https://placehold.co/1280x540, https://placehold.co/2520x1080 2x",
+  xxl: "https://placehold.co/1400x540, https://placehold.co/2800x1080 2x",
 };
 
 export const fullwidthImagesDark = {
-  default: 'https://placehold.co/768x540/222/666',
-  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
-  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
-  lg: 'https://placehold.co/1024x540/222/666, https://placehold.co/2048x1080/222/666 2x',
-  xl: 'https://placehold.co/1280x540/222/666, https://placehold.co/2520x1080/222/666 2x',
-  xxl: 'https://placehold.co/1400x540/222/666, https://placehold.co/2800x1080/222/666 2x',
+  default: "https://placehold.co/768x540/222/666",
+  sm: "https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x",
+  md: "https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x",
+  lg: "https://placehold.co/1024x540/222/666, https://placehold.co/2048x1080/222/666 2x",
+  xl: "https://placehold.co/1280x540/222/666, https://placehold.co/2520x1080/222/666 2x",
+  xxl: "https://placehold.co/1400x540/222/666, https://placehold.co/2800x1080/222/666 2x",
 };

package/src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useContext } from "react";
 import cx from "classnames";
+import React, { useContext } from "react";
 import { SpritePathContext } from "./SpritePathContext";
 
 export type IconColor = "info" | "success" | "warning" | "danger" | "orange";

package/src/components/Icon/IconSearch.jsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
 import cx from "classnames";
+import { useEffect, useState } from "react";
 
 import {
   Bar,
@@ -9,14 +9,14 @@ import {
   Button,
   Container,
   Field,
+  Fieldset,
   Grid,
-  Icon,
   GridCol,
-  Fieldset,
+  Icon,
   Label,
 } from "..";
 
-import { tags, iconsWithTags } from "./iconSearchTags";
+import { iconsWithTags, tags } from "./iconSearchTags";
 import { handleSvgClick, loadIconNames } from "./iconUtils";
 
 // Icon names will be loaded dynamically on the client

package/src/components/Icon/PictogramSearch.jsx

@@ -1,22 +1,11 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import cx from "classnames";
+import { useEffect, useState } from "react";
 
-import {
-  Bar,
-  BarItem,
-  Button,
-  Container,
-  Field,
-  Grid,
-  GridCol,
-  Fieldset,
-  Label,
-} from "..";
-
-import { Pictogram } from "./Pictogram";
+import { Bar, BarItem, Button, Container, Label } from "..";
 import { handleSvgClick, loadIconNames } from "./iconUtils";
+import { Pictogram } from "./Pictogram";
 
 // Pictogram names will be loaded dynamically on the client
 let pictogramNamesCache = [];

package/src/components/Icon/iconSearchTags.ts

@@ -66,6 +66,7 @@ export const iconsWithTags = {
   "device-tablet": ["devices"],
   "device-tv": ["devices"],
   "digital-frame": ["other"],
+  "discount-price": ["money"],
   "discussion-more": ["other"],
   "e-reader": ["reading"],
   "e-shop": ["common"],

package/src/components/Icon/index.ts

@@ -1,4 +1,3 @@
-export { SpritePathContext } from "./SpritePathContext";
-export { SpritePathProvider } from "./SpritePathContext";
 export { Icon } from "./Icon";
 export { Pictogram } from "./Pictogram";
+export { SpritePathContext, SpritePathProvider } from "./SpritePathContext";

package/src/components/Icon/styles/export/size.scss

@@ -1,6 +1,6 @@
 @use "sass:string";
-@use 'sass:map' as sassmap;
-@use '../config';
+@use "sass:map" as sassmap;
+@use "../config";
 
 :export {
   @each $key, $value in sassmap.get(config.$sizes, default) {

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

@@ -1,6 +1,6 @@
-@use './config';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
+@use "./config";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
 
 @mixin base() {
   fill: currentColor;

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

@@ -1,8 +1,32 @@
 @use "./mixins";
+@use "./config";
 @use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tokens/space";
 
 @layer components {
+  $with-text-end-host-selectors: ":where(p, div, li, span, a, label)";
+
+  #{$with-text-end-host-selectors}:has(> .icon--with-text-end:first-child) {
+    --icon-with-text-end-size: 1em;
+    padding-inline-start: calc(
+      var(--icon-with-text-end-size) + #{convert.to-rem(5px)}
+    );
+  }
+
+  @each $breakpoint-name, $sizes in config.$sizes {
+    @include breakpoint.get($breakpoint-name) {
+      @each $variant, $size in $sizes {
+        #{$with-text-end-host-selectors}:has(
+          > .icon--with-text-end.icon#{generate.variant-name($variant)}:first-child
+        ) {
+          --icon-with-text-end-size: #{$size};
+        }
+      }
+    }
+  }
+
   .icon {
     @include mixins.base;
     @include mixins.sizes;
@@ -43,6 +67,12 @@
 
     &--with-text-end {
       margin-inline-end: convert.to-rem(5px);
+
+      &:first-child {
+        margin-inline-start: calc(
+          (var(--icon-with-text-end-size, 1em) + #{convert.to-rem(5px)}) * -1
+        );
+      }
     }
   }
 

package/src/components/Icon/tests/Icon.conformance.test.jsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Icon } from "../";
 

package/src/components/Icon/tests/Icon.unit.test.jsx

@@ -2,11 +2,9 @@
  * @vitest-environment jsdom
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
-
-import { SpritePathContext } from "../SpritePathContext";
 import { Icon } from "../";
+import { SpritePathContext } from "../SpritePathContext";
 
 //name prop is required
 describe("rendering Icon", () => {

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

@@ -2,9 +2,8 @@
  * Unit tests for the Pictogram component.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Pictogram } from "../Pictogram";
 

package/src/components/IconList/IconList.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Item } from "./Item";
 

package/src/components/IconList/Item.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import cx from 'classnames';
-
-import { Icon } from '../Icon';
-import { InfoTooltip } from '../Tooltip';
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
+import cx from "classnames";
+import React from "react";
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { Icon } from "../Icon";
+import { InfoTooltip } from "../Tooltip";
 
 interface ItemProps {
   icon: string;
@@ -12,12 +11,17 @@ interface ItemProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'icon-list';
+const CLASS_ROOT = "icon-list";
 
-export const Item: React.FC<ItemProps> = ({ icon, children, tooltip, ...other }) => (
+export const Item: React.FC<ItemProps> = ({
+  icon,
+  children,
+  tooltip,
+  ...other
+}) => (
   <li {...other}>
     <Icon name={icon} size="medium" className={`${CLASS_ROOT}__icon`} />
-    <div className={cx(`${CLASS_ROOT}__content`, { 'text-nowrap': tooltip })}>
+    <div className={cx(`${CLASS_ROOT}__content`, { "text-nowrap": tooltip })}>
       <ConditionalWrapper
         condition={!!tooltip}
         wrapper={
@@ -26,7 +30,7 @@ export const Item: React.FC<ItemProps> = ({ icon, children, tooltip, ...other })
       >
         {children}
       </ConditionalWrapper>
-      {tooltip && '\xa0'}
+      {tooltip && "\xa0"}
       {tooltip && (
         <InfoTooltip className="bold" placement="right">
           {tooltip}
@@ -36,4 +40,4 @@ export const Item: React.FC<ItemProps> = ({ icon, children, tooltip, ...other })
   </li>
 );
 
-Item.displayName = 'IconListItem';
+Item.displayName = "IconListItem";

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

@@ -1,3 +1,3 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
-$spacing: space.get('small');
+$spacing: space.get("small");

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

@@ -1,4 +1,4 @@
-@use './mixins';
+@use "./mixins";
 
 .icon-list {
   @include mixins.base();

package/src/components/IconList/tests/IconList.conformance.test.jsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 // Mock Tooltip komponent
 vi.mock("../../Tooltip", () => ({

package/src/components/IconList/tests/IconList.unit.test.jsx

@@ -1,37 +1,40 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
 // Mock Tooltip komponent
-vi.mock('../../Tooltip', () => ({
-  InfoTooltip: ({ children, ...props }) => <div data-testid="info-tooltip" {...props}>{children}</div>,
+vi.mock("../../Tooltip", () => ({
+  InfoTooltip: ({ children, ...props }) => (
+    <div data-testid="info-tooltip" {...props}>
+      {children}
+    </div>
+  ),
 }));
 
-import { IconList } from '../IconList';
+import { IconList } from "../IconList";
 
 const items = [
   {
-    icon: 'test-icon',
+    icon: "test-icon",
     content: <p>test-content</p>,
     tooltip: <p>test-tooltip</p>,
   },
 ];
 
-describe('rendering IconList', () => {
-  describe('initial state', () => {
-    it('div has default class icon-list', () => {
+describe("rendering IconList", () => {
+  describe("initial state", () => {
+    it("div has default class icon-list", () => {
       const { getByTestId } = render(
         <>
           <div id="root">
             <IconList data-testid="test-id" items={[]} />
           </div>
           <div id="root-tooltips" />
-        </>
+        </>,
       );
-      expect(getByTestId('test-id')).toHaveClass('icon-list');
+      expect(getByTestId("test-id")).toHaveClass("icon-list");
     });
   });
 
-  describe('passed props', () => {
+  describe("passed props", () => {
     let iconList;
 
     beforeEach(() => {
@@ -45,35 +48,35 @@ describe('rendering IconList', () => {
             />
           </div>
           <div id="root-tooltips" />
-        </>
+        </>,
       );
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = iconList;
-      expect(getByTestId('test-id')).toHaveClass('icon-list');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("icon-list");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it('renders items[index].content inside Item component', () => {
+    it("renders items[index].content inside Item component", () => {
       const { container } = render(
         <>
           <div id="root">
             <IconList data-testid="test-id" items={items} />
           </div>
           <div id="root-tooltips" />
-        </>
+        </>,
       );
-      const item = container.querySelector('li').querySelector('div');
-      expect(item).toHaveClass('icon-list__content');
-      expect(item.querySelector('p').textContent).toBe('test-content');
+      const item = container.querySelector("li").querySelector("div");
+      expect(item).toHaveClass("icon-list__content");
+      expect(item.querySelector("p").textContent).toBe("test-content");
     });
-    it('renders icon with /sprite.svg#test-icon xlinkhref when icon prop is set to test-icon', () => {
+    it("renders icon with /sprite.svg#test-icon xlinkhref when icon prop is set to test-icon", () => {
       const { container } = iconList;
-      const use = container.querySelector('li').querySelector('use');
-      expect(use.getAttribute('xlink:href')).toEqual('/sprite.svg#test-icon');
+      const use = container.querySelector("li").querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#test-icon");
     });
-    it('renders items[index].tooltip', () => {
+    it("renders items[index].tooltip", () => {
       const { getByText } = iconList;
-      expect(getByText('test-tooltip')).toBeInTheDocument();
+      expect(getByText("test-tooltip")).toBeInTheDocument();
     });
   });
 });

package/src/components/Image/Image.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import breakpoints from "../../styles/export/breakpoint";
 

package/src/components/Image/tests/Image.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Image } from "../";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 
 // Mock breakpoints since SCSS modules don't work in tests

package/src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "link";
 

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

@@ -19,7 +19,7 @@ Conformance tests for the Link component:
   - Does not create unnecessary wrapper elements.
 */
 import { render, screen } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";

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

@@ -24,7 +24,7 @@ Unit tests for the Link component:
 - Component Display Name:
   - Has correct display name 'Link'.
 */
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";

package/src/components/List/ClickableControl.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import { Icon } from '../Icon';
+import { Icon } from "../Icon";
 
 interface ClickableControlProps {
   href?: string;
@@ -10,16 +10,16 @@ interface ClickableControlProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'list__control';
+const CLASS_ROOT = "list__control";
 
-export const ClickableControl: React.FC<ClickableControlProps> = ({ 
-  href, 
-  className, 
-  children, 
-  ...other 
+export const ClickableControl: React.FC<ClickableControlProps> = ({
+  href,
+  className,
+  children,
+  ...other
 }) => {
-  const Tag = href ? 'a' : 'button';
-  const type = Tag === 'button' ? 'button' : undefined;
+  const Tag = href ? "a" : "button";
+  const type = Tag === "button" ? "button" : undefined;
   const classes = cx(CLASS_ROOT, className);
 
   return (
@@ -30,4 +30,4 @@ export const ClickableControl: React.FC<ClickableControlProps> = ({
   );
 };
 
-ClickableControl.displayName = 'ListItemClickableControl';
+ClickableControl.displayName = "ListItemClickableControl";

package/src/components/List/List.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
 interface ListProps {
   /** Size determines color of list items and color of their borders*/
-  color?: 'gray';
+  color?: "gray";
   /** Spacious lists have horizontal spacing */
   isEnclosed?: boolean;
   /** Size determines vertical spacing */
-  size?: 'small';
+  size?: "small";
   className?: string;
   children?: React.ReactNode;
 }
 
-const CLASS_ROOT = 'list';
+const CLASS_ROOT = "list";
 
-export const List: React.FC<ListProps> = ({ 
-  color, 
-  isEnclosed, 
-  size, 
-  className, 
-  children, 
-  ...other 
+export const List: React.FC<ListProps> = ({
+  color,
+  isEnclosed,
+  size,
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(
     CLASS_ROOT,
@@ -29,7 +29,7 @@ export const List: React.FC<ListProps> = ({
       [`${CLASS_ROOT}--${color}`]: color,
       [`${CLASS_ROOT}--enclosed`]: isEnclosed,
     },
-    className
+    className,
   );
 
   return (

package/src/components/List/ListItem.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
-import { ClickableControl } from './ClickableControl';
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { ClickableControl } from "./ClickableControl";
 
 interface ControlProps {
   href?: string;
@@ -19,13 +19,13 @@ interface ListItemProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'list__item';
+const CLASS_ROOT = "list__item";
 
-export const ListItem: React.FC<ListItemProps> = ({ 
-  controlProps, 
-  className, 
-  children, 
-  ...other 
+export const ListItem: React.FC<ListItemProps> = ({
+  controlProps,
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(CLASS_ROOT, className);
 
@@ -41,4 +41,4 @@ export const ListItem: React.FC<ListItemProps> = ({
   );
 };
 
-ListItem.displayName = 'ListItem';
+ListItem.displayName = "ListItem";

package/src/components/List/tests/ClickableControl.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { ClickableControl } from "../ClickableControl";