@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Page.stories.js

@@ -0,0 +1,318 @@
+"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 ComplexPage () {
+        return ComplexPage;
+    },
+    get Default () {
+        return Default;
+    },
+    get FullWidth () {
+        return FullWidth;
+    },
+    get NarrowWidth () {
+        return NarrowWidth;
+    },
+    get WithBackAction () {
+        return WithBackAction;
+    },
+    get WithFooterActions () {
+        return WithFooterActions;
+    },
+    get WithPrimaryAction () {
+        return WithPrimaryAction;
+    },
+    get WithSecondaryActions () {
+        return WithSecondaryActions;
+    },
+    get WithSubtitle () {
+        return WithSubtitle;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _ = require("../");
+var _default = {
+    title: "Litho/Page",
+    component: _.Page,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A Page component that provides a structured layout with a header, primary and secondary actions, and content."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Page title"
+        },
+        subtitle: {
+            control: "text",
+            description: "Page subtitle"
+        },
+        narrowWidth: {
+            control: "boolean",
+            description: "Use narrow width layout"
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Use full width layout"
+        },
+        showTitleInTopBar: {
+            control: "boolean",
+            description: "Show title in top bar"
+        },
+        wrapInContentContainer: {
+            control: "boolean",
+            description: "Wrap content in container with padding"
+        }
+    }
+};
+var Default = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Page, {
+            title: "Default Page",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This is a basic page with a title and some content."
+            })
+        });
+    }
+};
+var WithSubtitle = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Page, {
+            title: "Page with Subtitle",
+            subtitle: "This page includes a subtitle for additional context",
+            backAction: {
+                onAction: function() {
+                    return console.log("Back clicked");
+                },
+                accessibilityLabel: "Go back to products"
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Layout, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Layout.Section, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                        padded: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                            children: "Page content goes here."
+                        })
+                    })
+                })
+            })
+        });
+    }
+};
+var WithPrimaryAction = {
+    args: {
+        title: "Page with Primary Action",
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page has a primary action button in the header."
+            })
+        })
+    }
+};
+var WithSecondaryActions = {
+    args: {
+        title: "Page with Actions",
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        secondaryActions: [
+            {
+                content: "Duplicate",
+                onAction: function() {
+                    return console.log("Duplicate clicked");
+                }
+            },
+            {
+                content: "Archive",
+                onAction: function() {
+                    return console.log("Archive clicked");
+                }
+            }
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page has both primary and secondary actions."
+            })
+        })
+    }
+};
+var WithBackAction = {
+    args: {
+        title: "Product Details",
+        backAction: {
+            onAction: function() {
+                return console.log("Back clicked");
+            },
+            accessibilityLabel: "Go back to products"
+        },
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page has a back action to navigate to the previous page."
+            })
+        })
+    }
+};
+var NarrowWidth = {
+    args: {
+        title: "Narrow Width Page",
+        narrowWidth: true,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page uses a narrow width layout for focused content."
+            })
+        })
+    }
+};
+var FullWidth = {
+    args: {
+        title: "Full Width Page",
+        fullWidth: true,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page uses the full width of the viewport."
+            })
+        })
+    }
+};
+var WithFooterActions = {
+    args: {
+        title: "Page with Footer Actions",
+        footerActions: {
+            primaryAction: {
+                content: "Save Changes",
+                onAction: function() {
+                    return console.log("Save changes clicked");
+                }
+            },
+            secondaryAction: {
+                content: "Cancel",
+                onAction: function() {
+                    return console.log("Cancel clicked");
+                }
+            },
+            destructiveAction: {
+                content: "Delete",
+                onAction: function() {
+                    return console.log("Delete clicked");
+                }
+            }
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                children: "This page includes footer actions for additional controls."
+            })
+        })
+    }
+};
+var ComplexPage = {
+    args: {
+        title: "Customer Profile",
+        subtitle: "Manage customer information and preferences",
+        backAction: {
+            onAction: function() {
+                return console.log("Back to customers");
+            },
+            accessibilityLabel: "Go back to customers"
+        },
+        primaryAction: {
+            content: "Save Customer",
+            onAction: function() {
+                return console.log("Save customer");
+            }
+        },
+        secondaryActions: [
+            {
+                content: "Export Data",
+                onAction: function() {
+                    return console.log("Export data");
+                }
+            },
+            {
+                title: "More Actions",
+                items: [
+                    {
+                        content: "Duplicate Customer",
+                        onAction: function() {
+                            return console.log("Duplicate");
+                        }
+                    },
+                    {
+                        content: "Archive Customer",
+                        onAction: function() {
+                            return console.log("Archive");
+                        }
+                    }
+                ]
+            }
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                    sectioned: true,
+                    title: "Customer Information",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                        children: "Basic customer details and contact information."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                    sectioned: true,
+                    title: "Order History",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                        children: "Previous orders and transaction history."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                    sectioned: true,
+                    title: "Preferences",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                        children: "Customer preferences and settings."
+                    })
+                })
+            ]
+        })
+    }
+};