updates doc clod

This commit is contained in:
MinamiFunakoshiTR 2025-03-18 10:46:26 -07:00
parent 362f0933d9
commit fc11e2fab1
Failed to extract signature
2 changed files with 31 additions and 29 deletions

View file

@ -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"
/>
```

View file

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