@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,61 +1,24 @@
 <!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) -->
-<script>import { throttle } from 'lodash-es';
-import { onMount } from 'svelte';
-import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-/** Width of the chart within the text well. */
-export let width = 'normal'; // options: wide, wider, widest, fluid
-/** Height of the component */
+<script>import { throttle } from "lodash-es";
+import { onMount } from "svelte";
+import Block from "../Block/Block.svelte";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
+export let width = "normal";
 export let height = 600;
-/**
- * If set, makes the height a ratio of the component's width.
- * @type {number}
- */
 export let heightRatio = null;
-/**
- * Before image src
- * @required
- */
 export let beforeSrc = null;
-/**
- * Before image altText
- * @required
- */
 export let beforeAlt = null;
-/**
- * After image src
- * @required
- */
 export let afterSrc = null;
-/**
- * After image altText
- * @required
- */
 export let afterAlt = null;
-/**
- * Set a class to target with SCSS.
- * @type {string}
- */
-let cls = '';
+let cls = "";
 export { cls as class };
-/** Drag handle colour */
-export let handleColour = 'white';
-/** Drag handle opacity */
+export let handleColour = "white";
 export let handleInactiveOpacity = 0.9;
-/** Margin at the edge of the image to stop dragging */
 export let handleMargin = 20;
-/** Percentage of the component width the handle will travel ona key press */
 export let keyPressStep = 0.05;
-/** Initial offset of the handle, between 0 and 1. */
 export let offset = 0.5;
-const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-/**
- * Add an ID to target with SCSS.
- * @type {string}
- */
-export let id = 'before-after-' + random4() + random4();
+const random4 = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
+export let id = "before-after-" + random4() + random4();
 let img;
 let imgOffset = null;
 let sliding = false;
@@ -63,74 +26,59 @@ let figure;
 let beforeOverlayWidth = 0;
 let isFocused = false;
 let containerWidth;
-$: containerHeight =
-    containerWidth && heightRatio ? containerWidth * heightRatio : height;
-$: w = (imgOffset && imgOffset.width) || 0;
+$: containerHeight = containerWidth && heightRatio ? containerWidth * heightRatio : height;
+$: w = imgOffset && imgOffset.width || 0;
 $: x = w * offset;
 $: figStyle = `width:100%;height:${containerHeight}px;`;
-$: imgStyle = 'width:100%;height:100%;';
-$: beforeOverlayClip =
-    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
-const onFocus = () => (isFocused = true);
-const onBlur = () => (isFocused = false);
+$: imgStyle = "width:100%;height:100%;";
+$: beforeOverlayClip = x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
+const onFocus = () => isFocused = true;
+const onBlur = () => isFocused = false;
 const handleKeyDown = (e) => {
-    if (!isFocused)
-        return;
-    const { keyCode } = e;
-    const margin = handleMargin / w;
-    if (keyCode === 39) {
-        offset = Math.min(1 - margin, offset + keyPressStep);
-    }
-    else if (keyCode === 37) {
-        offset = Math.max(0 + margin, offset - keyPressStep);
-    }
+  if (!isFocused) return;
+  const { keyCode } = e;
+  const margin = handleMargin / w;
+  if (keyCode === 39) {
+    offset = Math.min(1 - margin, offset + keyPressStep);
+  } else if (keyCode === 37) {
+    offset = Math.max(0 + margin, offset - keyPressStep);
+  }
 };
 const measureImage = () => {
-    if (img && img.complete)
-        imgOffset = img.getBoundingClientRect();
+  if (img && img.complete) imgOffset = img.getBoundingClientRect();
 };
 const resize = () => {
-    measureImage();
+  measureImage();
 };
 const measureLoadedImage = (e) => {
-    if (e.type === 'load') {
-        imgOffset = e.target.getBoundingClientRect();
-    }
+  if (e.type === "load") {
+    imgOffset = e.target.getBoundingClientRect();
+  }
 };
 const move = (e) => {
-    if (sliding && imgOffset) {
-        const el = e.touches ? e.touches[0] : e;
-        const figureOffset = figure
-            ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
-            : 0;
-        let x = el.pageX - figureOffset - imgOffset.left;
-        x =
-            x < handleMargin
-                ? handleMargin
-                : x > w - handleMargin
-                    ? w - handleMargin
-                    : x;
-        offset = x / w;
-    }
+  if (sliding && imgOffset) {
+    const el = e instanceof TouchEvent && e.touches ? e.touches[0] : e;
+    const figureOffset = figure ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) : 0;
+    let x2 = el.pageX - figureOffset - imgOffset.left;
+    x2 = x2 < handleMargin ? handleMargin : x2 > w - handleMargin ? w - handleMargin : x2;
+    offset = x2 / w;
+  }
 };
 const start = (e) => {
-    sliding = true;
-    move(e);
+  sliding = true;
+  move(e);
 };
 const end = () => {
-    sliding = false;
+  sliding = false;
 };
 if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
