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

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

@@ -1,97 +1,209 @@
-@use "../../../styles/tools/generate";
-@use "../../../styles/tools/convert";
-@use "./config" as *;
-@use "./mixins" as mixins;
-@use "../../../styles/tokens/color";
-@use "../../../styles/tokens/space";
-@use "../../../styles/tokens/breakpoint";
+@use "../../Container/styles/mixins" as container;
+@use "../../Accordion/styles/mixins" as accordion;
+@use "../../../styles/typography/mixins" as typography;
 
-@layer components {
-  // =============================================================================
-  // MEGAMENU BASE
-  // =============================================================================
+@use "./mixins";
+@use "./config";
 
-  .megamenu {
-    @include mixins.megamenu();
+// Modifiers global states and resets
+#{config.$class-root} {
+  @include mixins.globals;
+}
+
+#{config.$class-root},
+#{config.$class-root}.is-light {
+  @include mixins.light-vars;
+}
+
+#{config.$class-root}.is-dark {
+  @include mixins.dark-vars;
+}
+
+// Component
+#{config.$class-root} {
+  @include mixins.base;
+
+  &__nav {
+    @include mixins.nav;
+
+    &-item {
+      @include mixins.nav-item;
+    }
+
+    &--vertical {
+      @include mixins.nav-vertical;
+    }
+
+    &--space-small {
+      @include mixins.nav-space-small;
+    }
+
+    &-dropdown {
+      @include mixins.nav-dropdown;
+
+      &.is-visible {
+        opacity: 1;
+      }
+    }
 
-    &__visible {
-      @include mixins.megamenu-visible();
+    &-logo {
+      @include mixins.nav-logo;
     }
+
+    &-link {
+      @include mixins.nav-link;
+    }
+
+    &-cart-icon {
+      @include mixins.nav-cart-icon;
+    }
+
+    &-button {
+      @include mixins.nav-button;
+
+      &--indicator {
+        @include mixins.nav-button-indicator;
+      }
+    }
+
+    &-icon {
+      @include mixins.nav-icon;
+    }
+
+    &-spacer {
+      @include mixins.nav-spacer;
+    }
+  }
+
+  &__subnav {
+    @include mixins.subnav;
+
+    &-item {
+      @include mixins.subnav-item;
+    }
+  }
+
+  &__top {
+    @include mixins.top;
   }
 
-  // =============================================================================
-  // HEADER & NAVIGATION
-  // =============================================================================
+  &__main {
+    @include mixins.main;
+  }
 
-  .megamenu-header {
-    @include mixins.megamenu-header();
+  &__submain {
+    @include mixins.submain;
   }
 
-  .megamenu-divider {
-    @include mixins.megamenu-divider();
+  &__mobile {
+    @include mixins.mobile;
+
+    &-overlay {
+      @include mixins.mobile-overlay;
+    }
+
+    &-wrapper {
+      @include mixins.mobile-wrapper;
+    }
+
+    &-header {
+      @include mixins.mobile-header;
+    }
+
+    &-body {
+      @include mixins.mobile-body;
+    }
   }
 
-  .megamenu-content {
-    @include mixins.megamenu-content();
+  &__container {
+    @include mixins.container;
   }
 
-  // =============================================================================
-  // SIDEBAR & OVERLAY
-  // =============================================================================
+  &__grid {
+    @include mixins.grid;
+  }
 
-  .megamenu-sidebar {
-    @include mixins.megamenu-sidebar();
+  &__card {
+    @include mixins.card;
   }
 
-  .megamenu-sidebar-header {
-    @include mixins.megamenu-sidebar-header();
+  &__text--large {
+    @include mixins.text-large;
   }
 
-  .megamenu-overlay {
-    @include mixins.megamenu-overlay();
+  &-icon {
+    @include mixins.icon;
   }
 
-  // =============================================================================
-  // NAVIGATION LINKS
-  // =============================================================================
+  &__overlay {
+    @include mixins.overlay;
+  }
 
-  .megamenu-link {
-    @include mixins.megamenu-link();
+  &-spacer {
+    @include mixins.spacer;
 
-    &__full {
-      @include mixins.megamenu-dropdown-button();
-      &--icon {
-        @include mixins.megamenu-dropdown-button-icon();
-      }
+    &--small {
+      @include mixins.spacer-small;
     }
+  }
 
-    &__small {
-      @include mixins.megamenu-link-small();
-    }
+  &__accordion {
+    @include mixins.accordion;
+  }
 
-    &.is-active,
-    &__small.is-active {
-      @include mixins.megamenu-link__active();
-    }
+  &__accordion-item {
+    @include mixins.accordion-item();
   }
 
-  .megamenu-logo {
-    @include mixins.megamenu-logo();
+  &__accordion-header {
+    @include accordion.header;
   }
 
-  .megamenu-icon {
-    @include mixins.megamenu-icon();
+  &__accordion-button {
+    @include mixins.accordion-button;
   }
 
-  // =============================================================================
-  // DROPDOWN FUNCTIONALITY
-  // =============================================================================
+  &__accordion-title {
+    @include mixins.accordion-title;
+  }
 
-  .megamenu-dropdown {
-    @include mixins.megamenu-dropdown();
+  &__accordion-icon {
+    @include mixins.accordion-icon;
+  }
 
-    &__active {
-      @include mixins.megamenu-dropdown-active();
+  &__accordion-body {
+    @include mixins.accordion-body;
+  }
+
+  &__input {
+    @include mixins.input;
+  }
+
+  &__tag {
+    @include mixins.tag;
+
+    &--transparent {
+      @include mixins.tag-transparent;
     }
   }
+
+  &__list--inline {
+    @include typography.list-inline;
+  }
+
+  &__list--gap-small {
+    @include mixins.list-gap-small;
+  }
+
+  &--hide-md-down {
+    @include mixins.hide-md-down;
+  }
+
+  &--hide-lg-up {
+    @include mixins.hide-lg-up;
+  }
+
+  &--align-center {
+    text-align: center !important;
+  }
 }

package/src/components/Modal/Modal.tsx

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

package/src/components/Modal/ModalBody.tsx

@@ -1,26 +1,36 @@
 import React from "react";
 import cx from "classnames";
 
-export const colors = [
-  "white",
-  "gray",
-  "orange",
-  "orange-dark",
-  "black",
-  "blue",
-  "green",
-  "pink",
-  "violet",
-  "yellow",
+export const modalBodyColors = [
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-contrast",
+  "surface-accent",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
 ] as const;
 
-export type BodyColor = (typeof colors)[number];
+export type ModalBodyColor = (typeof modalBodyColors)[number];
 
 interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  color?: BodyColor;
+  color?: ModalBodyColor;
   className?: string;
   children?: React.ReactNode;
   withTopPadding?: boolean;
+  disableSpacing?: boolean;
 }
 
 const CLASS_ROOT = "modal__body";
@@ -30,13 +40,18 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   className,
   children,
   withTopPadding,
+  disableSpacing,
   ...other
 }) => (
   <div
     className={cx(CLASS_ROOT, className, {
-      [`bg-${color}`]: color,
+      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
+      ...(color === "background-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
       [`${CLASS_ROOT}--colorful`]: color,
       [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
+      [`${CLASS_ROOT}--no-spacing`]: disableSpacing,
     })}
     {...other}
   >

package/src/components/Modal/ModalProductBody.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import cx from "classnames";
+
+interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  subtitleSection?: React.ReactNode;
+  listSection?: React.ReactNode;
+  benefitsSection?: React.ReactNode;
+  extraPaymentsSection?: React.ReactNode;
+}
+
+export const CLASS_ROOT = "modal__product-body";
+
+const ModalProductBody = React.forwardRef<
+  HTMLDivElement,
+  ModalProductBodyProps
+>(
+  (
+    {
+      className,
+      subtitleSection,
+      listSection,
+      benefitsSection,
+      extraPaymentsSection,
+      ...other
+    },
+    ref,
+  ) => {
+    const classes = cx(CLASS_ROOT, className);
+
+    const subtitleSectionClass = `${CLASS_ROOT}-subtitle-section`;
+    const listSectionClass = `${CLASS_ROOT}-list-section`;
+    const accordionSectionClass = `${CLASS_ROOT}-accordion-section`;
+
+    return (
+      <div className={classes} ref={ref} {...other}>
+        {subtitleSection && (
+          <div className={subtitleSectionClass}>{subtitleSection}</div>
+        )}
+        {listSection && <div className={listSectionClass}>{listSection}</div>}
+        {benefitsSection && (
+          <div className={accordionSectionClass}>{benefitsSection}</div>
+        )}
+        {extraPaymentsSection && (
+          <div className={listSectionClass}>{extraPaymentsSection}</div>
+        )}
+      </div>
+    );
+  },
+);
+ModalProductBody.displayName = "ModalProductBody";
+
+export { ModalProductBody };

package/src/components/Modal/index.ts

@@ -4,3 +4,4 @@ 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/mixins.scss

@@ -134,14 +134,16 @@
 @mixin body-spacing($size, $sizes: config.$spacing) {
   $spacing: map.get($sizes, $size);
 
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-left: $space;
-      padding-right: $space;
+  &:not(.modal__body--no-spacing) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-left: $space;
+        padding-right: $space;
+      }
     }
   }
 
-  &:not(.modal__body--colorful) {
+  &:not(.modal__body--colorful):not(.modal__body--no-spacing) {
     @each $breakpoint, $space in $spacing {
       @include breakpoint.get($breakpoint) {
         padding-bottom: $space;
@@ -282,3 +284,58 @@
   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,4 +132,20 @@
   .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,4 +111,41 @@ 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/Modal/tests/ModalBody.unit.test.js

@@ -15,25 +15,41 @@ describe("rendering ModalBody", () => {
       const { getByText } = render(<ModalBody>test</ModalBody>);
       expect(getByText("test")).toBeInTheDocument();
     });
+
     [
-      "white",
-      "gray",
-      "orange",
-      "orange-dark",
-      "black",
-      "blue",
-      "green",
-      "pink",
-      "violet",
-      "yellow",
+      "background-primary",
+      "background-secondary",
+      "background-accent",
+      "surface-primary",
+      "surface-secondary",
+      "surface-tertiary",
+      "surface-subtle",
+      "fill-accent1",
+      "fill-accent2",
     ].map((color) => {
-      it(`has classes bg-${color} and modal__body--colorful when color is set to ${color}`, () => {
+      it(`has class ${color} and modal__body--colorful when color is set to ${color}`, () => {
         const { getByTestId } = render(
           <ModalBody color={color} data-testid="test-id" />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
         expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
       });
     });
+
+    it("has classes background-contrast and text-inverse when color is set to background-contrast", () => {
+      const { getByTestId } = render(
+        <ModalBody color="background-contrast" data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+      expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
+    });
+
+    it("applies disableSpacing prop", () => {
+      const { getByTestId } = render(
+        <ModalBody disableSpacing data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("modal__body--no-spacing");
+    });
   });
 });

package/src/components/Pagination/Pagination.tsx

@@ -5,7 +5,7 @@ import { PaginationItem } from "./PaginationItem";
 import Separator from "./Separator";
 import { getItemState } from "./helpers";
 
-interface PaginationItem {
+interface PaginationItemProps {
   /** Page link href */
   href: string;
   /** Text label inside page item */
@@ -22,7 +22,7 @@ interface PaginationProps {
   /** Dark theme */
   colorScheme?: "light" | "dark";
   /** All pagination items - buttons & numbers */
-  items: PaginationItem[];
+  items: PaginationItemProps[];
   /** Accessibility label */
   label?: string;
   /** Additional CSS class name */

package/src/components/Pill/Pill.tsx

@@ -3,17 +3,22 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
+export const pillColors = ["white", "gray", "transparent", "orange"] as const;
+export type PillColor = (typeof pillColors)[number];
+
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   className?: string;
   children?: ReactNode;
-  colorScheme?: "dark" | "light" | "transparent";
+  color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
+  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
   className,
   children,
   size,
+  color,
   colorScheme,
   ...other
 }) => (
@@ -21,9 +26,9 @@ const Pill: React.FC<PillProps> = ({
     className={cx(
       CLASS_ROOT,
       {
-        "is-dark": colorScheme === "dark",
+        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
         "is-light": colorScheme === "light",
-        "is-transparent": colorScheme === "transparent",
+        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
       className,