@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Box.stories.js

@@ -0,0 +1,599 @@
+"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 AsymmetricPadding () {
+        return AsymmetricPadding;
+    },
+    get BorderRadius () {
+        return BorderRadius;
+    },
+    get Default () {
+        return Default;
+    },
+    get LayoutExample () {
+        return LayoutExample;
+    },
+    get OverflowBehavior () {
+        return OverflowBehavior;
+    },
+    get WithBorders () {
+        return WithBorders;
+    },
+    get WithPadding () {
+        return WithPadding;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _transformers = require("../utilities/transformers.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: "Litho/Box",
+    component: _Box.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A Box component that provides flexible layout and spacing utilities. Box is a fundamental building block for creating consistent layouts and spacing throughout the application."
+            }
+        }
+    },
+    decorators: [
+        function(Story) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                padded: false,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
+            });
+        }
+    ],
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Child elements to render inside the Box'
+        },
+        id: {
+            control: 'text',
+            description: 'ID attribute for the Box element'
+        },
+        as: {
+            control: "select",
+            options: [
+                "div",
+                "span",
+                "p",
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6"
+            ],
+            description: "HTML element to render as",
+            table: {
+                type: {
+                    summary: "string"
+                },
+                defaultValue: {
+                    summary: "div"
+                }
+            }
+        },
+        padding: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "10"
+            ],
+            description: "Padding on all sides"
+        },
+        paddingBlockStart: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "10"
+            ],
+            description: "Padding at the top"
+        },
+        paddingBlockEnd: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "10"
+            ],
+            description: "Padding at the bottom"
+        },
+        paddingInlineStart: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "10"
+            ],
+            description: "Padding at the start (left in LTR)"
+        },
+        paddingInlineEnd: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "10"
+            ],
+            description: "Padding at the end (right in LTR)"
+        },
+        background: {
+            control: "select",
+            options: [
+                "default",
+                "subdued"
+            ],
+            description: "Background color variant"
+        },
+        borderWidth: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1"
+            ],
+            description: "Border width for all sides"
+        },
+        borderBlockStartWidth: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1"
+            ],
+            description: "Top border width"
+        },
+        borderBlockEndWidth: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1"
+            ],
+            description: "Bottom border width"
+        },
+        borderInlineStartWidth: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1"
+            ],
+            description: "Left border width"
+        },
+        borderInlineEndWidth: {
+            control: "select",
+            options: [
+                "none",
+                "0",
+                "1"
+            ],
+            description: "Right border width"
+        },
+        borderRadius: {
+            control: "select",
+            options: [
+                "default",
+                "sm",
+                "lg",
+                "full"
+            ],
+            description: "Border radius"
+        },
+        borderColor: {
+            control: "select",
+            options: [
+                "default",
+                "subdued"
+            ],
+            description: "Border color"
+        },
+        overflow: {
+            control: "select",
+            options: [
+                "hidden",
+                "scroll"
+            ],
+            description: "Overflow behavior"
+        },
+        overflowX: {
+            control: "select",
+            options: [
+                "hidden",
+                "scroll"
+            ],
+            description: "Overflow behavior"
+        },
+        overflowY: {
+            control: "select",
+            options: [
+                "hidden",
+                "scroll"
+            ],
+            description: "Overflow behavior"
+        },
+        position: {
+            control: "select",
+            options: [
+                "relative",
+                "absolute",
+                "fixed",
+                "sticky"
+            ],
+            description: "CSS position property"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes to apply to the Box"
+        },
+        onClick: {
+            action: "onClick",
+            description: "Click handler for the Box",
+            table: {
+                type: {
+                    summary: "() => void"
+                }
+            }
+        },
+        zIndex: {
+            control: "number",
+            description: "CSS z-index"
+        },
+        height: {
+            control: "number",
+            description: "CSS height"
+        },
+        width: {
+            control: "number",
+            description: "CSS width"
+        },
+        minHeight: {
+            control: "number",
+            description: "CSS min-height"
+        },
+        maxHeight: {
+            control: "number",
+            description: "CSS max-height"
+        },
+        minWidth: {
+            control: "number",
+            description: "CSS min-width"
+        },
+        maxWidth: {
+            control: "number",
+            description: "CSS max-width"
+        },
+        style: {
+            control: "object",
+            description: "Additional inline styles for the Box"
+        }
+    }
+};
+var Default = {
+    args: {
+        children: "Box content"
+    }
+};
+var WithPadding = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "2",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Padding 2"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Padding 4"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "6",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Padding 6"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different padding sizes can be applied to control internal spacing."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var AsymmetricPadding = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            paddingBlockStart: "6",
+            paddingBlockEnd: "2",
+            paddingInlineStart: "4",
+            paddingInlineEnd: "8",
+            background: "surface-subdued",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                children: "This box has different padding on each side: top=6, bottom=2, left=4, right=8"
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Padding can be set individually for each side using block and inline properties."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var WithBorders = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    borderColor: "default",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Default border color"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    borderColor: "subdued",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Subdued border color"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    borderColor: "subdued",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Filler text"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Borders can be applied with different widths and colors."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var BorderRadius = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "No radius"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "sm",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Radius 2"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "lg",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Radius 4"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "full",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Full radius"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different border radius values create various rounded corner effects."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var LayoutExample = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            padding: "4",
+            background: "subdued",
+            borderRadius: "default",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "headingMd",
+                        children: "Card Header"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "3",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This is the main content area of the card. It demonstrates how Box can be used to create consistent spacing and layout."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                primary: true,
+                                children: "Primary Action"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                children: "Secondary Action"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Box components can be nested to create complex layouts with consistent spacing."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var OverflowBehavior = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    overflow: "hidden",
+                    style: {
+                        width: "200px",
+                        height: "100px"
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This content is longer than the container and will be hidden due to overflow: hidden. You won't see the rest of this text."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    overflow: "scroll",
+                    style: {
+                        width: "200px",
+                        height: "100px"
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This content is longer than the container but you can scroll to see all of it because overflow is set to scroll."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Overflow behavior can be controlled to handle content that exceeds container bounds."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};