@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Checkbox.stories.js

@@ -0,0 +1,266 @@
+"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 Checked () {
+        return Checked;
+    },
+    get Default () {
+        return Default;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get DisabledChecked () {
+        return DisabledChecked;
+    },
+    get Indeterminate () {
+        return Indeterminate;
+    },
+    get LabelHidden () {
+        return LabelHidden;
+    },
+    get MultipleCheckboxes () {
+        return MultipleCheckboxes;
+    },
+    get WithError () {
+        return WithError;
+    },
+    get WithHelpText () {
+        return WithHelpText;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.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/Checkbox',
+    component: _Checkbox.default,
+    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__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                padded: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.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'
+        }
+    }
+};
+var Default = {
+    args: {
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var Checked = {
+    args: {
+        checked: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var WithHelpText = {
+    args: {
+        label: 'Subscribe to newsletter',
+        helpText: 'Receive updates about new products and features',
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var Disabled = {
+    args: {
+        label: 'Disabled checkbox',
+        disabled: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var DisabledChecked = {
+    args: {
+        label: 'Disabled checked checkbox',
+        checked: true,
+        disabled: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var Indeterminate = {
+    args: {
+        label: 'Select all items',
+        indeterminate: true,
+        helpText: 'Some items are selected',
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+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);
+        }
+    }
+};
+var LabelHidden = {
+    args: {
+        label: 'Hidden label for accessibility',
+        labelHidden: true,
+        onChange: function(checked) {
+            return console.log('Checkbox changed:', checked);
+        }
+    }
+};
+var MultipleCheckboxes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "1",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: "Option 1",
+                    name: "options",
+                    value: "option1",
+                    onChange: function(checked) {
+                        return console.log('Option 1:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: "Option 2",
+                    name: "options",
+                    value: "option2",
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('Option 2:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: "Option 3",
+                    name: "options",
+                    value: "option3",
+                    indeterminate: true,
+                    onChange: function(checked) {
+                        return console.log('Option 3:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    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: _transformers.transformStorySource
+            }
+        }
+    }
+};