diff --git a/.storybook/preview.js b/.storybook/preview.js index 16fba0cc..4c634713 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -57,7 +57,8 @@ export const parameters = { 'Recipes: Story with custom docs', 'Recipes: Story with custom controls', 'Recipes: Story with media', - 'Recipes: Story for a component with slots' + 'Recipes: Story for a component with slots', + 'Writing docs pages', ], ], }, diff --git a/src/actions/cssVariables/cssVariables.stories.mdx b/src/actions/cssVariables/cssVariables.stories.mdx index cf00aa95..d906deea 100644 --- a/src/actions/cssVariables/cssVariables.stories.mdx +++ b/src/actions/cssVariables/cssVariables.stories.mdx @@ -7,11 +7,11 @@ import { parameters } from '$docs/utils/docsPage.js'; # `cssVariables` -A Svelte [action](https://svelte.dev/tutorial/actions) you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this: +An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this: ```svelte - diff --git a/src/components/DatawrapperChart/stories/docs/component.md b/src/components/DatawrapperChart/stories/docs/component.md index 38524057..6e7a8501 100644 --- a/src/components/DatawrapperChart/stories/docs/component.md +++ b/src/components/DatawrapperChart/stories/docs/component.md @@ -6,11 +6,11 @@ Easily add a responsive Datawrapper embed on your page. + title="Global abortion access" + ariaLabel="map" + id="abortion-rights-map" + src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html" +/> ``` ##### Getting the chart URL for `src` diff --git a/src/components/EmbedPreviewerLink/stories/docs/component.md b/src/components/EmbedPreviewerLink/stories/docs/component.md index 373a9235..35b360b1 100644 --- a/src/components/EmbedPreviewerLink/stories/docs/component.md +++ b/src/components/EmbedPreviewerLink/stories/docs/component.md @@ -7,5 +7,5 @@ An embed tool for development in graphics kit. import { dev } from '$app/env'; - + ``` diff --git a/src/components/Framer/stories/docs/component.md b/src/components/Framer/stories/docs/component.md index 5d20afcc..01ad9baf 100644 --- a/src/components/Framer/stories/docs/component.md +++ b/src/components/Framer/stories/docs/component.md @@ -7,5 +7,5 @@ An embed tool for development in the Graphics Kit. const embeds = ['/embeds/my-chart/index.html']; - + ``` diff --git a/src/components/GraphicBlock/stories/docs/component.md b/src/components/GraphicBlock/stories/docs/component.md index 19d0c532..cc46d41d 100644 --- a/src/components/GraphicBlock/stories/docs/component.md +++ b/src/components/GraphicBlock/stories/docs/component.md @@ -9,13 +9,12 @@ Many other components use this one to wrap graphics with styled text. When you u import { GraphicBlock } from '@reuters-graphics/graphics-components'; - -
+
``` diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte index b74066f9..9407ac61 100644 --- a/src/components/SEO/SEO.stories.svelte +++ b/src/components/SEO/SEO.stories.svelte @@ -10,11 +10,11 @@ import { withComponentDocs, - withStoryDocs, + withStoryDocs } from '$lib/docs/utils/withParams.js'; const meta = { - title: 'Utilities/SEO', + title: 'Components/SEO', component: SEO, ...withComponentDocs(componentDocs), }; diff --git a/src/components/SiteFooter/stories/docs/customReferrals.md b/src/components/SiteFooter/stories/docs/customReferrals.md index aa6a120a..0afba5f5 100644 --- a/src/components/SiteFooter/stories/docs/customReferrals.md +++ b/src/components/SiteFooter/stories/docs/customReferrals.md @@ -3,7 +3,7 @@ Pass up to four custom referrals to the `referrals` prop. ```svelte - + - + ``` diff --git a/src/components/SiteHeader/stories/docs/darkTheme.md b/src/components/SiteHeader/stories/docs/darkTheme.md index 6e761e45..6afcbbce 100644 --- a/src/components/SiteHeader/stories/docs/darkTheme.md +++ b/src/components/SiteHeader/stories/docs/darkTheme.md @@ -15,12 +15,21 @@ The component also exports some preset themes you can use or customise: ```svelte - + - + ``` diff --git a/src/components/Video/stories/docs/withSound.md b/src/components/Video/stories/docs/withSound.md index 85981890..d85aab26 100644 --- a/src/components/Video/stories/docs/withSound.md +++ b/src/components/Video/stories/docs/withSound.md @@ -6,11 +6,11 @@ If you have a video with sound, make sure to add the prop `muteVideo={false}`. Then you can either: - `allowSoundToAutoplay={false}` (default) : Don't allow the video to autoplay under any circumstances other than when the user clicks the 'play' on the video. Note that this -works whether or not you have the controls visible, i.e. with `showControls` being `true` or `false`, as long as you allow -play/pause behaviour with `possibleToPlayPause={true}` (default). + works whether or not you have the controls visible, i.e. with `showControls` being `true` or `false`, as long as you allow + play/pause behaviour with `possibleToPlayPause={true}` (default). - `allowSoundToAutoplay={true}` : Allow the video to autoplay when it comes into view as long as the user has interacted with the page preivously, i.e. they have clicked/tapped -anywhere on the page. + anywhere on the page. You should keep `playVideoWhenInView={true}` (default). There is no option to autoplay video with sound when the user clicks on the page elsewhere if the video is not in view. In other words, you can't start playing sound for a video which is not in view with this component. @@ -24,13 +24,13 @@ and go to the top. Click anywhere on the page before scrolling down to the video import { Video } from '@reuters-graphics/graphics-components'; -