@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Button.stories.js

@@ -0,0 +1,325 @@
+"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 ConnectedDisclosure () {
+        return ConnectedDisclosure;
+    },
+    get Default () {
+        return Default;
+    },
+    get Destructive () {
+        return Destructive;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get FullWidth () {
+        return FullWidth;
+    },
+    get Large () {
+        return Large;
+    },
+    get Loading () {
+        return Loading;
+    },
+    get Plain () {
+        return Plain;
+    },
+    get Primary () {
+        return Primary;
+    },
+    get Small () {
+        return Small;
+    },
+    get WithIcon () {
+        return WithIcon;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _polarisicons = require("@shopify/polaris-icons");
+var _ = require("../");
+var _default = {
+    title: "Litho/Button",
+    component: _.Button,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A Button component that renders a customizable button or link with various styles and states. The button can be configured with different variants, sizes, and can include icons, loading states, and connected disclosure actions."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        children: {
+            control: "text",
+            description: "The content to display within the button"
+        },
+        primary: {
+            control: "boolean",
+            description: "Whether to show the primary button style"
+        },
+        destructive: {
+            control: "boolean",
+            description: "Whether to show destructive styling"
+        },
+        highlight: {
+            control: "boolean",
+            description: "Whether to show the highlight button style"
+        },
+        plain: {
+            control: "boolean",
+            description: "Whether to show plain styling without background"
+        },
+        link: {
+            control: "boolean",
+            description: "Whether to show a link style"
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the button is disabled"
+        },
+        loading: {
+            control: "boolean",
+            description: "Whether to show a loading spinner"
+        },
+        pressed: {
+            control: "boolean",
+            description: "Whether the button appears pressed"
+        },
+        size: {
+            control: "select",
+            options: [
+                "small",
+                "medium",
+                "large",
+                "stepper"
+            ],
+            description: "Size of the button"
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Whether the button should take full width"
+        },
+        rounded: {
+            control: "boolean",
+            description: "Whether to show fully rounded corners"
+        },
+        disclosure: {
+            control: "boolean",
+            description: "Whether to show a disclosure arrow"
+        },
+        disclosureRight: {
+            control: "boolean",
+            description: "Whether to show the disclosure on the right"
+        },
+        align: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Alignment of the button content"
+        },
+        shadow: {
+            control: "boolean",
+            description: "Whether to show button shadow"
+        },
+        bordered: {
+            control: "boolean",
+            description: "Whether to show button border"
+        },
+        submit: {
+            control: "boolean",
+            description: "Whether the button should act as a form submit button"
+        },
+        external: {
+            control: "boolean",
+            description: "Whether the URL should open in a new tab"
+        },
+        url: {
+            control: "text",
+            description: "URL to navigate to when clicked. If provided, renders as an anchor tag"
+        },
+        target: {
+            control: "text",
+            description: "Target attribute for the anchor tag when URL is provided"
+        },
+        icon: {
+            control: "object",
+            description: "Icon component to display within the button"
+        },
+        iconColor: {
+            control: "select",
+            options: [
+                "default",
+                "primary",
+                "secondary",
+                "plain",
+                "link",
+                "destructive",
+                "highlight"
+            ],
+            description: "Color of the icon"
+        },
+        tooltip: {
+            control: "text",
+            description: "Tooltip to show when hovering over the button"
+        },
+        tooltipAlignment: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Alignment of the tooltip"
+        },
+        tooltipPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below",
+                "mostSpace"
+            ],
+            description: "Position of the tooltip"
+        },
+        connectedDisclosure: {
+            control: "object",
+            description: "Configuration for connected disclosure menu with actions array"
+        },
+        id: {
+            control: "text",
+            description: "Unique identifier for the button"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes for the button"
+        },
+        contentClassName: {
+            control: "text",
+            description: "Additional CSS classes for the button content"
+        },
+        accessibilityLabel: {
+            control: "text",
+            description: "Accessible label for screen readers"
+        },
+        role: {
+            control: "text",
+            description: "ARIA role for the button"
+        },
+        ariaControls: {
+            control: "text",
+            description: "ID of the element controlled by the button"
+        },
+        ariaExpanded: {
+            control: "boolean",
+            description: "Whether the controlled element is expanded"
+        },
+        ariaDescribedBy: {
+            control: "text",
+            description: "ID of the element that describes the button"
+        },
+        ariaChecked: {
+            control: "boolean",
+            description: "Whether the button is checked (for toggle buttons)"
+        },
+        onClick: {
+            action: "clicked",
+            description: "Callback when the button is clicked"
+        },
+        onMouseDown: {
+            action: "mouseDown",
+            description: "Callback when the mouse is pressed on the button"
+        }
+    }
+};
+var Default = {
+    args: {
+        children: "Button"
+    }
+};
+var Primary = {
+    args: {
+        primary: true,
+        children: "Primary Button"
+    }
+};
+var Destructive = {
+    args: {
+        destructive: true,
+        children: "Delete"
+    }
+};
+var Plain = {
+    args: {
+        plain: true,
+        children: "Plain Button"
+    }
+};
+var Loading = {
+    args: {
+        loading: true,
+        children: "Loading..."
+    }
+};
+var Disabled = {
+    args: {
+        disabled: true,
+        children: "Disabled Button"
+    }
+};
+var Small = {
+    args: {
+        size: "small",
+        children: "Small Button"
+    }
+};
+var Large = {
+    args: {
+        size: "large",
+        children: "Large Button"
+    }
+};
+var FullWidth = {
+    args: {
+        fullWidth: true,
+        children: "Full Width Button"
+    }
+};
+var ConnectedDisclosure = {
+    args: {
+        children: "Connected Disclosure Button",
+        connectedDisclosure: {
+            actions: [
+                {
+                    content: "Action 1",
+                    onAction: function() {}
+                },
+                {
+                    content: "Action 2",
+                    onAction: function() {}
+                }
+            ]
+        }
+    }
+};
+var WithIcon = {
+    args: {
+        children: "Upload",
+        icon: _polarisicons.UploadMajor
+    }
+};