@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Modal/Modal.jsx

@@ -1,140 +1,140 @@
-import React, { useRef, useState, useEffect } from 'react';
-import ReactModal from 'react-modal';
-import PropTypes from 'prop-types';
+import React, { useRef, useState, useEffect } from "react";
+import ReactModal from "react-modal";
+import PropTypes from "prop-types";
 
-import { CloseXIcon2 } from '../../lib/SvgComponents.jsx';
+import { CloseXIcon2 } from "../../lib/SvgComponents.jsx";
 
 const Modal = ({
-  children,
-  onRequestClose,
-  title,
-  primary,
-  secondary,
-  appElement,
-  isOpen,
-  ...props
+    children,
+    onRequestClose,
+    title,
+    primary,
+    secondary,
+    appElement,
+    isOpen,
+    ...props
 }) => {
-  const [overflowSeparator, setOverflowSeparator] = useState(false);
-  const closeButtonRef = useRef(null);
-  const contentRef = useRef(null);
+    const [overflowSeparator, setOverflowSeparator] = useState(false);
+    const closeButtonRef = useRef(null);
+    const contentRef = useRef(null);
 
-  useEffect(() => {
-    ReactModal.setAppElement(appElement);
-  }, []);
+    useEffect(() => {
+        ReactModal.setAppElement(appElement);
+    }, []);
 
-  return (
-    <ReactModal
-      onRequestClose={onRequestClose}
-      portalClassName="qpp-c-modal"
-      className="qpp-c-modal__content"
-      overlayClassName="qpp-c-modal__overlay"
-      bodyOpenClassName="qpp-c-modal__body-open"
-      isOpen={isOpen}
-      onAfterOpen={() => {
-        // Add heading separator based on overflow
-        if (
-          contentRef.current?.scrollHeight >
-          document.documentElement.clientHeight * 0.6
-        ) {
-          setOverflowSeparator(true);
-        } else {
-          setOverflowSeparator(false);
-        }
+    return (
+        <ReactModal
+            onRequestClose={onRequestClose}
+            portalClassName="qpp-c-modal"
+            className="qpp-c-modal__content"
+            overlayClassName="qpp-c-modal__overlay"
+            bodyOpenClassName="qpp-c-modal__body-open"
+            isOpen={isOpen}
+            onAfterOpen={() => {
+                // Add heading separator based on overflow
+                if (
+                    contentRef.current?.scrollHeight >
+                    document.documentElement.clientHeight * 0.6
+                ) {
+                    setOverflowSeparator(true);
+                } else {
+                    setOverflowSeparator(false);
+                }
 
-        // Set default focus
-        if (closeButtonRef?.current) {
-          closeButtonRef.current.focus();
-        }
-      }}
-      aria={{
-        labelledby: 'modal-heading',
-        describedby: 'modal-body',
-      }}
-      {...props}
-    >
-      <div
-        className={`qpp-c-modal__header ${
-          overflowSeparator ? 'qpp-c-modal__header-sep' : ''
-        }`}
-      >
-        <h3 id="modal-heading">{title}</h3>
-        <button
-          className="closex qpp-c-button qpp-c-button--text qpp-u-color--black"
-          aria-label="close modal"
-          data-testid="modal-close-btn"
-          onClick={onRequestClose}
-          ref={closeButtonRef}
+                // Set default focus
+                if (closeButtonRef?.current) {
+                    closeButtonRef.current.focus();
+                }
+            }}
+            aria={{
+                labelledby: "modal-heading",
+                describedby: "modal-body",
+            }}
+            {...props}
         >
-          <CloseXIcon2 />
-        </button>
-      </div>
-      <div
-        id="modal-body"
-        className="qpp-c-modal__body"
-        ref={contentRef}
-        tabIndex={overflowSeparator ? "0" : undefined}
-      >
-        {children}
-      </div>
-      {(primary || secondary) && (
-        <div className="qpp-c-modal__footer">
-          {secondary && (
-            <button
-              className={`qpp-c-button qpp-c-button--secondary ${
-                primary ? 'qpp-u-margin-right--16' : ''
-              }`}
-              loading={secondary.loading}
-              onClick={secondary.onClick || onRequestClose}
-              aria-label={secondary.title}
-              data-testid="modal-secondary-btn"
+            <div
+                className={`qpp-c-modal__header ${
+                    overflowSeparator ? "qpp-c-modal__header-sep" : ""
+                }`}
             >
-              {secondary.title}
-            </button>
-          )}
-          {primary && (
-            <button
-              className="qpp-c-button"
-              loading={primary.loading}
-              onClick={primary.onClick}
-              data-testid="modal-primary-btn"
-              aria-label={primary.title}
+                <h3 id="modal-heading">{title}</h3>
+                <button
+                    className="closex qpp-c-button qpp-c-button--text qpp-u-color--black"
+                    aria-label="close modal"
+                    data-testid="modal-close-btn"
+                    onClick={onRequestClose}
+                    ref={closeButtonRef}
+                >
+                    <CloseXIcon2 />
+                </button>
+            </div>
+            <div
+                id="modal-body"
+                className="qpp-c-modal__body"
+                ref={contentRef}
+                tabIndex={overflowSeparator ? "0" : undefined}
             >
-              {primary.title}
-            </button>
-          )}
-        </div>
-      )}
-    </ReactModal>
-  );
+                {children}
+            </div>
+            {(primary || secondary) && (
+                <div className="qpp-c-modal__footer">
+                    {secondary && (
+                        <button
+                            className={`qpp-c-button qpp-c-button--secondary ${
+                                primary ? "qpp-u-margin-right--16" : ""
+                            }`}
+                            loading={secondary.loading}
+                            onClick={secondary.onClick || onRequestClose}
+                            aria-label={secondary.title}
+                            data-testid="modal-secondary-btn"
+                        >
+                            {secondary.title}
+                        </button>
+                    )}
+                    {primary && (
+                        <button
+                            className="qpp-c-button"
+                            loading={primary.loading}
+                            onClick={primary.onClick}
+                            data-testid="modal-primary-btn"
+                            aria-label={primary.title}
+                        >
+                            {primary.title}
+                        </button>
+                    )}
+                </div>
+            )}
+        </ReactModal>
+    );
 };
 
 Modal.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  primary: PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    onClick: PropTypes.func,
