Add DocumentCloud component

src/components/DocumentCloud/DocumentCloud.stories.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import DocumentCloud from './DocumentCloud.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/DocumentCloud',
+    component: DocumentCloud,
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <DocumentCloud {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'normal',
+    slug: '3259984-Trump-Intelligence-Allegations',
+    altText: 'These Reports Allege Trump Has Deep Ties To Russia',
+  }}"
+/>

src/components/DocumentCloud/DocumentCloud.svelte

@@ -0,0 +1,41 @@
+<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->
+<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. */
+  export let cls: string = '';
+
+  import Block from '../Block/Block.svelte';
+</script>
+
+<Block width="{width}" id="{id}" cls="photo {cls}">
+  <iframe
+    src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
+    title="{altText}"
+    width="700"
+    height="540"
+    style="border: 1px solid #aaa; width: 100%; height: 800px; height: calc(100vh - 100px);"
+    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
+  ></iframe>
+</Block>

src/components/DocumentCloud/stories/docs/component.md

@@ -0,0 +1,17 @@
+Embed 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".
+
+```svelte
+<script>
+  import { DocumentCloud } from '@reuters-graphics/graphics-components';
+</script>
+
+<DocumentCloud
+  slug="3259984-Trump-Intelligence-Allegations"
+  altText="These Reports Allege Trump Has Deep Ties To Russia"
+  width="normal"
+/>
+```

src/index.js

@@ -4,6 +4,7 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
 export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';