@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/Breadcrumbs.stories-CFjDJvdh.js

@@ -0,0 +1,219 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{d as r}from"./Update-DflVXGGQ-qVV03FlC.js";import"./Text-BAwif7rv-BYvLGGQV.js";import"./index-CzKwSnp0.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const w={title:"Components/Writer/Breadcrumbs",component:r,parameters:{docs:{description:{component:"Breadcrumbs component displays a navigation hierarchy showing the current page location within a site structure. It helps users understand where they are and provides quick navigation to parent pages."}}},argTypes:{items:{description:"Array of breadcrumb items with title and optional href",control:"object"},className:{description:"Additional CSS classes to apply",control:"text"},as:{description:"Custom component to render links (defaults to anchor tag)",control:"text"}}},i={args:{items:[{title:"Home",href:"/"},{title:"Docs",href:"/docs"},{title:"Components"}]},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:700},children:e.jsx(r,{...t})})})},n={args:{items:[{title:"Home",href:"/"},{title:"Documentation",href:"/docs"},{title:"API Reference",href:"/docs/api"},{title:"GraphQL",href:"/docs/api/graphql"},{title:"Queries"}]},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:700},children:e.jsx(r,{...t})})})},s={args:{items:[{title:"Home",href:"/"},{title:"About"}]},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:700},children:e.jsx(r,{...t})})})},o={args:{items:[{title:"Home",href:"/"},{title:"Products",href:"/products"},{title:"Electronics",href:"/products/electronics"},{title:"Smartphones",href:"/products/electronics/smartphones"}]},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:700},children:e.jsx(r,{...t})})})},a={args:{items:[{title:"Home",href:"/"},{title:"Very Long Section Name That Might Overflow",href:"/long-section"},{title:"Another Extremely Long Page Title That Could Cause Layout Issues"}]},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:400},children:e.jsx(r,{...t})})})},d={render:()=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsxs("div",{style:{width:700,display:"flex",flexDirection:"column",gap:"20px"},children:[e.jsxs("div",{children:[e.jsx("h4",{children:"Documentation Navigation"}),e.jsx(r,{items:[{title:"Home",href:"/"},{title:"Docs",href:"/docs"},{title:"Getting Started"}]})]}),e.jsxs("div",{children:[e.jsx("h4",{children:"Product Navigation"}),e.jsx(r,{items:[{title:"Home",href:"/"},{title:"Products",href:"/products"},{title:"Software",href:"/products/software"},{title:"Development Tools"}]})]}),e.jsxs("div",{children:[e.jsx("h4",{children:"Support Navigation"}),e.jsx(r,{items:[{title:"Home",href:"/"},{title:"Support",href:"/support"},{title:"Troubleshooting"}]})]})]})})},p={args:{items:[{title:"Home",href:"/"},{title:"Docs",href:"/docs"},{title:"Components"}],as:({href:t,children:l,...c})=>e.jsx("a",{href:t,style:{color:"#0066cc",textDecoration:"underline",fontWeight:"500"},...c,children:l})},render:t=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsx("div",{style:{width:700},children:e.jsx(r,{...t})})}),parameters:{docs:{description:{story:"This example shows how to customize the link appearance using the `as` prop to pass a custom link component."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "Docs",
+      href: "/docs"
+    }, {
+      title: "Components"
+    }]
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>
+}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "Documentation",
+      href: "/docs"
+    }, {
+      title: "API Reference",
+      href: "/docs/api"
+    }, {
+      title: "GraphQL",
+      href: "/docs/api/graphql"
+    }, {
+      title: "Queries"
+    }]
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "About"
+    }]
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>
+}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "Products",
+      href: "/products"
+    }, {
+      title: "Electronics",
+      href: "/products/electronics"
+    }, {
+      title: "Smartphones",
+      href: "/products/electronics/smartphones"
+    }]
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>
+}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "Very Long Section Name That Might Overflow",
+      href: "/long-section"
+    }, {
+      title: "Another Extremely Long Page Title That Could Cause Layout Issues"
+    }]
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 400
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>
+}`,...a.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '20px'
+    }}>
+                <div>
+                    <h4>Documentation Navigation</h4>
+                    <Breadcrumbs items={[{
+          title: "Home",
+          href: "/"
+        }, {
+          title: "Docs",
+          href: "/docs"
+        }, {
+          title: "Getting Started"
+        }]} />
+                </div>
+                
+                <div>
+                    <h4>Product Navigation</h4>
+                    <Breadcrumbs items={[{
+          title: "Home",
+          href: "/"
+        }, {
+          title: "Products",
+          href: "/products"
+        }, {
+          title: "Software",
+          href: "/products/software"
+        }, {
+          title: "Development Tools"
+        }]} />
+                </div>
+                
+                <div>
+                    <h4>Support Navigation</h4>
+                    <Breadcrumbs items={[{
+          title: "Home",
+          href: "/"
+        }, {
+          title: "Support",
+          href: "/support"
+        }, {
+          title: "Troubleshooting"
+        }]} />
+                </div>
+            </div>
+        </div>
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      title: "Home",
+      href: "/"
+    }, {
+      title: "Docs",
+      href: "/docs"
+    }, {
+      title: "Components"
+    }],
+    as: ({
+      href,
+      children,
+      ...rest
+    }) => <a href={href} style={{
+      color: '#0066cc',
+      textDecoration: 'underline',
+      fontWeight: '500'
+    }} {...rest}>
+                {children}
+            </a>
+  },
+  render: args => <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+            <div style={{
+      width: 700
+    }}>
+                <Breadcrumbs {...args} />
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how to customize the link appearance using the \`as\` prop to pass a custom link component.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};const S=["Default","DeepNavigation","ShortNavigation","AllLinked","LongTitles","MultipleInstances","WithCustomLink"];export{o as AllLinked,n as DeepNavigation,i as Default,a as LongTitles,d as MultipleInstances,s as ShortNavigation,p as WithCustomLink,S as __namedExportsOrder,w as default};