From cfeb4a6de27e7eeb12ce42388c999483100d82d2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 17 Mar 2025 11:31:51 -0700
Subject: [PATCH] set up block docs

---
 .../{stories/docs/snapWidths.md => Block.mdx} | 48 ++++++++++-
 src/components/Block/Block.stories.svelte     | 84 ++++++++-----------
 .../Block/stories/docs/component.md           | 15 ----
 .../Block/stories/docs/customLayouts.md       | 13 ---
 4 files changed, 80 insertions(+), 80 deletions(-)
 rename src/components/Block/{stories/docs/snapWidths.md => Block.mdx} (54%)
 delete mode 100644 src/components/Block/stories/docs/component.md
 delete mode 100644 src/components/Block/stories/docs/customLayouts.md

diff --git a/src/components/Block/stories/docs/snapWidths.md b/src/components/Block/Block.mdx
similarity index 54%
rename from src/components/Block/stories/docs/snapWidths.md
rename to src/components/Block/Block.mdx
index cd9135f5..93f7619c 100644
--- a/src/components/Block/stories/docs/snapWidths.md
+++ b/src/components/Block/Block.mdx
@@ -1,9 +1,51 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BlockStories from './Block.stories.svelte';
+
+<Meta of={BlockStories} />
+
+# Block
+
+The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+
+Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
+
+> 📌 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.
+
+```svelte
+<script>
+  import { Block } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="normal">
+  <!-- Your stuff for this block -->
+</Block>
+```
+
+## Custom layouts
+
+Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
+
+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.
+
+```svelte
+<Block width="fluid">
+  <div class="my-radical-container">
+    <!-- Now, you have full control! -->
+  </div>
+</Block>
+```
+
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
+## Snap widths
+
 Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
 
 You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
 
 ```svelte
-<Block width="wider" snap="{true}">
+<Block width="wider" snap={true}>
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -12,7 +54,7 @@ If you want to skip certain block widths entirely, you can add one or more class
 
 ```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
-<Block width="wider" snap="{true}" class="skip-wide">
+<Block width="wider" snap={true} class="skip-wide">
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -28,7 +70,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.
 
 ```svelte
-<Block width="wider" snap="{true}" class="custom-blocks">
+<Block width="wider" snap={true} class="custom-blocks">
   <!-- Your stuff for this block -->
 </Block>
 
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index a13a0411..a73274dc 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -1,19 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customLayoutsDocs from './stories/docs/customLayouts.md?raw';
-  // @ts-ignore raw
-  import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Block from './Block.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page layout/Block',
     component: Block,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       width: {
         control: 'select',
@@ -28,35 +20,29 @@
         ],
       },
     },
-  };
+  });
 </script>
 
+<!-- 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
   import Article from '../Article/Article.svelte';
-</script>
+</script> -->
 
-<Template >
-  {#snippet children({ args })}
-    <Article id="block-demo-article">
-      <div class="article-boundaries">
-        <div class="label">Article</div>
-        <Block {...args}>
-          <div class="label">Block</div>
-        </Block>
-      </div>
-    </Article>
-  {/snippet}
-</Template>
+<!-- 
+{#snippet children({ args })}
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <Block {...args}>
+        <div class="label">Block</div>
+      </Block>
+    </div>
+  </Article>
+{/snippet} -->
 
-<Story
-  name="Default"
-  args="{{
-    width: 'normal',
-  }}"
-/>
+<Story name="Demo" />
 
-<Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
+<Story name="Custom layout" exportName="CustomLayout">
   <Block width="fluid">
     <!-- Enter bootstrap grid! -->
     <div id="block-flex-example">
@@ -73,51 +59,51 @@
   </Block>
 </Story>
 
-<Story name="Snap widths" {...withStoryDocs(snapWidthsDocs)}>
+<!-- 
+<Story name="Snap widths">
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo"
         >narrow</Block
       >
-      <Block width="normal" snap="{true}" class="block-snap-widths-demo"
+      <Block width="normal" snap={true} class="block-snap-widths-demo"
         >normal</Block
       >
-      <Block width="wide" snap="{true}" class="block-snap-widths-demo"
-        >wide</Block
+      <Block width="wide" snap={true} class="block-snap-widths-demo">wide</Block
       >
-      <Block width="wider" snap="{true}" class="block-snap-widths-demo"
+      <Block width="wider" snap={true} class="block-snap-widths-demo"
         >wider</Block
       >
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo even"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo even"
         >narrow</Block
       >
       <Block
         width="normal"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-narrow"
         >normal.skip-narrow</Block
       >
       <Block
         width="wide"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-normal skip-narrow"
         >wide.skip-normal.skip-narrow</Block
       >
       <Block
         width="wider"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
       >
     </div>
   </Article>
-</Story>
+</Story> -->
 
 <style lang="scss">
   :global(#block-demo-article) {
@@ -145,9 +131,9 @@
     background: rgb(211, 132, 123);
   }
   :global(
-      #block-demo-article .label,
-      #block-demo-article div.article-block.block-snap-widths-demo
-    ) {
+    #block-demo-article .label,
+    #block-demo-article div.article-block.block-snap-widths-demo
+  ) {
     padding-left: 3px;
     color: white;
   }
diff --git a/src/components/Block/stories/docs/component.md b/src/components/Block/stories/docs/component.md
deleted file mode 100644
index d3ba7d87..00000000
--- a/src/components/Block/stories/docs/component.md
+++ /dev/null
@@ -1,15 +0,0 @@
-The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
-
-Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
-
-> 📌 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.
-
-```svelte
-<script>
-  import { Block } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="normal">
-  <!-- Your stuff for this block -->
-</Block>
-```
diff --git a/src/components/Block/stories/docs/customLayouts.md b/src/components/Block/stories/docs/customLayouts.md
deleted file mode 100644
index 74342fdb..00000000
--- a/src/components/Block/stories/docs/customLayouts.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
-
-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.
-
-```svelte
-<Block width="fluid">
-  <div class="my-radical-container">
-    <!-- Now, you have full control! -->
-  </div>
-</Block>
-```
-
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).