@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Byline/stories/docs/component.md

@@ -1,19 +0,0 @@
-Byline and dateline.
-
-```svelte
-<script>
-  import { Byline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Byline
-  authors="{[
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Prasanta Kumar Dutta',
-    'Anurag Rao',
-    'Mariano Zafra',
-  ]}"
-  publishTime="2021-09-12T00:00:00.000Z"
-  updateTime="2021-09-12T12:57:00.000Z"
-/>
-```

package/dist/components/DatawrapperChart/stories/docs/withChatter.md

@@ -1,5 +0,0 @@
-By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
-
-At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
-
-Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.

package/dist/components/DocumentCloud/stories/docs/component.md

@@ -1,17 +0,0 @@
-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"
-/>
-```

package/dist/components/EmbedPreviewerLink/stories/docs/component.md

@@ -1,11 +0,0 @@
-An embed tool for development in graphics kit.
-
-```svelte
-<script>
-  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
-
-  import { dev } from '$app/env';
-</script>
-
-<EmbedPreviewerLink dev="{dev}" />
-```

package/dist/components/EndNotes/stories/docs/component.md

@@ -1,24 +0,0 @@
-End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
-
-```svelte
-<script>
-  import { EndNotes } from '@reuters-graphics/graphics-components';
-
-  const notes = [
-    {
-      title: 'Note',
-      text: 'Data is current as of today.',
-    },
-    {
-      title: 'Sources',
-      text: 'Data, Inc.',
-    },
-    {
-      title: 'Edited by',
-      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
-    },
-  ];
-</script>
-
-<EndNotes notes="{notes}" />
-```

package/dist/components/FeaturePhoto/stories/docs/archieML.md

@@ -1,37 +0,0 @@
-```yaml
-[blocks]
-
-type: photo
-width: normal
-src: images/shark.jpg
-altText: The king of the sea
-caption: Carcharodon carcharias - REUTERS
-
-[]
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type === 'text'}
-  <!-- ... -->
-
-  {:else if block.type === 'photo'}
-    <FeaturePhoto
-      width="{block.width}"
-      src="{`${assets}/${block.src}`}"
-      altText="{block.altText}"
-      caption="{block.caption}"
-    />
-
-  <!-- ... -->
-  {/if}
-{/each}
-```

package/dist/components/FeaturePhoto/stories/docs/component.md

@@ -1,16 +0,0 @@
-A full-width photo inside the text well.
-
-```svelte
-<script>
-  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-</script>
-
-<FeaturePhoto
-  src="{`${assets}/images/myImage.jpg`}"
-  altText="Some alt text"
-  caption="A caption"
-  lazy="{false}"
-  width="normal"
-/>
-```

package/dist/components/FeaturePhoto/stories/docs/missingAltText.md

@@ -1 +0,0 @@
-If your photo is missing `altText` a small warning will overlay the image.

package/dist/components/GraphicBlock/AriaHidden.svelte

@@ -1,10 +0,0 @@
-<script>export let hidden = false;
-</script>
-
-{#if hidden}
-  <div aria-hidden="true">
-    <slot></slot>
-  </div>
-{:else}
-  <slot></slot>
-{/if}

package/dist/components/GraphicBlock/AriaHidden.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Whether to wrap the graphic with an aria hidden tag.
-           */ hidden?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AriaHiddenProps = typeof __propDef.props;
-export type AriaHiddenEvents = typeof __propDef.events;
-export type AriaHiddenSlots = typeof __propDef.slots;
-export default class AriaHidden extends SvelteComponent<AriaHiddenProps, AriaHiddenEvents, AriaHiddenSlots> {
-}
-export {};

package/dist/components/GraphicBlock/TextBlock.svelte

@@ -1,11 +0,0 @@
-<script>export let width = null;
-import Block from "../Block/Block.svelte";
-</script>
-
-{#if width}
-  <Block {width} class="notes fmy-0">
-    <slot />
-  </Block>
-{:else}
-  <slot />
-{/if}

package/dist/components/GraphicBlock/TextBlock.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /** Width of the component within the text well. */ width?: ContainerWidth | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TextBlockProps = typeof __propDef.props;
-export type TextBlockEvents = typeof __propDef.events;
-export type TextBlockSlots = typeof __propDef.slots;
-export default class TextBlock extends SvelteComponent<TextBlockProps, TextBlockEvents, TextBlockSlots> {
-}
-export {};

package/dist/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  AiChartProps */
-/** @typedef {typeof __propDef.events}  AiChartEvents */
-/** @typedef {typeof __propDef.slots}  AiChartSlots */
-export default class AiChart extends SvelteComponent<{
-    basePath?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AiChartProps = typeof __propDef.props;
-export type AiChartEvents = typeof __propDef.events;
-export type AiChartSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        basePath?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/GraphicBlock/stories/docs/ai2svelte.md

@@ -1,19 +0,0 @@
-A more detailed example of using `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
-
-```svelte
-<script>
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-  import MyAiMap from './ai2svelte/my-map.svelte';
-  import { assets } from '$app/paths'; // If using with the Graphics Kit
-</script>
-
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-  ariaDescription="A map showing shake intensity of the quake."
->
-  <MyAiMap assetsPath="{assets}" />
-</GraphicBlock>
-```

package/dist/components/GraphicBlock/stories/docs/archieML.md

