From 362f0933d9d32b6f794f4d8103493f6c82f8265f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 17 Mar 2025 14:05:22 -0700
Subject: [PATCH 1/4] set up document cloud migration

---
 .../docs/component.md => DocumentCloud.mdx}   | 12 +++++++--
 .../DocumentCloud.stories.svelte              | 26 +++++--------------
 .../DocumentCloud/DocumentCloud.svelte        |  3 +--
 3 files changed, 17 insertions(+), 24 deletions(-)
 rename src/components/DocumentCloud/{stories/docs/component.md => DocumentCloud.mdx} (68%)

diff --git a/src/components/DocumentCloud/stories/docs/component.md b/src/components/DocumentCloud/DocumentCloud.mdx
similarity index 68%
rename from src/components/DocumentCloud/stories/docs/component.md
rename to src/components/DocumentCloud/DocumentCloud.mdx
index 6b52ec2a..fb2fca0b 100644
--- a/src/components/DocumentCloud/stories/docs/component.md
+++ b/src/components/DocumentCloud/DocumentCloud.mdx
@@ -1,6 +1,12 @@
-Embed a document hosted by [DocumentCloud](https://documentcloud.org)
+import { Meta, Canvas } from '@storybook/blocks';
 
----
+import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
+
+<Meta of={DocumentCloudStories} />
+
+# DocumentCloud
+
+The `DocumentCloud` component embeds 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".
 
@@ -15,3 +21,5 @@ The document must have its access level set to public before it can be embedded.
   width="normal"
 />
 ```
+
+<Canvas of={DocumentCloudStories.Demo} />
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 7a111585..65f5174d 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -1,38 +1,24 @@
 <script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import DocumentCloud from './DocumentCloud.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/DocumentCloud',
     component: DocumentCloud,
-    ...withComponentDocs(componentDocs),
     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 })}
-    <DocumentCloud {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'normal',
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
-  }}"
+  }}
 />
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 195c4c8a..f00a1167 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
@@ -35,7 +34,7 @@
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
-    title="{altText}"
+    title={altText}
     width="700"
     height="540"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"

From fc11e2fab15b8770f637cb4dd73e7d542553672f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 10:46:26 -0700
Subject: [PATCH 2/4] updates doc clod

---
 .../DocumentCloud/DocumentCloud.mdx           |  7 +--
 .../DocumentCloud/DocumentCloud.svelte        | 53 ++++++++++---------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.mdx b/src/components/DocumentCloud/DocumentCloud.mdx
index fb2fca0b..88dec3d1 100644
--- a/src/components/DocumentCloud/DocumentCloud.mdx
+++ b/src/components/DocumentCloud/DocumentCloud.mdx
@@ -6,9 +6,11 @@ import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
 
 # DocumentCloud
 
-The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org)
+The `DocumentCloud` component embeds 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".
+The document must have its access level set to **public** before it can be embedded. The `slug` 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`.
 
 ```svelte
 <script>
@@ -18,7 +20,6 @@ The document must have its access level set to public before it can be embedded.
 <DocumentCloud
   slug="3259984-Trump-Intelligence-Allegations"
   altText="These Reports Allege Trump Has Deep Ties To Russia"
-  width="normal"
 />
 ```
 
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index f00a1167..09713cc6 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -1,33 +1,34 @@
 <!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
-  /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
-
-  /**
-   * Width of the container, one of: normal, wide, wider, widest or fluid
-   */
-  export let width: ContainerWidth = 'normal';
-
-  /**
-   * The unique identifier for the document.
-   * @required
-   */
-  export let slug: string;
-
-  /**
-   * Alt text for the document.
-   * @required
-   */
-  export let altText: string;
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
   import Block from '../Block/Block.svelte';
+
+  interface Props {
+    /**
+     * The unique identifier for the document.
+     */
+    slug: string;
+    /**
+     * Alt text for the document.
+     */
+    altText: string;
+    /**
+     * Width of the container, one of: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string; // Add a class to target with SCSS.
+  }
+
+  let {
+    slug,
+    altText,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props = $props();
 </script>
 
 <Block {width} {id} class="photo fmy-6 {cls}">

From 63782a7ce1dd84b765948b39a5e29e0955e04504 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 10:49:08 -0700
Subject: [PATCH 3/4] cleanup

---
 src/components/DocumentCloud/DocumentCloud.stories.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 65f5174d..22f69e6d 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -17,7 +17,6 @@
 <Story
   name="Demo"
   args={{
-    width: 'normal',
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
   }}

From 3d68ad446ea1ac32045e613ca4bf5f0a7667648a Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 4 Apr 2025 19:30:20 +0100
Subject: [PATCH 4/4] removes unnecessary hardcoded dimensions of iframe

---
 src/components/DocumentCloud/DocumentCloud.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 09713cc6..01a86cc6 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -36,8 +36,6 @@
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
     title={altText}
-    width="700"
-    height="540"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
   ></iframe>
 </Block>