-    loading: PropTypes.bool,
-    loadingText: PropTypes.string,
-  }),
-  secondary: PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    onClick: PropTypes.func,
-    loading: PropTypes.bool,
-    loadingText: PropTypes.string,
-  }),
-  onRequestClose: PropTypes.func,
-  appElement: PropTypes.string,
-  isOpen: PropTypes.bool,
+    title: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    primary: PropTypes.shape({
+        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+        onClick: PropTypes.func,
+        loading: PropTypes.bool,
+        loadingText: PropTypes.string,
+    }),
+    secondary: PropTypes.shape({
+        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+        onClick: PropTypes.func,
+        loading: PropTypes.bool,
+        loadingText: PropTypes.string,
+    }),
+    onRequestClose: PropTypes.func,
+    appElement: PropTypes.string,
+    isOpen: PropTypes.bool,
 };
 
 Modal.defaultProps = {
-  onRequestClose: () => {},
-  title: undefined,
-  primary: null,
-  secondary: null,
-  appElement: 'body > *:not(.qpp-c-modal)',
-  isOpen: false,
+    onRequestClose: () => {},
+    title: undefined,
+    primary: null,
+    secondary: null,
+    appElement: "body > *:not(.qpp-c-modal)",
+    isOpen: false,
 };
 
 export default Modal;

package/components/Modal/Modal.stories.js

