@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Modal.stories.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
+import Modal from "../components/Modal.js";
+import Text from "../components/Text.js";
+import TextField from "../components/TextField.js";
+import Grid from "../components/Grid.js";
+export default {
+    title: 'Litho/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "A Modal component that renders an overlay dialog with customizable content, actions, and sizes. Modals are used to focus user attention on a specific task or information."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        open: true,
+        title: 'Modal Title',
+        sectioned: true
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Whether the modal is open'
+        },
+        title: {
+            control: 'text',
+            description: 'The title of the modal'
+        },
+        subtitle: {
+            control: 'text',
+            description: 'The subtitle of the modal'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'default',
+                'large',
+                'full'
+            ],
+            description: 'The size of the modal (default, large, or full)'
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the modal is in a loading state'
+        },
+        sectioned: {
+            control: 'boolean',
+            description: 'Whether the modal content should be sectioned'
+        },
+        hideCloseButton: {
+            control: 'boolean',
+            description: 'Whether to hide the close button'
+        },
+        zIndexOverride: {
+            control: 'number',
+            description: 'The z-index of the modal'
+        },
+        onClose: {
+            action: 'closed',
+            description: 'Callback function for closing the modal'
+        },
+        backAction: {
+            action: 'back',
+            description: 'Callback function for back action'
+        },
+        primaryAction: {
+            control: 'object',
+            description: 'Primary action configuration with content, onAction, loading, disabled, destructive properties'
+        },
+        secondaryAction: {
+            control: 'object',
+            description: 'Secondary action configuration with content, onAction, disabled properties'
+        },
+        secondaryActions: {
+            control: 'object',
+            description: 'Array of additional secondary actions'
+        },
+        destructiveAction: {
+            control: 'object',
+            description: 'A destructive action configuration for the modal'
+        },
+        leftAccessory: {
+            control: 'object',
+            description: 'Left accessory content in the footer'
+        },
+        children: {
+            control: 'object',
+            description: 'The content of the modal'
+        }
+    }
+};
+export var Default = {
+    args: {
+        children: "This is a basic modal with some content inside.",
+        primaryAction: {
+            content: 'Save',
+            onAction: function() {
+                return console.log('Save clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};
+export var WithSubtitle = {
+    args: {
+        title: 'Delete Customer',
+        subtitle: 'This action cannot be undone',
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "Are you sure you want to delete this customer? All associated data will be permanently removed."
+        }),
+        primaryAction: {
+            content: 'Delete',
+            destructive: true,
+            onAction: function() {
+                return console.log('Delete clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};
+export var Large = {
+    args: {
+        size: 'large',
+        title: 'Edit Product Details',
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "Product Name",
+                    value: "Sample Product"
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "Description",
+                    multiline: 4,
+                    value: "Product description here..."
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "Price",
+                    value: "$29.99"
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "SKU",
+                    value: "SKU-123"
+                })
+            ]
+        }),
+        primaryAction: {
+            content: 'Save Changes',
+            onAction: function() {
+                return console.log('Save changes clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};
+export var Small = {
+    args: {
+        size: 'default',
+        title: 'Quick Action',
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "Perform this quick action?"
+        }),
+        primaryAction: {
+            content: 'Confirm',
+            onAction: function() {
+                return console.log('Confirm clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};
+export var Loading = {
+    args: {
+        loading: true,
+        title: 'Processing...',
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "Please wait while we process your request."
+        })
+    }
+};
+export var WithMultipleActions = {
+    args: {
+        title: 'Export Data',
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    children: "Choose your export format:"
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "CSV files work well with spreadsheet applications, while JSON is better for technical integrations."
+                })
+            ]
+        }),
+        primaryAction: {
+            content: 'Export as CSV',
+            onAction: function() {
+                return console.log('Export CSV clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Export as JSON',
+                onAction: function() {
+                    return console.log('Export JSON clicked');
+                }
+            },
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};
+export var FullScreen = {
+    args: {
+        size: 'full',
+        title: 'Full Screen Modal',
+        subtitle: 'This modal takes up the entire viewport',
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            paddingBlock: "8",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    variant: "headingMd",
+                    children: "Section 1"
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    children: "This is a full screen modal that can contain extensive content and complex layouts."
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    variant: "headingMd",
+                    children: "Section 2"
+                }),
+                /*#__PURE__*/ _jsxs(Grid, {
+                    columns: 2,
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Field 1"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Field 2"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Field 3"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Field 4"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    variant: "headingMd",
+                    children: "Section 3"
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    children: "More content can be added here as needed."
+                })
+            ]
+        }),
+        primaryAction: {
+            content: 'Save All Changes',
+            onAction: function() {
+                return console.log('Save all clicked');
+            }
+        },
+        secondaryActions: [
+            {
+                content: 'Save Draft',
+                onAction: function() {
+                    return console.log('Save draft clicked');
+                }
+            },
+            {
+                content: 'Cancel',
+                onAction: function() {
+                    return console.log('Cancel clicked');
+                }
+            }
+        ]
+    }
+};