refactored the FeaturePhoto component as well

src/components/DatawrapperChart/DatawrapperChart.stories.svelte

@@ -1,38 +1,20 @@
 <script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import DatawrapperChart from './DatawrapperChart.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withChatterDocs from './stories/docs/withChatter.md?raw';
 
-  import {
+  const { Story } = defineMeta({
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
     title: 'Components/Graphics/DatawrapperChart',
     component: DatawrapperChart,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <DatawrapperChart {...args} />
-  {/snippet}
-</Template>
-
 <Story
   name="Default"
   args="{{
@@ -43,14 +25,16 @@
   }}"
 />
 
-<Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
+<Story
-  <DatawrapperChart
+  name="With chatter"
-    frameTitle="Global abortion access"
+  args="{{
-    ariaLabel="map"
+    frameTitle: 'Global abortion access',
-    id="abortion-rights-map"
+    ariaLabel: 'map',
-    src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
+    id: 'abortion-rights-map',
-    title="Global abortion access"
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html',
-    description="A map of worldwide access to abortion."
+    title: 'Global abortion access',
-    notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"
+    description: 'A map of worldwide access to abortion.',
-  />
+    notes:
-</Story>
+      'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
+  }}"
+/>

src/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -1,4 +1,6 @@
 <script module lang="ts">
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore raw
@@ -8,15 +10,17 @@
 
   import FeaturePhoto from './FeaturePhoto.svelte';
 
-  import {
+  // import {
-    withComponentDocs,
+  //   withComponentDocs,
-    withStoryDocs,
+  //   withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
+  // } from '$lib/docs/utils/withParams.js';
 
-  export const meta = {
+
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/FeaturePhoto',
     component: FeaturePhoto,
-    ...withComponentDocs(componentDocs),
+    // ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       width: {
         control: 'select',
@@ -27,21 +31,14 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
   // @ts-ignore jpg
   import sharkSrc from './stories/shark.jpg';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <FeaturePhoto {...args} />
-  {/snippet}
-</Template>
 
 <Story
   name="Default"
@@ -61,8 +58,8 @@
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
   }}"
-  {...withStoryDocs(archieMLDocs)}
 />
+<!-- {...withStoryDocs(archieMLDocs)} -->
 
 <Story
   name="Missing altText"
@@ -71,5 +68,5 @@
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
   }}"
-  {...withStoryDocs(missingAltTextDocs)}
 />
+<!-- {...withStoryDocs(missingAltTextDocs)} -->

src/components/Spinner/Spinner.svelte

@@ -1,28 +1,23 @@
 <!-- @component `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-spinner--docs) -->
 <script lang="ts">
-  
-  
-  
-  
-  
   interface Props {
     /** Primary colour of the spinner. */
     colour?: string;
     /**
-   * Outer width of the spinner
+     * Outer width of the spinner
-   */
+     */
     width?: number;
     /**
-   * Width of the spinner ring
+     * Width of the spinner ring
-   */
+     */
     ringWidth?: number;
     /**
-   * How fast the spinner spins in seconds
+     * How fast the spinner spins in seconds
-   */
+     */
     speed?: number;
     /**
-   * Vertical padding for the spinner's container
+     * Vertical padding for the spinner's container
-   */
+     */
     containerPadding?: number;
   }
 
@@ -31,7 +26,7 @@
     width = 40,
     ringWidth = 6,
     speed = 0.8,
-    containerPadding = 10
+    containerPadding = 10,
   }: Props = $props();
 </script>
 

src/index.js

@@ -13,10 +13,10 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as Byline } from './components/Byline/Byline.svelte';
-export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+// export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
 export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
-export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+// export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';