migrates padding reset

src/components/PaddingReset/PaddingReset.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PaddingResetStories from './PaddingReset.stories.svelte';
+
+<Meta of={PaddingResetStories} />
+
+# PaddingReset
+
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- Image in `fluid` block is edge-to-edge -->
+  <img src="https:..." alt="Alt text" />
+
+  <!-- Wrap text in `PaddingReset`to add padding back in -->
+  <PaddingReset>
+    <p>A caption for the image that is padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```
+
+<Canvas of={PaddingResetStories.Demo} />
+
+## Conditional padding
+
+You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  export let src = 'https://...';
+  export let width = 'fluid';
+</script>
+
+<Block {width}>
+  <img {src} alt="Alt text" />
+
+  <!-- Set `containerIsFluid: true` if `width === 'fluid'` -->
+  <PaddingReset containerIsFluid={width === 'fluid'}>
+    <p>A caption for the image that is padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -1,51 +1,49 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PaddingReset from './PaddingReset.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page layout/PaddingReset',
     component: PaddingReset,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
   import Block from '../Block/Block.svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  let width: ContainerWidth = 'fluid' as 'wide' | 'fluid';
+
+  import sharkSrc from './shark.jpg';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Block width="fluid">
-      <div class="outer"></div>
-      <PaddingReset {...args}>
-        <div class="inner"></div>
+<Story name="Demo">
+  <!-- Fluid block -->
+  <Block {width}>
+    <img src={sharkSrc} alt="shark" />
+    <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
+      <p>
+        A caption for the image that is padded when <code>Block</code> is fluid.
+      </p>
     </PaddingReset>
   </Block>
-  {/snippet}
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    containerIsFluid: true,
-  }}"
-/>
+</Story>
 
 <style lang="scss">
-  div {
-    height: 30px;
-    width: 100%;
-    margin-bottom: 2px;
-    &.outer {
-      background: grey;
-    }
-    &.inner {
-      background: salmon;
-    }
+  // Style span as code block with unicode font
+  code {
+    line-height: 1;
+    margin: 0px 2px;
+    padding: 3px 5px;
+    white-space: nowrap;
+    border-radius: 3px;
+    font-size: 13px;
+    border: 1px solid rgb(236, 244, 249);
+    color: rgba(46, 52, 56, 0.9);
+    background-color: rgb(247, 250, 252);
   }
+
+  // p {
+  //   background: rgb(222, 222, 222);
+  // }
 </style>

src/components/PaddingReset/PaddingReset.svelte

@@ -1,12 +1,16 @@
 <!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
 
   interface Props {
     /**
      * If parent container is fluid, which resets the padding around contained elements.
      */
     containerIsFluid?: boolean;
-    children?: import('svelte').Snippet;
+    /**
+     * Content to be padded.
+     */
+    children: Snippet;
   }
 
   let { containerIsFluid = true, children }: Props = $props();
@@ -15,11 +19,11 @@
 {#if containerIsFluid}
   <div>
     <!-- Padded content -->
-    {@render children?.()}
+    {@render children()}
   </div>
 {:else}
   <!-- Padded content -->
-  {@render children?.()}
+  {@render children()}
 {/if}
 
 <style>

src/components/PaddingReset/stories/docs/component.md

@@ -1,35 +0,0 @@
-Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
-
-The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="fluid">
-  <!-- An edge-to-edge image -->
-  <img src="https//..." alt="..." width="100%" />
-  <PaddingReset>
-    <p>A caption for the image that will still be padded.</p>
-  </PaddingReset>
-</Block>
-```
-
-You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-
-  export let src = 'https://...';
-  export let width = 'fluid';
-</script>
-
-<Block width="{width}">
-  <img src="{src}" alt="..." width="100%" />
-  <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <p>A caption for the image that will be padded when Block is fluid.</p>
-  </PaddingReset>
-</Block>
-```