@reuters-graphics/graphics-components 1.0.30 → 1.1.0

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,14 @@
+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/GraphicBlock/stories/docs/quickit.md

@@ -0,0 +1,35 @@
+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 Google Doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `Chart`:
+
+```yaml
+# Google doc block
+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
+Aria: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+```

package/dist/components/Headline/Headline.stories.svelte

@@ -0,0 +1,131 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import withBylineDocs from './stories/docs/withByline.md?raw';
+  // @ts-ignore raw
+  import withDekDocs from './stories/docs/withDek.md?raw';
+  // @ts-ignore raw
+  import customHedDocs from './stories/docs/customHed.md?raw';
+  // @ts-ignore raw
+  import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
+  // @ts-ignore raw
+  import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
+
+  // @ts-ignore img
+  import crownImgSrc from './stories/crown.png';
+  import Map from './stories/graphic.svelte';
+
+  import Headline from './Headline.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/Headline" component="{Headline}" {...metaProps} />
+
+<Template let:args>
+  <Headline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: 'World News',
+    hed: 'Reuters Graphics interactive',
+    hedSize: 'normal',
+    dek: '',
+    authors: [],
+  }}"
+/>
+
+<Story name="With dek" {...withStoryDocs(withDekDocs)}>
+  <Headline
+    hed="{'Reuters Graphics Interactive'}"
+    dek="{'The beginning of a beautiful page'}"
+    section="{'Global news'}"
+  />
+</Story>
+
+<Story name="With byline" {...withStoryDocs(withBylineDocs)}>
+  <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()}"
+  />
+</Story>
+
+<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+  <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>.custom-hed {
+  line-height: 0.9;
+}
+
+.custom-dek span {
+  background-color: #fde68a;
+}</style>
+</Story>
+
+<Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
+  <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>
+</Story>
+
+<Story name="With crown graphic" {...withStoryDocs(withCrownGraphicDocs)}>
+  <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 />
+    </div>
+  </Headline>
+</Story>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  HeadlineProps */
+/** @typedef {typeof __propDef.events}  HeadlineEvents */
+/** @typedef {typeof __propDef.slots}  HeadlineSlots */
+export default class Headline extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeadlineProps = typeof __propDef.props;
+export type HeadlineEvents = typeof __propDef.events;
+export type HeadlineSlots = 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 {};

package/dist/components/Headline/Headline.svelte

@@ -1,71 +1,40 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
-<script>/**
- * Headline, parsed as an _inline_ markdown string in an `h1` element.
- * @type {string}
- */
-export let hed = 'Reuters Graphics Interactive';
-/** Add extra classes to the block tag to target it with custom CSS. */
-let cls = '';
+<script>export let hed = "Reuters Graphics Interactive";
+let cls = "";
 export { cls as class };
-/**
- * Headline size
- * @type {string}
- */
-export let hedSize = 'normal';
-/**
- * Dek, parsed as a markdown string.
- * @type {string}
- */
+export let hedSize = "normal";
 export let dek = null;
-/**
- * Section title
- * @type {string}
- */
 export let section = null;
-/**
- * Array of author names, which will be slugified to create links to Reuters author pages
- */
 export let authors = [];
-/**
- * Publish time as a datetime string.
- * @type {string}
- */
-export let publishTime = '';
-/**
- * Update time as a datetime string.
- * @type {string}
- */
-export let updateTime = '';
-/**
- * Width of the headline.
- */
-export let width = 'normal';
-import Block from '../Block/Block.svelte';
-import Byline from '../Byline/Byline.svelte';
-import Markdown from '../Markdown/Markdown.svelte';
+export let publishTime = "";
+export let updateTime = "";
+export let width = "normal";
+import Block from "../Block/Block.svelte";
+import Byline from "../Byline/Byline.svelte";
+import Markdown from "../Markdown/Markdown.svelte";
 let hedClass;
 $: {
-    switch (hedSize) {
-        case 'biggest':
-            hedClass = 'text-6xl';
-            break;
-        case 'bigger':
-            hedClass = 'text-5xl';
-            break;
-        case 'big':
-            hedClass = 'text-4xl';
-            break;
-        case 'small':
-            hedClass = 'text-2xl';
-            break;
-        default:
-            hedClass = 'text-3xl';
-    }
+  switch (hedSize) {
+    case "biggest":
+      hedClass = "text-6xl";
+      break;
+    case "bigger":
+      hedClass = "text-5xl";
+      break;
+    case "big":
+      hedClass = "text-4xl";
+      break;
+    case "small":
+      hedClass = "text-2xl";
+      break;
+    default:
+      hedClass = "text-3xl";
+  }
 }
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
-  <Block width="{width}" class="headline text-center fmt-7 fmb-6 {cls}">
+  <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
       {#if $$slots.crown}
         <div class="crown-container">
@@ -106,9 +75,9 @@ $: {
       {:else if authors.length > 0 || publishTime}
         <Byline
           class="fmy-4"
-          authors="{authors}"
-          publishTime="{publishTime}"
-          updateTime="{updateTime}"
+          {authors}
+          {publishTime}
+          {updateTime}
           align="center"
         />
       {/if}

package/dist/{@types/components → components}/Headline/Headline.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import { HeadlineSize } from '../@types/global';
+import { SvelteComponent } from "svelte";
+import type { HeadlineSize } from './../@types/global';
 declare const __propDef: {
     props: {
         /**
@@ -32,7 +32,7 @@ declare const __propDef: {
            */ updateTime?: string;
         /**
            * Width of the headline.
-           */ width?: 'normal' | 'wide' | 'wider' | 'widest';
+           */ width?: "normal" | "wide" | "wider" | "widest";
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -43,11 +43,13 @@ declare const __propDef: {
         dek: {};
         byline: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HeadlineProps = typeof __propDef.props;
 export type HeadlineEvents = typeof __propDef.events;
 export type HeadlineSlots = typeof __propDef.slots;
 /** `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) */
-export default class Headline extends SvelteComponentTyped<HeadlineProps, HeadlineEvents, HeadlineSlots> {
+export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
 }
 export {};

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,13 @@
+```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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,21 @@
+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

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