@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Icon.stories.js

@@ -0,0 +1,555 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from "../components/Icon.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import VerticalStack from "../components/VerticalStack.js";
+import Grid from "../components/Grid.js";
+import Text from "../components/Text.js";
+import { TickMinor, AlertMinor, CancelMinor, SearchMinor, SettingsMinor, HomeMinor, PlusMinor, DeleteMinor, EditMinor, ViewMinor } from "@shopify/polaris-icons";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/Icon',
+    component: Icon,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "An Icon component that renders icons with customizable size, color, and display style, using Shopify Polaris icons and custom Litho icons."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        source: TickMinor,
+        size: 'default',
+        color: 'default',
+        display: 'block'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        source: {
+            control: 'select',
+            options: {
+                'Tick': TickMinor,
+                'Alert': AlertMinor,
+                'Cancel': CancelMinor,
+                'Search': SearchMinor,
+                'Settings': SettingsMinor,
+                'Home': HomeMinor,
+                'Plus': PlusMinor,
+                'Delete': DeleteMinor,
+                'Edit': EditMinor,
+                'View': ViewMinor,
+                'Moon (Custom)': 'Moon',
+                'Sun (Custom)': 'Sun',
+                'Partnerships (Custom)': 'Partnerships'
+            },
+            description: 'The icon source - can be Polaris icon or custom icon name'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'xs',
+                'sm',
+                'default',
+                'lg',
+                'xl',
+                '2xl'
+            ],
+            description: 'Icon size variant'
+        },
+        color: {
+            control: 'select',
+            options: [
+                'white',
+                'default',
+                'base',
+                'subdued',
+                'link',
+                'primary',
+                'alternate',
+                'successFgAlternate',
+                'success',
+                'fg-success',
+                'critical',
+                'fg-critical',
+                'criticalFgAlternate',
+                'warning',
+                'info',
+                'caution',
+                'attention',
+                'highlight',
+                'neutral',
+                'normal',
+                'disabled',
+                'active',
+                'btn-primary-icon',
+                'btn-secondary-icon',
+                'btn-plain-icon',
+                'btn-link-icon',
+                'btn-destructive-icon',
+                'btn-highlight-icon',
+                'inputFg',
+                'inputFgDisabled',
+                'success-icon',
+                'critical-icon',
+                'warning-icon',
+                'attention-icon',
+                'info-icon',
+                'highlight-icon',
+                'insight-icon',
+                'neutral-icon',
+                'success-alt-icon',
+                'critical-alt-icon',
+                'warning-alt-icon',
+                'attention-alt-icon',
+                'info-alt-icon',
+                'highlight-alt-icon',
+                'insight-alt-icon',
+                'neutral-alt-icon'
+            ],
+            description: 'The color variant for the icon'
+        },
+        hoverColor: {
+            control: 'select',
+            options: [
+                'white',
+                'default',
+                'base',
+                'subdued',
+                'link',
+                'primary',
+                'alternate',
+                'success',
+                'critical',
+                'warning',
+                'info',
+                'caution',
+                'attention',
+                'highlight',
+                'neutral',
+                'normal',
+                'disabled',
+                'active',
+                'btn-primary-icon',
+                'btn-secondary-icon',
+                'btn-plain-icon',
+                'btn-link-icon',
+                'btn-destructive-icon',
+                'btn-highlight-icon',
+                'inputFg',
+                'inputFgDisabled',
+                'success-icon',
+                'critical-icon',
+                'warning-icon',
+                'attention-icon',
+                'info-icon',
+                'highlight-icon',
+                'insight-icon',
+                'neutral-icon',
+                'success-alt-icon',
+                'critical-alt-icon',
+                'warning-alt-icon',
+                'attention-alt-icon',
+                'info-alt-icon',
+                'highlight-alt-icon',
+                'insight-alt-icon',
+                'neutral-alt-icon'
+            ],
+            description: 'The hover color variant for the icon'
+        },
+        display: {
+            control: 'select',
+            options: [
+                'block',
+                'flex',
+                'inline',
+                'inline-block',
+                'inline-flex'
+            ],
+            description: 'Display type for the icon container'
+        },
+        stroke: {
+            control: 'boolean',
+            description: 'Whether to use stroke styling instead of fill'
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler for the icon'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply'
+        }
+    }
+};
+export var Default = {
+    args: {
+        onClick: function() {
+            return console.log('Icon clicked');
+        }
+    }
+};
+export var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "4",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "xs"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "xs"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "sm"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "sm"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "default"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "lg"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "xl"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "xl"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            size: "2xl"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "2xl"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons come in various sizes from extra small (xs) to double extra large (2xl).'
+            }
+        }
+    }
+};
+export var Colors = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Grid, {
+            columns: 4,
+            gap: "4",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: TickMinor,
+                            color: "success"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "success"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: AlertMinor,
+                            color: "warning"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "warning"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: CancelMinor,
+                            color: "critical"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "critical"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: SearchMinor,
+                            color: "primary"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "primary"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: SettingsMinor,
+                            color: "subdued"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "subdued"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: HomeMinor,
+                            color: "highlight"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "highlight"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: PlusMinor,
+                            color: "attention"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "attention"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: EditMinor,
+                            color: "default"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "default"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons support various color variants for different semantic meanings and visual hierarchy.'
+            }
+        }
+    }
+};
+export var CustomIcons = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "8",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: "Moon",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Moon"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: "Sun",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Sun"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: "Partnerships",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Partnerships"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: "OutlineCircle",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "OutlineCircle"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Litho includes custom icons that can be referenced by string name.'
+            }
+        }
+    }
+};
+export var Interactive = {
+    args: {
+        source: SettingsMinor,
+        size: 'lg',
+        color: 'primary',
+        onClick: function() {
+            return alert('Settings clicked!');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons can be made interactive by providing an onClick handler.'
+            }
+        }
+    }
+};
+export var InlineFlex = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "2",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: TickMinor,
+                    display: "inline-flex",
+                    color: "success"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    children: "Task completed successfully"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons can be displayed inline with text using different display options.'
+            }
+        }
+    }
+};
+export var ButtonIcons = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: PlusMinor,
+                    color: "btn-primary-icon"
+                }),
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: EditMinor,
+                    color: "btn-secondary-icon"
+                }),
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: DeleteMinor,
+                    color: "btn-destructive-icon"
+                }),
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: ViewMinor,
+                    color: "btn-plain-icon"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Special color variants are available for use within buttons.'
+            }
+        }
+    }
+};