@xyd-js/storybook 0.0.1-build.179 → 0.0.1-build.180

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

@@ -1,219 +0,0 @@
-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};