@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/Block/stories/docs/snapWidths.md

@@ -0,0 +1,50 @@
+Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
+
+You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
+
+```svelte
+<Block width="wider" snap="{true}">
+  <!-- Your stuff for this block -->
+</Block>
+```
+
+If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
+
+```svelte
+<!-- Will skip wide and go straight to normal column width on resize. -->
+<Block width="wider" snap="{true}" class="skip-wide">
+  <!-- Your stuff for this block -->
+</Block>
+```
+
+This is probably easier to see in action than explain in words, so resize the window to get a better picture of how it all works.
+
+> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
+
+#### Using with custom column widths
+
+Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the `Article` tag (**rare!**), you can't use this functionality without a little extra work.
+
+Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
+
+```svelte
+<Block width="wider" snap="{true}" class="custom-blocks">
+  <!-- Your stuff for this block -->
+</Block>
+
+<style lang="scss">
+  $column-width-narrower: 310px;
+  $column-width-narrow: 450px;
+  $column-width-normal: 600px;
+  $column-width-wide: 860px;
+  $column-width-wider: 1400px;
+
+  @import '@reuters-graphics/graphics-components/scss/mixins';
+
+  :global {
+    div.custom-blocks {
+      @include block-snap-widths;
+    }
+  }
+</style>
+```

package/dist/components/BodyText/BodyText.stories.svelte

