@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Link.stories.js

@@ -0,0 +1,423 @@
+"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 CallToAction () {
+        return CallToAction;
+    },
+    get Colors () {
+        return Colors;
+    },
+    get Default () {
+        return Default;
+    },
+    get External () {
+        return External;
+    },
+    get InText () {
+        return InText;
+    },
+    get NavigationList () {
+        return NavigationList;
+    },
+    get WithIcon () {
+        return WithIcon;
+    },
+    get WithoutUnderline () {
+        return WithoutUnderline;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Link = /*#__PURE__*/ _interop_require_default(require("../components/Link.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/Link',
+    component: _Link.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Link component that provides consistent styling and behavior for navigation. Links can be internal navigation or external URLs with various visual treatments."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        children: 'Link text',
+        url: '#'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Content to display as the link text'
+        },
+        url: {
+            control: 'text',
+            description: 'The URL the link points to'
+        },
+        external: {
+            control: 'boolean',
+            description: 'Whether the link opens in a new tab'
+        },
+        target: {
+            control: 'text',
+            description: 'Target attribute for specifying where to open the link'
+        },
+        id: {
+            control: 'text',
+            description: 'ID attribute for the link element'
+        },
+        color: {
+            control: 'select',
+            options: [
+                'link',
+                'info',
+                'critical',
+                'success',
+                'warning',
+                'attention',
+                'highlight',
+                'neutral'
+            ],
+            description: 'Color variant of the link'
+        },
+        monochrome: {
+            control: 'boolean',
+            description: 'Whether to apply monochrome color scheme'
+        },
+        removeUnderline: {
+            control: 'boolean',
+            description: 'Whether to remove the underline from the link'
+        },
+        bold: {
+            control: 'boolean',
+            description: 'Whether to apply bold font weight'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the link is disabled'
+        },
+        accessibilityLabel: {
+            control: 'text',
+            description: 'Aria-label for accessibility'
+        },
+        dataPrimaryLink: {
+            control: 'text',
+            description: 'Data attribute for custom tracking'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply'
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click event handler for the link'
+        }
+    }
+};
+var Default = {
+    args: {
+        onClick: function() {
+            return console.log('Link clicked');
+        }
+    }
+};
+var External = {
+    args: {
+        children: 'Visit external site',
+        url: 'https://example.com',
+        external: true,
+        onClick: function() {
+            return console.log('External link clicked');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'External links open in a new tab and can include visual indicators.'
+            }
+        }
+    }
+};
+var Colors = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "1",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "default",
+                    children: "Default link color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "subdued",
+                    children: "Subdued link color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "critical",
+                    children: "Critical link color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "warning",
+                    children: "Warning link color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "success",
+                    children: "Success link color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    color: "highlight",
+                    children: "Highlight link color"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links support different color variants for various contexts.'
+            }
+        }
+    }
+};
+var WithoutUnderline = {
+    args: {
+        children: 'Link without underline',
+        removeUnderline: true,
+        onClick: function() {
+            return console.log('Link without underline clicked');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links can have their underlines removed for cleaner appearances.'
+            }
+        }
+    }
+};
+var InText = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+            children: [
+                "This is a paragraph of text with an ",
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "#",
+                    children: "inline link"
+                }),
+                " that flows naturally with the surrounding text. You can also have",
+                ' ',
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                    url: "https://example.com",
+                    external: true,
+                    children: "external links"
+                }),
+                " that open in new tabs."
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links work well when embedded within blocks of text.'
+            }
+        }
+    }
+};
+var WithIcon = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "1",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    gap: "0.25",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "https://example.com",
+                            external: true,
+                            removeUnderline: true,
+                            children: "Visit our website"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.ExternalMinor,
+                            size: "sm",
+                            color: "subdued"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    gap: "0.25",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "#",
+                            removeUnderline: true,
+                            children: "Continue to next step"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.ChevronRightMinor,
+                            size: "sm",
+                            color: "subdued"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links can be paired with icons to provide additional visual context.'
+            }
+        }
+    }
+};
+var NavigationList = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("nav", {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
+                style: {
+                    listStyle: 'none',
+                    padding: 0,
+                    margin: 0
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        style: {
+                            marginBottom: '0.5rem'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/dashboard",
+                            removeUnderline: true,
+                            children: "Dashboard"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        style: {
+                            marginBottom: '0.5rem'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/products",
+                            removeUnderline: true,
+                            children: "Products"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        style: {
+                            marginBottom: '0.5rem'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/customers",
+                            removeUnderline: true,
+                            children: "Customers"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        style: {
+                            marginBottom: '0.5rem'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/orders",
+                            removeUnderline: true,
+                            children: "Orders"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        style: {
+                            marginBottom: '0.5rem'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/analytics",
+                            removeUnderline: true,
+                            children: "Analytics"
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links are commonly used in navigation lists and menus.'
+            }
+        }
+    }
+};
+var CallToAction = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            style: {
+                padding: '2rem',
+                backgroundColor: '#f9f9f9',
+                borderRadius: '8px',
+                textAlign: 'center'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Ready to get started?"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "Join thousands of businesses already using our platform."
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    gap: "1",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/signup",
+                            removeUnderline: true,
+                            color: "highlight",
+                            children: "Sign up for free"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
+                            url: "/demo",
+                            removeUnderline: true,
+                            children: "Request a demo"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Links can be used as call-to-action elements in promotional sections.'
+            }
+        }
+    }
+};