@reuters-graphics/graphics-components 3.0.25 → 3.0.27

package/dist/components/Framer/Framer.mdx

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import * as FramerStories from './Framer.stories.svelte';
-
-<Meta of={FramerStories} />
-
-# FeaturePhoto
-
-An embed tool for development in the graphics kit.
-
-```svelte
-<script>
-  import { Framer } from '@reuters-graphics/graphics-components';
-
-  const embeds = ['/embeds/my-chart/index.html'];
-</script>
-
-<Framer {embeds} />
-```

package/dist/components/Framer/Framer.stories.svelte

@@ -1,19 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Framer from './Framer.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Utilities/Framer',
-    component: Framer,
-  });
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    embeds: [
-      'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
-      'https://www.reuters.com/graphics/UKRAINE-CRISIS/MAP/klvymdzdrvg/embeds/en/map/',
-    ],
-  }}
-/>

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

@@ -1,19 +0,0 @@
-import Framer from './Framer.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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Framer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Framer = InstanceType<typeof Framer>;
-export default Framer;

package/dist/components/Functions/Utils.mdx

@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import * as UtilFunctionStories from './Utils.stories.svelte';
-
-<Meta of={UtilFunctionStories} />
-
-# Util functions
-
-This library provides utility functions that can be used across various components and applications.
-
-## Prettify date in the Reuters format
-
-The function `prettifyDate` formats the input string, which is expected to be in English, to format the month and time designator (AM/PM) according to the Reuters style guide. The function is case agnostic and will format both full month names and their 3-letter abbreviations (i.e. `Mar` or `Jun`) correctly.
-
-```javascript
-import { prettifyDate } from '@reuters-graphics/graphics-components';
-
-// Example usage
-prettifyDate('January 1, 2023, 10:00 AM'); // returns 'Jan. 1, 2023, 10:00 a.m.'
-prettifyDate('Jan 1, 2023, 10:00 PM'); // returns 'Jan. 1, 2023, 10:00 p.m.'
-prettifyDate('MAR. 2025'); // returns 'March 2025'
-prettifyDate('sep. 1, 2023, 10:00PM'); // returns 'Sept. 1, 2023, 10:00 p.m.'
-```

package/dist/components/Functions/Utils.stories.svelte

@@ -1,9 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  const { Story } = defineMeta({
-    title: 'Components/Utilities/Functions',
-  });
-</script>
-
-<Story name="Demo" tags={['!autodocs', '!dev']} />

package/dist/components/Functions/Utils.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Utils: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Utils = InstanceType<typeof Utils>;
-export default Utils;

package/dist/components/GraphicBlock/GraphicBlock.mdx

