@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Box.stories.js

@@ -0,0 +1,560 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "../components/Box.js";
+import Text from "../components/Text.js";
+import Button from "../components/Button.js";
+import Card from "../components/Card.js";
+import Stack from "../components/Stack.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: "Litho/Box",
+    component: Box,
+    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__*/ _jsx(Card, {
+                padded: false,
+                children: /*#__PURE__*/ _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"
+        }
+    }
+};
+export var Default = {
+    args: {
+        children: "Box content"
+    }
+};
+export var WithPadding = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "2",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Padding 2"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Padding 4"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "6",
+                    background: "surface-subdued",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Padding 6"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different padding sizes can be applied to control internal spacing."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var AsymmetricPadding = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            paddingBlockStart: "6",
+            paddingBlockEnd: "2",
+            paddingInlineStart: "4",
+            paddingInlineEnd: "8",
+            background: "surface-subdued",
+            children: /*#__PURE__*/ _jsx(Text, {
+                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: transformStorySource
+            }
+        }
+    }
+};
+export var WithBorders = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    borderColor: "default",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Default border color"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    borderColor: "subdued",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Subdued border color"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    borderColor: "subdued",
+                    borderBlockEndWidth: "1",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Filler text"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Borders can be applied with different widths and colors."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var BorderRadius = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "No radius"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "sm",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Radius 2"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "lg",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Radius 4"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "full",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Full radius"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different border radius values create various rounded corner effects."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var LayoutExample = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Box, {
+            padding: "4",
+            background: "subdued",
+            borderRadius: "default",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        children: "Card Header"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "3",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This is the main content area of the card. It demonstrates how Box can be used to create consistent spacing and layout."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "sm",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Primary Action"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Secondary Action"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Box components can be nested to create complex layouts with consistent spacing."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var OverflowBehavior = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    overflow: "hidden",
+                    style: {
+                        width: "200px",
+                        height: "100px"
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        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__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "surface-subdued",
+                    overflow: "scroll",
+                    style: {
+                        width: "200px",
+                        height: "100px"
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        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: transformStorySource
+            }
+        }
+    }
+};