@orangesk/orange-design-system 2.0.0-beta.35 → 2.0.0-beta.37

package/src/components/Forms/Message/Message.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../../Icon";
 
 export type MessageType = "info" | "warning" | "error" | "invalid";
@@ -18,7 +18,7 @@ const icons: Record<MessageType, string> = {
   info: "info",
   warning: "warning-important",
   error: "error-severe",
-  invalid: "error-severe"
+  invalid: "error-severe",
 };
 
 import type { IconColor } from "../../Icon/Icon";
@@ -38,9 +38,13 @@ const Message: React.FC<MessageProps> = ({
   type = "info",
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className, type === "invalid" && {
-    [`${CLASS_ROOT}--invalid`]: type === "invalid",
-  });
+  const classes = cx(
+    CLASS_ROOT,
+    className,
+    type === "invalid" && {
+      [`${CLASS_ROOT}--invalid`]: type === "invalid",
+    },
+  );
 
   return (
     <p className={classes} {...other}>

package/src/components/Forms/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "radio";
 

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
 import RangeSliderStatic from "./RangeSlider.static";

package/src/components/Forms/Select/Select.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import generateId from "../../../utils/generateId";
 

package/src/components/Forms/TextArea/TextArea.tsx

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

package/src/components/Forms/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "text-input";
 
@@ -17,10 +17,8 @@ export type TextInputType =
 
 export type TextInputSearchIcon = "none" | "transient" | "persistent";
 
-export interface TextInputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> {
+export interface TextInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /** Input html type. */
   htmlType?: TextInputType;
   /** Html id attribute. */

package/src/components/Forms/index.ts

@@ -6,6 +6,7 @@ export { Fieldset } from "./Fieldset";
 export { File } from "./File";
 export { Group } from "./Group";
 export { Hint } from "./Hint";
+export { InputStepper } from "./InputStepper";
 export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
@@ -13,4 +14,3 @@ export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
-export { InputStepper } from "./InputStepper";

package/src/components/Gauge/Gauge.tsx

@@ -1,5 +1,5 @@
-import React, { ForwardedRef } from "react";
 import cx from "classnames";
+import React, { ForwardedRef } from "react";
 
 const getMaxValue = (radius: number): number =>
   Math.PI * (radius + radius * 0.22) * 2;

package/src/components/Gauge/GaugeMaker.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useRef, useState } from "react";
 import { formatHTML } from "../../utils/formatCode";
 
 import { Bar, BarItem } from "../Bar";
-import { Field } from "../Forms/Field";
-import { TextInput } from "../Forms/TextInput";
 import { Button } from "../Button";
+import { Field } from "../Forms/Field";
 import { Message } from "../Forms/Message";
+import { TextInput } from "../Forms/TextInput";
 
 import { Gauge } from "./Gauge";
 

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

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

package/src/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { genResponsiveClasses } from "../../utils";
 
 export type GridVAlign = "stretch" | "start" | "end" | "center";

package/src/components/Grid/GridCol.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
-import cx from 'classnames';
-import { genResponsiveClasses } from '../../utils';
+import cx from "classnames";
+import React from "react";
+import { genResponsiveClasses } from "../../utils";
 
-export type GridColAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-export type GridColSize = number | 'shrink' | 'fill' | 'auto' | Record<string, number | 'shrink' | 'fill' | 'auto'>;
+export type GridColAlign = "top" | "middle" | "bottom" | "stretch";
+export type GridColSize =
+  | number
+  | "shrink"
+  | "fill"
+  | "auto"
+  | Record<string, number | "shrink" | "fill" | "auto">;
 
 export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   align?: GridColAlign;
@@ -11,18 +16,24 @@ export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   size?: GridColSize;
 }
 
-const CLASS_ROOT = 'grid__col';
+const CLASS_ROOT = "grid__col";
 
-export const GridCol = ({ className, align, tag = "div", size, ...other }: GridColProps) => {
+export const GridCol = ({
+  className,
+  align,
+  tag = "div",
+  size,
+  ...other
+}: GridColProps) => {
   const responsiveClasses = genResponsiveClasses(CLASS_ROOT, size);
-  
+
   const classes = cx(
     CLASS_ROOT, // Always apply base class
     ...responsiveClasses.filter(Boolean), // Filter out null/undefined values
     {
       [`align-self-${align}`]: align,
     },
-    className
+    className,
   );
 
   const TagName = tag;
@@ -30,4 +41,4 @@ export const GridCol = ({ className, align, tag = "div", size, ...other }: GridC
   return <TagName className={classes} {...other} />;
 };
 
-GridCol.displayName = 'GridCol';
+GridCol.displayName = "GridCol";

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

@@ -7,7 +7,6 @@
  * Tests both React component usage and equivalent HTML structure generation.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { Grid } from "../Grid";
 import { GridCol } from "../GridCol";

package/src/components/Grid/tests/GridCol.unit.test.jsx

@@ -6,7 +6,6 @@
  * Also includes complex scenarios with various size combinations and responsive behavior.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { GridCol } from "../GridCol";
 

package/src/components/Hero/Hero.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { formatPrice } from "../../utils/helpers";
 import { Button } from "../Button";

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/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/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();
     });
   });
 });