@cambly/syntax-core 6.8.0 → 6.9.0

package/dist/index.d.ts

@@ -737,7 +737,7 @@ declare const sizeWidth: {
 };
 type ModalType = {
     /**
-     * The modal's main content.
+     * The modal's main content. Should typically take in `Typography`'d text.
      */
     children: JSX.Element;
     /**
@@ -756,9 +756,22 @@ type ModalType = {
      */
     image?: JSX.Element;
     /**
-     * The footer for the bottom area of the Modal.
-     * Typically used for rendering buttons.
-     * If two(2) buttons, put primary button _second_.
+     * The footer for the bottom area of the Modal. Typically used for rendering buttons.
+     * * Use Syntax `Button` and pass it into footer.
+     * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)
+     * * If two(2) buttons, put primary button _second_.
+     *
+        <>
+          <Button
+            text="Cancel"
+            color="secondary"
+            onClick={() => {}}
+          />
+          <Button
+            text="Confirm"
+            onClick={() => {}}
+          />
+        </>
      */
     footer?: JSX.Element;
     /**
@@ -793,6 +806,36 @@ type ModalType = {
 };
 /**
  * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.
+ *
+ ```
+  const [showModal, setShowModal] = useState(false)
+
+  return (
+    <>
+      {showModal && <Modal
+        header="header text"
+        onDismiss={() => setShowModal(false)}
+        footer={
+          <>
+            <Button
+              text="Cancel"
+              color="secondary"
+              onClick={() => {}}
+            />
+            <Button
+              text="Confirm"
+              onClick={() => {}}
+            />
+          </>
+        }
+      >
+        <Typography>
+          Body text goes here!
+        </Typography>
+      </Modal> }
+    </>
+  )
+  ```
  */
 declare function Modal({ header, children, image, onDismiss, footer, accessibilityCloseLabel, size, zIndex, "data-testid": dataTestId, }: ModalType): ReactElement;
 declare namespace Modal {