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

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

@@ -204,4 +204,72 @@ describe("rendering Carousel", () => {
       expect(carousel).not.toHaveClass("is-light");
     });
   });
+
+  describe("external controls integration", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render with data-carousel-id when id is provided", () => {
+      const { container } = render(
+        <Carousel id="test-carousel" items={items} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "test-carousel");
+    });
+
+    it("should support external controls via data attributes", () => {
+      const { container } = render(
+        <div>
+          <Carousel id="external-carousel" items={items} />
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="prev"
+            data-testid="external-prev"
+          >
+            Previous
+          </button>
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="next"
+            data-testid="external-next"
+          >
+            Next
+          </button>
+        </div>,
+      );
+
+      const carousel = container.querySelector(".carousel");
+      const prevButton = container.querySelector(
+        '[data-testid="external-prev"]',
+      );
+      const nextButton = container.querySelector(
+        '[data-testid="external-next"]',
+      );
+
+      expect(carousel).toHaveAttribute("id", "external-carousel");
+      expect(prevButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(prevButton).toHaveAttribute("data-carousel-action", "prev");
+      expect(nextButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(nextButton).toHaveAttribute("data-carousel-action", "next");
+    });
+
+    it("should work with both id and data-carousel-id", () => {
+      const { container } = render(
+        <Carousel id="test-id" data-carousel-id="test-data-id" items={items} />,
+      );
+
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "test-id");
+      expect(carousel).toHaveAttribute("data-carousel-id", "test-data-id");
+    });
+  });
 });

package/src/components/Cover/Cover.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
-import { Image } from '../Image';
+import { Image } from "../Image";
 
 interface CoverProps {
   /** Background image source. URL string or an object of breakpoint: url pairs
@@ -19,22 +19,24 @@ interface CoverProps {
 }
   * ```
   */
-  bgSrc: string | {
-    default: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
-    xxxl?: string;
-  };
+  bgSrc:
+    | string
+    | {
+        default: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        xxl?: string;
+        xxxl?: string;
+      };
   /** Set vertical position of image */
-  bgPosition?: 'top' | 'center' | 'bottom';
+  bgPosition?: "top" | "center" | "bottom";
   /** Applies custom classNames to overlay content */
   contentClass?: string;
   /** Cover size */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large" | "xlarge";
   /** Additional className for the cover container */
   className?: string;
   /** Children content */
@@ -43,13 +45,13 @@ interface CoverProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'cover';
+const CLASS_ROOT = "cover";
 
 const Cover: React.FC<CoverProps> = ({
   className,
   children,
   contentClass,
-  bgPosition = 'center',
+  bgPosition = "center",
   bgSrc,
   size,
   ...other
@@ -59,13 +61,13 @@ const Cover: React.FC<CoverProps> = ({
     {
       [`${CLASS_ROOT}--${size}`]: size,
     },
-    className
+    className,
   );
 
   const contentClasses = cx(`${CLASS_ROOT}__content`, contentClass);
 
   const bgImgClassName = cx(`${CLASS_ROOT}__image`, {
-    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== 'center',
+    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== "center",
   });
 
   return (
@@ -76,6 +78,6 @@ const Cover: React.FC<CoverProps> = ({
   );
 };
 
-Cover.displayName = 'Cover';
+Cover.displayName = "Cover";
 
 export { Cover };

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

@@ -1,5 +1,5 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $sizes: (
   small: (
@@ -8,7 +8,7 @@ $sizes: (
     ),
     md: (
       min-height: convert.to-rem(255px),
-    )
+    ),
   ),
   medium: (
     default: (
@@ -19,7 +19,7 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(295px),
-    )
+    ),
   ),
   large: (
     default: (
@@ -30,13 +30,24 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(460px),
-    )
+    ),
+  ),
+  xlarge: (
+    default: (
+      min-height: convert.to-rem(600px),
+    ),
+    md: (
+      min-height: convert.to-rem(760px),
+    ),
+    lg: (
+      min-height: convert.to-rem(760px),
+    ),
   ),
 );
 
 $spacing: (
   default: (
-    padding-top: space.get('small'),
+    padding-top: space.get("small"),
     padding-bottom: 0.1px,
   ),
   md: (
@@ -44,12 +55,12 @@ $spacing: (
     padding-bottom: space.get(),
   ),
   lg: (
-    padding-top: space.get('large'),
-    padding-bottom: space.get('large'),
-  )
+    padding-top: space.get("large"),
+    padding-bottom: space.get("large"),
+  ),
 );
 
 $positions: (
-  'top': 50% 0,
-  'bottom': 50% 100%,
-);
+  "top": 50% 0,
+  "bottom": 50% 100%,
+);

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

@@ -1,7 +1,7 @@
 @use "sass:map";
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base {
   position: relative;
@@ -12,6 +12,7 @@
   position: relative;
   transform: translate3d(0, 0, 0);
   z-index: 1;
+  width: 100%;
 }
 
 @mixin content-size($size, $config: config.$sizes) {
@@ -34,10 +35,10 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: cover;  
+    object-fit: cover;
   }
 }
 
 @mixin image-position($position, $config: config.$positions) {
   object-position: map.get($config, $position);
-}
+}

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

