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] 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}">