@cambly/syntax-core 6.8.0 → 6.10.0

package/dist/index.d.ts

@@ -35,7 +35,7 @@ declare const Badge: ({ icon: Icon, text, color, }: {
      * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)
      */
     icon?: React$1.ComponentType<{
-        className: string;
+        className?: string | undefined;
     }> | undefined;
     /**
      * The text to display inside the badge
@@ -432,13 +432,13 @@ type ButtonType = {
      * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
     startIcon?: React__default.ComponentType<{
-        className: string;
+        className?: string;
     }>;
     /**
      * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
     endIcon?: React__default.ComponentType<{
-        className: string;
+        className?: string;
     }>;
     /**
      * The callback to be called when the button is clicked
@@ -632,7 +632,7 @@ type IconButtonType = {
      * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
     icon: React__default.ComponentType<{
-        className: string;
+        className?: string;
     }>;
     /**
      * If `true`, the button will be disabled
@@ -707,13 +707,13 @@ declare function LinkButton({ text, href, target, rel, "data-testid": dataTestId
      * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
     startIcon?: React__default.ComponentType<{
-        className: string;
+        className?: string;
     }>;
     /**
      * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
     endIcon?: React__default.ComponentType<{
-        className: string;
+        className?: string;
     }>;
     /**
      * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).
@@ -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 {