From 7ff79c97b97e052b6735f44077dfb408fd015584 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 10:24:29 -0800
Subject: [PATCH] migrated, updated BodyText

---
 src/components/BodyText/BodyText.mdx          |  66 ++++++++++
 .../BodyText/BodyText.stories.svelte          | 119 ++----------------
 src/components/BodyText/BodyText.svelte       |  27 ++--
 .../BodyText/stories/docs/component.md        |  46 -------
 4 files changed, 85 insertions(+), 173 deletions(-)
 create mode 100644 src/components/BodyText/BodyText.mdx
 delete mode 100644 src/components/BodyText/stories/docs/component.md

diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
new file mode 100644
index 00000000..660719cf
--- /dev/null
+++ b/src/components/BodyText/BodyText.mdx
@@ -0,0 +1,66 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BodyTextStories from './BodyText.stories.svelte';
+
+<Meta of={BodyTextStories} />
+
+# BodyText
+
+The `BodyText` creates the main text of
+your page. You can pass the `text` prop a
+[markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+string, which will be parsed into paragraphs, headers, lists, blockquotes or
+whatever else you need.
+
+Use it like this:
+
+```svelte
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+
+  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
+  
+  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
+  
+  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
+</script>
+
+<BodyText text={markdownText} />
+```
+
+... or more commonly, you'll use it with a **ArchieML doc** in the **Graphics Kit** like this:
+
+```yaml
+# Archie ML doc
+[blocks]
+
+type: text
+text: Lorem ipsum ...
+
+... etc.
+:end
+
+[]
+```
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+# Graphics Kit
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+    <BodyText text={block.text} />
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+### Typography and styling
+
+{/* Add link to components-text-elements-bodytext--typography-sample */}
+You can also style the typography by adding CSS and markdown annotations such as `##`, like in this [example](/story/components-text-elements-bodytext--typography-sample).
diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 9bc698ed..965113ed 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -1,30 +1,16 @@
 <script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import BodyText from './BodyText.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/BodyText',
     component: BodyText,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <BodyText {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
   
   Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
@@ -34,12 +20,12 @@
   - Fillet
   
   Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
-  }}"
+  }}
 />
 
 <Story
   name="Typography sample"
-  args="{{
+  args={{
     class: 'body-text-typography-example-story',
     text: `<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
 
@@ -93,94 +79,5 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
 
 <p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
 `,
-  }}"
+  }}
 />
-
-<!-- svelte-ignore css_unused_selector -->
-<style lang="scss" global>
-  @mixin heading-tag {
-    position: absolute;
-    top: 0;
-    left: -50px;
-    text-align: right;
-    display: block;
-    width: 40px;
-    color: #ddd;
-    padding: 2px 5px;
-    border-radius: 4px;
-    font-weight: 800;
-    line-height: 1;
-    &:hover {
-      color: #999;
-    }
-    @media (max-width: 800px) {
-      color: white !important;
-    }
-  }
-  .body-text-typography-example-story {
-    h2 {
-      position: relative;
-      &:before {
-        content: 'H2';
-        @include heading-tag;
-        & {
-          font-size: 22px;
-        }
-      }
-      h3 {
-        position: relative;
-        &:before {
-          content: 'H3';
-          @include heading-tag;
-          & {
-            font-size: 19px;
-          }
-        }
-      }
-      h4 {
-        position: relative;
-        &:before {
-          content: 'H4';
-          @include heading-tag;
-          & {
-            font-size: 16px;
-          }
-        }
-      }
-      h5 {
-        position: relative;
-        &:before {
-          content: 'H5';
-          @include heading-tag;
-          & {
-            font-size: 15px;
-          }
-        }
-      }
-      h6 {
-        position: relative;
-        &:before {
-          content: 'H6';
-          @include heading-tag;
-          & {
-            font-size: 12px;
-          }
-        }
-      }
-      blockquote {
-        position: relative;
-        &:before {
-          @include heading-tag;
-          & {
-            content: '“';
-            font-size: 3rem;
-            line-height: 3rem;
-          }
-        }
-        blockquote:before {
-          display: none;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index 46ac7256..fca78da8 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -1,24 +1,19 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
 <script lang="ts">
   import Markdown from '../Markdown/Markdown.svelte';
-  /**
-   * A markdown text string.
-   * @type {string}
-   * @required
-   */
-  export let text: string;
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /** Add an id to the block tag to target it with custom CSS. */
-  export let id: string = '';
-
   import Block from '../Block/Block.svelte';
+  interface Props {
+    /** A markdown text string. */
+    text: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /** Add an id to the block tag to target it with custom CSS. */
+    id?: string;
+  }
+
+  let { text, class: cls = '', id = '' }: Props = $props();
 </script>
 
 <Block {id} class="fmy-6 {cls}">
-  <Markdown source="{text}" />
+  <Markdown source={text} />
 </Block>
diff --git a/src/components/BodyText/stories/docs/component.md b/src/components/BodyText/stories/docs/component.md
deleted file mode 100644
index 2a3fe288..00000000
--- a/src/components/BodyText/stories/docs/component.md
+++ /dev/null
@@ -1,46 +0,0 @@
-The `BodyText` creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
-
-Use it like this:
-
-```svelte
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-
-  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
-  
-  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
-  
-  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
-</script>
-
-<BodyText text="{markdownText}" />
-```
-
-... or more commonly, you'll use it with a ArchieML doc in the Graphics Kit like this:
-
-```yaml
-[blocks]
-
-type: text
-text: Lorem ipsum ...
-
-... etc.
-:end
-
-[]
-```
-
-```svelte
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-</script>
-
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-    <BodyText text="{block.text}" />
-  <!-- ... -->
-  {/if}
-{/each}
-```