@@ -0,0 +1,269 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import BodyText from './BodyText.svelte';
+
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/BodyText"
+  component="{BodyText}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <BodyText {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
+  
+  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
+
+  - Steak
+  - [Pork chop](https://www.google.com)
+  - Fillet
+  
+  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
+  }}"
+/>
+
+<Story
+  name="Typography sample"
+  args="{{
+    class: 'body-text-typography-example-story',
+    text: `<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
+
+## Biltong turducken ground round kevin
+
+Pig est irure buffalo ullamco. Sunt beef ribs tri-tip, chislic officia sint dolor. Spare ribs drumstick ground round, irure duis cillum id chicken est ipsum ut. 
+
+Qui cupidatat chislic buffalo consequat deserunt. 
+
+Andouille sint shankle quis velit nostrud chislic meatloaf culpa labore corned beef chuck spare ribs. Filet mignon eu shankle in, meatloaf ut dolor ham hock ut.
+
+### Venison shoulder ham hock ham leberkas flank beef ribs fatback, jerky meatball ham hock
+  
+Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. Veniam laboris sunt chislic. Aute doner porchetta nulla, tongue venison ad ex in do.
+
+- Steak
+    - Capicola 
+- [Pork chop](https://www.google.com)
+- Fillet landjaeger commodo
+
+Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.
+
+Minim id buffalo dolore ad, **boudin chicken laboris** excepteur qui eiusmod. 
+
+#### Jerky prosciutto burgdoggen
+
+Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequat proident velit. Jerky meatball pig nulla irure laboris fatback et rump ut dolore.
+
+Biltong enim consequat pork chop, flank ea.
+
+> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
+> > Ronald McDonald
+
+Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
+
+##### Venison pork chop
+
+Alcatra bacon mollit boudin. Capicola ut tongue biltong, cow cillum pariatur sausage.
+
+1. Minim ribeye
+2. Prosciutto laborum
+3. Salami doner irure
+
+Consectetur ribeye consequat pork capicola. T-bone ad laborum beef ribs picanha.
+
+###### Alcatra bacon mollit boudin
+
+Tempor tail doner chicken incididunt beef ribs. Ad ullamco in cupim venison. Leberkas rump ullamco adipisicing, laboris excepteur voluptate.
+
+Ham hock id porchetta elit. Sint spare ribs aute buffalo.
+
+<p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
+`,
+  }}"
+/>
+
+<!-- svelte-ignore css-unused-selector -->
+<style global>@charset "UTF-8";
+.body-text-typography-example-story h2 {
+  position: relative;
+}
+.body-text-typography-example-story h2:before {
+  content: "H2";
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2:before {
+  font-size: 22px;
+}
+.body-text-typography-example-story h2 h3 {
+  position: relative;
+}
+.body-text-typography-example-story h2 h3:before {
+  content: "H3";
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2 h3:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2 h3:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2 h3:before {
+  font-size: 19px;
+}
+.body-text-typography-example-story h2 h4 {
+  position: relative;
+}
+.body-text-typography-example-story h2 h4:before {
+  content: "H4";
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2 h4:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2 h4:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2 h4:before {
+  font-size: 16px;
+}
+.body-text-typography-example-story h2 h5 {
+  position: relative;
+}
+.body-text-typography-example-story h2 h5:before {
+  content: "H5";
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2 h5:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2 h5:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2 h5:before {
+  font-size: 15px;
+}
+.body-text-typography-example-story h2 h6 {
+  position: relative;
+}
+.body-text-typography-example-story h2 h6:before {
+  content: "H6";
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2 h6:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2 h6:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2 h6:before {
+  font-size: 12px;
+}
+.body-text-typography-example-story h2 blockquote {
+  position: relative;
+}
+.body-text-typography-example-story h2 blockquote:before {
+  position: absolute;
+  top: 0;
+  left: -50px;
+  text-align: right;
+  display: block;
+  width: 40px;
+  color: #ddd;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 800;
+  line-height: 1;
+}
+.body-text-typography-example-story h2 blockquote:before:hover {
+  color: #999;
+}
+@media (max-width: 800px) {
+  .body-text-typography-example-story h2 blockquote:before {
+    color: white !important;
+  }
+}
+.body-text-typography-example-story h2 blockquote:before {
+  content: "“";
+  font-size: 3rem;
+  line-height: 3rem;
+}
+.body-text-typography-example-story h2 blockquote blockquote:before {
+  display: none;
+}</style>

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

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

@@ -1,19 +1,12 @@
 <!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->
-<script>import Markdown from '../Markdown/Markdown.svelte';
-/**
- * A markdown text string.
- * @type {string}
- * @required
- */
+<script>import Markdown from "../Markdown/Markdown.svelte";
 export let text;
-/** Add a class to target with SCSS. */
-let cls = '';
+let cls = "";
 export { cls as class };
-/** Add an id to the block tag to target it with custom CSS. */
-export let id = '';
-import Block from '../Block/Block.svelte';
+export let id = "";
+import Block from "../Block/Block.svelte";
 </script>
 
-<Block id="{id}" class="fmy-6 {cls}">
+<Block {id} class="fmy-6 {cls}">
   <Markdown source="{text}" />
 </Block>

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -13,11 +13,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BodyTextProps = typeof __propDef.props;
 export type BodyTextEvents = typeof __propDef.events;
 export type BodyTextSlots = typeof __propDef.slots;
 /** `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) */
-export default class BodyText extends SvelteComponentTyped<BodyTextProps, BodyTextEvents, BodyTextSlots> {
+export default class BodyText extends SvelteComponent<BodyTextProps, BodyTextEvents, BodyTextSlots> {
 }
 export {};

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

@@ -0,0 +1,33 @@
+The `BodyText` creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
+
+Use it like this:
+
+```svelte
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+
+  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
+  
+  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
+  
+  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
+</script>
+
+<BodyText text="{markdownText}" />
+```
+
+... or more commonly, you'll use it with a Google doc in the Graphics Kit like this:
+
+```svelte
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <BodyText text="{block.Text}" />
+  {/if}
+{/each}
+```

package/dist/components/Byline/Byline.stories.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import Byline from './Byline.svelte';
+
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      align: {
+        control: 'select',
+        options: ['left', 'center'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/Byline" component="{Byline}" {...metaProps} />
+
+<Template let:args>
+  <Byline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    align: 'left',
+    authors: [
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
+    ],
+    publishTime: new Date('2021-09-12').toISOString(),
+    updateTime: new Date('2021-09-12T13:57:00').toISOString(),
+  }}"
+/>

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

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

@@ -1,63 +1,32 @@
-<script>import Block from '../Block/Block.svelte';
-import slugify from 'slugify';
-import { apdate } from 'journalize';
-/**
- * Array of author names, which will be slugified to create links to Reuters author pages
- */
+<script>import Block from "../Block/Block.svelte";
+import slugify from "slugify";
+import { apdate } from "journalize";
 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 = '';
-/**
- * Alignment of the byline.
- * @type {string}
- */
-export let align = 'left';
-/**
- * Add an id to to target with custom CSS.
- * @type {string}
- */
-export let id = '';
-/**
- * Add extra classes to target with custom CSS.
- * @type {string}
- */
-let cls = '';
+export let publishTime = "";
+export let updateTime = "";
+export let align = "left";
+export let id = "";
+let cls = "";
 export { cls as class };
-/**
- * Custom function that returns an author page URL.
- * @param author
- */
 export let getAuthorPage = (author) => {
-    const authorSlug = slugify(author.trim(), { lower: true });
-    return `https://www.reuters.com/authors/${authorSlug}/`;
+  const authorSlug = slugify(author.trim(), { lower: true });
+  return `https://www.reuters.com/authors/${authorSlug}/`;
 };
-$: alignmentClass = align === 'left' ? 'text-left' : 'text-center';
+$: alignmentClass = align === "left" ? "text-left" : "text-center";
 const isValidDate = (datetime) => {
-    if (!datetime)
-        return false;
-    if (!Date.parse(datetime))
-        return false;
-    return true;
+  if (!datetime) return false;
+  if (!Date.parse(datetime)) return false;
+  return true;
 };
 const formatTime = (datetime) => new Date(datetime).toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    timeZoneName: 'short',
+  hour: "2-digit",
+  minute: "2-digit",
+  timeZoneName: "short"
 });
-const areSameDay = (first, second) => first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate();
+const areSameDay = (first, second) => first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
 </script>
 
-<Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
+<Block {id} class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
     <div class="byline body-caption fmb-1">
       {#if $$slots.byline}

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -15,7 +15,7 @@ declare const __propDef: {
         /**
            * Alignment of the byline.
            * @type {string}
-           */ align?: 'left' | 'center';
+           */ align?: "left" | "center";
         /**
            * Add an id to to target with custom CSS.
            * @type {string}
@@ -37,10 +37,12 @@ declare const __propDef: {
         published: {};
         updated: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BylineProps = typeof __propDef.props;
 export type BylineEvents = typeof __propDef.events;
 export type BylineSlots = typeof __propDef.slots;
-export default class Byline extends SvelteComponentTyped<BylineProps, BylineEvents, BylineSlots> {
+export default class Byline extends SvelteComponent<BylineProps, BylineEvents, BylineSlots> {
 }
 export {};

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

@@ -0,0 +1,19 @@
+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/DatawrapperChart.stories.svelte

@@ -0,0 +1,57 @@
+<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 withChatterDocs from './stories/docs/withChatter.md?raw';
+
+  import DatawrapperChart from './DatawrapperChart.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta
+  title="Components/DatawrapperChart"
+  component="{DatawrapperChart}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <DatawrapperChart {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
+    id: 'abortion-rights-map',
+    ariaLabel: 'map',
+    frameTitle: 'Global abortion access',
+  }}"
+/>
+
+<Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
+  <DatawrapperChart
+    frameTitle="Global abortion access"
+    ariaLabel="map"
+    id="abortion-rights-map"
+    src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
+    title="Global abortion access"
+    description="A map of worldwide access to abortion."
+    notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"
+  />
+</Story>