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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useEffect } from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../utils/hooks";
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { Button } from "../Button";
+import { Buttons } from "../Buttons";
+
+// Use JavaScript version for now, then convert to TypeScript later
+import ModalStatic from "./Modal.static";
+import { ModalCloseButton } from "./ModalCloseButton";
+import { ModalTitle } from "./ModalTitle";
+import { ModalBody } from "./ModalBody";
+
+const CLASS_ROOT = "modal";
+
+export const sizes = ["small", "large"] as const;
+
+export type ModalSize = (typeof sizes)[number];
+
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Action buttons in footer */
+  actions: React.ReactNode[];
+  /** Full height on XS */
+  fullHeight?: boolean;
+  /** Sticky footer is visible when modal content is too long */
+  hasStickyFooter?: boolean;
+  /** Html id attribute. */
+  id: string;
+  /** isActive controls if modal is opened or closed */
+  isActive?: boolean;
+  /** Disable plugin initialization. */
+  noInit?: boolean;
+  /** 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. */
+  renderFooter?: () => React.ReactNode;
+  /** Custom main title renderer. Receives id as function param. Returned element must be a heading and use this id for accessibility purposes */
+  renderTitle?: (id: string) => React.ReactNode;
+  /** Modal dialog size */
+  size?: ModalSize;
+  /** Main title */
+  title?: string;
+  /** Child elements */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const defaultProps = {
+  actions: [
+    <Button key="1" data-a11y-dialog-hide>
+      Zatvoriť
+    </Button>,
+  ],
+  noInit: false,
+};
+
+const Modal: React.FC<ModalProps> = ({
+  actions = defaultProps.actions,
+  className,
+  children,
+  hasStickyFooter,
+  id,
+  noInit = defaultProps.noInit,
+  isActive,
+  size,
+  title,
+  renderBody,
+  renderTitle,
+  renderFooter,
+  fullHeight,
+  ...other
+}) => {
+  const [modalRef, instance] = useStatic(ModalStatic);
+
+  useEffect(() => {
+    if (isActive && instance && (instance as any).current) {
+      (instance as any).current.show();
+    }
+  }, [instance, isActive]);
+
+  const dialogClasses = cx(
+    `${CLASS_ROOT}__dialog`,
+    {
+      [`${CLASS_ROOT}__dialog--${size}`]: size,
+      [`${CLASS_ROOT}__dialog--full-height`]: fullHeight,
+    },
+    className,
+  );
+
+  const titleId = `${id}-title`;
+
+  const dialogTitle = renderTitle ? (
+    renderTitle(id)
+  ) : (
+    <ModalTitle id={titleId} size={size} data-a11y-dialog-initial-focus>
+      {title}
+    </ModalTitle>
+  );
+
+  return (
+    <div
+      id={id}
+      data-modal={!noInit}
+      className={CLASS_ROOT}
+      ref={modalRef}
+      role="dialog"
+      aria-hidden="true"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="modal__overlay" tabIndex={-1} data-a11y-dialog-hide />
+      <div className={dialogClasses} role="document" {...other}>
+        <div className={`${CLASS_ROOT}__header`}>
+          <ModalCloseButton />
+          {dialogTitle}
+        </div>
+        {renderBody ? renderBody() : <ModalBody>{children}</ModalBody>}
+        <div
+          className={cx(`${CLASS_ROOT}__footer`, {
+            [`${CLASS_ROOT}__footer--sticky`]: hasStickyFooter,
+          })}
+        >
+          {renderFooter ? (
+            renderFooter()
+          ) : (
+            <ConditionalWrapper
+              condition={actions.length > 1}
+              wrapper={<Buttons />}
+            >
+              {actions.map((action) => action)}
+            </ConditionalWrapper>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Modal.displayName = "Modal";
+
+export { Modal };

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import cx from "classnames";
+
+export const colors = [
+  "white",
+  "gray",
+  "orange",
+  "orange-dark",
+  "black",
+  "blue",
+  "green",
+  "pink",
+  "violet",
+  "yellow",
+] as const;
+
+export type BodyColor = (typeof colors)[number];
+
+interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: BodyColor;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "modal__body";
+
+const ModalBody: React.FC<ModalBodyProps> = ({
+  color,
+  className,
+  children,
+  ...other
+}) => (
+  <div
+    className={cx(CLASS_ROOT, className, {
+      [`bg-${color}`]: color,
+      [`${CLASS_ROOT}--colorful`]: color,
+    })}
+    {...other}
+  >
+    {children}
+  </div>
+);
+
+ModalBody.displayName = "ModalBody";
+
+export { ModalBody };

package/src/components/Modal/ModalCloseButton.tsx

@@ -0,0 +1,26 @@
+import { IconButton } from "../Button";
+import { IconButtonProps } from "../Button/IconButton";
+import { ButtonType } from "../Button/Button";
+
+interface ExtendedIconButtonProps extends IconButtonProps {
+  type?: ButtonType;
+}
+
+type ModalCloseButtonProps = Omit<ExtendedIconButtonProps, "iconName">;
+
+const ModalCloseButton: React.FC<ModalCloseButtonProps> = (props) => (
+  <IconButton
+    iconName="delete"
+    type="ghost"
+    isSquare
+    size="small"
+    className="modal__close"
+    data-a11y-dialog-hide
+    aria-label="Zatvoriť"
+    {...props}
+  />
+);
+
+ModalCloseButton.displayName = "ModalCloseButton";
+
+export { ModalCloseButton };

package/src/components/Modal/ModalTitle.tsx

@@ -0,0 +1,32 @@
+import cx from "classnames";
+
+export const sizes = ["small", "large"] as const;
+
+export type TitleSize = (typeof sizes)[number];
+
+interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  size?: TitleSize;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ModalTitle: React.FC<ModalTitleProps> = ({
+  size,
+  className,
+  children,
+  ...other
+}) => (
+  <h2
+    className={cx(className, {
+      "display-3": size === "large",
+      h2: size === "small",
+    })}
+    {...other}
+  >
+    {children}
+  </h2>
+);
+
+ModalTitle.displayName = "ModalTitle";
+
+export { ModalTitle };

package/src/components/Modal/TODO.md

@@ -0,0 +1,2 @@
+- [x] Copy original Modal
+- [ ] Style it according to ODS 2.0 Figma

package/src/components/Modal/index.ts

@@ -0,0 +1,6 @@
+import "./styles/style.scss";
+
+export { Modal } from "./Modal";
+export { ModalBody } from "./ModalBody";
+export { ModalTitle } from "./ModalTitle";
+export { ModalCloseButton } from "./ModalCloseButton";

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

@@ -0,0 +1,42 @@
+@use '../../../styles/tokens/space';
+@use '../../../styles/tokens/color';
+@use '../../../styles/tools/convert';
+
+$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;
+$overlay-z-index: 500 !default;
+$overlay-e: 0.4s ease 0s !default;
+
+$overlay: (
+  background-color: $overlay-bg-color,
+);
+
+$dialog-offset: space.get() * 2;
+
+$dialog: (
+  height: auto,
+  background-color: color.$white,
+  z-index: $overlay-z-index + 1,
+);
+
+$dialog-offset: (
+  default: space.get('small'),
+  sm: space.get(),
+);
+
+$dialog-sizes: (
+  default: convert.to-rem(700px),
+  small: convert.to-rem(400px),
+  large: convert.to-rem(1000px),
+);
+
+$spacing: (
+  small: (
+    default: space.get(),
+  ),
+  default: (
+    default: space.get(),
+    md: space.get('large'),
+  ),
+  large: (),
+  // same as default,
+);

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

@@ -0,0 +1,200 @@
+@use "sass:map";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "./config";
+
+@mixin hide {
+  display: none;
+}
+
+@mixin modal {
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin position {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@mixin overlay($settings: config.$overlay) {
+  @include generate.css-map($settings);
+
+  width: 0;
+  height: 0;
+  z-index: config.$overlay-z-index;
+  opacity: 0;
+  transform: scale(1.1, 1.1);
+  transition:
+    opacity config.$overlay-e,
+    transform config.$overlay-e;
+  backface-visibility: hidden;
+}
+
+@mixin overlay-active {
+  width: 100% !important;
+  height: 100% !important;
+  opacity: 1;
+  transform: scale(1, 1);
+  transition-delay: 0s;
+}
+
+@mixin dialog($settings: config.$dialog, $offset: config.$dialog-offset) {
+  display: flex;
+  flex-flow: column;
+  overflow: auto;
+  border-radius: convert.to-rem(18px);
+  -webkit-overflow-scrolling: touch;
+
+  @include generate.css-map($settings);
+
+  @each $breakpoint, $value in $offset {
+    @include breakpoint.get($breakpoint) {
+      max-height: calc(100% - #{$value * 2});
+      width: calc(100% - #{$value * 2});
+    }
+  }
+}
+
+@mixin dialog-width($size, $sizes: config.$dialog-sizes) {
+  $dialog-size: map.get(config.$dialog-sizes, $size);
+
+  max-width: $dialog-size;
+}
+
+@mixin body() {
+  width: 100%;
+  flex: 0 0 auto;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin header {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge
+  background: #fff;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin close {
+  position: absolute;
+  top: convert.to-rem(20px);
+  right: convert.to-rem(20px);
+  margin-bottom: 0 !important;
+
+  @include breakpoint.get("xs", "down") {
+    top: convert.to-rem(10px);
+    right: convert.to-rem(10px);
+  }
+}
+
+@mixin header-spacing($size, $sizes: config.$spacing) {
+  $spacing: map.get($sizes, $size);
+
+  @each $breakpoint, $space in $spacing {
+    @include breakpoint.get($breakpoint) {
+      padding: $space;
+    }
+  }
+}
+
+@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--colorful) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-bottom: $space;
+      }
+    }
+  }
+
+  &:has(+ .modal__footer--sticky) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+@mixin colorful-body(
+  $size,
+  $sizes: config.$spacing,
+  $sticky-footer-selector: ".modal__footer--sticky"
+) {
+  $spacing: map.get($sizes, $size);
+
+  @each $breakpoint, $space in $spacing {
+    @include breakpoint.get($breakpoint) {
+      padding-top: $space;
+      padding-bottom: $space;
+    }
+  }
+
+  + #{$sticky-footer-selector} {
+    margin-top: 0;
+  }
+}
+
+@mixin footer-base() {
+  width: 100%;
+  flex: 0 0 auto;
+
+  > *:last-child {
+    margin-bottom: 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;
+
+      @at-root {
+        .modal__body--colorful + .modal__footer {
+          padding: $space !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin sticky-footer() {
+  @media screen and (min-height: 500px) {
+    position: sticky;
+    bottom: 0;
+    background-color: color.$white;
+  }
+}

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

@@ -0,0 +1,97 @@
+@use "sass:map";
+@use '../../../styles/tools/generate';
+@use '../../../styles/tokens/breakpoint';
+@use './config';
+@use './mixins';
+
+.modal {
+  @include mixins.position;
+  @include mixins.modal;
+
+  &[aria-hidden='true'] {
+    @include mixins.hide;
+  }
+}
+
+.modal__overlay {
+  @include mixins.position;
+  @include mixins.overlay;
+
+  .modal.is-active & {
+    @include mixins.overlay-active;
+  }
+}
+
+.modal__dialog {
+  @include mixins.dialog;
+
+  @each $size, $props in config.$dialog-sizes {
+    &#{generate.variant-name($size)} {
+      @include mixins.dialog-width($size);
+    }
+  }
+}
+
+.modal__header {
+  @include mixins.header;
+
+  @each $size, $props in config.$spacing {
+    .modal__dialog#{generate.variant-name($size)} & {
+      @include mixins.header-spacing($size);
+    }
+  }
+}
+
+.modal__close {
+  @include mixins.close;
+}
+
+.modal__body {
+  @include mixins.body();
+
+  @each $size, $props in config.$spacing {
+    .modal__dialog#{generate.variant-name($size)} & {
+      @include mixins.body-spacing($size);
+    }
+  }
+
+  &--colorful {
+    @each $size, $props in config.$spacing {
+      .modal__dialog#{generate.variant-name($size)} & {
+        @include mixins.colorful-body($size);
+      }
+    }
+  }
+}
+
+.modal__dialog--full-height .modal__body {
+  flex: 1;
+}
+
+@include breakpoint.get('xs', 'down') {
+  .modal__dialog--full-height {
+    height: calc(100% - 2.5rem);
+  }
+}
+
+.modal__footer {
+  @include mixins.footer-base();
+
+  @each $size, $props in config.$spacing {
+    .modal__dialog#{generate.variant-name($size)} & {
+      @include mixins.footer-spacing($size);
+    }
+  }
+
+  &--sticky {
+    @include mixins.sticky-footer();
+
+    $spacing: map.get(config.$spacing, 'default');
+
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding: $space !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Button } from "../../Button";
+import { Modal } from "../";
+
+const example = (
+  <>
+    <div id="root">
+      <Button data-a11y-dialog-show="modal" data-test-id="open-button">
+        Open
+      </Button>
+      <Modal id="modal" title="Modal title">
+        <p>
+          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+          lacinia odio sem nec elit. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies
+          vehicula ut id elit. Donec sed odio dui. Maecenas faucibus mollis
+          interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </p>
+      </Modal>
+    </div>
+    <div id="root-modals" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: { "no-inline-style": "off", "hidden-focusable": "off" },
+  });
+});
+
+it("is accessible", async () => {
+  window.scrollTo = jest.fn();
+  const { container } = render(example);
+
+  fireEvent.click(container.querySelector('[data-test-id="open-button"]'));
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { Modal } from "../Modal";
+
+describe("rendering Modal", () => {
+  let modal;
+
+  beforeEach(() => {
+    modal = render(
+      <>
+        <div id="root">
+          <Modal id="id" data-testid="test-id" />
+        </div>
+        <div id="root-modals" />
+      </>,
+    );
+  });
+  describe("initial state and id", () => {
+    it("has wrapper div with class modal", () => {
+      const { getByTestId } = modal;
+      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
+      expect(getByTestId("test-id").parentElement).toHaveClass("modal");
+    });
+    it("has wrapper div with id attribute set to id prop", () => {
+      const { getByTestId } = modal;
+      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
+      expect(getByTestId("test-id").parentElement.id).toBe("id");
+    });
+    it("has wrapper div with data-modal attribute set to true", () => {
+      const { getByTestId } = modal;
+      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
+      expect(
+        getByTestId("test-id").parentElement.getAttribute("data-modal"),
+      ).toBe("true");
+    });
+    it("has wrapper div with aria-labelledby attribute set to id-title when id prop is id", () => {
+      const { getByTestId } = modal;
+      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
+      expect(
+        getByTestId("test-id").parentElement.getAttribute("aria-labelledby"),
+      ).toBe("id-title");
+    });
+    it("has class modal__dialog", () => {
+      const { getByTestId } = modal;
+      expect(getByTestId("test-id")).toHaveClass("modal__dialog");
+    });
+    it("has child div with class modal__header", () => {
+      const { getByTestId } = modal;
+      const child =
+        getByTestId("test-id").getElementsByClassName("modal__header");
+      expect(child.length).toBe(1);
+      expect(child[0]).toHaveClass("modal__header");
+    });
+  });
+});