diff --git a/src/docs/guides/imgs/other-docs.png b/src/docs/guides/imgs/other-docs.png deleted file mode 100644 index ef121f4e..00000000 Binary files a/src/docs/guides/imgs/other-docs.png and /dev/null differ diff --git a/src/docs/guides/imgs/stories.png b/src/docs/guides/imgs/stories.png index d1cc7db9..bf2077b6 100644 Binary files a/src/docs/guides/imgs/stories.png and b/src/docs/guides/imgs/stories.png differ diff --git a/src/docs/guides/imgs/tabs.png b/src/docs/guides/imgs/tabs.png deleted file mode 100644 index ed6b0a99..00000000 Binary files a/src/docs/guides/imgs/tabs.png and /dev/null differ diff --git a/src/docs/guides/using-docs.stories.mdx b/src/docs/guides/using-docs.stories.mdx index d5aca3da..a738b94c 100644 --- a/src/docs/guides/using-docs.stories.mdx +++ b/src/docs/guides/using-docs.stories.mdx @@ -3,13 +3,11 @@ import { parameters } from '$docs/utils/docsPage.js'; import storiesImg from './imgs/stories.png'; import introImg from './imgs/intro.png'; -import tabsImg from './imgs/tabs.png'; import argsImg from './imgs/argstable.png'; import frameImg from './imgs/frame.png'; import copyImg from './imgs/copy-code.png'; import propImg from './imgs/prop.png'; import moreStoriesImg from './imgs/more-stories.png'; -import otherDocsImg from './imgs/other-docs.png'; @@ -23,13 +21,16 @@ The docs in this site include interactive examples of how to use our components, Component docs are written using a framework called [Storybook](https://storybook.js.org/docs/svelte/get-started/introduction), which creates a page for each component. You can find those pages in left-hand nav on the site. -Each component page then has one or more "stories" or demos of how the component works: +Each component has a Docs page and one or more "stories" or demos that show how the component works: - + ### Parts of a component page -Each component page starts with an **intro** that includes a little documentation and a code snippet showing the simplest way to import and use a component. +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. @@ -37,22 +38,18 @@ Next is a **frame** that shows how the component looks. Each story will have its -Below the `Default` story frame is an **args table**. 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. +Below the story frame is an **args table**. This is the most important part of every component's page. The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it. 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. -The `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. +The `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. Click the "Show code" button in the frame to see how your component looks with the props you set. -You can also go to the `Canvas` tab at the top left of the page to get a better view of the component while you're playing with its controls. - - - From there, more stories show other ways you might use a component, also with a snippet you can copy into your own page. - -## Other docs pages - -Other docs pages are simple markdown documents that include useful snippets you can copy/paste into your code. - -