@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Card.stories.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Card from "../components/Card.js";
+import Text from "../components/Text.js";
+import Button from "../components/Button.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+export default {
+    title: "Litho/Card",
+    component: Card,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A Card component that renders a styled container with customizable title, content, and optional actions. The card can be configured with different styles and can include a title, subdued background, alternate background, and more."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    args: {
+        padded: true
+    },
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Card title"
+        },
+        titleVariant: {
+            control: "select",
+            options: [
+                "headingXs",
+                "headingSm",
+                "headingMd",
+                "headingLg",
+                "headingXl"
+            ],
+            description: "Typography variant for the Card title"
+        },
+        description: {
+            control: "text",
+            description: "Description text for the Card"
+        },
+        icon: {
+            control: "object",
+            description: "Icon to render alongside the title"
+        },
+        padded: {
+            control: "boolean",
+            description: "Add full padding to card content"
+        },
+        paddedHalf: {
+            control: "boolean",
+            description: "Add half padding to card content"
+        },
+        subdued: {
+            control: "boolean",
+            description: "Subdued background color"
+        },
+        alternate: {
+            control: "boolean",
+            description: "Alternate background color"
+        },
+        hideOnPrint: {
+            control: "boolean",
+            description: "Hide card when printing"
+        },
+        allowOverflow: {
+            control: "boolean",
+            description: "Allow content to overflow card boundaries"
+        },
+        loading: {
+            control: "boolean",
+            description: "Show loading state with spinner"
+        },
+        tooltip: {
+            control: "text",
+            description: "Tooltip content for the title"
+        },
+        tooltipPreferredPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below",
+                "left",
+                "right"
+            ],
+            description: "Preferred position for tooltip"
+        },
+        outlined: {
+            control: "boolean",
+            description: "Apply outlined styling to the Card"
+        },
+        highlighted: {
+            control: "boolean",
+            description: "Apply highlighted styling to the Card"
+        },
+        shadow: {
+            control: "select",
+            options: [
+                "default",
+                "strong",
+                "none"
+            ],
+            description: "Apply shadow to the Card"
+        },
+        fullWidthOnMobile: {
+            control: "boolean",
+            description: "Make the Card full width on mobile"
+        },
+        roundedOnMobile: {
+            control: "boolean",
+            description: "Make the Card rounded on mobile"
+        },
+        removeHeaderBottomPadding: {
+            control: "boolean",
+            description: "Remove bottom padding from the header"
+        },
+        fullHeightBody: {
+            control: "boolean",
+            description: "Make the card body full height"
+        },
+        onClick: {
+            action: "clicked",
+            description: "Click handler for the Card, making it clickable"
+        },
+        emptyState: {
+            control: "object",
+            description: "Empty state configuration with showIf and text properties"
+        },
+        action: {
+            control: "object",
+            description: "Action button configuration for the Card header"
+        },
+        accessory: {
+            control: "object",
+            description: "Accessory element to render in the header"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes to apply to the Card"
+        },
+        headerClassName: {
+            control: "text",
+            description: "Additional CSS classes to apply to the Card header"
+        },
+        children: {
+            control: "object",
+            description: "Card content"
+        }
+    }
+};
+export var Default = {
+    args: {
+        children: "This is a basic card with some content inside."
+    }
+};
+export var WithTitle = {
+    args: {
+        title: "Card Title",
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "This card has a title and some content."
+        })
+    }
+};
+export var Subdued = {
+    args: {
+        subdued: true,
+        title: "Subdued Card",
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "This card has a subdued background color."
+        })
+    }
+};
+export var Alternate = {
+    args: {
+        alternate: true,
+        title: "Alternate Card",
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "This card has an alternate background color."
+        })
+    }
+};
+export var WithAction = {
+    args: {
+        title: "Card with action",
+        action: {
+            content: "More info",
+            onAction: function() {
+                return console.log("More info clicked");
+            }
+        },
+        children: /*#__PURE__*/ _jsx(Text, {
+            children: "This card includes an action button."
+        })
+    }
+};
+export var Complex = {
+    args: {
+        sectioned: true,
+        title: "Complex Card Example",
+        loading: true,
+        highlighted: true,
+        tooltip: "This is a tooltip",
+        tooltipPreferredPosition: "below",
+        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "bodyMd",
+                            children: "This is a more complex card example with multiple elements."
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "It includes multiple text elements and interactive components."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            children: "Action"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            plain: true,
+                            children: "Secondary"
+                        })
+                    ]
+                })
+            ]
+        })
+    }
+};

package/dist/esm/stories/Checkbox.stories.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Card from "../components/Card.js";
+import Checkbox from "../components/Checkbox.js";
+import VerticalStack from "../components/VerticalStack.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Checkbox component that provides a customizable checkbox input with support for labels, help text, error states, and indeterminate states."
+            }
+        }
+    },
+    args: {
+        label: 'Checkbox label',
+        checked: false
+    },
+    decorators: [
+        function(Story) {
+            return /*#__PURE__*/ _jsx(Card, {
+                padded: true,
+                children: /*#__PURE__*/ _jsx(Story, {})
+            });
+        }
+    ],
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The text label for the checkbox'
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the checkbox is checked'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the checkbox is disabled'
+        },
+        indeterminate: {
+            control: 'boolean',
+            description: 'Whether the checkbox is in indeterminate state'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Additional descriptive text'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether to hide the label visually'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the checkbox'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for the checkbox'
+        },
+        value: {
+            control: 'text',
+            description: 'Value attribute for the checkbox'
+        },
+        tooltip: {
+            control: 'object',
+            description: 'Tooltip content for the checkbox label'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the checkbox container'
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Callback function called when the checkbox state changes'
+        },
+        onFocus: {
+            action: 'focused',
+            description: 'Callback function called when the checkbox gains focus'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Callback function called when the checkbox loses focus'
+        }
+    }
+};
+export var Default = {
+    args: {
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var Checked = {
+    args: {
+        checked: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var WithHelpText = {
+    args: {
+        label: 'Subscribe to newsletter',
+        helpText: 'Receive updates about new products and features',
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled checkbox',
+        disabled: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var DisabledChecked = {
+    args: {
+        label: 'Disabled checked checkbox',
+        checked: true,
+        disabled: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var Indeterminate = {
+    args: {
+        label: 'Select all items',
+        indeterminate: true,
+        helpText: 'Some items are selected',
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Accept terms and conditions',
+        error: 'You must accept the terms to continue',
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var LabelHidden = {
+    args: {
+        label: 'Hidden label for accessibility',
+        labelHidden: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+export var MultipleCheckboxes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "1",
+            children: [
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: "Option 1",
+                    name: "options",
+                    value: "option1",
+                    onChange: function(checked) {
+                        return console.log('Option 1:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: "Option 2",
+                    name: "options",
+                    value: "option2",
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('Option 2:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: "Option 3",
+                    name: "options",
+                    value: "option3",
+                    indeterminate: true,
+                    onChange: function(checked) {
+                        return console.log('Option 3:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: "Option 4 (Disabled)",
+                    name: "options",
+                    value: "option4",
+                    disabled: true,
+                    onChange: function(checked) {
+                        return console.log('Option 4:', checked);
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple checkboxes can be used together to create option lists or forms.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};