import{M as i}from"./chunk-S4VUQJ4A-e77a1bf8.js";import{p as n,j as e}from"./jsx-runtime-0eb16fb5.js";import{u as a}from"./index-5cce2c7b.js";import"./iframe-3532bc3f.js";import"../sb-preview/runtime.js";import"./index-33b6ba46.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";const h=""+new URL("stories-3882a3eb.png",import.meta.url).href,c=""+new URL("intro-dfe8cd85.png",import.meta.url).href,m=""+new URL("argstable-78a8b965.png",import.meta.url).href,p=""+new URL("frame-ac36701c.png",import.meta.url).href,l=""+new URL("copy-code-984259f8.png",import.meta.url).href,d=""+new URL("more-stories-168790e5.png",import.meta.url).href;function r(o){const t=Object.assign({p:"p",img:"img",h1:"h1",h2:"h2",a:"a",h3:"h3",strong:"strong",code:"code"},a(),o.components);return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Using these docs",parameters:{...n}}),`
`,e.jsx(t.p,{children:e.jsx(t.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
`,e.jsx(t.h1,{id:"using-these-docs",children:"Using these docs"}),`
`,e.jsx(t.p,{children:"The docs in this site include interactive examples of how to use our components, explanations of how our basic design system works and helpful docs on SCSS tools you can use to customise your page."}),`
`,e.jsx(t.h2,{id:"how-component-docs-are-organised",children:"How component docs are organised"}),`
`,e.jsxs(t.p,{children:["Component docs are written using a framework called ",e.jsx(t.a,{href:"https://storybook.js.org/docs/svelte/get-started/introduction",target:"_blank",rel:"nofollow noopener noreferrer",children:"Storybook"}),", which creates a page for each component. You can find those pages in left-hand nav on the site."]}),`
`,e.jsx(t.p,{children:'Each component has a Docs page and one or more "stories" or demos that show how the component works:'}),`
`,e.jsx("img",{src:h,style:{maxWidth:"300px",width:"100%",margin:"0 0 2rem"}}),`
`,e.jsx(t.h3,{id:"parts-of-a-component-page",children:"Parts of a component page"}),`
`,e.jsx(t.p,{children:"Each component page starts with an intro that includes a little documentation and a code snippet. The intro always shows the simplest way to import and use a component."}),`
`,e.jsx("img",{src:c,width:"650",style:{margin:"0 0 2rem"}}),`
`,e.jsxs(t.p,{children:["Next is a ",e.jsx(t.strong,{children:"frame"})," that shows how the component looks. Each story will have its own frame."]}),`
`,e.jsx("img",{src:p,width:"650",style:{margin:"0 0 2rem"}}),`
`,e.jsxs(t.p,{children:["Below the story frame is an ",e.jsx(t.strong,{children:"args table"}),". ",e.jsx("span",{class:"highlight bold",children:"This is the most important part of every component's page."})," The args table documents all the ",e.jsx(t.a,{href:"https://learn.svelte.dev/tutorial/declaring-props",target:"_blank",rel:"nofollow noopener noreferrer",children:"props"})," and ",e.jsx(t.a,{href:"https://learn.svelte.dev/tutorial/slots",target:"_blank",rel:"nofollow noopener noreferrer",children:"slots"})," a component has, i.e., all the ways you can customise it."]}),`
`,e.jsx("img",{src:m,width:"100%",style:{margin:"0 0 2rem",maxWidth:800}}),`
`,e.jsx(t.p,{children:"Each prop includes its name and a description with the data type that prop expects as well as the default value, if there is one."}),`
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Control"})," column in the table gives you a way to play with the value of that prop in the live demo. Make changes here, and for most components, they'll update the demo frame to reflect your changes."]}),`
`,e.jsx(t.p,{children:'Click the "Show code" button in the frame to see how your component looks with the props you set.'}),`
`,e.jsx("img",{src:l,width:"100%",style:{margin:"2rem 0",maxWidth:800}}),`
`,e.jsx(t.p,{children:"From there, more stories show other ways you might use a component, also with a snippet you can copy into your own page."}),`
`,e.jsx("img",{src:d,width:"100%",style:{margin:"2rem 0",maxWidth:800}})]})}function g(o={}){const{wrapper:t}=Object.assign({},a(),o.components);return t?e.jsx(t,{...o,children:e.jsx(r,{...o})}):r(o)}const u=()=>{throw new Error("Docs-only story")};u.parameters={docsOnly:!0};const s={title:"Guides/Using these docs",parameters:{...n},tags:["stories-mdx"],includeStories:["__page"]};s.parameters=s.parameters||{};s.parameters.docs={...s.parameters.docs||{},page:g};const M=["__page"];export{M as __namedExportsOrder,u as __page,s as default};
//# sourceMappingURL=using-docs.stories-07d2960c.js.map