@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Modal.stories.js

@@ -0,0 +1,363 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get FullScreen () {
+        return FullScreen;
+    },
+    get Large () {
+        return Large;
+    },
+    get Loading () {
+        return Loading;
+    },
+    get Small () {
+        return Small;
+    },
+    get WithMultipleActions () {
+        return WithMultipleActions;
+    },
+    get WithSubtitle () {
+        return WithSubtitle;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Modal = /*#__PURE__*/ _interop_require_default(require("../components/Modal.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/Modal',
+    component: _Modal.default,
+    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: _transformers.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'
+        }
+    }
+};
+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');
+                }
+            }
+        ]
+    }
+};
+var WithSubtitle = {
+    args: {
+        title: 'Delete Customer',
+        subtitle: 'This action cannot be undone',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            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');
+                }
+            }
+        ]
+    }
+};
+var Large = {
+    args: {
+        size: 'large',
+        title: 'Edit Product Details',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                    label: "Product Name",
+                    value: "Sample Product"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                    label: "Description",
+                    multiline: 4,
+                    value: "Product description here..."
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                    label: "Price",
+                    value: "$29.99"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                    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');
+                }
+            }
+        ]
+    }
+};
+var Small = {
+    args: {
+        size: 'default',
+        title: 'Quick Action',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            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');
+                }
+            }
+        ]
+    }
+};
+var Loading = {
+    args: {
+        loading: true,
+        title: 'Processing...',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            children: "Please wait while we process your request."
+        })
+    }
+};
+var WithMultipleActions = {
+    args: {
+        title: 'Export Data',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "Choose your export format:"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    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');
+                }
+            }
+        ]
+    }
+};
+var FullScreen = {
+    args: {
+        size: 'full',
+        title: 'Full Screen Modal',
+        subtitle: 'This modal takes up the entire viewport',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            paddingBlock: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Section 1"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "This is a full screen modal that can contain extensive content and complex layouts."
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Section 2"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                    columns: 2,
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                            label: "Field 1"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                            label: "Field 2"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                            label: "Field 3"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                            label: "Field 4"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Section 3"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    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');
+                }
+            }
+        ]
+    }
+};