@simplybusiness/mobius 4.0.0-beta.11 → 4.0.0-beta.13

package/src/components/Modal/Modal.mdx

@@ -115,6 +115,57 @@ const WithAnimationDemo = () => {
 };
 ```
 
+### Nested Modals
+
+<Story of={ModalStories.WithNested} />
+
+```jsx
+const ChildModal = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const show = () => setShowModal(true);
+  const hide = () => setShowModal(false);
+
+  return (
+    <>
+      <Button onClick={show}>Show child modal</Button>
+      <Modal isOpen={showModal} onClose={hide} animation="slideUp">
+        <Modal.Header>Howdy</Modal.Header>
+        <Modal.Content>
+          <Text>
+            Closing or cancelling (with Escape key) should leave the parent
+            modal open.
+          </Text>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+const Nested = ({ animation, closeLabel }: ModalProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Nested Modal</Button>
+      <Modal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        animation={animation}
+        closeLabel={closeLabel}
+      >
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          <Text>
+            Closing or cancelling the next modal should leave me open.
+          </Text>
+          <ChildModal />
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
 ## Closing a Modal from within a child `<iframe>`
 
 ### Step 1: Create embeddable `<iframe>`

package/src/components/Modal/Modal.stories.tsx

@@ -168,6 +168,51 @@ const WithLongContentDemo = (props: ModalProps) => {
   );
 };
 
+const ChildModal = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const show = () => setShowModal(true);
+  const hide = () => setShowModal(false);
+
+  return (
+    <>
+      <Button onClick={show}>Show child modal</Button>
+      <Modal isOpen={showModal} onClose={hide} animation="slideUp">
+        <Modal.Header>Howdy</Modal.Header>
+        <Modal.Content>
+          <Text>
+            Closing or cancelling (with Escape key) should leave the parent
+            modal open.
+          </Text>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+const WithNestedDemo = ({ animation, closeLabel }: ModalProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Nested Modal</Button>
+      <Modal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        animation={animation}
+        closeLabel={closeLabel}
+      >
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          <Text>
+            Closing or cancelling the next modal should leave me open.
+          </Text>
+          <ChildModal />
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
 export default {
   title: "Components/Modal",
   component: Modal,
@@ -230,3 +275,11 @@ export const WithLongContent: Meta<typeof WithLongContentDemo> = {
     closeLabel: "Close",
   },
 };
+
+export const WithNested: Meta<typeof WithNestedDemo> = {
+  render: (args: ModalProps) => <WithNestedDemo {...args} />,
+  args: {
+    isOpen: false,
+    closeLabel: "Close",
+  },
+};

package/src/components/Modal/Modal.test.tsx

@@ -100,16 +100,59 @@ describe("Modal", () => {
   });
 
   // TODO: Cannot test until HTML Dialog is supported in JSDom
-  xdescribe("pressing close button", () => {
-    it.only("should close the modal", async () => {
+  xdescribe("closing and cancelling", () => {
+    beforeAll(() => {
+      HTMLDialogElement.prototype.show = jest.fn(function mock(
+        this: HTMLDialogElement,
+      ) {
+        this.open = true;
+      });
+
+      HTMLDialogElement.prototype.showModal = jest.fn(function mock(
+        this: HTMLDialogElement,
+      ) {
+        this.open = true;
+      });
+
+      HTMLDialogElement.prototype.close = jest.fn(function mock(
+        this: HTMLDialogElement,
+      ) {
+        this.open = false;
+      });
+    });
+
+    it.only("pressing close button should close the modal", async () => {
       const content = <Modal.Content>Sample content</Modal.Content>;
       let modalOpen = true;
       const onClose = () => {
         modalOpen = false;
       };
+      const user = userEvent.setup();
+
+      render(
+        <Modal isOpen={modalOpen} onClose={onClose} closeLabel="Close Me">
+          <Modal.Header />
+          {content}
+        </Modal>,
+      );
+
+      const modal = screen.getByRole("dialog", { hidden: true });
+      expect(modal).toBeInTheDocument();
+      expect((modal as HTMLDialogElement).open).toBe(true);
+      screen.debug();
+
+      const closeButton = screen.getByRole("button");
+
+      await user.click(closeButton); // This errors because
+      expect((modal as HTMLDialogElement).open).toBe(false);
+    });
+
+    it("should cancel the modal", async () => {
+      const content = <Modal.Content>Sample content</Modal.Content>;
+      const onClose = jest.fn();
 
       render(
-        <Modal isOpen={modalOpen} onClose={onClose}>
+        <Modal isOpen onClose={onClose}>
           <Modal.Header />
           {content}
         </Modal>,
@@ -117,9 +160,9 @@ describe("Modal", () => {
 
       const modalContent = screen.getByText("Sample content");
       expect(modalContent).toBeInTheDocument();
-      const closeButton = screen.getByLabelText("Close");
-      await userEvent.click(closeButton); // This errors
-      expect(modalOpen).toBe(false);
+      await userEvent.keyboard("{escape}");
+
+      expect(onClose).toHaveBeenCalled();
     });
   });
 

package/src/components/Modal/Modal.tsx

@@ -6,6 +6,7 @@
 import classNames from "classnames/dedupe";
 import {
   Children,
+  ReactEventHandler,
   ReactNode,
   cloneElement,
   isValidElement,
@@ -13,7 +14,6 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { useOnClickOutside } from "../../hooks";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 
@@ -79,9 +79,8 @@ const Modal = ({
     }
   }
 
-  // End deprecation warnings
-  const ref = useRef<HTMLDialogElement>(null);
-  const dialog = ref.current as HTMLDialogElement;
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const dialog = modalRef.current as HTMLDialogElement;
   const noPreference = window?.matchMedia(
     "(prefers-reduced-motion: no-preference)",
   );
@@ -89,48 +88,34 @@ const Modal = ({
   useBodyScrollLock({ enabled: isOpen });
 
   // Add close handler, to enable closing animations
-  const handleClose = useCallback(() => {
-    const doClose = () => {
-      dialog.close();
-      if (onClose) {
-        onClose();
-      }
-    };
-
-    if (animation) {
-      dialog.classList.add("close");
-      dialog.addEventListener(
-        "animationend",
-        () => {
-          dialog.classList.remove("close");
+  const handleClose: ReactEventHandler<HTMLDialogElement> = useCallback(
+    event => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const doClose = () => {
+          dialog.close();
+          onClose?.();
+        };
+
+        if (animation) {
+          dialog.classList.add("close");
+          dialog.addEventListener(
+            "animationend",
+            () => {
+              dialog.classList.remove("close");
+              doClose();
+            },
+            { once: true },
+          );
+        } else {
           doClose();
-        },
-        { once: true },
-      );
-    } else {
-      doClose();
-    }
-  }, [onClose, animation, dialog]);
-
-  // Close modal if backdrop is clicked
-  dialog?.addEventListener("click", event => {
-    const rect = dialog.getBoundingClientRect();
-    const isInDialog =
-      rect.top <= event.clientY &&
-      event.clientY <= rect.top + rect.height &&
-      rect.left <= event.clientX &&
-      event.clientX <= rect.left + rect.width;
-    if (!isInDialog) {
-      handleClose();
-    }
-  });
-
-  // Close modal if Escape button is pressed
-  useOnClickOutside(ref, () => {
-    if (ref.current && isOpen) {
-      handleClose();
-    }
-  });
+        }
+      }
+    },
+    [animation, dialog, onClose],
+  );
 
   const modalClasses = classNames(
     "mobius",
@@ -151,13 +136,13 @@ const Modal = ({
       if (!supportsDialog() && typeof window !== "undefined") {
         // eslint-disable-next-line import/no-extraneous-dependencies
         const { default: dialogPolyfill } = await import("dialog-polyfill");
-        dialogPolyfill.registerDialog(ref.current as HTMLDialogElement);
+        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);
       }
 
       if (isOpen) {
-        ref.current?.showModal();
-      } else if (ref.current?.open) {
-        ref.current?.close();
+        modalRef.current?.showModal();
+      } else if (modalRef.current?.open) {
+        modalRef.current?.close();
       }
     }
 
@@ -165,7 +150,7 @@ const Modal = ({
   }, [isOpen]);
 
   return (
-    <dialog ref={ref} onCancel={onClose} className={modalClasses}>
+    <dialog ref={modalRef} onCancel={handleClose} className={modalClasses}>
       {Children.map(children, child => {
         if (isValidElement(child)) {
           return cloneElement(child, {

package/src/components/Progress/Progress.mdx

@@ -51,8 +51,8 @@ The following HTML is rendered for a Progress:
 
 ```html
 <div
-  id="react-aria123"
-  aria-labelledby="react-aria456"
+  id="123"
+  aria-labelledby="456"
   aria-valuenow="2"
   aria-valuemin="0"
   aria-valuemax="10"
@@ -60,7 +60,7 @@ The following HTML is rendered for a Progress:
   role="progressbar"
   class="mobius mobius/Progress --is-primary"
 >
-  <label class="mobius mobius/Label mobius/ProgressLabel" id="react-aria456"
+  <label class="mobius mobius/Label mobius/ProgressLabel" id="456"
     >Primary</label
   >
   <div class="mobius/ProgressTrack">

package/src/components/Radio/Radio.mdx

@@ -79,7 +79,7 @@ For example, `<RadioGroup defaultValue="blue">`
         width: "100%",
         flexDirection: "row",
         justifyContent: "space-between",
-        marginBottom: "var(--size-20)",
+        marginBottom: "var(--size-xs)",
       }}
     >
       <div>To pay today</div>
@@ -128,7 +128,10 @@ The `onChange` prop can be used to listen to changes of the selected radio butto
 
 ## Radio Props
 
-<ArgTypes of={{ ...RadioGroup, ...Radio }} />
+<ArgTypes
+  of={{ ...RadioGroup, ...Radio }}
+  exclude={["name", "groupDisabled", "selected", "setSelected"]}
+/>
 
 ## Component HTML Structure and Class names
 

package/src/components/Radio/Radio.stories.tsx

@@ -148,7 +148,7 @@ export const ComplexLabel: Meta<typeof RadioGroup> = {
             width: "100%",
             flexDirection: "row",
             justifyContent: "space-between",
-            marginBottom: "var(--size-20)",
+            marginBottom: "var(--size-xs)",
           }}
         >
           <div>To pay today</div>

package/src/components/Segment/Segment.mdx

@@ -17,14 +17,12 @@ import * as SegmentStories from "./Segment.stories";
 
 export const sizeOptions = [
   "",
-  "size-10",
-  "size-20",
-  "size-30",
-  "size-40",
-  "size-50",
-  "size-60",
-  "size-70",
-  "size-80",
+  "size-xs",
+  "size-s",
+  "size-m",
+  "size-l",
+  "size-xl",
+  "size-xxl",
 ];
 
 <Meta of={SegmentStories} />
@@ -236,7 +234,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 </SegmentGroup>
 ```
 
-Add margin around a SegmentGroup with a `margin="size-{10|20|30|40}"` prop:
+Add margin around a SegmentGroup with a `margin="size-{xs|s|m|l|xl|xxl}"` prop:
 
 <SegmentStories.MarginAround />
 
@@ -246,7 +244,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 <SegmentGroup>
   <Segment>Top</Segment>
-  <SegmentGroup margin="size-30">
+  <SegmentGroup margin="size-s">
     <Segment>Nested Top</Segment>
     <Segment>Nested Middle</Segment>
     <Segment>Nested Bottom</Segment>
@@ -278,12 +276,12 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
         rowGap: "8px",
       }}
     >
-      <Text variant="caption">General liability*</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$300.00</Text>
-      <Text variant="caption">Contractor's equipment and small tools</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$80.00</Text>
-      <Text variant="caption">Cyber insurance</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$250.00</Text>
+      <Text variant="small">General liability*</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>$300.00</Text>
+      <Text variant="small">Contractor's equipment and small tools</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>$80.00</Text>
+      <Text variant="small">Cyber insurance</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>$250.00</Text>
     </div>
     <Divider />
     <div
@@ -295,8 +293,8 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
         width: "100%",
       }}
     >
-      <Text variant="caption"><strong>To pay today</strong></Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}><strong>$630.00</strong></Text>
+      <Text variant="small"><strong>To pay today</strong></Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}><strong>$630.00</strong></Text>
     </div>
   </Segment>
   <Segment heading="Monthly Payments">
@@ -309,14 +307,14 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
         width: "100%",
       }}
     >
-      <Text variant="caption">
+      <Text variant="small">
         <strong>First monthly payment taken</strong>
       </Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>01/01/2022</Text>
-      <Text variant="caption">8 monthly payments of</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$120.00</Text>
-      <Text variant="caption">Then 2 monthly payments of</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$90.00</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>01/01/2022</Text>
+      <Text variant="small">8 monthly payments of</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>$120.00</Text>
+      <Text variant="small">Then 2 monthly payments of</Text>
+      <Text variant="small" style={{ justifySelf: "flex-end" }}>$90.00</Text>
     </div>
   </Segment>
   <Segment colour="subtle">

package/src/components/Segment/Segment.stories.tsx

@@ -16,14 +16,12 @@ import { excludeControls } from "../../utils/excludeControls";
 
 const sizeOptions = [
   "",
-  "size-10",
-  "size-20",
-  "size-30",
-  "size-40",
-  "size-50",
-  "size-60",
-  "size-70",
-  "size-80",
+  "size-xs",
+  "size-s",
+  "size-m",
+  "size-l",
+  "size-xl",
+  "size-xxl",
 ];
 
 export default {
@@ -117,7 +115,7 @@ export const HorizontalStack: Meta<typeof SegmentGroup> = {
   ),
   args: {
     horizontal: true,
-    margin: "size-20",
+    margin: "size-xs",
   },
   argTypes: {
     margin: {
@@ -232,7 +230,7 @@ export const CompoundLayout = () => (
 export const MarginAround = () => (
   <SegmentGroup>
     <Segment>Top</Segment>
-    <SegmentGroup margin="size-30">
+    <SegmentGroup margin="size-s">
       <Segment>Nested Top</Segment>
       <Segment>Nested Middle</Segment>
       <Segment>Nested Bottom</Segment>
@@ -258,18 +256,18 @@ export const PaymentDetails = () => (
             rowGap: "8px",
           }}
         >
-          <Text variant="caption">General liability\*</Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small">General liability\*</Text>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             $300.00
           </Text>
-          <Text variant="caption">
+          <Text variant="small">
             Contractor&apos;s equipment and small tools
           </Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             $80.00
           </Text>
-          <Text variant="caption">Cyber insurance</Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small">Cyber insurance</Text>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             $250.00
           </Text>
         </div>
@@ -283,10 +281,10 @@ export const PaymentDetails = () => (
             width: "100%",
           }}
         >
-          <Text variant="caption">
+          <Text variant="small">
             <strong>To pay today</strong>
           </Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             <strong>$630.00</strong>
           </Text>
         </div>
@@ -301,18 +299,18 @@ export const PaymentDetails = () => (
             width: "100%",
           }}
         >
-          <Text variant="caption">
+          <Text variant="small">
             <strong>First monthly payment taken</strong>
           </Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             01/01/2022
           </Text>
-          <Text variant="caption">8 monthly payments of</Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small">8 monthly payments of</Text>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             $120.00
           </Text>
-          <Text variant="caption">Then 2 monthly payments of</Text>
-          <Text variant="caption" style={{ justifySelf: "flex-end" }}>
+          <Text variant="small">Then 2 monthly payments of</Text>
+          <Text variant="small" style={{ justifySelf: "flex-end" }}>
             $90.00
           </Text>
         </div>

package/src/components/Segment/SegmentGroup.tsx

@@ -5,15 +5,7 @@ import { DOMProps } from "../../types/dom";
 export interface SegmentGroupProps extends DOMProps {
   className?: string;
   horizontal?: boolean;
-  margin?:
-    | "size-10"
-    | "size-20"
-    | "size-30"
-    | "size-40"
-    | "size-50"
-    | "size-60"
-    | "size-70"
-    | "size-80";
+  margin?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
   children?: ReactNode;
 }
 

package/src/components/Text/Text.stories.tsx

@@ -36,9 +36,9 @@ export const Example = () => (
       <Text elementType="h2">Heading 2</Text>
       <Text elementType="h3">Heading 3</Text>
       <Text elementType="h4">Heading 4</Text>
-      <Text elementType="h5">Heading 5</Text>
-      <Text elementType="h6">Heading 6</Text>
       <Text>Paragraph</Text>
+      <Text variant="small">Small paragraph</Text>
+      <Text variant="legal">Small print</Text>
     </Box>
     <Box>
       <Text elementType="h1">First Heading</Text>
@@ -86,10 +86,8 @@ export const ExampleVariant = () => (
     <Text variant="h2">variant h2</Text>
     <Text variant="h3">variant h3</Text>
     <Text variant="h4">variant h4</Text>
-    <Text variant="h5">variant h5</Text>
-    <Text variant="lead">variant lead</Text>
     <Text variant="body">variant body</Text>
-    <Text variant="caption">variant caption</Text>
+    <Text variant="small">variant small</Text>
     <Text variant="legal">variant legal</Text>
   </div>
 );

package/src/components/Text/Text.test.tsx

@@ -10,8 +10,8 @@ describe("Text", () => {
 
   describe("given elementType", () => {
     it("is not applied as element attribute", () => {
-      const { container } = render(<Text elementType="h6">Sample text</Text>);
-      expect(container.firstChild).not.toHaveAttribute("elementtype", "h6");
+      const { container } = render(<Text elementType="h4">Sample text</Text>);
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "h4");
     });
   });
 

package/src/components/Text/Text.tsx

@@ -9,20 +9,10 @@ export type TextVariantType =
   | "h2"
   | "h3"
   | "h4"
-  | "h5"
-  | "lead"
   | "body"
-  | "caption"
+  | "small"
   | "legal";
-export type ElementType =
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "h5"
-  | "h6"
-  | "p"
-  | "span";
+export type ElementType = "h1" | "h2" | "h3" | "h4" | "p" | "span";
 export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
   /** HTML element for the text */
   elementType?: ElementType;
@@ -43,7 +33,7 @@ const getElementType = (
   elementType: ElementType | undefined,
 ) => {
   if (variant) {
-    return ["h1", "h2", "h3", "h4", "h5"].includes(variant) ? variant : "p";
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
   }
   return elementType || "p";
 };

package/src/components/index.tsx

@@ -6,6 +6,7 @@ export * from "./Button";
 export * from "./Checkbox";
 export * from "./Container";
 export * from "./Divider";
+export * from "./Drawer";
 export * from "./DropdownMenu";
 export * from "./ErrorMessage";
 export * from "./Fieldset";