@@ -1,40 +0,0 @@
-For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics.
-
-First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // Other stuff...
-
-  import AiMap from './ai2svelte/my-map.svelte';
-
-  const aiCharts = {
-    // Other charts...
-    AiMap,
-  };
-</script>
-```
-
-Then add the following structure to your ArchieML doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `chart`:
-
-```yaml
-[blocks]
-# ...
-
-type: ai-graphic
-chart: AiMap
-width: normal
-textWidth: normal
-title: Earthquake in Haiti
-description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
-notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
-
-\Source: USGIS
-:end
-altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
-:end
-
-# ...
-[]
-```

package/dist/components/GraphicBlock/stories/docs/aria.md

@@ -1,56 +0,0 @@
-If your chart isn't easily read by screen readers — for example, it has annotations that when read without the visual won't make sense — you should add an `ariaDescription` that better describes the chart.
-
-The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers or whatever else you need in markdown.
-
-> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div that tells screen readers not to read the text in the graphic, but instead read the hidden ARIA description.
-
-```svelte
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-  ariaDescription="A map showing the shake intensity produced by the earthquake."
->
-  <MyAiMap assetsPath="{assets}" />
-</GraphicBlock>
-```
-
-Sometimes, instead of a simple ARIA description for graphics, we want to also provide a data table or something else that requires more complex markup.
-
-You can add custom markup for screen readers only by using the `aria` named slot.
-
-> **Note:** The `aria` slot will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
-
-```svelte
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
->
-  <MyAiMap basePath="{assets}" />
-  <div slot="aria">
-    <p>
-      A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
-      Haiti at 8:29 a.m. EST, Aug. 14, 2021.
-    </p>
-    <table>
-      <tr>
-        <th>City</th>
-        <th>Felt shake strength</th>
-      </tr>
-      <tr>
-        <td>Les Cayes</td>
-        <td>Very strong</td>
-      </tr>
-      <tr>
-        <td>Jeremie</td>
-        <td>Strong</td>
-      </tr>
-    </table>
-  </div>
-</GraphicBlock>
-```
-
-[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.

package/dist/components/GraphicBlock/stories/docs/component.md

@@ -1,20 +0,0 @@
-The `GraphicBlock` component is a special derivative of the [`Block`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
-
-Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
-
----
-
-```svelte
-<script>
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<GraphicBlock
-  width="normal"
-  title="Title for my chart"
-  description="Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta."
-  notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
->
-  <div id="my-chart"></div>
-</GraphicBlock>
-```

package/dist/components/GraphicBlock/stories/docs/customText.md

@@ -1,14 +0,0 @@
-You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this:
-
-```svelte
-<GraphicBlock
-  width="normal"
-  notes="{'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)'}"
->
-  <h5 slot="title">My smaller title</h5>
-  <div id="my-chart"></div>
-  <aside slot="notes">
-    <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
-  </aside>
-</GraphicBlock>
-```

package/dist/components/Headline/stories/docs/component.md

@@ -1,13 +0,0 @@
-Reuters Graphics headline
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'World News'}"
-/>
-```

package/dist/components/Headline/stories/docs/customHed.md

@@ -1,31 +0,0 @@
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline width="wide">
-  <h1 class="custom-hed" slot="hed">
-    <span class="small block text-base">The secret to</span>
-    “The Nutcracker's”
-    <span class="small block text-base fpt-1">success</span>
-  </h1>
-  <p class="custom-dek !fmt-3" slot="dek">
-    How “The Nutcracker” ballet became an<span
-      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-    >and a financial pillar of ballet companies across the country
-  </p>
-</Headline>
-
-<style lang="scss">
-  .custom-hed {
-    line-height: 0.9;
-  }
-  .custom-dek {
-    span {
-      background-color: #fde68a;
-    }
-  }
-</style>
-```

package/dist/components/Headline/stories/docs/withByline.md

@@ -1,13 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  authors="{['Dea Bankova', 'Aditi Bhandari']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
-/>
-```

package/dist/components/Headline/stories/docs/withCrownGraphic.md

@@ -1,24 +0,0 @@
-Add a full graphic or any other component in the crown.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline
-  width="wider"
-  class="!fmt-1"
-  hed="{'Unfriendly skies'}"
-  dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-  section="{'Ukraine Crisis'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
->
-  <!-- Add a crown graphic -->
-  <div slot="crown">
-    <Map assetsPath="{assets}" />
-  </div>
-</Headline>
-```

package/dist/components/Headline/stories/docs/withCrownImage.md

@@ -1,21 +0,0 @@
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
-  <!-- Add a crown -->
-  <img
-    slot="crown"
-    src="{crownImgSrc}"
-    width="100"
-    class="mx-auto mb-0"
-    alt="Illustration of Europe"
-  />
-  <!-- Override the hed with a named slot -->
-  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
-</Headline>
-```

package/dist/components/Headline/stories/docs/withDek.md

@@ -1,11 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-/>
-```

package/dist/components/Headline/stories/graphic.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  GraphicProps */
-/** @typedef {typeof __propDef.events}  GraphicEvents */
-/** @typedef {typeof __propDef.slots}  GraphicSlots */
-export default class Graphic extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type GraphicProps = typeof __propDef.props;
-export type GraphicEvents = typeof __propDef.events;
-export type GraphicSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};