@orangesk/orange-design-system 2.0.0-beta.11 → 2.0.0-beta.13

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

@@ -53,8 +53,6 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   colorScheme?: "dark" | "light";
   /** Disables header paddings */
   disableHeaderSpacing?: boolean;
-  /** Disables body paddings */
-  disableBodySpacing?: boolean;
   /** Disables footer paddings */
   disableFooterSpacing?: boolean;
 }
@@ -85,7 +83,6 @@ const Modal: React.FC<ModalProps> = ({
   fullHeight,
   colorScheme,
   disableHeaderSpacing,
-  disableBodySpacing,
   disableFooterSpacing,
   ...other
 }) => {
@@ -149,12 +146,7 @@ const Modal: React.FC<ModalProps> = ({
         {renderBody ? (
           renderBody()
         ) : (
-          <ModalBody
-            disableSpacing={disableBodySpacing}
-            withTopPadding={!disableBodySpacing && !!renderHeader}
-          >
-            {children}
-          </ModalBody>
+          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
         )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {

package/src/components/Modal/index.ts

@@ -4,4 +4,3 @@ export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
 export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
-export { ModalProductBody } from "./ModalProductBody";

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

@@ -42,7 +42,7 @@ $spacing: (
 
 $spacing-product-footer: (
   default: (
-    default: space.get("medium") space.get("small") convert.to-rem(40px),
-    md: space.get("medium") space.get("large") space.get("large") space.get("large"),
-  )
-)
+    default: space.get("medium"),
+    md: space.get("large"),
+  ),
+);

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

@@ -33,8 +33,9 @@
   z-index: config.$overlay-z-index;
   opacity: 0;
   transform: scale(1.1, 1.1);
-  transition: opacity config.$overlay-e,
-  transform config.$overlay-e;
+  transition:
+    opacity config.$overlay-e,
+    transform config.$overlay-e;
   backface-visibility: hidden;
 }
 
@@ -205,7 +206,7 @@
 
         @at-root {
           .modal__body--colorful + .modal__footer {
-            padding: $space !important;
+            padding: $space;
           }
         }
       }
@@ -214,11 +215,17 @@
 }
 
 @mixin sticky-footer() {
+  z-index: 1;
+
   @media screen and (min-height: 500px) {
     position: sticky;
     bottom: 0;
     background-color: var(--color-surface-primary);
   }
+
+  &.modal__footer--no-spacing {
+    padding: 0 !important;
+  }
 }
 
 @mixin modal-product-header($spacing) {
@@ -248,7 +255,9 @@
     flex-direction: column;
   }
 
-  @each $breakpoint, $value in map.get(config.$spacing-product-footer, "default") {
+  @each $breakpoint,
+    $value in map.get(config.$spacing-product-footer, "default")
+  {
     @include breakpoint.get($breakpoint) {
       padding: $value;
     }
@@ -284,58 +293,3 @@
   object-position: left;
   max-width: convert.to-rem(125px);
 }
-
-@mixin modal-product-body-subtitle-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  @include breakpoint.get('md') {
-    padding: convert.to-rem(20px) space.get('large');
-  }
-}
-
-@mixin modal-product-body-list-section() {
-  padding: 0 space.get();
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-  }
-
-  ul {
-    margin-bottom: 0;
-    padding: space.get('small') space.get() space.get('small') convert.to-rem(18px);
-    @include breakpoint.get('md') {
-      padding-right: 0;
-    }
-  }
-
-  li {
-    margin-bottom: convert.to-rem(15px);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@mixin modal-product-body-accordion-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  .accordion__body {
-    padding: 0 space.get() convert.to-rem(15px) space.get('small');
-    margin-bottom: 0;
-  }
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-
-    .accordion__body {
-      padding: 0 space.get('large') convert.to-rem(15px) space.get('small');
-    }
-  }
-}
-
-@mixin modal-product-body-section-title() {
-  margin-bottom: 0 !important;
-
-  padding: space.get('small') 0;
-}

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

