diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 34a35c37..4658f565 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,7 +1,7 @@ import '../src/scss/main.scss'; import './preview.scss'; -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { SyntaxHighlighter } from '@storybook/components'; import Wrapper from './Wrapper.svelte'; import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown'; import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; diff --git a/package.json b/package.json index 27114dc8..d1e3dd18 100644 --- a/package.json +++ b/package.json @@ -34,21 +34,21 @@ "@babel/preset-env": "^7.21.4", "@evilmartians/lefthook": "^1.3.10", "@reuters-graphics/eslint-config": "^0.0.2", - "@storybook/addon-actions": "^7.0.20", - "@storybook/addon-docs": "^7.0.20", - "@storybook/addon-essentials": "^7.0.20", - "@storybook/addon-interactions": "^7.0.20", - "@storybook/addon-links": "^7.0.20", - "@storybook/addon-mdx-gfm": "^7.0.20", - "@storybook/addon-svelte-csf": "^3.0.3", - "@storybook/blocks": "^7.0.20", - "@storybook/builder-vite": "^7.0.20", - "@storybook/manager-api": "^7.0.20", + "@storybook/addon-actions": "^7.1.0", + "@storybook/addon-docs": "^7.1.0", + "@storybook/addon-essentials": "^7.1.0", + "@storybook/addon-interactions": "^7.1.0", + "@storybook/addon-links": "^7.1.0", + "@storybook/addon-mdx-gfm": "^7.1.0", + "@storybook/addon-svelte-csf": "3.0.5--canary.113.02ce02a.0", + "@storybook/blocks": "^7.1.0", + "@storybook/builder-vite": "^7.1.0", + "@storybook/manager-api": "^7.1.0", "@storybook/mdx2-csf": "^1.1.0", - "@storybook/svelte": "^7.0.20", - "@storybook/svelte-vite": "^7.0.20", + "@storybook/svelte": "^7.1.0", + "@storybook/svelte-vite": "^7.1.0", "@storybook/testing-library": "^0.1.0", - "@storybook/theming": "^7.0.20", + "@storybook/theming": "^7.1.0", "@sveltejs/vite-plugin-svelte": "^2.4.1", "@tsconfig/svelte": "^4.0.1", "@types/gtag.js": "^0.0.12", @@ -91,7 +91,7 @@ "remark-gfm": "^3.0.1", "rimraf": "^5.0.0", "sass": "^1.63.0", - "storybook": "^7.0.20", + "storybook": "^7.1.0", "svelte": "^3.59.1", "svelte-loader": "^3.1.8", "svelte-preprocess": "^5.0.4", diff --git a/src/actions/cssVariables/cssVariables.stories.mdx b/src/actions/cssVariables/cssVariables.stories.mdx index 47319cd2..d906deea 100644 --- a/src/actions/cssVariables/cssVariables.stories.mdx +++ b/src/actions/cssVariables/cssVariables.stories.mdx @@ -9,7 +9,7 @@ import { parameters } from '$docs/utils/docsPage.js'; 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: -```html +```svelte {#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'} - + {/if} ``` diff --git a/src/components/Analytics/stories/docs/multipage.md b/src/components/Analytics/stories/docs/multipage.md index 7a0ff8ce..b8336dda 100644 --- a/src/components/Analytics/stories/docs/multipage.md +++ b/src/components/Analytics/stories/docs/multipage.md @@ -4,7 +4,7 @@ This component also exports a function you can call to register pageviews. For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews: -```html +```svelte diff --git a/src/components/Article/stories/docs/customWellWidths.md b/src/components/Article/stories/docs/customWellWidths.md index 4ea2157f..db2a9b70 100644 --- a/src/components/Article/stories/docs/customWellWidths.md +++ b/src/components/Article/stories/docs/customWellWidths.md @@ -14,23 +14,29 @@ When combined with the `Block` component, you can set custom column widths by pa > **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories. -```html +```svelte
- - - - - - - + + + + + + +
``` If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this: -```html +```svelte
@@ -44,7 +50,7 @@ If you're not using our `Block` component, you can still inherit the column widt ... or you can make your component entirely configurable within the article well doing something like this: -```html +```svelte diff --git a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md index 8af2112e..9c4e2863 100644 --- a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md +++ b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md @@ -2,7 +2,7 @@ Use text elements in your overlays as [ARIA descriptions](https://developer.mozi > **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need. -```html +```svelte import { BeforeAfter } from '@reuters-graphics/graphics-components'; import { assets } from '$app/paths'; // If using in the Graphics Kit diff --git a/src/components/BeforeAfter/stories/docs/withOverlays.md b/src/components/BeforeAfter/stories/docs/withOverlays.md index 0c0c1e48..a7fb527a 100644 --- a/src/components/BeforeAfter/stories/docs/withOverlays.md +++ b/src/components/BeforeAfter/stories/docs/withOverlays.md @@ -1,6 +1,6 @@ Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below. -```html +```svelte 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom. -```html +```svelte diff --git a/src/components/Block/stories/docs/customLayouts.md b/src/components/Block/stories/docs/customLayouts.md index fd48c583..74342fdb 100644 --- a/src/components/Block/stories/docs/customLayouts.md +++ b/src/components/Block/stories/docs/customLayouts.md @@ -2,7 +2,7 @@ Our article well is designed to provide a basic responsive layout for you, but i If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework. -```html +```svelte
diff --git a/src/components/Block/stories/docs/snapWidths.md b/src/components/Block/stories/docs/snapWidths.md index 6dd16156..22ec6c2d 100644 --- a/src/components/Block/stories/docs/snapWidths.md +++ b/src/components/Block/stories/docs/snapWidths.md @@ -2,7 +2,7 @@ Normally, `Block` containers resize fluidly below the original `width`. Sometime You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down. -```html +```svelte @@ -10,7 +10,7 @@ You can use the `snap` prop to force the container to snap to each block width s If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`. -```html +```svelte @@ -27,7 +27,7 @@ Snap width breakpoints are hard-coded to the default article well column widths, Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints. -```html +```svelte diff --git a/src/components/BodyText/stories/docs/component.md b/src/components/BodyText/stories/docs/component.md index 7f163b30..87a32b45 100644 --- a/src/components/BodyText/stories/docs/component.md +++ b/src/components/BodyText/stories/docs/component.md @@ -2,7 +2,7 @@ The `BodyText` creates the main text of your page. You can pass the `text` prop Use it like this: -```html +```svelte -{#each content.blocks as block} {#if block.Type === 'text'} - -{/if} {/each} +{#each content.blocks as block} + {#if block.Type === 'text'} + + {/if} +{/each} ``` diff --git a/src/components/DatawrapperChart/stories/docs/component.md b/src/components/DatawrapperChart/stories/docs/component.md index c85c9c10..6e7a8501 100644 --- a/src/components/DatawrapperChart/stories/docs/component.md +++ b/src/components/DatawrapperChart/stories/docs/component.md @@ -1,6 +1,6 @@ Easily add a responsive Datawrapper embed on your page. -```html +```svelte diff --git a/src/components/DocumentCloud/stories/docs/component.md b/src/components/DocumentCloud/stories/docs/component.md index cc0bb34a..6b52ec2a 100644 --- a/src/components/DocumentCloud/stories/docs/component.md +++ b/src/components/DocumentCloud/stories/docs/component.md @@ -4,7 +4,7 @@ Embed a document hosted by [DocumentCloud](https://documentcloud.org) The document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is "3259984-Trump-Intelligence-Allegations". -```html +```svelte diff --git a/src/components/EmbedPreviewerLink/stories/docs/component.md b/src/components/EmbedPreviewerLink/stories/docs/component.md index b14ddde9..35b360b1 100644 --- a/src/components/EmbedPreviewerLink/stories/docs/component.md +++ b/src/components/EmbedPreviewerLink/stories/docs/component.md @@ -1,6 +1,6 @@ An embed tool for development in graphics kit. -```html +```svelte -{#each content.blocks as block} {#if block.Type === 'text'} - +{#each content.blocks as block} + {#if block.Type === 'text'} + - -{:else if block.Type === 'photo'} - - -{/if} {/each} + + {:else if block.Type === 'photo'} + + + {/if} +{/each} ``` diff --git a/src/components/Framer/stories/docs/component.md b/src/components/Framer/stories/docs/component.md index 1f4023a1..01ad9baf 100644 --- a/src/components/Framer/stories/docs/component.md +++ b/src/components/Framer/stories/docs/component.md @@ -1,6 +1,6 @@ An embed tool for development in the Graphics Kit. -```html +```svelte diff --git a/src/components/GraphicBlock/stories/docs/customText.md b/src/components/GraphicBlock/stories/docs/customText.md index e8be5b34..e6ab9ee7 100644 --- a/src/components/GraphicBlock/stories/docs/customText.md +++ b/src/components/GraphicBlock/stories/docs/customText.md @@ -1,12 +1,12 @@ You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this: -```html +```svelte
My smaller title
-
+
diff --git a/src/components/GraphicBlock/stories/docs/quickit.md b/src/components/GraphicBlock/stories/docs/quickit.md index 69b7c9e4..35b88bf2 100644 --- a/src/components/GraphicBlock/stories/docs/quickit.md +++ b/src/components/GraphicBlock/stories/docs/quickit.md @@ -2,7 +2,7 @@ For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2s First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object; -```html +```svelte diff --git a/src/components/Headline/stories/docs/customHed.md b/src/components/Headline/stories/docs/customHed.md index 90dd7c95..fc89357f 100644 --- a/src/components/Headline/stories/docs/customHed.md +++ b/src/components/Headline/stories/docs/customHed.md @@ -1,6 +1,6 @@ Use the `hed` and/or `dek` named slots to override those elements with completely custom markup. -```html +```svelte diff --git a/src/components/Headline/stories/docs/withByline.md b/src/components/Headline/stories/docs/withByline.md index 07d02c2c..1badf2df 100644 --- a/src/components/Headline/stories/docs/withByline.md +++ b/src/components/Headline/stories/docs/withByline.md @@ -1,6 +1,6 @@ Add a byline and dateline with `byline` and `dateline` named slots. -```html +```svelte diff --git a/src/components/Headline/stories/docs/withCrown.md b/src/components/Headline/stories/docs/withCrown.md index b0e25c79..cd50697d 100644 --- a/src/components/Headline/stories/docs/withCrown.md +++ b/src/components/Headline/stories/docs/withCrown.md @@ -1,6 +1,6 @@ Add a crown image in the `crown` named slot and override the headline in the `hed` named slot. -```html +```svelte diff --git a/src/components/Hero/stories/docs/withByline.md b/src/components/Hero/stories/docs/withByline.md index e85fd057..3f59865d 100644 --- a/src/components/Hero/stories/docs/withByline.md +++ b/src/components/Hero/stories/docs/withByline.md @@ -1,6 +1,6 @@ Add a byline and dateline with `byline` and `dateline` named slots. -```html +```svelte diff --git a/src/components/Hero/stories/docs/withCrown.md b/src/components/Hero/stories/docs/withCrown.md index b0e25c79..cd50697d 100644 --- a/src/components/Hero/stories/docs/withCrown.md +++ b/src/components/Hero/stories/docs/withCrown.md @@ -1,6 +1,6 @@ Add a crown image in the `crown` named slot and override the headline in the `hed` named slot. -```html +```svelte @@ -18,7 +18,7 @@ The `PaddingReset` component resets padding on the `Article` well that's been ca You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do. -```html +```svelte -{#each content.blocks as block} {#if block.Type === 'text'} - +{#each content.blocks as block} + {#if block.Type === 'text'} + - -{:else if block.Type === 'photo-pack'} - - -{/if} {/each} + + {:else if block.Type === 'photo-pack'} + + + {/if} +{/each} ``` diff --git a/src/components/PymChild/stories/docs/component.md b/src/components/PymChild/stories/docs/component.md index 381abcc1..ac261b84 100644 --- a/src/components/PymChild/stories/docs/component.md +++ b/src/components/PymChild/stories/docs/component.md @@ -1,6 +1,6 @@ A Pym.js child instance for embeddables. -```html +```svelte @@ -10,7 +10,7 @@ A Pym.js child instance for embeddables. You can access the Pym.js child through its store in other components to send custom height updates to parent frames: -```html +```svelte diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md index 6c1bf506..55463813 100644 --- a/src/components/ReutersGraphicsLogo/stories/docs/component.md +++ b/src/components/ReutersGraphicsLogo/stories/docs/component.md @@ -2,7 +2,7 @@ Reuters Graphics' official logo. > Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component. -```html +```svelte diff --git a/src/components/ReutersLogo/stories/docs/component.md b/src/components/ReutersLogo/stories/docs/component.md index 04385eb2..6f18e191 100644 --- a/src/components/ReutersLogo/stories/docs/component.md +++ b/src/components/ReutersLogo/stories/docs/component.md @@ -1,6 +1,6 @@ The official home of the Reuters logo. -```html +```svelte diff --git a/src/components/SEO/stories/docs/component.md b/src/components/SEO/stories/docs/component.md index 04470c38..0b5c0aa2 100644 --- a/src/components/SEO/stories/docs/component.md +++ b/src/components/SEO/stories/docs/component.md @@ -1,6 +1,6 @@ The `SEO` component adds essential metadata to published pages. -```html +```svelte diff --git a/src/components/SEO/stories/docs/quickit.md b/src/components/SEO/stories/docs/quickit.md index e9887778..611d8f0c 100644 --- a/src/components/SEO/stories/docs/quickit.md +++ b/src/components/SEO/stories/docs/quickit.md @@ -4,7 +4,7 @@ Most of the fields are filled in by other sources, like your Google Doc and pack > **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. -```html +```svelte -{#each content.blocks as block} {#if block.Type === 'text'} - +{#each content.blocks as block} + {#if block.Type === 'text'} + - -{:else if block.Type === 'scroller' && block.ID === 'map-scrolly'} - - -{/if} {/each} + + {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'} + + + {/if} +{/each} ``` diff --git a/src/components/Scroller/stories/docs/component.md b/src/components/Scroller/stories/docs/component.md index 9dabe0cb..42cada93 100644 --- a/src/components/Scroller/stories/docs/component.md +++ b/src/components/Scroller/stories/docs/component.md @@ -4,7 +4,7 @@ Check out the "Canvas" tab to play with the layout options available on this com > This component is designed to handle most common layouts for scrollytelling. If you need something more complex, though, you should probably use [svelte-scroller](https://github.com/sveltejs/svelte-scroller), which is a lower level component you can more easily customize. -```html +```svelte diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/stories/docs/component.md index 9f1ff9e3..915105a7 100644 --- a/src/components/SimpleTimeline/stories/docs/component.md +++ b/src/components/SimpleTimeline/stories/docs/component.md @@ -1,6 +1,6 @@ A simple, clean text timeline. -```html +```svelte diff --git a/src/components/SiteFooter/stories/docs/customReferrals.md b/src/components/SiteFooter/stories/docs/customReferrals.md index 8c251e77..0afba5f5 100644 --- a/src/components/SiteFooter/stories/docs/customReferrals.md +++ b/src/components/SiteFooter/stories/docs/customReferrals.md @@ -1,6 +1,6 @@ Pass up to four custom referrals to the `referrals` prop. -```html +```svelte diff --git a/src/components/SiteHeader/stories/docs/component.md b/src/components/SiteHeader/stories/docs/component.md index c1771a4c..26677690 100644 --- a/src/components/SiteHeader/stories/docs/component.md +++ b/src/components/SiteHeader/stories/docs/component.md @@ -4,7 +4,7 @@ Reuters dotcom site header, ported from [Raptor UI components](https://github.co > **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page. -```html +```svelte diff --git a/src/components/SiteHeader/stories/docs/darkTheme.md b/src/components/SiteHeader/stories/docs/darkTheme.md index 4cd62263..492e8157 100644 --- a/src/components/SiteHeader/stories/docs/darkTheme.md +++ b/src/components/SiteHeader/stories/docs/darkTheme.md @@ -1,6 +1,6 @@ Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. -```html +```svelte diff --git a/src/components/SiteHeadline/stories/docs/component.md b/src/components/SiteHeadline/stories/docs/component.md index f2fa407e..0adb6e32 100644 --- a/src/components/SiteHeadline/stories/docs/component.md +++ b/src/components/SiteHeadline/stories/docs/component.md @@ -2,7 +2,7 @@ A simplified Reuters Graphics headline, loosely modelled off our dotcom site. Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages. -```html +```svelte diff --git a/src/components/SiteHeadline/stories/docs/quickit.md b/src/components/SiteHeadline/stories/docs/quickit.md index f0628c94..2efdb785 100644 --- a/src/components/SiteHeadline/stories/docs/quickit.md +++ b/src/components/SiteHeadline/stories/docs/quickit.md @@ -10,7 +10,7 @@ Published: 2022-09-12T08:30:00.000Z Updated: ``` -```html +```svelte {#if somethingsLoading} - + {:else} -

The real deal is here.

+

The real deal is here.

{/if} ``` diff --git a/src/components/Table/stories/docs/both.md b/src/components/Table/stories/docs/both.md index 6581793f..150557d4 100644 --- a/src/components/Table/stories/docs/both.md +++ b/src/components/Table/stories/docs/both.md @@ -1,6 +1,6 @@ Feel free to both search and filter. -```html +```svelte +>
``` diff --git a/src/components/Table/stories/docs/component.md b/src/components/Table/stories/docs/component.md index ecea6f31..31646f1e 100644 --- a/src/components/Table/stories/docs/component.md +++ b/src/components/Table/stories/docs/component.md @@ -2,7 +2,7 @@ Present structured data in a table. Consider making it interactive. --- -```html +```svelte - +
``` diff --git a/src/components/Table/stories/docs/filter.md b/src/components/Table/stories/docs/filter.md index 06f99428..ba9f3ba2 100644 --- a/src/components/Table/stories/docs/filter.md +++ b/src/components/Table/stories/docs/filter.md @@ -1,11 +1,11 @@ Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns. -```html +```svelte +>
``` diff --git a/src/components/Table/stories/docs/format.md b/src/components/Table/stories/docs/format.md index d681b0d5..b53d7ba0 100644 --- a/src/components/Table/stories/docs/format.md +++ b/src/components/Table/stories/docs/format.md @@ -2,7 +2,7 @@ Format column values by supplying functions keyed to field names with the `field Among other things, this feature can be used to provide a unit of measurement with numeric fields. -```html +```svelte diff --git a/src/components/Theme/stories/docs/customise.md b/src/components/Theme/stories/docs/customise.md index 114c98d5..e0550a91 100644 --- a/src/components/Theme/stories/docs/customise.md +++ b/src/components/Theme/stories/docs/customise.md @@ -8,14 +8,14 @@ Check out the "Control" column for `theme` in the properties table above to see > **Pro tip:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, it's still a good idea to set a `background-color` on your `body` element in global SCSS. > -> ```css +> ```scss > // global.scss > body { > background-color: #333; > } > ``` -```html +```svelte + playVideoThreshold="{0.9}"> ``` @@ -109,7 +108,7 @@ Here is an example with bottom right corner white opaque controls, with a replay -```html +```svelte @@ -165,7 +164,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video -```html +```svelte @@ -177,8 +176,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video controlsOpacity="{1}" loopVideo="{false}" muteVideo="{false}" - allowSoundToAutoplay="{true}" -/> + allowSoundToAutoplay="{true}"> ``` diff --git a/src/components/Video/stories/docs/component.md b/src/components/Video/stories/docs/component.md index 749d6255..c1076636 100644 --- a/src/components/Video/stories/docs/component.md +++ b/src/components/Video/stories/docs/component.md @@ -1,6 +1,6 @@ General-purpose video component. Can play on load or when the video comes into view and has play/pause controls. Supports videos with or without audio. -```html +```svelte @@ -33,6 +33,5 @@ Here is an example with bottom right corner white opaque controls, with a replay controlsPosition="{'bottom right'}" separateReplayIcon="{true}" loopVideo="{false}" - hoverToSeeControls="{true}" -/> + hoverToSeeControls="{true}"> ``` diff --git a/src/components/Video/stories/docs/playAndLoop.md b/src/components/Video/stories/docs/playAndLoop.md index 7e4e01a3..584dbc21 100644 --- a/src/components/Video/stories/docs/playAndLoop.md +++ b/src/components/Video/stories/docs/playAndLoop.md @@ -13,7 +13,7 @@ Here is an example of what the same video would look like with a visibility threshold of 0.9 and not looping. Scroll down slowly to observe the behaviour. -```html +```svelte @@ -23,6 +23,5 @@ Here is an example of what the same video would look like with a visibility thre src="{'path-to-video-or-external-url'}" width="{'normal'}" loopVideo="{false}" - playVideoThreshold="{0.9}" -/> + playVideoThreshold="{0.9}"> ``` diff --git a/src/components/Video/stories/docs/withSound.md b/src/components/Video/stories/docs/withSound.md index 710f8441..1287da4b 100644 --- a/src/components/Video/stories/docs/withSound.md +++ b/src/components/Video/stories/docs/withSound.md @@ -19,7 +19,7 @@ This is probably not a behaviour you'd want anyway. The example below allows for autoplay if the user has interacted with the page before the video comes into view. To see this, reload the page and go to the top. Click anywhere on the page before scrolling down to the video and you should see it autoplay when it comes into view. -```html +```svelte @@ -31,6 +31,5 @@ and go to the top. Click anywhere on the page before scrolling down to the video controlsOpacity="{1}" loopVideo="{false}" muteVideo="{false}" - allowSoundToAutoplay="{true}" -/> + allowSoundToAutoplay="{true}"> ``` diff --git a/src/components/Visible/stories/docs/component.md b/src/components/Visible/stories/docs/component.md index 6b5b9a99..8061e116 100644 --- a/src/components/Visible/stories/docs/component.md +++ b/src/components/Visible/stories/docs/component.md @@ -4,16 +4,16 @@ This is really useful for lazy loading elements, especially expensive media file > **Pro tip:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content. -```html +```svelte {#if visible} -

Visible!

+

Visible!

{:else} -

Not yet visible.

+

Not yet visible.

{/if} ``` diff --git a/src/docs/contributing/component-guidelines.stories.mdx b/src/docs/contributing/component-guidelines.stories.mdx index a47790ff..1bd35422 100644 --- a/src/docs/contributing/component-guidelines.stories.mdx +++ b/src/docs/contributing/component-guidelines.stories.mdx @@ -28,7 +28,7 @@ Here are a few examples: #### Typing simple props -```html +```svelte diff --git a/src/docs/contributing/story-recipes/basic-story.stories.mdx b/src/docs/contributing/story-recipes/basic-story.stories.mdx index 4117a426..96a140eb 100644 --- a/src/docs/contributing/story-recipes/basic-story.stories.mdx +++ b/src/docs/contributing/story-recipes/basic-story.stories.mdx @@ -14,7 +14,7 @@ To make a basic story, you'll need to setup a few things from storybook's Svelte Once you've setup the `Meta` and `Template` components as below, you can write a `Story` component with an `args` prop. In that `args` prop you can pass values that will be used to fill in your component's props. -```html +```svelte - +