@@ -1,215 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-
-import * as GraphicBlockStories from './GraphicBlock.stories.svelte';
-
-<Meta of={GraphicBlockStories} />
-
-# GraphicBlock
-
-The `GraphicBlock` component is a special derivative of the [Block](?path=/docs/components-page-layout-block--docs) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
-
-Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
-
-```svelte
-<script>
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<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)`}
->
-  <!-- Your chart goes here -->
-  <div id="my-chart" />
-</GraphicBlock>
-```
-
-<Canvas of={GraphicBlockStories.Demo} />
-
-## Using with ai2svelte and ArchieML docs
-
-The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in graphics kit.
-
-You'll likely get your text value from an ArchieML doc...
-
-```yaml
-# ArchieML doc
-[blocks]
-type: ai-graphic
-width: normal
-chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
-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
-altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
-:end
-[]
-```
-
-... which you'll parse out of a ArchieML block object before passing to the `GraphicBlock` component.
-
-To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2svelte graphic at the top of `App.svelte` and add it to the `aiCharts` object.
-
-> **Important❗:** Make sure that the value for `chart` in the ArchieML doc matches the name of the ai2svelte file imported in `App.svelte`.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // IMPORTANT: The name of your ai2svelte chart must match `chart` in your ArchieML doc
-  import AiMap from './ai2svelte/my-map.svelte';
-  // Error handler for missing ai2svelte charts
-  import LogBlock from './components/dev/LogBlock.svelte';
-
-  // If using with the graphics kit
-  import { assets } from '$app/paths';
-
-  // A built-in helper function in Graphis Kit for validating container width
-  import { containerWidth } from '$utils/propValidators';
-
-  // Add your imported ai2svelte charts to this object
-  const aiCharts = {
-    AiMap,
-    // Other ai2svelte graphics...
-  };
-</script>
-
-<!-- Loop through ArchieML blocks -->
-{#each content.blocks as block}
-  {#if block.type === 'ai-graphic'}
-    {#if !aiCharts[block.chart]}
-      <!-- Error message for when the ai2svelte chart is missing -->
-      <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
-    {:else}
-      <!-- Get the ai2svelte graphic specified by `chart` in ArchieML -->
-      {@const AiChart = aiCharts[block.chart]}
-      <GraphicBlock
-        id={block.chart}
-        width={containerWidth(block.width)}
-        title={block.title}
-        description={block.description}
-        notes={block.notes}
-        ariaDescription={block.altText}
-      >
-        <!-- In graphics kit, pass the `assetsPath` prop -->
-        <AiChart assetsPath={assets || '/'} />
-      </GraphicBlock>
-    {/if}
-  {/if}
-{/each}
-```
-
-<Canvas of={GraphicBlockStories.Ai2SvelteAndArchieML} />
-
-## Custom text
-
-You can override the default styles for title and notes by making your own custom elements and passing them as `title` and `notes` [snippets](https://svelte.dev/docs/svelte/snippet) instead of as strings:
-
-```svelte
-<GraphicBlock>
-  <!-- Custom title snippet -->
-  {#snippet title()}
-    <h5>My smaller title</h5>
-  {/snippet}
-
-  <!-- Your graphic -->
-  <div id="my-chart"></div>
-
-  <!-- Custom notes snippet -->
-  {#snippet notes()}
-    <aside>
-      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
-    </aside>
-  {/snippet}
-</GraphicBlock>
-```
-
-<Canvas of={GraphicBlockStories.CustomText} />
-
-## ARIA descriptions
-
-If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an `ariaDescription` that describes the chart.
-
-The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown.
-
-> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div with [aria-hidden="true"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden), which tells screen readers to read the hidden ARIA description and skip the text in the graphic.
-
-```svelte
-<GraphicBlock
-  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."
->
-  <!-- In graphics kit, pass the `assetsPath` prop -->
-  <AiChart assetsPath={assets || '/'} />
-</GraphicBlock>
-```
-
-<Canvas of={GraphicBlockStories.AriaDescription} />
-
-## Custom ARIA descriptions
-
-Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, pass the custom elements as an `ariaDescription` [snippet](https://svelte.dev/docs/svelte/snippet) instead of as a string, as in the [example above](?path=/docs/components-graphics-graphicblock--docs#aria-descriptions).
-
-[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
-
-> **Note:** The `customAria` snippet will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
-
-```svelte
-<GraphicBlock
-  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."
->
-  <!-- In graphics kit, pass the `assetsPath` prop -->
-  <AiChart assetsPath={assets || '/'} />
-
-  <!-- Custom ARIA description snippet -->
-  {#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>
-
-<!-- Optionally, style the visually hidden table nicely for sighted readers who use screen readers -->
-<style lang="scss">
-  table {
-    width: 100%;
-    border-collapse: collapse;
-
-    th,
-    td {
-      border: 1px solid #ddd;
-      padding: 8px;
-    }
-
-    th {
-      background-color: #f2f2f2;
-    }
-  }
-</style>
-```
-
-<Canvas of={GraphicBlockStories.CustomAriaDescription} />

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

@@ -1,131 +0,0 @@
-<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'],
-      },
-    },
-  });
-</script>
-
-<script>
-  import AiMap from './demo/ai2svelte/ai-chart.svelte';
-  import PlaceholderImg from './demo/placeholder.png';
-</script>
-
-<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>
-</Story>
-
-<Story name="Ai2svelte and ArchieML" exportName="Ai2SvelteAndArchieML">
-  <GraphicBlock
-    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."
-  >
-    <AiMap />
-  </GraphicBlock>
-</Story>
-
-<Story name="Custom text" exportName="CustomText">
-  <GraphicBlock>
-    <div class="demo-graphic">
-      <img src={PlaceholderImg} alt="placeholder" />
-    </div>
-
-    {#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="AREA description" exportName="AriaDescription">
-  <GraphicBlock
-    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="Custom AREA description" exportName="CustomAriaDescription">
-  <GraphicBlock
-    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."
-  >
-    <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>
-
-<style>div.demo-graphic {
-  height: 400px;
-  background-color: #ddd;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-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,19 +0,0 @@
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const GraphicBlock: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type GraphicBlock = InstanceType<typeof GraphicBlock>;
-export default GraphicBlock;