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

package/src/components/Modal/Modal.mdx

@@ -15,7 +15,15 @@ import Grid, { GridCol } from "../Grid";
 import Icon from "../Icon";
 import IconList from "../IconList";
 import { Image } from "../Image";
-import Modal, { ModalHeader, ModalBody, ModalFooter } from ".";
+import Modal, {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalProductHeader, ModalCloseButton
+} from ".";
+import { Divider } from "../Divider";
+import { Bar, BarItem } from "../Bar";
+import { Tag } from "../Tag";
 
 export const actionButtons = [
   <Button type="primary" data-a11y-dialog-hide key="1">
@@ -181,6 +189,112 @@ Customize the footer. Should be primary used for specific action button cases.
   </Modal>
 </Preview>
 
+## Product header
+
+Use the product header to display product information with an optional image, similar to the Card component's product header.
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-product-header">
+    Open Modal with product header
+  </Button>
+  <Modal
+    id="modal-product-header"
+    actions={actionButtons}
+    renderHeader={() => (
+      <>
+        <ModalCloseButton />
+        <ModalProductHeader
+          image={<img src="/images/product-1.svg" alt="Product" />}
+        >
+          <p className="bold color-orange">Odporúčame</p>
+          <Bar space="small" className="mb-none">
+            <BarItem>
+              <h2 className="h4 mb-none">Prémiový paušál</h2>
+            </BarItem>
+            <BarItem>
+              <Tag color="black">5G</Tag>
+            </BarItem>
+          </Bar>
+          <p className="h2 color-orange mb-none thin">∞ GB</p>
+        </ModalProductHeader>
+        <Divider thinLine />
+      </>
+    )}
+  >
+    <p className="h5 mb">
+      V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s
+    </p>
+    <h3 className="h4">S paušálom</h3>
+    <ul className="list--marker-orange">
+      <li>
+        nekonečné dáta, po prečerpaní 200 GB pokračujete s rýchlosťou 20
+        Mbit/s, dáta v EÚ podliehajú regulácii
+      </li>
+      <li>
+        nekonečné volania v SR a v EÚ (Zóna 1), medzinárodné volania do EÚ
+        a do Zóny 1 sú spoplatnené sumou 0,03 € za minútu
+      </li>
+      <li>nekonečné SMS/MMS v SR/EÚ/Zóna 1</li>
+      <li>prístup do 5G siete</li>
+      <li>možnosť dokúpiť ďalších 5 GB len za 5,13 €</li>
+      <li>možnosť bezplatnej aktivácie služby Online ochrana Basic</li>
+      <li>bezplatné založenie skupiny Navzájom zadarmo</li>
+    </ul>
+    {parse(loremIpsum({ count: 2, units: "paragraph", format: "html" }))}
+  </Modal>
+</Preview>
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-product-header-small">
+    Open Modal with compact product header
+  </Button>
+  <Modal
+    id="modal-product-header-small"
+    actions={actionButtons}
+    renderHeader={() => (
+      <>
+        <ModalCloseButton />
+        <ModalProductHeader
+          space="small"
+          image={<img src="/images/product-2.svg" alt="Product" />}
+        >
+          <Bar space="small" className="mb-none">
+            <BarItem>
+              <h2 className="h3 mb-none">Veľký paušál</h2>
+            </BarItem>
+            <BarItem>
+              <Tag color="black">5G</Tag>
+            </BarItem>
+          </Bar>
+          <p className="h2 color-orange mb-none thin">∞ GB</p>
+        </ModalProductHeader>
+        <Divider thinLine />
+      </>
+    )}
+  >
+    <p className="h5 mb">
+      V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s
+    </p>
+    <h3 className="h4">S paušálom</h3>
+    <ul className="list--marker-orange">
+      <li>
+        nekonečné dáta, po prečerpaní 200 GB pokračujete s rýchlosťou 20
+        Mbit/s, dáta v EÚ podliehajú regulácii
+      </li>
+      <li>
+        nekonečné volania v SR a v EÚ (Zóna 1), medzinárodné volania do EÚ
+        a do Zóny 1 sú spoplatnené sumou 0,03 € za minútu
+      </li>
+      <li>nekonečné SMS/MMS v SR/EÚ/Zóna 1</li>
+      <li>prístup do 5G siete</li>
+      <li>možnosť dokúpiť ďalších 5 GB len za 5,13 €</li>
+      <li>možnosť bezplatnej aktivácie služby Online ochrana Basic</li>
+      <li>bezplatné založenie skupiny Navzájom zadarmo</li>
+    </ul>
+    {parse(loremIpsum({ count: 1, units: "paragraph", format: "html" }))}
+  </Modal>
+</Preview>
+
 ## Full height on XS
 
 On XS screens (mobile devices), the modal will take the full height of the viewport to maintain a consistent height when the modal contains a flow or multiple steps.
@@ -332,6 +446,8 @@ when the first/last body element is using default color (white).
 
 <ComponentDocs title="<Modal />" component={Modal} />
 
+<ComponentDocs title="<ModalProductHeader />" component={ModalProductHeader} />
+
 ## JS module reference
 
 Modal is backed with [a11y-dialog | see docs](https://github.com/edenspiekermann/a11y-dialog)
@@ -442,8 +558,8 @@ instance.method();
 
 - Modals should only be opened by activating a `button` element.
 - Opening a modal sets focus on element with `data-a11y-modal-initial-focus`
-  attribute (modal title by default). When not present, focus is set on first
-  focusable element, usually the close button.
+attribute (modal title by default). When not present, focus is set on first
+focusable element, usually the close button.
 - An open modal traps focus. It must always contain a close button.
 - Pressing ESC or clicking the overlay closes the modal.
 - Closing a modal sets focus back on the activating `button` element.

package/src/components/Modal/Modal.static.ts

@@ -98,10 +98,13 @@ export default class Modal {
      */
     const modalHeader = this.element.querySelector(".modal__header");
     if (modalHeader) {
+      const hasNoSpacingClass = modalHeader.classList.contains(
+        "modal__header--no-spacing",
+      );
       const firstNonBtnElement = Array.from(modalHeader.children).find(
         (child) => !child.classList.contains("btn"),
       );
-      if (firstNonBtnElement) {
+      if (firstNonBtnElement && !hasNoSpacingClass) {
         (firstNonBtnElement as HTMLElement).style.marginRight = "40px";
       }
     }

package/src/components/Modal/Modal.tsx

@@ -33,6 +33,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   isActive?: boolean;
   /** Disable plugin initialization. */
   noInit?: boolean;
+  /** Custom header renderer. Receives id as function param. Returned element(s) must contain a header with close button. */
+  renderHeader?: (id: string) => React.ReactNode;
   /** Custom body renderer. Receives title as function param. Returned element(s) must contain a title. */
   renderBody?: () => React.ReactNode;
   /** Custom footer renderer. Receives actions as function param. Returned element(s) must contain the actions. */
@@ -49,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 = {
@@ -70,11 +76,14 @@ const Modal: React.FC<ModalProps> = ({
   isActive,
   size,
   title,
+  renderHeader,
   renderBody,
   renderTitle,
   renderFooter,
   fullHeight,
   colorScheme,
+  disableHeaderSpacing,
+  disableFooterSpacing,
   ...other
 }) => {
   const [modalRef, instance] = useStatic(ModalStatic);
@@ -119,14 +128,30 @@ const Modal: React.FC<ModalProps> = ({
     >
       <div className="modal__overlay" tabIndex={-1} data-a11y-dialog-hide />
       <div className={dialogClasses} role="document" {...other}>
-        <div className={`${CLASS_ROOT}__header`}>
-          <ModalCloseButton />
-          {dialogTitle}
+        {}
+        <div
+          className={cx(`${CLASS_ROOT}__header`, {
+            [`${CLASS_ROOT}__header--no-spacing`]: disableHeaderSpacing,
+          })}
+        >
+          {renderHeader ? (
+            renderHeader(id)
+          ) : (
+            <>
+              <ModalCloseButton />
+              {dialogTitle}
+            </>
+          )}
         </div>
-        {renderBody ? renderBody() : <ModalBody>{children}</ModalBody>}
+        {renderBody ? (
+          renderBody()
+        ) : (
+          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
+        )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {
             [`${CLASS_ROOT}__footer--sticky`]: hasStickyFooter,
+            [`${CLASS_ROOT}__footer--no-spacing`]: disableFooterSpacing,
           })}
         >
           {renderFooter ? (

package/src/components/Modal/ModalBody.tsx

@@ -20,6 +20,7 @@ interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   color?: BodyColor;
   className?: string;
   children?: React.ReactNode;
+  withTopPadding?: boolean;
 }
 
 const CLASS_ROOT = "modal__body";
@@ -28,12 +29,14 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   color,
   className,
   children,
+  withTopPadding,
   ...other
 }) => (
   <div
     className={cx(CLASS_ROOT, className, {
       [`bg-${color}`]: color,
       [`${CLASS_ROOT}--colorful`]: color,
+      [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
     })}
     {...other}
   >

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

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

package/src/components/Modal/index.ts

@@ -2,3 +2,5 @@ export { Modal } from "./Modal";
 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

@@ -33,9 +33,8 @@
   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;
 }
 
@@ -93,6 +92,10 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  .divider {
+    padding: 0;
+  }
 }
 
 @mixin close {
@@ -110,9 +113,20 @@
 @mixin header-spacing($size, $sizes: config.$spacing) {
   $spacing: map.get($sizes, $size);
 
+  &:not(.modal__header--no-spacing) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding: $space;
+      }
+    }
+  }
+}
+
+@mixin body-spacing-top($size, $sizes: config.$spacing) {
+  $spacing: map.get($sizes, $size);
   @each $breakpoint, $space in $spacing {
     @include breakpoint.get($breakpoint) {
-      padding: $space;
+      padding-top: $space;
     }
   }
 }
@@ -170,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;
+          }
         }
       }
     }
