@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Tooltip.stories.js

@@ -0,0 +1,357 @@
+"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 AlwaysVisible () {
+        return AlwaysVisible;
+    },
+    get Default () {
+        return Default;
+    },
+    get FormField () {
+        return FormField;
+    },
+    get LongContent () {
+        return LongContent;
+    },
+    get MultipleTooltips () {
+        return MultipleTooltips;
+    },
+    get Positions () {
+        return Positions;
+    },
+    get WithComplexContent () {
+        return WithComplexContent;
+    },
+    get WithIcon () {
+        return WithIcon;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("../components/Tooltip.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: "Litho/Tooltip",
+    component: _Tooltip.default,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A Tooltip component that provides contextual information when hovering over or focusing on an element. Tooltips help explain functionality or provide additional details."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        content: {
+            control: "object",
+            description: "Content to display in the tooltip. Can be text, React node, or structured content object"
+        },
+        preferredPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below"
+            ],
+            description: "Preferred position for the tooltip relative to the activator"
+        },
+        alignment: {
+            control: "select",
+            options: [
+                "center",
+                "left",
+                "right"
+            ],
+            description: "Alignment of the tooltip content"
+        },
+        dismissOnMouseOut: {
+            control: "boolean",
+            description: "Whether the tooltip should be dismissed when the mouse leaves the activator"
+        },
+        dismissOnActivatorClick: {
+            control: "boolean",
+            description: "Whether the tooltip should be dismissed when clicking the activator"
+        },
+        hoverDelay: {
+            control: "number",
+            description: "Delay in milliseconds before showing the tooltip on hover"
+        },
+        hasUnderline: {
+            control: "boolean",
+            description: "Whether the activator should have an underline"
+        },
+        zIndexOverride: {
+            control: "number",
+            description: "Override for the z-index of the tooltip"
+        },
+        display: {
+            control: "select",
+            options: [
+                "inline",
+                "inline-block",
+                "block"
+            ],
+            description: "Display property of the tooltip container"
+        },
+        children: {
+            control: "object",
+            description: "Element that triggers the tooltip on hover"
+        }
+    }
+};
+var Default = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+            content: "This is a tooltip",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Hover me"
+            })
+        });
+    }
+};
+var Positions = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "3rem",
+                alignItems: "center"
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Tooltip above",
+                    preferredPosition: "above",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        children: "Above"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Tooltip below",
+                    preferredPosition: "below",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        children: "Below"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Tooltip in most space",
+                    preferredPosition: "mostSpace",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        children: "Most Space"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can be positioned above, below, or in the area with the most available space."
+            }
+        }
+    }
+};
+var WithIcon = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: "flex",
+                gap: "1rem",
+                alignItems: "center"
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "Need help?"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Click here to open the help documentation",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                        source: _polarisicons.QuestionMarkMajor,
+                        color: "subdued"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips work well with icons to provide contextual help."
+            }
+        }
+    }
+};
+var LongContent = {
+    args: {
+        content: "This is a longer tooltip message that provides more detailed information about the element. It can wrap to multiple lines when necessary.",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            children: "Long tooltip"
+        })
+    }
+};
+var MultipleTooltips = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: "flex",
+                gap: "1rem",
+                flexWrap: "wrap"
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Save your current work",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        primary: true,
+                        children: "Save"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Discard all changes",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        children: "Cancel"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Delete this item permanently",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        destructive: true,
+                        children: "Delete"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "Open settings panel",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        plain: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.SettingsMinor
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Multiple tooltips can be used together to explain different actions."
+            }
+        }
+    }
+};
+var WithComplexContent = {
+    args: {
+        content: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        fontWeight: "bold",
+                        marginBottom: "4px"
+                    },
+                    children: "Pro Tip"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: "Use keyboard shortcuts to work faster:"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    style: {
+                        marginTop: "4px",
+                        fontSize: "12px"
+                    },
+                    children: [
+                        "• Ctrl+S to save",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+                        "• Ctrl+Z to undo",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+                        "• Ctrl+Y to redo"
+                    ]
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            children: "Keyboard shortcuts"
+        })
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can contain complex content including formatted text and lists."
+            }
+        }
+    }
+};
+var FormField = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem"
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
+                    htmlFor: "email-field",
+                    style: {
+                        fontSize: "14px",
+                        fontWeight: "500"
+                    },
+                    children: "Email Address"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                    content: "We'll use this email to send you important updates about your account",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                        source: _polarisicons.InfoMinor,
+                        size: "sm",
+                        color: "subdued"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips are commonly used with form fields to provide additional context."
+            }
+        }
+    }
+};
+var AlwaysVisible = {
+    args: {
+        active: true,
+        content: "This tooltip is always visible",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            children: "Always shown"
+        })
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can be forced to always be visible using the active prop."
+            }
+        }
+    }
+};

package/dist/cjs/stories/TopBar.stories.js

@@ -0,0 +1,157 @@
+"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 Default () {
+        return Default;
+    },
+    get FullExample () {
+        return FullExample;
+    },
+    get WithHeaderAccessory () {
+        return WithHeaderAccessory;
+    },
+    get WithNavigation () {
+        return WithNavigation;
+    },
+    get WithNavigationAndUser () {
+        return WithNavigationAndUser;
+    },
+    get WithSearchTrigger () {
+        return WithSearchTrigger;
+    },
+    get WithUserMenu () {
+        return WithUserMenu;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _ = require("../");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/TopBar',
+    component: _.TopBar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A TopBar component that renders a customizable top navigation bar with navigation, search, user menu, and header accessory. The top bar can be configured with different layouts and can include navigation, search, user menu, and header accessory."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        hasNavigation: {
+            control: 'boolean',
+            description: 'Whether navigation is present'
+        },
+        alwaysShowUserMenuInTopBar: {
+            control: 'boolean',
+            description: 'Always show user menu in top bar'
+        }
+    }
+};
+var Default = {
+    args: {}
+};
+var WithNavigation = {
+    args: {
+        hasNavigation: true
+    }
+};
+var WithUserMenu = {
+    args: {
+        userMenu: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+            plain: true,
+            children: "User Menu"
+        })
+    }
+};
+var WithSearchTrigger = {
+    args: {
+        searchTrigger: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+            plain: true,
+            children: "Search"
+        })
+    }
+};
+var WithHeaderAccessory = {
+    args: {
+        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "xs",
+            align: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+                    size: "small",
+                    children: "Action"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+                    size: "small",
+                    plain: true,
+                    children: "Settings"
+                })
+            ]
+        })
+    }
+};
+var FullExample = {
+    args: {
+        hasNavigation: true,
+        searchTrigger: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
+            placeholder: "Search...",
+            type: "search"
+        }),
+        userMenu: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+            plain: true,
+            children: "John Doe"
+        }),
+        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "xs",
+            align: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+                    size: "small",
+                    children: "Notifications"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+                    size: "small",
+                    plain: true,
+                    children: "Help"
+                })
+            ]
+        }),
+        alwaysShowUserMenuInTopBar: true
+    }
+};
+var WithNavigationAndUser = {
+    args: {
+        hasNavigation: true,
+        userMenu: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
+            plain: true,
+            children: "Admin User"
+        }),
+        alwaysShowUserMenuInTopBar: true
+    }
+};