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

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. */
@@ -70,6 +72,7 @@ const Modal: React.FC<ModalProps> = ({
   isActive,
   size,
   title,
+  renderHeader,
   renderBody,
   renderTitle,
   renderFooter,
@@ -119,11 +122,26 @@ 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`]: !!renderHeader,
+          })}
+        >
+          {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,

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/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,4 @@ export { Modal } from "./Modal";
 export { ModalBody } from "./ModalBody";
 export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
+export { ModalProductHeader } from "./ModalProductHeader";

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;
     }
   }
 }
@@ -198,3 +212,23 @@
     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-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,23 @@
       }
     }
   }
+
+  .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());
+  }
 }

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/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");
+  });
+});

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

@@ -29,6 +29,7 @@
 }
 
 @mixin link() {
+  border-radius: 100% !important;
   margin-bottom: 0;
   background-color: var(--color-background-primary);
   &:hover {

package/src/components/index.ts

@@ -41,7 +41,14 @@ import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { Loader } from "./Loader";
-import { Modal, ModalBody, ModalCloseButton, ModalTitle } from "./Modal";
+import { MegamenuDropdown } from "./Megamenu";
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalTitle,
+  ModalProductHeader,
+} from "./Modal";
 import { Section } from "./Section";
 import { Sticker } from "./Sticker";
 import { SkipLink } from "./SkipLink";
@@ -85,6 +92,7 @@ import { Cover } from "./Cover";
 import { Testimonial } from "./Testimonial";
 import { Hero } from "./Hero";
 import { IconList, Item } from "./IconList";
+
 export {
   Accordion,
   AccordionItem,
@@ -144,10 +152,12 @@ export {
   List,
   ListItem,
   Loader,
+  MegamenuDropdown,
   Message,
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductHeader,
   ModalTitle,
   Pagination,
   Pictogram,

package/src/styles/typography/mixins.scss

@@ -55,6 +55,11 @@
     }
   }
 
+  // Default štýly pre všetky a elementy
+  a {
+    @include generate.responsive-css-map($config);
+  }
+
   // Generovanie variantov pre p elementy s triedami
   @each $variant, $breakpoints in $config {
     @if $variant != default {
@@ -64,6 +69,15 @@
     }
   }
 
+  // Generovanie variantov pre a elementy s triedami
+  @each $variant, $breakpoints in $config {
+    @if $variant != default {
+      a#{generate.variant-name($variant, ".")} {
+        @include generate.responsive-css-map($breakpoints);
+      }
+    }
+  }
+
   cite {
     font-style: normal;
   }
@@ -164,3 +178,12 @@
     }
   }
 }
+
+@mixin list-marker-orange() {
+  > li {
+
+    &::marker {
+      color: var(--color-icon-accent);
+    }
+  }
+}

package/src/styles/typography/style.scss

@@ -53,3 +53,7 @@ ul {
 .list-inline {
   @include list-inline();
 }
+
+.list--marker-orange {
+  @include list-marker-orange();
+}