-    console.warn('Missing required src or alt props for BeforeAfter component');
+  console.warn("Missing required src or alt props for BeforeAfter component");
 }
 onMount(() => {
-    // This is necessary b/c on:load doesn't reliably fire on the image...
-    const interval = setInterval(() => {
-        if (imgOffset)
-            clearInterval(interval);
-        if (img && img.complete && !imgOffset)
-            measureImage();
-    }, 50);
+  const interval = setInterval(() => {
+    if (imgOffset) clearInterval(interval);
+    if (img && img.complete && !imgOffset) measureImage();
+  }, 50);
 });
 </script>
 
@@ -144,7 +92,7 @@ onMount(() => {
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block width="{width}" id="{id}" class="photo before-after fmy-6 {cls}">
+  <Block {width} {id} class="photo before-after fmy-6 {cls}">
     <div
       style="height: {containerHeight}px;"
       bind:clientWidth="{containerWidth}"
@@ -156,7 +104,7 @@ onMount(() => {
         on:touchstart="{start}"
         on:mousedown="{start}"
         bind:this="{figure}"
-        aria-labelledby="{$$slots.caption && `${id}-caption`}"
+        aria-labelledby="{($$slots.caption && `${id}-caption`) || undefined}"
       >
         <img
           bind:this="{img}"
@@ -166,7 +114,8 @@ onMount(() => {
           on:mousedown|preventDefault
           style="{imgStyle}"
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
+          aria-describedby="{($$slots.beforeOverlay && `${id}-before`) ||
+            undefined}"
         />
 
         <img
@@ -175,7 +124,8 @@ onMount(() => {
           on:mousedown|preventDefault
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
+          aria-describedby="{($$slots.afterOverlay && `${id}-after`) ||
+            undefined}"
         />
         {#if $$slots.beforeOverlay}
           <div
@@ -240,9 +190,7 @@ figure.before-after-container img {
   top: 0;
   left: 0;
   z-index: 20;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
 }
 figure.before-after-container img.after {
   z-index: 21;
@@ -274,9 +222,7 @@ figure.before-after-container .overlay-container.after {
   height: 40px;
   cursor: move;
   background: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   position: absolute;
   border-radius: 50px;
   top: calc(50% - 20px);
@@ -305,9 +251,7 @@ figure.before-after-container .overlay-container.after {
 .handle .arrow-left {
   width: 0;
   height: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   position: relative;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -52,11 +52,13 @@ declare const __propDef: {
         };
         caption: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BeforeAfterProps = typeof __propDef.props;
 export type BeforeAfterEvents = typeof __propDef.events;
 export type BeforeAfterSlots = typeof __propDef.slots;
 /** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) */
-export default class BeforeAfter extends SvelteComponentTyped<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
+export default class BeforeAfter extends SvelteComponent<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
 }
 export {};

package/dist/components/BeforeAfter/stories/docs/ariaDescriptions.md

@@ -0,0 +1,35 @@
+Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
+
+> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
+
+```svelte
+  <BeforeAfter
+    beforeSrc="{beforeImg}"
+    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+    afterSrc="{afterImg}"
+    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+  >
+    <div slot="beforeOverlay" class="overlay p-3 before">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
+    </div>
+    <div slot="afterOverlay" class="overlay p-3 after">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  </BeforeAfter>
+
+  <style lang="scss">
+    .overlay {
+      background: rgba(0, 0, 0, 0.45);
+      max-width: 350px;
+      &.after {
+        text-align: right;
+      }
+      p {
+        color: #ffffff;
+      }
+    }
+  </style>
+```

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

@@ -0,0 +1,15 @@
+A before and after image comparison component.
+
+```svelte
+<script>
+  import { BeforeAfter } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // If using in the Graphics Kit
+</script>
+
+<BeforeAfter
+  beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}"
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+/>
+```

package/dist/components/BeforeAfter/stories/docs/withOverlays.md

@@ -0,0 +1,33 @@
+Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
+
+```svelte
+<BeforeAfter
+  beforeSrc="{beforeImg}"
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc="{afterImg}"
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+>
+  <div slot="beforeOverlay" class="overlay p-3 before">
+    <p class="h4 font-bold">July 7, 2020</p>
+    <p class="body-note">Initially, this site was far smaller.</p>
+  </div>
+  <div slot="afterOverlay" class="overlay p-3 after">
+    <p class="h4 font-bold">Oct. 20, 2020</p>
+    <p class="body-note">But then forces built up.</p>
+  </div>
+  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+```

package/dist/components/Block/Block.stories.svelte

@@ -0,0 +1,173 @@
+<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 customLayoutsDocs from './stories/docs/customLayouts.md?raw';
+  // @ts-ignore raw
+  import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
+
+  import Block from './Block.svelte';
+  import Article from '../Article/Article.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: [
+          'narrower',
+          'narrow',
+          'normal',
+          'wide',
+          'wider',
+          'widest',
+          'fluid',
+        ],
+      },
+    },
+  };
+</script>
+
+<Meta title="Layout/Block" component="{Block}" {...metaProps} />
+
+<Template let:args>
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <Block {...args}>
+        <div class="label">Block</div>
+      </Block>
+    </div>
+  </Article>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'normal',
+  }}"
+/>
+
+<Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
+  <Block width="fluid">
+    <!-- Enter bootstrap grid! -->
+    <div id="block-flex-example">
+      <div class="row">
+        <div class="col">Column</div>
+        <div class="col-6">Column</div>
+        <div class="col">Column</div>
+      </div>
+      <div class="row">
+        <div class="col">Column</div>
+        <div class="col">Column</div>
+      </div>
+    </div>
+  </Block>
+</Story>
+
+<Story name="Snap widths" {...withStoryDocs(snapWidthsDocs)}>
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
+        >narrower</Block
+      >
+      <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
+        >narrow</Block
+      >
+      <Block width="normal" snap="{true}" class="block-snap-widths-demo"
+        >normal</Block
+      >
+      <Block width="wide" snap="{true}" class="block-snap-widths-demo"
+        >wide</Block
+      >
+      <Block width="wider" snap="{true}" class="block-snap-widths-demo"
+        >wider</Block
+      >
+      <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
+        >narrower</Block
+      >
+      <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
+        >narrow</Block
+      >
+      <Block
+        width="normal"
+        snap="{true}"
+        class="block-snap-widths-demo even skip-narrow"
+        >normal.skip-narrow</Block
+      >
+      <Block
+        width="wide"
+        snap="{true}"
+        class="block-snap-widths-demo even skip-normal skip-narrow"
+        >wide.skip-normal.skip-narrow</Block
+      >
+      <Block
+        width="wider"
+        snap="{true}"
+        class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
+      >
+    </div>
+  </Article>
+</Story>
+
+<style>:global(#block-demo-article) {
+  background-color: #ddd;
+  position: relative;
+  width: calc(100% + 30px);
+  margin-left: -15px;
+}
+
+:global(#block-demo-article .article-boundaries) {
+  padding: 0 0 18px;
+  width: 100%;
+  height: 100%;
+  background-color: #bbb;
+}
+
+:global(#block-demo-article div.article-block) {
+  height: 100px;
+  background: #81a1c1;
+}
+
+:global(#block-demo-article div.article-block.block-snap-widths-demo) {
+  margin-bottom: 2px;
+  height: 40px;
+  font-size: 11px;
+}
+
+:global(#block-demo-article div.article-block.block-snap-widths-demo.even) {
+  background: rgb(211, 132, 123);
+}
+
+:global(#block-demo-article .label,
+      #block-demo-article div.article-block.block-snap-widths-demo) {
+  padding-left: 3px;
+  color: white;
+}
+
+div#block-flex-example {
+  padding: 25px 0;
+}
+div#block-flex-example div.row {
+  display: flex;
+}
+div#block-flex-example div.row > div {
+  background-color: rgb(211, 132, 123);
+  border: 1px solid white;
+  border-radius: 4px;
+  padding: 20px;
+  color: white;
+  text-align: center;
+  flex-grow: 1;
+}
+div#block-flex-example div.row:first-child div {
+  background: #81a1c1;
+}</style>

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

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

