@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/GraphicBlock/GraphicBlock.stories.svelte

@@ -1,59 +1,42 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import archieMLDocs from "./stories/docs/archieML.md?raw";
-import customTextDocs from "./stories/docs/customText.md?raw";
-import ai2svelteDocs from "./stories/docs/ai2svelte.md?raw";
-import ariaDocs from "./stories/docs/aria.md?raw";
-import GraphicBlock from "./GraphicBlock.svelte";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Graphics/GraphicBlock",
-  component: GraphicBlock,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import GraphicBlock from './GraphicBlock.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/GraphicBlock',
+    component: GraphicBlock,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
     },
-    textWidth: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import AiMap from './stories/ai2svelte/ai-chart.svelte';
-
-  // @ts-ignore img
-  import PlaceholderImg from './stories/placeholder.png';
+  import AiMap from './demo/ai2svelte/ai-chart.svelte';
+  import PlaceholderImg from './demo/placeholder.png';
 </script>
 
-<Template let:args>
-  <GraphicBlock {...args}>
-    <div class="demo-graphic">
-      <img src="{PlaceholderImg}" alt="placeholder" />
+<Story name="Demo">
+  <GraphicBlock
+    title="Title for my chart"
+    description="Some description for your chart."
+    notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
+  >
+    <div id="my-chart">
+      <img src={PlaceholderImg} alt="placeholder" />
     </div>
   </GraphicBlock>
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    width: 'normal',
-    title: 'Bacon ipsum dolor amet t-bone',
-    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)',
-  }}"
-/>
+</Story>
 
-<Story name="ArchieML" {...withStoryDocs(archieMLDocs)}>
+<Story name="Ai2svelte and ArchieML" exportName="Ai2SvelteAndArchieML">
   <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."
