@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Icon.stories.js

@@ -0,0 +1,599 @@
+"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 ButtonIcons () {
+        return ButtonIcons;
+    },
+    get Colors () {
+        return Colors;
+    },
+    get CustomIcons () {
+        return CustomIcons;
+    },
+    get Default () {
+        return Default;
+    },
+    get InlineFlex () {
+        return InlineFlex;
+    },
+    get Interactive () {
+        return Interactive;
+    },
+    get Sizes () {
+        return Sizes;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+var _transformers = require("../utilities/transformers.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/Icon',
+    component: _Icon.default,
+    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: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        source: _polarisicons.TickMinor,
+        size: 'default',
+        color: 'default',
+        display: 'block'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        source: {
+            control: 'select',
+            options: {
+                'Tick': _polarisicons.TickMinor,
+                'Alert': _polarisicons.AlertMinor,
+                'Cancel': _polarisicons.CancelMinor,
+                'Search': _polarisicons.SearchMinor,
+                'Settings': _polarisicons.SettingsMinor,
+                'Home': _polarisicons.HomeMinor,
+                'Plus': _polarisicons.PlusMinor,
+                'Delete': _polarisicons.DeleteMinor,
+                'Edit': _polarisicons.EditMinor,
+                'View': _polarisicons.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'
+        }
+    }
+};
+var Default = {
+    args: {
+        onClick: function() {
+            return console.log('Icon clicked');
+        }
+    }
+};
+var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "md",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "xs"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "xs"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "sm"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "sm"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "default"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "lg"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "xl"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "xl"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            size: "2xl"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "2xl"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons come in various sizes from extra small (xs) to double extra large (2xl).'
+            }
+        }
+    }
+};
+var Colors = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+            columns: 4,
+            gap: "4",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.TickMinor,
+                            color: "success"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "success"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.AlertMinor,
+                            color: "warning"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "warning"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.CancelMinor,
+                            color: "critical"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "critical"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.SearchMinor,
+                            color: "primary"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "primary"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.SettingsMinor,
+                            color: "subdued"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "subdued"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.HomeMinor,
+                            color: "highlight"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "highlight"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.PlusMinor,
+                            color: "attention"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "attention"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.EditMinor,
+                            color: "default"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "default"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons support various color variants for different semantic meanings and visual hierarchy.'
+            }
+        }
+    }
+};
+var CustomIcons = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "lg",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: "Moon",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "Moon"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: "Sun",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "Sun"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: "Partnerships",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "Partnerships"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: "OutlineCircle",
+                            size: "lg"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "caption",
+                            children: "OutlineCircle"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Litho includes custom icons that can be referenced by string name.'
+            }
+        }
+    }
+};
+var Interactive = {
+    args: {
+        source: _polarisicons.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.'
+            }
+        }
+    }
+};
+var InlineFlex = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "sm",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: _polarisicons.TickMinor,
+                    display: "inline-flex",
+                    color: "success"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    children: "Task completed successfully"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons can be displayed inline with text using different display options.'
+            }
+        }
+    }
+};
+var ButtonIcons = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "md",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: _polarisicons.PlusMinor,
+                    color: "btn-primary-icon"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: _polarisicons.EditMinor,
+                    color: "btn-secondary-icon"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: _polarisicons.DeleteMinor,
+                    color: "btn-destructive-icon"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: _polarisicons.ViewMinor,
+                    color: "btn-plain-icon"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Special color variants are available for use within buttons.'
+            }
+        }
+    }
+};