@@ -1,24 +1,18 @@
 <!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->
-<script>/** Width of the block within the article well. */
-export let width = 'normal';
-/** Add an id to the block tag to target it with custom CSS. */
-export let id = '';
-/** Add extra classes to the block tag to target it with custom CSS. */
-let cls = '';
+<script>export let width = "normal";
+export let id = "";
+let cls = "";
 export { cls as class };
-/** Snap block to column widths, rather than fluidly resizing them. */
 export let snap = false;
-/** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
 export let role = null;
-/** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */
 export let ariaLabel = null;
 </script>
 
 <div
-  id="{id}"
+  {id}
   class="article-block fmx-auto {width} {cls}"
   class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
-  role="{role}"
+  {role}
   aria-label="{ariaLabel}"
 >
   <!-- block content -->

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -15,11 +15,13 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BlockProps = typeof __propDef.props;
 export type BlockEvents = typeof __propDef.events;
 export type BlockSlots = typeof __propDef.slots;
 /** `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) */
-export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
+export default class Block extends SvelteComponent<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

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

@@ -0,0 +1,15 @@
+The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+
+Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
+
+> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
+
+```svelte
+<script>
+  import { Block } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="normal">
+  <!-- Your stuff for this block -->
+</Block>
+```

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

@@ -0,0 +1,13 @@
+Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
+
+If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+
+```svelte
+<Block width="fluid">
+  <div class="my-radical-container">
+    <!-- Now, you have full control! -->
+  </div>
+</Block>
+```
+
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).