@reuters-graphics/graphics-components 0.0.29 → 0.0.31

package/dist/@types/components/@types/global.d.ts

@@ -7,6 +7,7 @@ export declare type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' |
  * A step in the Scroller component.
  */
 export interface ScrollerStep {
+    altText?: string;
     /**
      * A background component
      * @required

package/dist/@types/components/DocumentCloud/DocumentCloud.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /**
+           * Width of the container, one of: normal, wide, wider, widest or fluid
+           */ width?: ContainerWidth;
+        /**
+           * The unique identifier for the document.
+           * @required
+           */ slug: string;
+        /**
+           * Alt text for the document.
+           * @required
+           */ altText: string;
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DocumentCloudProps = typeof __propDef.props;
+export declare type DocumentCloudEvents = typeof __propDef.events;
+export declare type DocumentCloudSlots = typeof __propDef.slots;
+/** `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) */
+export default class DocumentCloud extends SvelteComponentTyped<DocumentCloudProps, DocumentCloudEvents, DocumentCloudSlots> {
+}
+export {};

package/dist/@types/components/Scroller/Scroller.svelte.d.ts

@@ -11,9 +11,10 @@ declare const __propDef: {
            *
            * Each step object in the array can have:
            *
-           * - `background` A background component **REQUIRED**
+           * - `background` A background component. **REQUIRED**
            * - `backgroundProps` An object of props given to the background component
            * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+           * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
            * - `foregroundProps` An object of props given to the foreground component
            *
            * @required

package/dist/@types/components/Scroller/docProps.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'svelte';
 interface BlockStep {
+    AltText?: string;
     Background: string;
     Text: string;
 }
@@ -27,6 +28,7 @@ export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiChar
             assetsPath: string;
         };
         foreground: string;
+        altText: string;
     }[];
 };
 export {};

package/dist/@types/index.d.ts

@@ -3,6 +3,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";

package/dist/components/DocumentCloud/DocumentCloud.svelte

@@ -0,0 +1,33 @@
+<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->
+<script>/** ✏️ 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 = 'normal';
+/**
+ * The unique identifier for the document.
+ * @required
+ */
+export let slug;
+/**
+ * Alt text for the document.
+ * @required
+ */
+export let altText;
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+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>

package/dist/components/Scroller/Embedded/Background.svelte

@@ -4,8 +4,8 @@ export let index;
 import Block from '../../Block/Block.svelte';
 </script>
 
-<Block width={backgroundWidth} cls="background-container step-{index + 1}">
-  <div class="embedded-background step-{index + 1}">
+<Block width="{backgroundWidth}" cls="background-container step-{index + 1}">
+  <div class="embedded-background step-{index + 1}" aria-hidden="true">
     <svelte:component
       this="{step.background}"
       {...step.backgroundProps || {}}

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -7,11 +7,23 @@ import Block from '../../Block/Block.svelte';
 {#if step.foreground === '' || !step.foreground}
   <!-- Empty foreground -->
   <div class="empty-step-foreground step-{index + 1}"></div>
+
+  {#if typeof step.altText === 'string'}
+    <div class="background-alt-text visually-hidden">
+      {@html marked.parse(step.altText)}
+    </div>
+  {/if}
 {:else if typeof step.foreground === 'string'}
   <Block cls="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
       {@html marked.parse(step.foreground)}
     </div>
+
+    {#if typeof step.altText === 'string'}
+      <div class="background-alt-text visually-hidden">
+        {@html marked.parse(step.altText)}
+      </div>
+    {/if}
   </Block>
 {:else}
   <div class="embedded-foreground step-{index + 1}">
@@ -200,4 +212,18 @@ div.embedded-foreground :global(.font-sans) {
 }
 div.embedded-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
 }</style>

package/dist/components/Scroller/Foreground.svelte

@@ -7,6 +7,11 @@ import { marked } from 'marked';
     {#if step.foreground === '' || !step.foreground}
       <!-- Empty foreground -->
       <div class="empty-step-foreground"></div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {:else}
       <div class="step-foreground">
         {#if typeof step.foreground === 'string'}
@@ -18,11 +23,95 @@ import { marked } from 'marked';
           />
         {/if}
       </div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {/if}
   </div>
 {/each}
 
-<style>div.step-foreground-container {
+<style>.paragraph-size {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+.paragraph-size.font-sans {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  .paragraph-size {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  .paragraph-size.font-sans {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+.paragraph-size.important {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+.paragraph-size.important.font-sans {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  .paragraph-size.important {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  .paragraph-size.important.font-sans {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+.small-size {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  .small-size {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+.small-size.important {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  .small-size.important {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+.blockquote-size {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  .blockquote-size {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+.blockquote-size.important {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  .blockquote-size.important {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+div.step-foreground-container {
   height: 100vh;
   width: initial;
   max-width: initial;
@@ -39,4 +128,18 @@ div.step-foreground-container .step-foreground {
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
 }</style>

package/dist/components/Scroller/Scroller.svelte

@@ -9,9 +9,10 @@ export let id = '';
  *
  * Each step object in the array can have:
  *
- * - `background` A background component **REQUIRED**
+ * - `background` A background component. **REQUIRED**
  * - `backgroundProps` An object of props given to the background component
  * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+ * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
  * - `foregroundProps` An object of props given to the foreground component
  *
  * @required
@@ -99,6 +100,7 @@ let progress;
         class="background"
         class:right="{foregroundPosition === 'left opposite'}"
         class:left="{foregroundPosition === 'right opposite'}"
+        aria-hidden="true"
       >
         <div class="scroller-graphic-well">
           <Block

package/dist/components/Scroller/docProps.js

@@ -9,6 +9,7 @@ export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') =>
             background: aiCharts[step.Background],
             backgroundProps: { assetsPath },
             foreground: step.Text,
+            altText: step.AltText,
         })),
     };
 };

package/dist/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -105,6 +105,7 @@
     "./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
     "./components/BodyText/BodyText.svelte": "./dist/components/BodyText/BodyText.svelte",
     "./components/DatawrapperChart/DatawrapperChart.svelte": "./dist/components/DatawrapperChart/DatawrapperChart.svelte",
+    "./components/DocumentCloud/DocumentCloud.svelte": "./dist/components/DocumentCloud/DocumentCloud.svelte",
     "./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
     "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
     "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",