@@ -198,3 +218,67 @@
     background-color: var(--color-surface-primary);
   }
 }
+
+@mixin modal-product-header($spacing) {
+  flex: 0 1 auto;
+
+  @if ($spacing == null) {
+    @each $breakpoint, $value in map.get(config.$spacing, "default") {
+      @include breakpoint.get($breakpoint) {
+        padding: $value;
+      }
+    }
+  } @else {
+    padding: $spacing;
+  }
+}
+
+@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;
+  max-width: convert.to-rem(125px);
+}

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

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "./config";
 @use "./mixins";
@@ -54,6 +55,10 @@
       .modal__dialog#{generate.variant-name($size)} & {
         @include mixins.body-spacing($size);
       }
+
+      .modal__dialog#{generate.variant-name($size)} > &--with-top-padding {
+        @include mixins.body-spacing-top($size);
+      }
     }
 
     &--colorful {
@@ -96,4 +101,35 @@
       }
     }
   }
+
+  .modal__product {
+    &-header {
+      display: flex;
+      justify-content: space-between;
+
+      > img {
+        @include mixins.modal-product-image;
+      }
+    }
+
+    &-content {
+      @include mixins.modal-product-header(null);
+    }
+  }
+
+  .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.conformance.test.js

@@ -3,7 +3,7 @@ import { render, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
 
 import { Button } from "../../Button";
-import { Modal } from "../";
+import { Modal, ModalProductHeader } from "../";
 
 const example = (
   <>
@@ -20,6 +20,13 @@ const example = (
           interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </p>
       </Modal>
+      <Modal id="modal-with-product-header" title="Modal with Product Header">
+        <ModalProductHeader image={<div>Product Image</div>}>
+          <h3>Product Title</h3>
+          <p>Product description</p>
+        </ModalProductHeader>
+        <p>Modal content</p>
+      </Modal>
     </div>
     <div id="root-modals" />
   </>

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/Modal/tests/ModalProductHeader.unit.test.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { ModalProductHeader } from "../ModalProductHeader";
+
+describe("rendering ModalProductHeader", () => {
+  it("has default class modal__product-header", () => {
+    const { getByTestId } = render(
+      <ModalProductHeader data-testid="test-id">Header</ModalProductHeader>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("modal__product-header");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <ModalProductHeader>Product Header</ModalProductHeader>,
+    );
+    expect(getByText("Product Header")).toBeInTheDocument();
+  });
+
+  it("renders image if provided", () => {
+    const { getByTestId } = render(
+      <ModalProductHeader
+        image={<div data-testid="test-image">Test Image</div>}
+      >
+        Header
+      </ModalProductHeader>,
+    );
+    expect(getByTestId("test-image")).toBeInTheDocument();
+  });
+
+  it("has additional class when className is set", () => {
+    const { getByTestId } = render(
+      <ModalProductHeader data-testid="test-id" className="test-class">
+        Header
+      </ModalProductHeader>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("modal__product-header");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it('has modal__product-header--space-small class when space="small"', () => {
+    const { getByTestId } = render(
+      <ModalProductHeader data-testid="test-id" space="small">
+        Header
+      </ModalProductHeader>,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "modal__product-header--space-small",
+    );
+  });
+
+  it("does not have modal__product-header--space-small class when space is not set", () => {
+    const { getByTestId } = render(
+      <ModalProductHeader data-testid="test-id">Header</ModalProductHeader>,
+    );
+    expect(getByTestId("test-id")).not.toHaveClass(
+      "modal__product-header--space-small",
+    );
+  });
+
+  it("has content wrapper with modal__product-content class", () => {
+    const { container } = render(
+      <ModalProductHeader>Product Header</ModalProductHeader>,
+    );
+    expect(
+      container.querySelector(".modal__product-content"),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".modal__product-content"),
+    ).toHaveTextContent("Product Header");
+  });
+});