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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "private": false,
   "engines": {
     "node": ">=18.x"

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

@@ -10,4 +10,6 @@ $megamenu: (
   overlay-background: rgba(0, 0, 0, 0.5),
   z-index-overlay: 1000,
   z-index-sidebar: 1001,
+  z-index-header: 998,
+  z-index-dropdown-content: 998,
 );

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

@@ -41,7 +41,7 @@
     gap: convert.to-rem(20px);
     padding: convert.to-rem(15px) convert.to-rem(20px);
     border-bottom: 1px solid var(--color-border-subtle);
-    z-index: 998;
+    z-index: map.get(config.$megamenu, z-index-header);
   }
 }
 
@@ -300,6 +300,7 @@
   left: 0;
   right: 0;
   width: 100%;
+  z-index: map.get(config.$megamenu, z-index-dropdown-content);
 
   @include breakpoint.get("lg", "down") {
     position: static;

package/src/components/Modal/Modal.tsx

@@ -51,6 +51,10 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** Color scheme for the modal */
   colorScheme?: "dark" | "light";
+  /** Disables header paddings */
+  disableHeaderSpacing?: boolean;
+  /** Disables footer paddings */
+  disableFooterSpacing?: boolean;
 }
 
 const defaultProps = {
@@ -78,6 +82,8 @@ const Modal: React.FC<ModalProps> = ({
   renderFooter,
   fullHeight,
   colorScheme,
+  disableHeaderSpacing,
+  disableFooterSpacing,
   ...other
 }) => {
   const [modalRef, instance] = useStatic(ModalStatic);
@@ -125,7 +131,7 @@ const Modal: React.FC<ModalProps> = ({
         {}
         <div
           className={cx(`${CLASS_ROOT}__header`, {
-            [`${CLASS_ROOT}__header--no-spacing`]: !!renderHeader,
+            [`${CLASS_ROOT}__header--no-spacing`]: disableHeaderSpacing,
           })}
         >
           {renderHeader ? (
@@ -145,6 +151,7 @@ const Modal: React.FC<ModalProps> = ({
         <div
           className={cx(`${CLASS_ROOT}__footer`, {
             [`${CLASS_ROOT}__footer--sticky`]: hasStickyFooter,
+            [`${CLASS_ROOT}__footer--no-spacing`]: disableFooterSpacing,
           })}
         >
           {renderFooter ? (

package/src/components/Modal/ModalProductFooter.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import cx from "classnames";
+
+interface ModalProductFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  image?: React.ReactNode;
+  /** Use small spacing */
+  space?: "small";
+  button?: React.ReactNode;
+}
+
+export const CLASS_ROOT = "modal__product";
+
+const ModalProductFooter = React.forwardRef<
+  HTMLDivElement,
+  ModalProductFooterProps
+>(({ className, children, button, image, space, ...other }, ref) => {
+  const classes = cx(
+    `${CLASS_ROOT}-footer`,
+    // {
+    //   [`${CLASS_ROOT}-footer--space-small`]: space === "small",
+    // },
+    className,
+  );
+
+  const contentClasses = `${CLASS_ROOT}-footer-content`;
+  const buttonClasses = `${CLASS_ROOT}-footer-button`;
+
+  return (
+    <div className={classes} ref={ref} {...other}>
+      <div className={contentClasses}>{children}</div>
+      <div className={buttonClasses}>{button}</div>
+    </div>
+  );
+});
+
+ModalProductFooter.displayName = "ModalProductFooter";
+
+export { ModalProductFooter };

package/src/components/Modal/index.ts

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

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

@@ -39,3 +39,10 @@ $spacing: (
   ),
   large: (), // same as default,
 );
+
+$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"),
+  )
+)

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

@@ -184,21 +184,27 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  .divider {
+    padding: 0;
+  }
 }
 
 @mixin footer-spacing($size, $sizes: config.$spacing) {
   $spacing: map.get($sizes, $size);
 
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-top: 0;
-      padding-right: $space;
-      padding-bottom: $space;
-      padding-left: $space;
+  &:not(.modal__footer--no-spacing) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-top: 0;
+        padding-right: $space;
+        padding-bottom: $space;
+        padding-left: $space;
 
-      @at-root {
-        .modal__body--colorful + .modal__footer {
-          padding: $space !important;
+        @at-root {
+          .modal__body--colorful + .modal__footer {
+            padding: $space !important;
+          }
         }
       }
     }
@@ -227,6 +233,50 @@
   }
 }
 
+@mixin modal-product-footer() {
+  display: flex;
+  align-items: center;
+  gap: convert.to-rem(20px);
+
+  @include breakpoint.get("md") {
+    gap: convert.to-rem(30px);
+  }
+
+  @include breakpoint.get("xs", "down") {
+    flex-direction: column;
+  }
+
+  @each $breakpoint, $value in map.get(config.$spacing-product-footer, "default") {
+    @include breakpoint.get($breakpoint) {
+      padding: $value;
+    }
+  }
+}
+
+@mixin modal-product-footer-content() {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: convert.to-rem(7px);
+
+  @include breakpoint.get("xs", "down") {
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@mixin modal-product-footer-button() {
+  @include breakpoint.get("xs", "down") {
+    width: 100%;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}
+
 @mixin modal-product-image() {
   object-fit: cover;
   object-position: left;

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

@@ -120,4 +120,16 @@
   .modal__product-header--space-small .modal__product-content {
     @include mixins.modal-product-header(space.get());
   }
+
+  .modal__product-footer {
+    @include mixins.modal-product-footer();
+  }
+
+  .modal__product-footer-content {
+    @include mixins.modal-product-footer-content();
+  }
+
+  .modal__product-footer-button {
+    @include mixins.modal-product-footer-button();
+  }
 }

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

@@ -75,4 +75,40 @@ describe("rendering Modal", () => {
       expect(getByTestId("modal-light")).toHaveClass("is-light");
     });
   });
+  describe("disableHeaderSpacing prop", () => {
+    it("should have modal__header--no-spacing class when disableHeaderSpacing is true", () => {
+      const { getByTestId } = render(
+        <div id="root">
+          <Modal
+            id="modal-no-header-spacing"
+            data-testid="modal-no-header-spacing"
+            disableHeaderSpacing
+          />
+        </div>,
+      );
+      const child = getByTestId(
+        "modal-no-header-spacing",
+      ).getElementsByClassName("modal__header--no-spacing");
+      expect(child.length).toBe(1);
+      expect(child[0]).toHaveClass("modal__header--no-spacing");
+    });
+  });
+  describe("disableFooterSpacing prop", () => {
+    it("should have modal__footer--no-spacing class when disableFooterSpacing is true", () => {
+      const { getByTestId } = render(
+        <div id="root">
+          <Modal
+            id="modal-no-footer-spacing"
+            data-testid="modal-no-footer-spacing"
+            disableFooterSpacing
+          />
+        </div>,
+      );
+      const child = getByTestId(
+        "modal-no-footer-spacing",
+      ).getElementsByClassName("modal__footer--no-spacing");
+      expect(child.length).toBe(1);
+      expect(child[0]).toHaveClass("modal__footer--no-spacing");
+    });
+  });
 });

package/src/components/Section/Section.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import cx from "classnames";
 import { Container } from "../Container";
 
-export type SectionColor = "white" | "gray" | "black" | "orange";
+export type SectionColor =
+  | "white"
+  | "gray"
+  | "black"
+  | "orange"
+  | "accent1-blog"
+  | "accent2-blog";
 export type SectionSpacing = "default" | "small" | "xsmall";
 
 export interface SectionProps {

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

@@ -198,7 +198,13 @@ describe("Section Conformance Tests", () => {
     });
 
     it("applies color classes correctly", () => {
-      const colors = ["gray", "black", "orange"];
+      const colors = [
+        "gray",
+        "black",
+        "orange",
+        "accent1-blog",
+        "accent2-blog",
+      ];
       colors.forEach((color) => {
         const { container } = render(
           <Section color={color} data-testid="test-section" />,

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

@@ -196,8 +196,35 @@ describe("Section Component Unit Tests", () => {
       expect(section).toHaveClass("bg-orange");
     });
 
+    it("applies correct background class for accent1-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="accent1-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-accent1-blog");
+    });
+
+    it("applies correct background class for accent2-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="accent2-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-accent2-blog");
+    });
+
     it("handles all color variants correctly", () => {
-      const colors = ["white", "gray", "black", "orange"];
+      const colors = [
+        "white",
+        "gray",
+        "black",
+        "orange",
+        "accent1-blog",
+        "accent2-blog",
+      ];
 
       colors.forEach((color, index) => {
         const { getByTestId } = render(

package/src/styles/tokens/color.scss

@@ -5,6 +5,8 @@ $colors-light: (
   background-secondary: #f4f4f4,
   background-contrast: #141414,
   background-accent: #fff6ed,
+  background-accent1-blog: #fff6cc,
+  background-accent2-blog: #eee7f7,
   surface-primary: #ffffff,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,
@@ -57,6 +59,8 @@ $colors-dark: (
   background-secondary: #333333,
   background-contrast: #ffffff,
   background-accent: #2b1a10,
+  background-accent1-blog: #62342d,
+  background-accent2-blog: #2b1a10,
   surface-primary: #141414,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,

package/src/styles/utilities/color.scss

@@ -7,18 +7,22 @@
     // TODO: replace with new token when available
     color: color.$black !important;
   }
+
   .color-orange {
     // TODO: replace with new token when available
     color: var(--color-text-accent) !important;
   }
+
   .color-gray {
     // TODO: replace with new token when available
     color: color.$gray-800 !important;
   }
+
   .color-white {
     // TODO: replace with new token when available
     color: color.$white !important;
   }
+
   .color-blue {
     color: var(--color-icon-information) !important;
   }
@@ -113,6 +117,16 @@
     color: color.$black !important;
   }
 
+  .bg-accent1-blog {
+    background-color: var(--color-background-accent1-blog) !important;
+    color: var(--color-text-default) !important;
+  }
+
+  .bg-accent2-blog {
+    background-color: var(--color-background-accent2-blog) !important;
+    color: var(--color-text-default) !important;
+  }
+
   .bg-orange,
   .bg-orange-dark {
     &::selection {