@@ -1,113 +1,113 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
 
-import { Cover } from '../Cover';
+import { Cover } from "../Cover";
 
-const image = '/test-image.jpg';
+const image = "/test-image.jpg";
 const picture = {
-  default: '/test-picture.jpg',
-  md: '/test-picture-md.jpg',
-  xl: '/test-picture-xl.jpg',
+  default: "/test-picture.jpg",
+  md: "/test-picture-md.jpg",
+  xl: "/test-picture-xl.jpg",
 };
 
 // bgSrc prop is required
-describe('rendering Cover', () => {
-  describe('initial state', () => {
-    it('has default class cover', () => {
+describe("rendering Cover", () => {
+  describe("initial state", () => {
+    it("has default class cover", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover').length).toBe(1);
+      expect(container.getElementsByClassName("cover").length).toBe(1);
     });
-    it('has default class cover__image', () => {
+    it("has default class cover__image", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover__image').length).toBe(1);
+      expect(container.getElementsByClassName("cover__image").length).toBe(1);
     });
   });
-  describe('passed props', () => {
-    it('passes other props', () => {
+  describe("passed props", () => {
+    it("passes other props", () => {
       const { getByTestId } = render(
-        <Cover data-testid="test" bgSrc={image} />
+        <Cover data-testid="test" bgSrc={image} />,
       );
-      expect(getByTestId('test')).toBeInTheDocument();
+      expect(getByTestId("test")).toBeInTheDocument();
     });
-    it('renders children', () => {
+    it("renders children", () => {
       const { getByText } = render(<Cover bgSrc={image}>test-text</Cover>);
-      expect(getByText('test-text')).toBeInTheDocument();
+      expect(getByText("test-text")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { container } = render(
-        <Cover bgSrc={image} className="test-class" />
+        <Cover bgSrc={image} className="test-class" />,
       );
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-      expect(container.getElementsByClassName('test-class').length).toBe(1);
+      expect(container.getElementsByClassName("cover").length).toBe(1);
+      expect(container.getElementsByClassName("test-class").length).toBe(1);
     });
-    it('has class cover__content when children are set', () => {
+    it("has class cover__content when children are set", () => {
       const { container } = render(<Cover bgSrc={image}>test</Cover>);
-      expect(container.getElementsByClassName('cover__content').length).toBe(1);
+      expect(container.getElementsByClassName("cover__content").length).toBe(1);
     });
-    it('has additional class when contentClass and children are set', () => {
+    it("has additional class when contentClass and children are set", () => {
       const { container } = render(
         <Cover bgSrc={image} contentClass="test-content-class">
           test
-        </Cover>
+        </Cover>,
       );
       expect(
-        container.getElementsByClassName('test-content-class').length
+        container.getElementsByClassName("test-content-class").length,
       ).toBe(1);
     });
-    ['small', 'medium', 'large'].map(size => {
+    ["small", "medium", "large", "xlarge"].map((size) => {
       it(`has cover--${size} class when size is set to ${size}`, () => {
         const { container } = render(<Cover bgSrc={image} size={size} />);
         expect(container.getElementsByClassName(`cover--${size}`).length).toBe(
-          1
+          1,
         );
       });
     });
-    ['top', 'bottom'].map(position => {
+    ["top", "bottom"].map((position) => {
       it(`has cover__image--${position} class when bgPosition is set to ${position}`, () => {
         const { container } = render(
-          <Cover bgSrc={image} bgPosition={position} />
+          <Cover bgSrc={image} bgPosition={position} />,
         );
         expect(
-          container.getElementsByClassName(`cover__image--${position}`).length
+          container.getElementsByClassName(`cover__image--${position}`).length,
         ).toBe(1);
       });
     });
-    it('doesnt have cover__image--center class when bgPosition is set to center', () => {
+    it("doesnt have cover__image--center class when bgPosition is set to center", () => {
       const { container } = render(<Cover bgSrc={image} bgPosition="center" />);
       expect(
-        container.getElementsByClassName('cover__image--center').length
+        container.getElementsByClassName("cover__image--center").length,
       ).toBe(0);
     });
-    it('renders img element, not picture, when bgSrc is set to string', () => {
+    it("renders img element, not picture, when bgSrc is set to string", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('picture').length).toBe(0);
+      expect(container.querySelectorAll("img").length).toBe(1);
+      expect(container.querySelectorAll("picture").length).toBe(0);
     });
-    it('img element has src set to bgSrc when bgSrc is string', () => {
+    it("img element has src set to bgSrc when bgSrc is string", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        '/test-image.jpg'
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        "/test-image.jpg",
       );
     });
-    it('renders picture element with source and img elements when bgSrc is set to object with multiple properties', () => {
+    it("renders picture element with source and img elements when bgSrc is set to object with multiple properties", () => {
       const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelectorAll('picture').length).toBe(1);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('source').length > 0).toBeTruthy();
+      expect(container.querySelectorAll("picture").length).toBe(1);
+      expect(container.querySelectorAll("img").length).toBe(1);
+      expect(container.querySelectorAll("source").length > 0).toBeTruthy();
     });
-    it('img element has src set to bgSrc.default when bgSrc is object', () => {
+    it("img element has src set to bgSrc.default when bgSrc is object", () => {
       const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        picture.default
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        picture.default,
       );
     });
     Object.keys(picture)
-      .filter(el => el !== 'default')
-      .map(key => {
-        it('srcSet of source element has correct value from bgSrc object', () => {
+      .filter((el) => el !== "default")
+      .map((key) => {
+        it("srcSet of source element has correct value from bgSrc object", () => {
           const { container } = render(<Cover bgSrc={picture} />);
           const correctSource = container.querySelector(
-            `source[srcset="${picture[key]}"]`
+            `source[srcset="${picture[key]}"]`,
           );
           expect(correctSource).toBeInTheDocument();
         });

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

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../../../styles/tools/convert";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
@@ -6,10 +7,11 @@
 @layer components {
   .expander {
     margin-bottom: space.get();
+    font-size: convert.to-rem(18px);
 
     summary {
       font-weight: 700;
-      line-height: 1.25;
+      line-height: normal;
       display: flex;
       align-items: center;
 

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/Pill/Pill.tsx

@@ -3,7 +3,15 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
-export const pillColors = ["white", "gray", "transparent", "orange"] as const;
+export const pillColors = [
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-accent",
+  "transparent",
+] as const;
 export type PillColor = (typeof pillColors)[number];
 
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
@@ -26,11 +34,11 @@ const Pill: React.FC<PillProps> = ({
     className={cx(
       CLASS_ROOT,
       {
-        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
         "is-light": colorScheme === "light",
         "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
+      color,
       className,
     )}
     {...other}

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

@@ -4,8 +4,8 @@
 
 $base: (
   font-weight: bold,
-  background-color: map.get(color.$colors-dark, border-subtle),
-  color: color.$white,
+  background-color: var(--color-surface-contrast),
+  color: var(--color-text-inverse),
 );
 
 $sizes: (
@@ -21,22 +21,3 @@ $sizes: (
     xxlarge: convert.to-rem(64px),
   ),
 );
-
-$colors: (
-  "white": (
-    background-color: color.$white,
-    color: color.$black,
-  ),
-  "gray": (
-    background-color: var(--color-surface-subtle),
-    color: var(--color-text-default),
-  ),
-  "orange": (
-    background-color: var(--color-icon-brand),
-    color: var(--color-text-inverse),
-  ),
-  "transparent": (
-    background-color: rgba(#ffffff, 0.5),
-    color: var(--color-text-default),
-  ),
-);

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

@@ -1,3 +1,4 @@
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
@@ -8,12 +9,21 @@
     @include mixins.base();
     @include mixins.sizes();
 
-    @each $colorName, $colorProps in config.$colors {
-      &--#{$colorName} {
-        @each $property, $value in $colorProps {
-          #{$property}: $value;
-        }
-      }
+    &.surface-primary,
+    &.surface-subtle,
+    &.surface-moderate,
+    &.surface-accent {
+      color: var(--color-text-default);
+    }
+
+    &.surface-secondary,
+    &.surface-tertiary {
+      color: color.$white;
+    }
+
+    &.transparent {
+      background-color: rgba(#ffffff, 0.5);
+      color: var(--color-text-default);
     }
   }
 }

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

@@ -19,13 +19,19 @@ const example = (
     </p>
     <p>
       <Pill color="transparent">T</Pill>
-      <Pill color="black">D</Pill>
-      <Pill color="white">L</Pill>
+      <Pill color="surface-secondary">S</Pill>
+      <Pill color="surface-tertiary">T</Pill>
+      <Pill color="surface-subtle">Su</Pill>
+      <Pill color="surface-moderate">M</Pill>
+      <Pill color="surface-contrast">C</Pill>
+      <Pill color="surface-accent">A</Pill>
     </p>
     <p>
       <Pill size="small">S</Pill>
       <Pill size="medium">M</Pill>
       <Pill size="large">L</Pill>
+      <Pill size="xlarge">XL</Pill>
+      <Pill size="xxlarge">XXL</Pill>
     </p>
     <p>
       <Pill colorScheme="light">Light</Pill>