@@ -1,159 +1,167 @@
-import React, { useState } from 'react';
-import Modal from './index';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import React, { useState } from "react";
+import Modal from "./index";
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
 
 export default {
-  title: 'Modal',
-  component: Modal,
-  decorators: [withKnobs],
+    title: "Modal",
+    component: Modal,
+    decorators: [withKnobs],
 };
 
 const useModal = () => {
-  const [open, setOpen] = useState(false);
-  const openModal = () => setOpen(true);
-  const closeModal = () => setOpen(false);
-  return [open, openModal, closeModal];
+    const [open, setOpen] = useState(false);
+    const openModal = () => setOpen(true);
+    const closeModal = () => setOpen(false);
+    return [open, openModal, closeModal];
 };
 
 export const WithDesignSystem = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-      >
-        <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
-        </p>
-      </Modal>
-    </div>
-  );
+    const [open, openModal, closeModal] = useModal();
+    const knobIsOpen = boolean("isOpen", false);
+    return (
+        <div className="qpp-u-padding--12">
+            <button className="qpp-c-button" onClick={openModal}>
+                Open Modal
+            </button>
+            <Modal
+                useDesignSystem
+                isOpen={open || knobIsOpen}
+                title={text("Title text", "Title Text")}
+                onRequestClose={closeModal}
+            >
+                <p>
+                    {text(
+                        "bodyText",
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
+                    )}
+                </p>
+            </Modal>
+        </div>
+    );
 };
 
 export const WithDesignSystemDialog = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-        primary={{
-          title: 'Yes, go for it',
-          onClick: () => {
-            console.log('submit');
-            closeModal();
-          },
-        }}
-        secondary={{
-          title: 'No, take me back',
-        }}
-      >
-        <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
-        </p>
-      </Modal>
-    </div>
-  );
+    const [open, openModal, closeModal] = useModal();
+    const knobIsOpen = boolean("isOpen", false);
+    return (
+        <div className="qpp-u-padding--12">
+            <button className="qpp-c-button" onClick={openModal}>
+                Open Modal
+            </button>
+            <Modal
+                useDesignSystem
+                isOpen={open || knobIsOpen}
+                title={text("Title text", "Title Text")}
+                onRequestClose={closeModal}
+                primary={{
+                    title: "Yes, go for it",
+                    onClick: () => {
+                        console.log("submit");
+                        closeModal();
+                    },
+                }}
+                secondary={{
+                    title: "No, take me back",
+                }}
+            >
+                <p>
+                    {text(
+                        "bodyText",
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
+                    )}
+                </p>
+            </Modal>
+        </div>
+    );
 };
 
 export const WithDesignSystemOverflow = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-        primary={{
-          title: 'Yes, go for it',
-          onClick: () => {
-            console.log('submit');
-            closeModal();
-          },
-        }}
-        secondary={{
-          title: 'No, take me back',
-        }}
-      >
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac
-          pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper
-          vitae lorem ullamcorper, blandit fringilla mauris. Aenean odio nulla,
-          dapibus convallis est ac, tempor congue lorem. Aliquam facilisis
-          tortor eget lectus gravida bibendum. Suspendisse vel posuere risus.
-          Etiam condimentum sollicitudin est, eget auctor lectus suscipit nec.
-          Duis efficitur vitae risus at malesuada. Mauris tempus turpis sed
-          lacus lacinia, et mattis tortor eleifend. In sit amet felis vel quam
-          egestas ultricies ac ac nisl. Morbi elementum dui libero, non
-          convallis risus ornare vel. Maecenas posuere ipsum ut sem aliquet,
-          quis maximus dolor cursus. Praesent vulputate orci tellus, sed
-          fringilla arcu mollis sit amet. Phasellus eros turpis, consequat sit
-          amet placerat sed, mollis ac justo.
-        </p>
-        <p>
-          Cras quis pharetra elit. Mauris lacinia quam quis metus mattis
-          lobortis vel nec arcu. Fusce nec tellus vel nunc cursus vestibulum.
-          Quisque pretium, arcu at sagittis posuere, leo magna tempus nunc, vel
-          malesuada nunc mauris ac ante. Donec arcu velit, imperdiet vitae purus
-          nec, imperdiet auctor nisi. Cras ornare, elit sit amet viverra
-          bibendum, justo dolor congue mi, quis pretium erat orci a lorem. Sed
-          rhoncus quam ut tellus hendrerit accumsan.
-        </p>
-        <p>
-          Donec varius elit vitae elit efficitur fermentum. Vestibulum ante
-          ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-          curae; Nulla facilisi. Ut malesuada venenatis varius. Nunc libero
-          massa, luctus sagittis sapien ultrices, pulvinar venenatis purus. In
-          nec orci ac nibh sagittis lobortis vel sed massa. Morbi pretium odio
-          vitae malesuada ullamcorper. Pellentesque facilisis posuere
-          consectetur. Nam maximus finibus ante, non eleifend neque euismod et.
-        </p>
-        <p>
-          Pellentesque vehicula nec massa nec accumsan. Pellentesque non odio eu
-          felis hendrerit pellentesque non sed neque. Morbi dui nisl, facilisis
-          id gravida non, vehicula at dui. In eleifend suscipit imperdiet.
-          Quisque facilisis augue et mi lobortis tristique. Praesent auctor
-          dictum erat, non mollis ante tempus id. Integer et libero iaculis,
-          imperdiet neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
-          varius ullamcorper, semper vel velit. Morbi consequat mattis nisi, id
-          dignissim est bibendum non. Suspendisse semper laoreet neque, ac
-          tincidunt tortor. Ut posuere urna a convallis consectetur. Mauris
-          varius cursus libero sed molestie. Duis id dignissim arcu. Mauris
-          tincidunt egestas congue.
-        </p>
-        <p>
-          Donec rutrum erat vitae nulla ultricies, quis laoreet orci consequat.
-          Nunc et justo volutpat dolor feugiat convallis. Vivamus efficitur nisi
-          quis risus eleifend, ut tincidunt turpis volutpat. Nam commodo turpis
-          dolor, dapibus rutrum erat facilisis a. Ut a dictum urna. Maecenas vel
-          egestas odio. Ut venenatis est dolor, eget ullamcorper diam finibus
-          et. Proin tincidunt porta pellentesque.
-        </p>
-      </Modal>
-    </div>
-  );
+    const [open, openModal, closeModal] = useModal();
+    const knobIsOpen = boolean("isOpen", false);
+    return (
+        <div className="qpp-u-padding--12">
+            <button className="qpp-c-button" onClick={openModal}>
+                Open Modal
+            </button>
+            <Modal
+                useDesignSystem
+                isOpen={open || knobIsOpen}
+                title={text("Title text", "Title Text")}
+                onRequestClose={closeModal}
+                primary={{
+                    title: "Yes, go for it",
+                    onClick: () => {
+                        console.log("submit");
+                        closeModal();
+                    },
+                }}
+                secondary={{
+                    title: "No, take me back",
+                }}
+            >
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Phasellus ac pulvinar massa, in mattis ligula. Vestibulum
+                    enim velit, ullamcorper vitae lorem ullamcorper, blandit
+                    fringilla mauris. Aenean odio nulla, dapibus convallis est
+                    ac, tempor congue lorem. Aliquam facilisis tortor eget
+                    lectus gravida bibendum. Suspendisse vel posuere risus.
+                    Etiam condimentum sollicitudin est, eget auctor lectus
+                    suscipit nec. Duis efficitur vitae risus at malesuada.
+                    Mauris tempus turpis sed lacus lacinia, et mattis tortor
+                    eleifend. In sit amet felis vel quam egestas ultricies ac ac
+                    nisl. Morbi elementum dui libero, non convallis risus ornare
+                    vel. Maecenas posuere ipsum ut sem aliquet, quis maximus
+                    dolor cursus. Praesent vulputate orci tellus, sed fringilla
+                    arcu mollis sit amet. Phasellus eros turpis, consequat sit
+                    amet placerat sed, mollis ac justo.
+                </p>
+                <p>
+                    Cras quis pharetra elit. Mauris lacinia quam quis metus
+                    mattis lobortis vel nec arcu. Fusce nec tellus vel nunc
+                    cursus vestibulum. Quisque pretium, arcu at sagittis
+                    posuere, leo magna tempus nunc, vel malesuada nunc mauris ac
+                    ante. Donec arcu velit, imperdiet vitae purus nec, imperdiet
+                    auctor nisi. Cras ornare, elit sit amet viverra bibendum,
+                    justo dolor congue mi, quis pretium erat orci a lorem. Sed
+                    rhoncus quam ut tellus hendrerit accumsan.
+                </p>
+                <p>
+                    Donec varius elit vitae elit efficitur fermentum. Vestibulum
+                    ante ipsum primis in faucibus orci luctus et ultrices
+                    posuere cubilia curae; Nulla facilisi. Ut malesuada
+                    venenatis varius. Nunc libero massa, luctus sagittis sapien
+                    ultrices, pulvinar venenatis purus. In nec orci ac nibh
+                    sagittis lobortis vel sed massa. Morbi pretium odio vitae
+                    malesuada ullamcorper. Pellentesque facilisis posuere
+                    consectetur. Nam maximus finibus ante, non eleifend neque
+                    euismod et.
+                </p>
+                <p>
+                    Pellentesque vehicula nec massa nec accumsan. Pellentesque
+                    non odio eu felis hendrerit pellentesque non sed neque.
+                    Morbi dui nisl, facilisis id gravida non, vehicula at dui.
+                    In eleifend suscipit imperdiet. Quisque facilisis augue et
+                    mi lobortis tristique. Praesent auctor dictum erat, non
+                    mollis ante tempus id. Integer et libero iaculis, imperdiet
+                    neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
+                    varius ullamcorper, semper vel velit. Morbi consequat mattis
+                    nisi, id dignissim est bibendum non. Suspendisse semper
+                    laoreet neque, ac tincidunt tortor. Ut posuere urna a
+                    convallis consectetur. Mauris varius cursus libero sed
+                    molestie. Duis id dignissim arcu. Mauris tincidunt egestas
+                    congue.
+                </p>
+                <p>
+                    Donec rutrum erat vitae nulla ultricies, quis laoreet orci
+                    consequat. Nunc et justo volutpat dolor feugiat convallis.
+                    Vivamus efficitur nisi quis risus eleifend, ut tincidunt
+                    turpis volutpat. Nam commodo turpis dolor, dapibus rutrum
+                    erat facilisis a. Ut a dictum urna. Maecenas vel egestas
+                    odio. Ut venenatis est dolor, eget ullamcorper diam finibus
+                    et. Proin tincidunt porta pellentesque.
+                </p>
+            </Modal>
+        </div>
+    );
 };

package/components/Modal/index.jsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import LegacyModal from './LegacyModal';
-import DsModal from './Modal';
+import LegacyModal from "./LegacyModal";
+import DsModal from "./Modal";
 
 const Modal = ({ useDesignSystem, ...rest }) => {
-  if (useDesignSystem) {
-    return <DsModal {...rest} />;
-  }
-  return <LegacyModal {...rest} />;
+    if (useDesignSystem) {
+        return <DsModal {...rest} />;
+    }
+    return <LegacyModal {...rest} />;
 };
 
 Modal.propTypes = {
-  useDesignSystem: PropTypes.bool,
+    useDesignSystem: PropTypes.bool,
 };
 Modal.defaultProps = {
-  useDesignSystem: false,
+    useDesignSystem: false,
 };
-Modal.displayName = 'Modal';
+Modal.displayName = "Modal";
 
 export default Modal;