27 lines
5 KiB
JavaScript
27 lines
5 KiB
JavaScript
import{M as c}from"./chunk-PCJTTTQV-8ea8b36c.js";import{p as i,j as e}from"./jsx-runtime-539b76a3.js";import{u as a}from"./index-297ebefe.js";import"./iframe-647e33a7.js";import"../sb-preview/runtime.js";import"./extends-b40c5bac.js";import"./_commonjsHelpers-725317a4.js";import"./index-d475d2ea.js";import"./index-d37d4223.js";import"./index-1a79a776.js";import"./index-356e4a49.js";const h=""+new URL("stories-f3c1de5e.png",import.meta.url).href,m=""+new URL("intro-dfe8cd85.png",import.meta.url).href,p=""+new URL("tabs-2c40a63b.png",import.meta.url).href,l=""+new URL("argstable-78a8b965.png",import.meta.url).href,d=""+new URL("frame-ac36701c.png",import.meta.url).href,g=""+new URL("copy-code-984259f8.png",import.meta.url).href,u=""+new URL("more-stories-168790e5.png",import.meta.url).href,w=""+new URL("other-docs-db0f6915.png",import.meta.url).href;function x(s={}){const{wrapper:n}=Object.assign({},a(),s.components);return n?e.jsx(n,{...s,children:e.jsx(r,{})}):r();function r(){const t=Object.assign({p:"p",img:"img",h1:"h1",h2:"h2",a:"a",h3:"h3",strong:"strong",code:"code"},a(),s.components);return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Guides/Using these docs",parameters:{...i}}),`
|
|
`,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 page then has one or more "stories" or demos of how the component works:'}),`
|
|
`,e.jsx("img",{src:h,width:"150",style:{margin:"0 0 2rem"}}),`
|
|
`,e.jsx(t.h3,{id:"parts-of-a-component-page",children:"Parts of a component page"}),`
|
|
`,e.jsxs(t.p,{children:["Each component page starts with an ",e.jsx(t.strong,{children:"intro"})," that includes a little documentation and a code snippet showing the simplest way to import and use a component."]}),`
|
|
`,e.jsx("img",{src:m,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:d,width:"650",style:{margin:"0 0 2rem"}}),`
|
|
`,e.jsxs(t.p,{children:["Below the ",e.jsx(t.code,{children:"Default"})," 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 props and slots a component has, i.e., all the ways you can customise it."]}),`
|
|
`,e.jsx("img",{src:l,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 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:g,width:"100%",style:{margin:"2rem 0",maxWidth:800}}),`
|
|
`,e.jsxs(t.p,{children:["You can also go to the ",e.jsx(t.code,{children:"Canvas"})," tab at the top left of the page to get a better view of the component while you're playing with its controls."]}),`
|
|
`,e.jsx("img",{src:p,width:"200",style:{margin:"0 0 2rem"}}),`
|
|
`,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:u,width:"100%",style:{margin:"2rem 0",maxWidth:800}}),`
|
|
`,e.jsx(t.h2,{id:"other-docs-pages",children:"Other docs pages"}),`
|
|
`,e.jsx(t.p,{children:"Other docs pages are simple markdown documents that include useful snippets you can copy/paste into your code."}),`
|
|
`,e.jsx("img",{src:w,width:"100%",style:{margin:"2rem 0",maxWidth:800}})]})}}const f=()=>{throw new Error("Docs-only story")};f.parameters={docsOnly:!0};const o={title:"Guides/Using these docs",parameters:{...i},tags:["stories-mdx"],includeStories:["__page"]};o.parameters=o.parameters||{};o.parameters.docs={...o.parameters.docs||{},page:x};const M=["__page"];export{M as __namedExportsOrder,f as __page,o as default};
|
|
//# sourceMappingURL=using-docs.stories-68c84e84.js.map
|