@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Select.stories.js

@@ -0,0 +1,363 @@
+import { transformStorySource } from "../utilities/transformers.js";
+import Select from "../components/Select.js";
+export default {
+    title: 'Litho/Select',
+    component: Select,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Select component that provides a dropdown selection interface with support for options, groups, labels, error states, and help text."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        label: 'Select an option',
+        options: [
+            {
+                label: 'Option 1',
+                value: 'option1'
+            },
+            {
+                label: 'Option 2',
+                value: 'option2'
+            },
+            {
+                label: 'Option 3',
+                value: 'option3'
+            }
+        ],
+        value: ''
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the select input'
+        },
+        value: {
+            control: 'text',
+            description: 'Selected value'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the select input'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the select is disabled'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message or flag indicating the select has an error'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Optional help text displayed below the select'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether to hide the label visually'
+        },
+        labelInline: {
+            control: 'boolean',
+            description: 'Whether to display the label inline with the select'
+        },
+        requiredIndicator: {
+            control: 'boolean',
+            description: 'Whether to show a required indicator next to the label'
+        },
+        tooltip: {
+            control: 'text',
+            description: 'Tooltip content for the select'
+        },
+        labelAction: {
+            control: 'object',
+            description: 'Action object for the label with onAction and content properties'
+        },
+        id: {
+            control: 'text',
+            description: 'The ID for the select input'
+        },
+        name: {
+            control: 'text',
+            description: 'The name for the select input'
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Callback for when the selected value changes'
+        },
+        onFocus: {
+            action: 'focused',
+            description: 'Callback for when the select gains focus'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Callback for when the select loses focus'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the select container'
+        },
+        contentClassName: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the select content area'
+        },
+        options: {
+            control: 'object',
+            description: 'Array of option objects for the select dropdown. Options can include groups'
+        }
+    }
+};
+export var Default = {
+    args: {
+        id: 'default-select',
+        name: 'defaultSelect',
+        onChange: function(value) {
+            return console.log('Selected:', value);
+        },
+        onFocus: function() {
+            return console.log('Select focused');
+        },
+        onBlur: function() {
+            return console.log('Select blurred');
+        }
+    }
+};
+export var WithPlaceholder = {
+    args: {
+        placeholder: 'Choose an option...',
+        id: 'placeholder-select',
+        name: 'placeholderSelect',
+        onChange: function(value) {
+            return console.log('Selected:', value);
+        }
+    }
+};
+export var WithValue = {
+    args: {
+        value: 'option2',
+        id: 'value-select',
+        name: 'valueSelect',
+        onChange: function(value) {
+            return console.log('Selected:', value);
+        }
+    }
+};
+export var WithHelpText = {
+    args: {
+        label: 'Country',
+        helpText: 'Select your country of residence',
+        options: [
+            {
+                label: 'United States',
+                value: 'us'
+            },
+            {
+                label: 'Canada',
+                value: 'ca'
+            },
+            {
+                label: 'United Kingdom',
+                value: 'uk'
+            },
+            {
+                label: 'Australia',
+                value: 'au'
+            },
+            {
+                label: 'Germany',
+                value: 'de'
+            }
+        ],
+        id: 'country-select',
+        name: 'country',
+        onChange: function(value) {
+            return console.log('Selected country:', value);
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled select',
+        disabled: true,
+        value: 'option1',
+        id: 'disabled-select',
+        name: 'disabledSelect',
+        onChange: function(value) {
+            return console.log('Selected:', value);
+        }
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Product category',
+        error: 'Please select a category',
+        options: [
+            {
+                label: 'Electronics',
+                value: 'electronics'
+            },
+            {
+                label: 'Clothing',
+                value: 'clothing'
+            },
+            {
+                label: 'Books',
+                value: 'books'
+            },
+            {
+                label: 'Home & Garden',
+                value: 'home'
+            }
+        ],
+        id: 'error-select',
+        name: 'category',
+        onChange: function(value) {
+            return console.log('Selected category:', value);
+        }
+    }
+};
+export var Required = {
+    args: {
+        label: 'Priority level',
+        requiredIndicator: true,
+        options: [
+            {
+                label: 'Low',
+                value: 'low'
+            },
+            {
+                label: 'Medium',
+                value: 'medium'
+            },
+            {
+                label: 'High',
+                value: 'high'
+            },
+            {
+                label: 'Critical',
+                value: 'critical'
+            }
+        ],
+        id: 'priority-select',
+        name: 'priority',
+        onChange: function(value) {
+            return console.log('Selected priority:', value);
+        }
+    }
+};
+export var WithGroups = {
+    args: {
+        label: 'Location',
+        options: [
+            {
+                label: 'North America',
+                options: [
+                    {
+                        label: 'United States',
+                        value: 'us'
+                    },
+                    {
+                        label: 'Canada',
+                        value: 'ca'
+                    },
+                    {
+                        label: 'Mexico',
+                        value: 'mx'
+                    }
+                ]
+            },
+            {
+                label: 'Europe',
+                options: [
+                    {
+                        label: 'United Kingdom',
+                        value: 'uk'
+                    },
+                    {
+                        label: 'Germany',
+                        value: 'de'
+                    },
+                    {
+                        label: 'France',
+                        value: 'fr'
+                    },
+                    {
+                        label: 'Spain',
+                        value: 'es'
+                    }
+                ]
+            },
+            {
+                label: 'Asia',
+                options: [
+                    {
+                        label: 'Japan',
+                        value: 'jp'
+                    },
+                    {
+                        label: 'China',
+                        value: 'cn'
+                    },
+                    {
+                        label: 'India',
+                        value: 'in'
+                    },
+                    {
+                        label: 'South Korea',
+                        value: 'kr'
+                    }
+                ]
+            }
+        ],
+        id: 'location-select',
+        name: 'location',
+        onChange: function(value) {
+            return console.log('Selected location:', value);
+        }
+    }
+};
+export var LabelHidden = {
+    args: {
+        label: 'Hidden label for accessibility',
+        labelHidden: true,
+        placeholder: 'Select option...',
+        id: 'hidden-label-select',
+        name: 'hiddenLabel',
+        onChange: function(value) {
+            return console.log('Selected:', value);
+        }
+    }
+};
+export var InlineLabel = {
+    args: {
+        label: 'Status:',
+        labelInline: true,
+        options: [
+            {
+                label: 'Active',
+                value: 'active'
+            },
+            {
+                label: 'Inactive',
+                value: 'inactive'
+            },
+            {
+                label: 'Pending',
+                value: 'pending'
+            }
+        ],
+        value: 'active',
+        id: 'status-select',
+        name: 'status',
+        onChange: function(value) {
+            return console.log('Selected status:', value);
+        }
+    }
+};