@madie/madie-design-system 1.2.42 → 1.2.45

package/components/Modal/Modal.jsx

@@ -22,6 +22,18 @@ const Modal = ({
         ReactModal.setAppElement(appElement);
     }, []);
 
+    const getWidth = () => {
+        if (props.width) {
+            return {
+                width: props.width,
+                maxWidth: "calc(100vw - 2rem)",
+                maxHeight: "calc(100vh - 2rem)",
+            };
+        } else {
+            return {};
+        }
+    };
+
     return (
         <ReactModal
             onRequestClose={onRequestClose}
@@ -30,6 +42,9 @@ const Modal = ({
             overlayClassName="qpp-c-modal__overlay"
             bodyOpenClassName="qpp-c-modal__body-open"
             isOpen={isOpen}
+            style={{
+                content: getWidth(),
+            }}
             onAfterOpen={() => {
                 // Add heading separator based on overflow
                 if (
@@ -126,6 +141,7 @@ Modal.propTypes = {
     onRequestClose: PropTypes.func,
     appElement: PropTypes.string,
     isOpen: PropTypes.bool,
+    width: PropTypes.string,
 };
 
 Modal.defaultProps = {

package/components/Modal/Modal.stories.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Modal from "./index";
 import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import { humanReadable } from "./HumanReadable";
 
 export default {
     title: "Modal",
@@ -165,3 +166,43 @@ export const WithDesignSystemOverflow = () => {
         </div>
     );
 };
+
+export const WithDesignSystemOverflowForHR = () => {
+    const [open, openModal, closeModal] = useModal();
+    const knobIsOpen = boolean("isOpen", false);
+
+    const hr = humanReadable();
+
+    return (
+        <div className="qpp-u-padding--12">
+            <button className="qpp-c-button" onClick={openModal}>
+                Open Modal
+            </button>
+
+            <div data-testid="view-hr-modal">
+                <Modal
+                    useDesignSystem
+                    isOpen={open || knobIsOpen}
+                    title="Human Readable"
+                    onRequestClose={closeModal}
+                    width="75rem"
+                    primary={{
+                        title: "Yes, go for it",
+                        onClick: () => {
+                            console.log("submit");
+                            closeModal();
+                        },
+                    }}
+                    secondary={{
+                        title: "No, take me back",
+                    }}
+                >
+                    <div
+                        className="modal-body"
+                        dangerouslySetInnerHTML={{ __html: hr }}
+                    />
+                </Modal>
+            </div>
+        </div>
+    );
+};

package/components/Tabs/Tab.js

@@ -43,7 +43,7 @@ const Tab = ({ type, orientation, size, ...rest }) => {
         height: size === "standard" ? "48px" : "60px",
         fontFamily: "Rubik, sans serif",
         fontWeight: 400,
-        padding: size === "standard" ? "14.5px 24.5px" : "20.5px 24px",
+        padding: size === "standard" ? "14.5px 24px" : "20.5px 24px",
         textTransform: "none",
         fontSize: "16px",
         alignItems: orientation === "vertical" && "flex-start",