@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Article/Article.svelte.d.ts

@@ -1,35 +1,27 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Set to true for embeddables. */ embedded?: boolean;
-        /** Add an id to the article tag to target it with custom CSS. */ id?: string | null;
-        /** ARIA role of the article */ role?: string | null;
-        /** Set custom widths for the normal, wide and wider column dimensions */ columnWidths?: {
-            /** Narrower column width */
-            narrower: number;
-            /** Narrow column width */
-            narrow: number;
-            /** Normal column width */
-            normal: number;
-            /** Wide column width */
-            wide: number;
-            /** Wider column width */
-            wider: number;
-        };
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ArticleProps = typeof __propDef.props;
-export type ArticleEvents = typeof __propDef.events;
-export type ArticleSlots = typeof __propDef.slots;
-/** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) */
-export default class Article extends SvelteComponent<ArticleProps, ArticleEvents, ArticleSlots> {
+interface ColumnWidths {
+    /** Narrower column width */
+    narrower: number;
+    /** Narrow column width */
+    narrow: number;
+    /** Normal column width */
+    normal: number;
+    /** Wide column width */
+    wide: number;
+    /** Wider column width */
+    wider: number;
+}
+interface Props {
+    /** Set to true for embeddables. */
+    embedded?: boolean;
+    /** Add an id to the article tag to target it with custom CSS. */
+    id?: string;
+    /** ARIA role of the article */
+    role?: string | null;
+    /** Set custom widths for the normal, wide and wider column dimensions */
+    columnWidths?: ColumnWidths;
+    children?: import('svelte').Snippet;
 }
-export {};
+/** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) */
+declare const Article: import("svelte").Component<Props, {}, "">;
+type Article = ReturnType<typeof Article>;
+export default Article;

package/dist/components/BeforeAfter/BeforeAfter.mdx

@@ -0,0 +1,111 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BeforeAfterStories from './BeforeAfter.stories.svelte';
+
+<Meta of={BeforeAfterStories} />
+
+# BeforeAfter
+
+The `BeforeAfter` component shows a before-and-after comparison of an image.
+
+```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."
+/>
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: before-after
+beforeSrc: images/before-after/myrne-before.jpg
+beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
+afterSrc: images/before-after/myrne-after.jpg
+afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `BeforeAfter` component.
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'before-after'}
+    <BeforeAfter
+      beforeSrc={`${assets}/${block.beforeSrc}`}
+      beforeAlt={block.beforeAlt}
+      afterSrc={`${assets}/${block.afterSrc}`}
+      afterAlt={block.afterAlt}
+    />
+  {/if}
+{/each}
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Adding text
+
+To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style the snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).
+
+> 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might 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."
+>
+  <!-- Optional custom text overlay for the before image -->
+  {#snippet beforeOverlay()}
+    <div class="overlay p-3 before text-left">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom text overlay for the after image -->
+  {#snippet afterOverlay()}
+    <div class="overlay p-3 after text-right">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom caption for both images -->
+  {#snippet caption()}
+    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+  {/snippet}
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+```
+
+<Canvas of={BeforeAfterStories.WithText} />

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -1,108 +1,66 @@
-<script context="module">import BeforeAfter from "./BeforeAfter.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import withOverlaysDocs from "./stories/docs/withOverlays.md?raw";
-import ariaDescriptionsDocs from "./stories/docs/ariaDescriptions.md?raw";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Graphics/BeforeAfter",
-  component: BeforeAfter,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    handleColour: { control: "color" },
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import BeforeAfter from './BeforeAfter.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/BeforeAfter',
+    component: BeforeAfter,
+    argTypes: {
+      handleColour: { control: 'color' },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import beforeImg from './stories/myrne-before.jpg';
-  // @ts-ignore raw
-  import afterImg from './stories/myrne-after.jpg';
+  import beforeImg from './images/myrne-before.jpg';
+  import afterImg from './images/myrne-after.jpg';
 </script>
 
-<Template let:args>
-  <BeforeAfter {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     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.',
-  }}"
+  }}
 />
 
-<Story name="With overlays" {...withStoryDocs(withOverlaysDocs)}>
+<Story name="With text" exportName="WithText">
   <BeforeAfter
-    beforeSrc="{beforeImg}"
+    beforeSrc={beforeImg}
     beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc="{afterImg}"
+    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>
+    {#snippet beforeOverlay()}
+      <div class="overlay p-3 before text-left">
+        <p class="h4 font-bold">July 7, 2020</p>
+        <p class="body-note">Initially, this site was far smaller.</p>
+      </div>
+    {/snippet}
+    {#snippet afterOverlay()}
+      <div class="overlay p-3 after text-right">
+        <p class="h4 font-bold">Oct. 20, 2020</p>
+        <p class="body-note">But then forces built up.</p>
+      </div>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
   </BeforeAfter>
 
   <style>.overlay {
   background: rgba(0, 0, 0, 0.45);
   max-width: 350px;
 }
-.overlay.after {
-  text-align: right;
-}
 .overlay p {
   color: #ffffff;
 }</style>
 </Story>
-
-<Story name="ARIA descriptions" {...withStoryDocs(ariaDescriptionsDocs)}>
-  <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 let:description="{id}" slot="beforeOverlay" class="overlay p-3">
-      <p class="body-caption" {id}>
-        On July 7, 2020, the base contained only a few transport vehicles.
-      </p>
-    </div>
-    <div let:description="{id}" slot="afterOverlay" class="overlay p-3">
-      <!-- 👇 id can also be used on an element containing multiple text elements -->
-      <div {id}>
-        <p class="body-caption">
-          But by October, tanks and artillery could be seen.
-        </p>
-        <p class="body-caption">
-          In total, over 50 pieces of heavy machinery and 200 personnel are now
-          based here.
-        </p>
-      </div>
-    </div>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-  </BeforeAfter>
-  <style>div.overlay {
-  max-width: 250px;
-  background: rgba(0, 0, 0, 0.45);
-}
-div.overlay p {
-  color: #ffffff;
-}</style>
-</Story>

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

@@ -1,32 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        handleColour: {
-            control: string;
-        };
-        width: {
-            control: string;
-            options: string[];
-        };
+import BeforeAfter from './BeforeAfter.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof BeforeAfter;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BeforeAfterProps = typeof __propDef.props;
-export type BeforeAfterEvents = typeof __propDef.events;
-export type BeforeAfterSlots = typeof __propDef.slots;
-export default class BeforeAfter extends SvelteComponent<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BeforeAfter: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BeforeAfter = InstanceType<typeof BeforeAfter>;
+export default BeforeAfter;