@@ -62,40 +45,64 @@ export const meta = {
   </GraphicBlock>
 </Story>
 
-<Story name="Custom text" {...withStoryDocs(customTextDocs)}>
-  <GraphicBlock width="normal">
-    <div slot="title">
-      <h5>My smaller title</h5>
-    </div>
+<Story name="Custom text" exportName="CustomText">
+  <GraphicBlock>
     <div class="demo-graphic">
-      <img src="{PlaceholderImg}" alt="placeholder" />
+      <img src={PlaceholderImg} alt="placeholder" />
     </div>
-    <aside slot="notes">
-      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
-    </aside>
+
+    {#snippet title()}
+      <h5>My smaller title</h5>
+    {/snippet}
+
+    {#snippet notes()}
+      <aside>
+        <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+      </aside>
+    {/snippet}
   </GraphicBlock>
 </Story>
 
-<Story name="Ai2svelte" {...withStoryDocs(ai2svelteDocs)}>
+<Story name="AREA description" exportName="AriaDescription">
   <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."
   >
     <AiMap />
   </GraphicBlock>
 </Story>
 
-<Story name="ARIA" {...withStoryDocs(ariaDocs)}>
+<Story name="Custom AREA description" exportName="CustomAriaDescription">
   <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."
   >
     <AiMap />
+    {#snippet ariaDescription()}
+      <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>
+        <tbody>
+          <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>
+        </tbody>
+      </table>
+    {/snippet}
   </GraphicBlock>
 </Story>
 
@@ -108,4 +115,17 @@ export const meta = {
 }
 div.demo-graphic img {
   opacity: 0.4;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+table th,
+table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+table th {
+  background-color: #f2f2f2;
 }</style>

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

@@ -1,33 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
-        textWidth: {
-            control: string;
-            options: string[];
-        };
+import GraphicBlock from './GraphicBlock.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 GraphicBlock;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type GraphicBlockProps = typeof __propDef.props;
-export type GraphicBlockEvents = typeof __propDef.events;
-export type GraphicBlockSlots = typeof __propDef.slots;
-export default class GraphicBlock extends SvelteComponent<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GraphicBlock: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GraphicBlock = InstanceType<typeof GraphicBlock>;
+export default GraphicBlock;

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -1,82 +1,143 @@
 <!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) -->
-<script>export let width = "normal";
-export let id = "";
-let cls = "";
-export { cls as class };
-export let snap = false;
-export let role = null;
-export let notes = null;
-export let textWidth = "normal";
-export let title = null;
-export let description = null;
-export let ariaLabel = "chart";
-export let ariaDescription = null;
-import AriaHidden from "./AriaHidden.svelte";
-import TextBlock from "./TextBlock.svelte";
-import Block from "../Block/Block.svelte";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-import Markdown from "../Markdown/Markdown.svelte";
+<script lang="ts">
+  // Types
+  import type { ContainerWidth } from '../@types/global';
+  import type { Snippet } from 'svelte';
+
+  // Components
+  import AriaHidden from './components/AriaHidden.svelte';
+  import TextBlock from './components/TextBlock.svelte';
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  interface Props {
+    /** Content to place inside `GraphicBlock` */
+    children: Snippet;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /** Snap block to column widths, rather than fluidly resizing them. */
+    snap?: boolean;
+    /**
+     * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+     */
+    role?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string OR as a custom snippet.
+     */
+    notes?: string | Snippet;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Title of the graphic as a string or a custom snippet.
+     */
+    title?: string | Snippet;
+    /**
+     * Description of the graphic, passed in as a markdown string.
+     */
+    description?: string;
+    /**
+     * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA description, passed in as a markdown string OR as a custom snippet.
+     */
+    ariaDescription?: string | Snippet;
+  }
+
+  let {
+    children,
+    id = '',
+    class: cls = '',
+    snap = false,
+    role,
+    notes,
+    width = 'normal',
+    textWidth = 'normal',
+    title,
+    description,
+    ariaLabel = 'chart',
+    ariaDescription,
+  }: Props = $props();
 </script>
 
-<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
-  {#if $$slots.title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
-        <!-- Custom title content -->
-        <slot name="title" />
-      </TextBlock>
-    </PaddingReset>
-  {:else if title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
-        <h3>{title}</h3>
-        {#if description}
-          <Markdown source="{description}" />
+<div class="container">
+  <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
+    <!-- Check if `title` is a snippet -->
+    {#if typeof title === 'string'}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <h3>{title}</h3>
+          {#if description}
+            <Markdown source={description} />
+          {/if}
+        </TextBlock>
+      </PaddingReset>
+    {:else if title}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <!-- Custom title snippet -->
+          {@render title()}
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+    <AriaHidden hidden={!!ariaDescription}>
+      <!-- Graphic content -->
+      {@render children()}
+    </AriaHidden>
+    {#if ariaDescription}
+      <div class="visually-hidden">
+        {#if typeof ariaDescription === 'string'}
+          <Markdown source={ariaDescription} />
+        {:else}
+          <!-- Custom ARIA snippet -->
+          {@render ariaDescription()}
         {/if}
-      </TextBlock>
-    </PaddingReset>
-  {/if}
-  <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
-    <!-- Graphic content -->
-    <slot />
-  </AriaHidden>
-  {#if $$slots.aria || ariaDescription}
-    <div class="visually-hidden">
-      {#if $$slots.aria}
-        <!-- Custom ARIA markup -->
-        <slot name="aria" />
-      {:else}
-        <Markdown source="{ariaDescription}" />
-      {/if}
-    </div>
-  {/if}
-  {#if $$slots.notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
-        <!-- Custom notes content -->
-        <slot name="notes" />
-      </TextBlock>
-    </PaddingReset>
-  {:else if notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
-        <aside>
-          <Markdown source="{notes}" />
-        </aside>
-      </TextBlock>
-    </PaddingReset>
-  {/if}
-</Block>
+      </div>
+    {/if}
+    {#if typeof notes === 'string'}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <aside>
+            <Markdown source={notes} />
+          </aside>
+        </TextBlock>
+      </PaddingReset>
+    {:else if notes}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <!-- Custom notes content -->
+          {@render notes()}
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+  </Block>
+</div>
 
-<!-- svelte-ignore css-unused-selector -->
-<style global>/* Generated from 
+<style>/* Generated from 
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Generated from 
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-.article-block.graphic p {
+div.container {
+  display: contents;
+}
+div.container :global(.article-block.graphic p) {
   margin-top: 0;
   margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
@@ -85,7 +146,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   line-height: 1.3;
   font-weight: 300;
 }
-.article-block.graphic aside p {
+div.container :global(.article-block.graphic aside p) {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);
   font-size: var(--theme-font-size-xs);

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

@@ -1,67 +1,52 @@
-import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * Width of the component within the text well.
-           * @type {string}
-           */ width?: ContainerWidth;
-        /**
-           * Add an id to the block tag to target it with custom CSS.
-           * @type {string}
-           */ id?: string;
-        /**
-           * Add extra classes to the block tag to target it with custom CSS.
-           * @type {string}
-           */ class?: string;
-        /** Snap block to column widths, rather than fluidly resizing them. */ snap?: boolean;
-        /**
-           * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
-           * @type {string}
-           */ role?: string | null;
-        /**
-           * Notes to the graphic, passed in as a markdown string.
-           * @type {string}
-           */ notes?: string | null;
-        /**
-           * Set a different width for the text within the text well, for example,
-           * "normal" to keep the title, description and notes inline with the rest
-           * of the text well. Can't ever be wider than `width`.
-           * @type {string}
-           */ textWidth?: ContainerWidth | null;
-        /**
-           * Title of the graphic
-           * @type {string}
-           */ title?: string | null;
-        /**
-           * Description of the graphic, passed in as a markdown string.
-           * @type {string}
-           */ description?: string | null;
-        /**
-           * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
-           * @type {string}
-           */ ariaLabel?: string;
-        /**
-           * ARIA description, passed in as a markdown string.
-           * @type {string}
-           */ ariaDescription?: string | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        default: {};
-        aria: {};
-        notes: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type GraphicBlockProps = typeof __propDef.props;
-export type GraphicBlockEvents = typeof __propDef.events;
-export type GraphicBlockSlots = typeof __propDef.slots;
-/** `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) */
-export default class GraphicBlock extends SvelteComponent<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Content to place inside `GraphicBlock` */
+    children: Snippet;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /** Snap block to column widths, rather than fluidly resizing them. */
+    snap?: boolean;
+    /**
+     * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+     */
+    role?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string OR as a custom snippet.
+     */
+    notes?: string | Snippet;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Title of the graphic as a string or a custom snippet.
+     */
+    title?: string | Snippet;
+    /**
+     * Description of the graphic, passed in as a markdown string.
+     */
+    description?: string;
+    /**
+     * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA description, passed in as a markdown string OR as a custom snippet.
+     */
+    ariaDescription?: string | Snippet;
 }
-export {};
+/** `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) */
+declare const GraphicBlock: import("svelte").Component<Props, {}, "">;
+type GraphicBlock = ReturnType<typeof GraphicBlock>;
+export default GraphicBlock;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Whether to wrap the graphic with an aria hidden tag.
+     */
+    hidden?: boolean;
+    /** Content to put inside `AriaHidden`*/
+    children: Snippet;
+  }
+
+  let { hidden = false, children }: Props = $props();
+</script>
+
+{#if hidden}
+  <div aria-hidden="true">
+    {@render children()}
+  </div>
+{:else}
+  {@render children()}
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Whether to wrap the graphic with an aria hidden tag.
+     */
+    hidden?: boolean;
+    /** Content to put inside `AriaHidden`*/
+    children: Snippet;
+}
+declare const AriaHidden: import("svelte").Component<Props, {}, "">;
+type AriaHidden = ReturnType<typeof AriaHidden>;
+export default AriaHidden;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ContainerWidth } from '../../@types/global';
+
+  import Block from '../../Block/Block.svelte';
+
+  interface Props {
+    /** Width of the component within the text well. */
+    width?: ContainerWidth;
+    /** Content to put inside `TextBlock`*/
+    children: Snippet;
+  }
+
+  let { width, children }: Props = $props();
+</script>
+
+{#if width}
+  <Block {width} class="notes fmy-0">
+    {@render children()}
+  </Block>
+{:else}
+  {@render children()}
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ContainerWidth } from '../../@types/global';
+interface Props {
+    /** Width of the component within the text well. */
+    width?: ContainerWidth;
+    /** Content to put inside `TextBlock`*/
+    children: Snippet;
+}
+declare const TextBlock: import("svelte").Component<Props, {}, "">;
+type TextBlock = ReturnType<typeof TextBlock>;
+export default TextBlock;