feat(dialog): add dialog component

packages/components/_provisional/package.json

@@ -15,10 +15,15 @@
   "scripts": {
     "build": "NODE_ENV=production webpack",
     "lint:typescript": "tsc --noEmit",
-    "lint:code": "eslint . --ext ts,tsx --cache"
+    "lint:code": "eslint . --ext ts,tsx --cache",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
   },
   "devDependencies": {
     "@react-ck/babel-config": "*",
+    "@react-ck/jest-config": "*",
     "@react-ck/typescript-config": "*",
     "@react-ck/webpack-config": "*",
     "@types/react": "^18.3.11"
@@ -35,13 +40,15 @@
     "@react-ck/icon": "^3.6.4",
     "@react-ck/input": "^1.4.26",
     "@react-ck/layers": "^1.3.8",
+    "@react-ck/modal": "^3.2.29",
     "@react-ck/overlay": "^1.2.19",
     "@react-ck/react-utils": "^1.3.7",
     "@react-ck/scss-utils": "^1.1.12",
     "@react-ck/skeleton": "^1.1.34",
     "@react-ck/spinner": "^3.0.26",
     "@react-ck/text": "^1.7.0",
     "@react-ck/theme": "^1.12.0",
-    "classnames": "*"
+    "@react-ck/container": "^1.5.5",
+    "classnames": "^2.3.2"
   }
 }

packages/components/_provisional/src/dialog/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Modal, type ModalProps } from "../modal";
+
+export interface DialogProps
+  extends Omit<ModalProps, "size" | "overlay" | "closeButton" | "dismissOnClickOutside"> {
+  heading?: string;
+  actions?: React.ReactNode;
+}
+
+export const Dialog = ({
+  heading,
+  children,
+  actions,
+  ...otherProps
+}: Readonly<DialogProps>): React.ReactElement => (
+  <Modal size="s" overlay={false} closeButton={false} dismissOnClickOutside={false} {...otherProps}>
+    {heading ? <Modal.Header heading={heading} /> : null}
+
+    {children}
+
+    {actions ? <Modal.Footer>{actions}</Modal.Footer> : null}
+  </Modal>
+);

packages/components/_provisional/src/index.ts

@@ -35,3 +35,7 @@ export * from "./snippet";
 export * from "./checkbox";
 
 export * from "./radio";
+
+export * from "./modal";
+
+export * from "./dialog";

packages/components/modal/src/index.tsx → packages/components/_provisional/src/modal/index.tsx

@@ -8,7 +8,7 @@ import { IconClose } from "@react-ck/icon/icons/IconClose";
 import { Button } from "@react-ck/button";
 import { Text } from "@react-ck/text";
 import { Layer } from "@react-ck/layers";
-import { ScrollableContainer } from "@react-ck/provisional";
+import { ScrollableContainer } from "../scrollable-container";
 import { ModalHeader } from "./ModalHeader";
 import { ModalFooter } from "./ModalFooter";
 
@@ -22,6 +22,12 @@ interface ModalProps extends Omit<OverlayProps, "skin"> {
   size?: "s" | "m" | "l" | "xl" | "full";
   /** Dismiss Callback, also determines if the modal can be dismissed by clicking outside or close button  */
   onDismiss?: () => void;
+  /** Trigger dismiss when clicking outside of the modal wrapper */
+  dismissOnClickOutside?: boolean;
+  /** Changes visibility of close button */
+  closeButton?: boolean;
+  /** Changes visibility of overlay */
+  overlay?: boolean;
 }
 
 // TODO: add a11y https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal
@@ -41,6 +47,9 @@ const Modal = ({
   children,
   className,
   onDismiss,
+  dismissOnClickOutside = true,
+  closeButton = true,
+  overlay = true,
   ...otherProps
 }: Readonly<ModalProps>): React.ReactNode => {
   // State child compound components' props
@@ -83,9 +92,11 @@ const Modal = ({
       <Overlay
         {...otherProps}
         className={classNames(styles.root, onDismiss && styles.clickable_overlay, className)}
-        blur
+        blur={overlay}
+        skin={overlay ? "dark" : "transparent"}
         onClick={(e) => {
-          onDismiss?.();
+          if (dismissOnClickOutside) onDismiss?.();
+
           otherProps.onClick?.(e);
         }}>
         <div
@@ -102,7 +113,7 @@ const Modal = ({
                   {props.header.heading}
                 </Text>
 
-                {onDismiss ? (
+                {closeButton && onDismiss ? (
                   <Button
                     skin="secondary"
                     skinVariation="ghost"