@@ -132,20 +132,4 @@
   .modal__product-footer-button {
     @include mixins.modal-product-footer-button();
   }
-
-  .modal__product-body-subtitle-section {
-    @include mixins.modal-product-body-subtitle-section();
-  }
-
-  .modal__product-body-list-section {
-    @include mixins.modal-product-body-list-section();
-  }
-
-  .modal__product-body-accordion-section {
-    @include mixins.modal-product-body-accordion-section();
-  }
-
-  .modal__product-body-section-title {
-    @include mixins.modal-product-body-section-title();
-  }
 }

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

@@ -111,41 +111,4 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__footer--no-spacing");
     });
   });
-  describe("disableBodySpacing prop", () => {
-    it("should have modal__body--no-spacing class when disableBodySpacing is true", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body--no-spacing",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-
-    it("should not apply with-top-padding class on body when custom header renderer is present with disableBodySpacing prop", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-            renderHeader={() => <div>Custom Header</div>}
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).not.toHaveClass("with-top-padding");
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-  });
 });

package/src/components/Pill/Pill.tsx

@@ -3,7 +3,18 @@ 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-contrast",
+  "surface-accent",
+  "fill-moderate",
+  "fill-disabled",
+  "transparent",
+] as const;
 export type PillColor = (typeof pillColors)[number];
 
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
@@ -26,11 +37,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,23 @@
     @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,
+    &.fill-moderate,
+    &.fill-disabled {
+      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>

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

@@ -35,28 +35,78 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has default black styling without modifier", () => {
+    it("supports all available sizes", () => {
+      const sizes = ["small", "medium", "large", "xlarge", "xxlarge"];
+
+      sizes.forEach((size) => {
+        const { getByTestId } = render(
+          <Pill size={size} data-testid={`test-${size}`}>
+            {size}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${size}`)).toHaveClass(`pill--${size}`);
+      });
+    });
+
+    it("has default styling without color modifier", () => {
       const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
       expect(getByTestId("test-id")).toHaveClass("pill");
-      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-secondary");
+    });
+
+    it("has surface-secondary class when color is surface-secondary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-secondary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+    });
+
+    it("has surface-tertiary class when color is surface-tertiary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-tertiary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-tertiary");
+    });
+
+    it("has surface-subtle class when color is surface-subtle", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-subtle" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-subtle");
+    });
+
+    it("has surface-moderate class when color is surface-moderate", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-moderate" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-moderate");
     });
 
-    it("has white class when color is white", () => {
+    it("has surface-contrast class when color is surface-contrast", () => {
       const { getByTestId } = render(
-        <Pill color="white" data-testid="test-id">
+        <Pill color="surface-contrast" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--white");
+      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
     });
 
-    it("has gray class when color is gray", () => {
+    it("has surface-accent class when color is surface-accent", () => {
       const { getByTestId } = render(
-        <Pill color="gray" data-testid="test-id">
+        <Pill color="surface-accent" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--gray");
+      expect(getByTestId("test-id")).toHaveClass("surface-accent");
     });
 
     it("has transparent class when color is transparent", () => {
@@ -65,11 +115,19 @@ describe("rendering Pill", () => {
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("pill--transparent");
+      expect(getByTestId("test-id")).toHaveClass("transparent");
     });
 
     it("supports all available colors", () => {
-      const colors = ["white", "gray", "transparent"];
+      const colors = [
+        "surface-secondary",
+        "surface-tertiary",
+        "surface-subtle",
+        "surface-moderate",
+        "surface-contrast",
+        "surface-accent",
+        "transparent",
+      ];
 
       colors.forEach((color) => {
         const { getByTestId } = render(
@@ -78,7 +136,7 @@ describe("rendering Pill", () => {
           </Pill>,
         );
 
-        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
+        expect(getByTestId(`test-${color}`)).toHaveClass(color);
       });
     });