diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index ae2b1958..c99763a5 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -34,7 +34,7 @@ div.sbdocs-content {
}
.docblock-source {
- margin: 1rem 0;
+ margin: 1rem 0 2.5rem;
}
& > div > :where(p, ul, ol),
@@ -130,10 +130,6 @@ div.sbdocs-content {
}
}
-.sbdocs.sbdocs-wrapper {
- padding-top: 1rem;
-}
-
div.reset-article {
width: calc(100% + 30px);
margin-left: -15px;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index d0ab9bd2..e094a7c5 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -17,7 +17,7 @@ const preview: Preview = {
// @ts-ignore Is OK
decorators: [() => Wrapper],
tags: ['autodocs'],
- parameters: {
+ parameters: {
viewMode: 'docs',
previewTabs: { 'storybook/docs/panel': { index: -1 } },
controls: {
@@ -40,7 +40,7 @@ const preview: Preview = {
[
'Using these docs',
'Using with the Graphics Kit',
- 'Using with Google docs',
+ 'Using with ArchieML docs',
'Customising components with SCSS',
'*',
'Getting help',
diff --git a/src/components/BodyText/stories/docs/component.md b/src/components/BodyText/stories/docs/component.md
index 87a32b45..2a3fe288 100644
--- a/src/components/BodyText/stories/docs/component.md
+++ b/src/components/BodyText/stories/docs/component.md
@@ -16,7 +16,19 @@ Use it like this:
```
-... or more commonly, you'll use it with a Google doc in the Graphics Kit like this:
+... or more commonly, you'll use it with a ArchieML doc in the Graphics Kit like this:
+
+```yaml
+[blocks]
+
+type: text
+text: Lorem ipsum ...
+
+... etc.
+:end
+
+[]
+```
```svelte
{#each content.blocks as block}
- {#if block.Type === 'text'}
-
+ {#if block.type === 'text'}
+
+
{/if}
{/each}
```
diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
index 3cc767b7..f58b1649 100644
--- a/src/components/EndNotes/EndNotes.stories.svelte
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@@ -14,20 +14,19 @@
@@ -36,4 +35,4 @@
-
+
diff --git a/src/components/EndNotes/docProps.ts b/src/components/EndNotes/docProps.ts
deleted file mode 100644
index 874ce36f..00000000
--- a/src/components/EndNotes/docProps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-interface EndNote {
- Title: string;
- Text: string;
-}
-
-type EndNotes = EndNote[];
-
-export const getEndNotesPropsFromDoc = (endNotes: EndNotes) => {
- return endNotes.map((d) => {
- return {
- title: d.Title,
- text: d.Text,
- };
- });
-};
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 756b6c92..d409c371 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -2,7 +2,7 @@
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieMLDocs from './stories/docs/archieML.md?raw';
// @ts-ignore raw
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
@@ -52,14 +52,14 @@
/>
-
-
-{#each content.blocks as block}
- {#if block.Type === 'text'}
-
-
-
- {:else if block.Type === 'photo'}
-
-
- {/if}
-{/each}
-```
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index a58e2758..954aaf98 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -2,7 +2,7 @@
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieMLDocs from './stories/docs/archieML.md?raw';
// @ts-ignore raw
import customTextDocs from './stories/docs/customText.md?raw';
// @ts-ignore raw
@@ -60,7 +60,7 @@
}}"
/>
-
+
-
-```
-
-Then add the following structure to your Google Doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `Chart`:
-
-```yaml
-# Google doc block
-Type: ai-graphic
-Chart: AiMap
-Width: normal
-TextWidth: normal
-Title: Earthquake in Haiti
-Description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
-Notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
-
-\Source: USGIS
-:end
-Aria: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
-:end
-```
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 91c3e30f..6d73ec4c 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -251,7 +251,7 @@
}
:global(.splide__arrows button:hover) {
opacity: 1;
- border-color: $theme-colour-text-secondary;
+ border-color: mixins.$theme-colour-text-secondary;
@include mixins.text-secondary;
}
:global(.splide__arrows button:disabled) {
@@ -277,8 +277,8 @@
height: 7px;
border-radius: 0;
padding: 0;
- border: 1px solid $theme-colour-background;
- background: $theme-colour-text-secondary;
+ border: 1px solid mixins.$theme-colour-background;
+ background: mixins.$theme-colour-text-secondary;
opacity: 0.4;
}
:global(ul.splide__pagination li button.is-active) {
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index cf7ba45e..07fa8483 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -2,7 +2,7 @@
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieMLDocs from './stories/docs/archieML.md?raw';
// @ts-ignore raw
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
@@ -30,8 +30,6 @@
-
-{#each content.blocks as block}
- {#if block.Type === 'text'}
-
-
-
- {:else if block.Type === 'photo-pack'}
-
-
- {/if}
-{/each}
-```
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index e5392995..c83f951a 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -2,7 +2,7 @@
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieMLDocs from './stories/docs/archieML.md?raw';
import SEO from './SEO.svelte';
@@ -37,11 +37,11 @@
/>
diff --git a/src/components/SEO/stories/docs/quickit.md b/src/components/SEO/stories/docs/quickit.md
deleted file mode 100644
index 611d8f0c..00000000
--- a/src/components/SEO/stories/docs/quickit.md
+++ /dev/null
@@ -1,29 +0,0 @@
-Add the `SEO` component to any page specified in the `pages/` directory of the Graphics Kit.
-
-Most of the fields are filled in by other sources, like your Google Doc and package.json. (Usually, the fastest way is to copy the `SEO` component from one of the pages already in your project.)
-
-> **IMPORTANT:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
-
-```svelte
-
-
-
-```
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index 60630781..500668a3 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -6,7 +6,7 @@
// @ts-ignore raw
import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieMLDocs from './stories/docs/archieML.md?raw';
import Scroller from './Scroller.svelte';
@@ -46,8 +46,6 @@
import AiMap2 from './stories/components/ai2svelte/ai-scroller-2.svelte';
import AiMap3 from './stories/components/ai2svelte/ai-scroller-3.svelte';
- import { getScrollerPropsFromDoc } from './docProps';
-
const aiCharts = {
AiMap1,
AiMap2,
@@ -55,26 +53,26 @@
};
const docBlock = {
- Type: 'scroller',
- Width: 'fluid',
- ForegroundPosition: 'middle',
- ID: 'my-scroller',
- StackBackground: 'true',
- Steps: [
+ type: 'scroller',
+ width: 'fluid',
+ foregroundPosition: 'middle',
+ id: 'my-scroller',
+ stackBackground: true,
+ steps: [
{
- Background: 'AiMap1',
- Text: '#### Step 1\n\nLorem ipsum',
- AltText: 'A map showing the Upper West side in New York City.',
+ background: aiCharts.AiMap1,
+ text: '#### Step 1\n\nLorem ipsum',
+ altText: 'A map showing the Upper West side in New York City.',
},
{
- Background: 'AiMap2',
- Text: '#### Step 2\n\nLorem ipsum',
- AltText: 'The same map now highlights 98th Street.',
+ background: aiCharts.AiMap2,
+ text: '#### Step 2\n\nLorem ipsum',
+ altText: 'The same map now highlights 98th Street.',
},
{
- Background: 'AiMap3',
- Text: '#### Step 3\n\nLorem ipsum',
- AltText:
+ background: aiCharts.AiMap3,
+ text: '#### Step 3\n\nLorem ipsum',
+ altText:
'The same map now highlights three locations near 98th Street where something particulary important happened.',
},
],
@@ -115,11 +113,7 @@
}}"
/>
-
+
{
- return {
- id: docBlock.ID,
- backgroundWidth: docBlock.Width,
- foregroundPosition: docBlock.ForegroundPosition,
- stackBackground:
- docBlock.StackBackground === 'true' || !docBlock.StackBackground,
- embeddedLayout: docBlock.EmbeddedLayout,
- preload: docBlock.Preload ? parseInt(docBlock.Preload) || 1 : 1,
- steps: docBlock.Steps.map((step) => ({
- background: aiCharts[step.Background],
- backgroundProps: { assetsPath },
- foreground: step.Text,
- altText: step.AltText,
- })),
- };
-};
diff --git a/src/components/Scroller/stories/docs/ai2svelte.md b/src/components/Scroller/stories/docs/ai2svelte.md
index e7217632..5b6ac9fd 100644
--- a/src/components/Scroller/stories/docs/ai2svelte.md
+++ b/src/components/Scroller/stories/docs/ai2svelte.md
@@ -41,7 +41,7 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
/>
```
-When working with a Google doc, here's an example of how you can tie your text into your steps.
+When working with a ArchieML doc, here's an example of how you can tie your text into your steps.
```yaml
# Google doc block
diff --git a/src/components/Scroller/stories/docs/quickit.md b/src/components/Scroller/stories/docs/quickit.md
deleted file mode 100644
index 214ac5a7..00000000
--- a/src/components/Scroller/stories/docs/quickit.md
+++ /dev/null
@@ -1,60 +0,0 @@
-For Graphics Kit users, the `Scroller` component is built-in for scrollytelling with [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics and text.
-
-First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
-
-```svelte
-
-
-```
-
-Then add the following structure to your Google Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
-
-```yaml
-# Google doc block
-Type: ai-scroller
-ID: my-map-scroller
-Width: normal
-ForegroundPosition: middle
-StackBackground: true
-[.Steps]
- Background: AiMap1
- Text: #### Step 1
-
- Lorem ipsum
- :end
- AltText: A map showing the Upper West side in New York City.
-
- Can add paragraphs of alt text if you want to break up sentences.
- :end
-
- Background: AiMap2
- Text: #### Step 2
-
- Lorem ipsum
- :end
- AltText: The same map now highlights 98th Street.
- :end
-
- Background: AiMap3
- Text: #### Step 3
-
- Lorem ipsum
- :end
- AltText: The same map now highlights three locations near 98th Street where something particulary important happened.
- :end
-[]
-
-```
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index bf454dce..3c7c796a 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -21,7 +21,7 @@
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore raw
- import quickitDocs from './stories/docs/quickit.md?raw';
+ import archieML from './stories/docs/archieML.md?raw';
import { withStoryDocs } from '$lib/docs/utils/withParams.js';
@@ -56,7 +56,7 @@
}}"
/>
-
+
-
-
-
-```
diff --git a/src/docs/guides/customising-with-scss.mdx b/src/docs/guides/customising-with-scss.mdx
index 500a4d43..478a9486 100644
--- a/src/docs/guides/customising-with-scss.mdx
+++ b/src/docs/guides/customising-with-scss.mdx
@@ -1,5 +1,6 @@
import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
import startImg from './imgs/scss-start.png';
import highlightImg from './imgs/scss-highlight.png';
@@ -29,13 +30,13 @@ Let's say you wanted to change our `BeforeAfter` component. You want the text ov
-The first thing you should do is check out the elements you want to change in your web inspector and see if CSS can make the change you want.
+The first thing you should do is check out the elements you want to change in your web inspector and see if CSS can make the change you want.
-In our case, we want to change the absolute position of those elements. To test that'll actually work, we can try it directly in the inspector first!
+In our case, we want to change the absolute position of those elements. To test that'll actually work, we can try it directly in the inspector first!
@@ -47,7 +48,7 @@ First, let's look at the class of the style rule we changed in the inspector:
`figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
-One thing we always need to do is strip out any Svelte class names, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
+One thing we always need to do is strip out any Svelte class names, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
That leaves us with:
@@ -55,7 +56,7 @@ That leaves us with:
But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
-The easiest way to make sure your style rule wins out is to add an ID either directly to the element or to a parent. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
+The easiest way to make sure your style rule wins out is to add an ID either directly to the element or to a parent. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
```scss
figure#my-before-after .overlay-container {
@@ -81,12 +82,14 @@ div#my-before-after figure .overlay-container {
}
```
-We can confirm the new style rule is winning by looking at its order back in our web inspector!
+We can confirm the new style rule is winning by looking at its order back in our web inspector!
Done!
-#### Can I just... `important!` it?
+### Can I just... `important!` it?
-Yep, as a last result. Just be sure your style rule is **very specific** and not something generic that might apply to other elements like `div.container`.
+Yep! Just be sure your style rule is **very specific** and not something generic that might apply to other elements in your page like `div.container`.
+
+Many of the components have `class` or `id` props you can use to attach additional classes or an id that will add more specificity to your components.
diff --git a/src/docs/guides/getting-help.mdx b/src/docs/guides/getting-help.mdx
index 959079da..0b63054d 100644
--- a/src/docs/guides/getting-help.mdx
+++ b/src/docs/guides/getting-help.mdx
@@ -13,16 +13,16 @@ If you're _off_ deadline, we use GitHub issues to track things that need fixing
### Is something wrong in the code?
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%90%9B%20bug&assignees=hobbes7878) to create an issue on GitHub and report any bugs you've found. It's **very** helpful if you also share a link to any repo you're working in where you've spotted the bug.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=bug&assignees=hobbes7878) to create an issue on GitHub and report any bugs you've found. It's **very** helpful if you also share a link to any repo you're working in where you've spotted the bug.
---
### Is something wrong in the docs?
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878) and tell us which docs are incorrect, unclear or could otherwise be improved.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=documentation&assignees=hobbes7878) and tell us which docs are incorrect, unclear or could otherwise be improved.
---
### Have an idea for a new component or how to improve an existing one?
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%9A%80%20new%20feature&assignees=hobbes7878) and tell us more.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=new%20feature&assignees=hobbes7878) and tell us more.
diff --git a/src/docs/guides/google-docs.mdx b/src/docs/guides/google-docs.mdx
deleted file mode 100644
index aa57707b..00000000
--- a/src/docs/guides/google-docs.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { parameters } from '../utils/docsPage.js';
-
-
-
-# Using with Google docs
-
-Most of the default examples in these docs show how to use components by passing data into them directly through props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.
-
-It's usually easy to use a Google Doc to fill in the props for our components, but it may mean you need to write a tiny bit of code to translate strings from a doc into the data type our component's props expect.
-
-Let's look at a basic component, a `ProfileCard`, with a demo that looks like this in the docs:
-
-```svelte
-
-
-
-```
-
-The data for the component's props includes strings, a date and a boolean.
-
-In our Google doc, we might fill out a block for this component like this:
-
-```yaml
-Type: profile-card
-Name: Tom
-Image: images/tom-the-cat.jpg
-Birthday: 2020-09-25
-Bio: Some notes.
-
-With multiple paragraphs.
-:end
-Staff: true
-```
-
-Now we can tie that data into your blocks loop like this:
-
-```svelte
-
-
-{#each content.blocks as block}
- {#if block.Type}
-
- {:else if block.Type === 'profile-card'}
-
-
-
- {/if}
-{/each}
-```
-
-Notice how we're coercing some of our data from strings into other data types: a boolean for `isStaff`, a date for `birthday` and an absolute path for `img`.
diff --git a/src/docs/guides/graphics-kit.mdx b/src/docs/guides/graphics-kit.mdx
index fbec50d5..5528ed55 100644
--- a/src/docs/guides/graphics-kit.mdx
+++ b/src/docs/guides/graphics-kit.mdx
@@ -1,5 +1,6 @@
import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
for 🚀 QUICKIT stories (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
-include easy copy/paste snippets as well as Google Doc block examples that should
-shortcut getting a component working in the Graphics Kit.
+When working with multimedia files like images or videos, components expect all paths to be absolute URLs.
-(Want a QUICKIT story for another component? [Just ask us!](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878))
-
-## FAQs
-
-### How do I write my Google Doc?
-
-Many component stories show passing data directly into component props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.
-
-Check out the guide devoted to [using components with Google Docs](?path=/docs/guides-using-with-google-docs--page) for a quick explanation of how to work with Google Docs.
-
-And, of course, look for a QUICKIT story for your component, which will have a Docs example specific to it.
-
-### How do I use this image/video/etc.?
-
-Remember, all references to images, videos and other media must be _absolute paths_:
-
-✅ `https://.../myImage.jpg`
+✅ `https://reuters.com/graphics/.../myImage.jpg`
❌ `./myImage.jpg`
-In most cases, that means you'll need to prefix relative paths with the special `assets` Svelte module. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
+In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
```svelte
+
```
-
-### How do I change this component's styles?
-
-Check out our guide on [customising components with SCSS](?path=/docs/guides-customising-components-with-scss--page)
diff --git a/src/docs/guides/imgs/copy-code.png b/src/docs/guides/imgs/copy-code.png
deleted file mode 100644
index d0ebebe7..00000000
Binary files a/src/docs/guides/imgs/copy-code.png and /dev/null differ
diff --git a/src/docs/guides/imgs/intro.png b/src/docs/guides/imgs/intro.png
index f710edde..95bafa37 100644
Binary files a/src/docs/guides/imgs/intro.png and b/src/docs/guides/imgs/intro.png differ
diff --git a/src/docs/guides/imgs/more-stories.png b/src/docs/guides/imgs/more-stories.png
index c75e4f63..b47f852d 100644
Binary files a/src/docs/guides/imgs/more-stories.png and b/src/docs/guides/imgs/more-stories.png differ
diff --git a/src/docs/guides/using-docs.mdx b/src/docs/guides/using-docs.mdx
index f361ba2d..ff5fa463 100644
--- a/src/docs/guides/using-docs.mdx
+++ b/src/docs/guides/using-docs.mdx
@@ -1,11 +1,11 @@
import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
import storiesImg from './imgs/stories.png';
import introImg from './imgs/intro.png';
import argsImg from './imgs/argstable.png';
import frameImg from './imgs/frame.png';
-import copyImg from './imgs/copy-code.png';
import moreStoriesImg from './imgs/more-stories.png';
@@ -14,28 +14,34 @@ import moreStoriesImg from './imgs/more-stories.png';
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.
+## Prerequisites
+
+Reuters Graphics components are written using Svelte, and we assume in these docs you have a very basic understanding of how those components work.
+
+If you don't, **🛑 STOP NOW** and read ["Bare minimum Svelte"](./?path=/docs/guides-bare-minimum-svelte--docs).
+
## How component docs are organised
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 has a Docs page and one or more "stories" or demos that show 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
+### Parts of a component docs page
-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.
+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.
-Next is a **frame** that shows how the component looks. Each story will have its own frame.
+Next is a frame that shows how the component looks. Each story will have its own frame.
-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.
+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.
@@ -43,10 +49,6 @@ Each prop includes its name and a description with the data type that prop expec
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.
-
-
-
From there, more stories show other ways you might use a component, also with a snippet you can copy into your own page.