@reuters-graphics/graphics-components 3.0.25 → 3.0.27

package/dist/components/Headline/demo/graphic.svelte.d.ts

@@ -1,6 +0,0 @@
-export default Graphic;
-type Graphic = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
-};
-declare const Graphic: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/Headpile/Headpile.mdx

@@ -1,37 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-
-import * as HeadpileStories from './Headpile.stories.svelte';
-
-<Meta of={HeadpileStories} />
-
-# Headpile
-
-The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.
-
-It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.
-
-```svelte
-<script>
-  import { Headpile } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
-</script>
-
-<Headpile
-  figures={[
-    {
-      img: `${assets}/images/person-A.jpg`,
-      name: 'General Abdel Fattah al-Burhan',
-      role: "Sudan's Sovereign Council Chief and military commander",
-      text: 'Burhan was little known in public life until taking part in the coup ...',
-    },
-    {
-      img: `${assets}/images/person-B.jpg`,
-      name: 'General Mohamed Hamdan Dagalo',
-      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
-      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
-    },
-  ]}
-/>
-```
-
-<Canvas of={HeadpileStories.Demo} />

package/dist/components/Headpile/Headpile.stories.svelte

@@ -1,37 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Headpile from './Headpile.svelte';
-
-  import hed1 from './images/abdel.png';
-  import hed2 from './images/hemedti.png';
-
-  const { Story } = defineMeta({
-    title: 'Components/Text elements/Headpile',
-    component: Headpile,
-    argTypes: {},
-  });
-
-  const defaultArgs = [
-    {
-      name: 'General Abdel Fattah al-Burhan',
-      role: "Sudan's Sovereign Council Chief and military commander",
-      img: hed1,
-      text: 'Burhan was little known in public life until taking part in the coup against Bashir in 2019 after a popular uprising against his rule. In August 2019, his role as de facto head of state was affirmed when he became head of the Sovereign Council, a body comprising civilian and military leaders formed to oversee the transition towards elections.',
-      // colour: '#957caa',
-    },
-    {
-      name: 'General Mohamed Hamdan Dagalo',
-      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
-      img: hed2,
-      text: "Popularly known as Hemedti, Dagalo rose from lowly beginnings as a camel trader to head a widely feared Arab militia that crushed a revolt in Darfur, winning him influence and eventually a role as Sudan's former deputy head of state.\r\n\r\nOver the past decade, he has been a key figure in Sudanese politics, aiding in the ousting of Bashir in 2019 and suppressing pro-democracy protests. As the country limped from one economic crisis to another, Hemedti became one of Sudan’s richest men, exporting gold from mines in Darfur seized by his fighters.",
-      colour: '#afb776',
-    },
-  ];
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    figures: defaultArgs,
-  }}
-/>

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

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

package/dist/components/HeroHeadline/HeroHeadline.mdx

@@ -1,329 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-
-import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
-
-<Meta of={HeroHeadlineStories} />
-
-# HeroHeadline
-
-The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media.
-
-By default, the hero is in the background, i.e., the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e., before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
-
-## Photo hero
-
-To use a photo as the hero, simply pass the image source to the `img` prop.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
-
-  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
-</script>
-
-<HeroHeadline
-  {embedded}
-  img={`${assets}/images/polar-bear.jpg`}
-  ariaDescription="A photo of a polar bear"
-  notes="Photo by REUTERS"
-  section={'World News'}
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  authors={['Jane Doe', 'John Doe']}
-/>
-```
-
-<Canvas of={HeroHeadlineStories.PhotoHero} />
-
-## Transparent site header
-
-In the graphics kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
-
-```scss
-// global.scss
-.nav-container {
-  background-color: transparent !important;
-}
-.nav-container .inner {
-  background-color: transparent !important;
-  border: none !important;
-}
-.hero-wrapper {
-  margin-block-start: -64px;
-}
-```
-
-<Canvas of={HeroHeadlineStories.TransparentHeader} />
-
-## Ai2svelte hero
-
-To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside `HeroHeadline`.
-
-To customise styles, use CSS to target the class passed to `HeroHeadline`.
-
-> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the ai2svelte graphic.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-
-  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
-
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
-
-  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
-</script>
-
-<HeroHeadline
-  {embedded}
-  hed="Earthquake devastates Afghanistan"
-  hedSize="big"
-  hedWidth="wide"
-  class="custom-hero mb-0"
-  authors={[
-    'Anand Katakam',
-    'Vijdan Mohammad Kawoosa',
-    'Adolfo Arranz',
-    'Wen Foo',
-    'Simon Scarr',
-    'Aman Bhargava',
-    'Jitesh Chowdhury',
-    'Manas Sharma',
-    'Aditi Bhandari',
-  ]}
-  publishTime={new Date('2022-06-24').toISOString()}
->
-  <GraphicBlock
-    width="widest"
-    role="figure"
-    class="my-0"
-    ariaDescription="Earthquake impact map"
-  >
-    <!-- Pass `assetsPath` if in graphics kit -->
-    <QuakeMap assetsPath={assets || '/'} />
-  </GraphicBlock>
-</HeroHeadline>
-```
-
-Add styles in `global.scss`:
-
-```scss
-// global.scss
-// Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline`
-.hero-wrapper {
-  .custom-hero.headline {
-    // Adjust vertical positioning
-    align-items: flex-end !important;
-
-    @media (max-width: 1100px) {
-      // Adjust line length of title
-      max-width: var(--normal-column-width) !important;
-    }
-  }
-
-  // Make hero shorter than 100vh
-  --heroHeight: 85svh;
-
-  @media (max-width: 960px) {
-    --heroHeight: 65svh;
-  }
-
-  // For small height
-  @media (max-height: 850px) {
-    --heroHeight: 100svh;
-  }
-
-  // Custom hero sizing for landscape mobile
-  @media (max-width: 960px) and (orientation: landscape) {
-    --heroHeight: 200svh;
-  }
-}
-
-// Override default fixed height for hero layout in embeds
-.hero-wrapper.embedded {
-  --heroHeight: 1000px;
-}
-```
-
-<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
-
-## Video hero
-
-To add a video as the hero, use the [Video](?path=/docs/components-multimedia-video--docs) component. To customise styles, use CSS to target the class passed to `HeroHeadline`.
-
-> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the video.
-
-```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
-
-  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
-</script>
-
-<HeroHeadline
-  {embedded}
-  class="video-hero"
-  hed="The conflict in Ethiopia"
-  hedSize="bigger"
-  hedWidth="wide"
-  authors={['Aditi Bhandari ', 'David Lewis']}
-  publishTime={new Date('2020-12-18').toISOString()}
->
-  <Video
-    width="widest"
-    class="my-0"
-    showControls={false}
-    preloadVideo="auto"
-    playVideoWhenInView={false}
-    src={`${assets}/videos/intro.mp4`}
-    poster={`${assets}/images/video-poster-intro.jpg`}
-    notes="Drone footage from the Village 8 refugee camp in Sudan."
-    ariaDescription="Aerial footage of people houses in refugee camp"
-  />
-</HeroHeadline>
-```
-
-Add styles in `global.scss`:
-
-```scss
-// global.scss
-// Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline`
-.hero-wrapper {
-  --heroHeight: calc(100svh - 60px);
-  .video-hero.headline {
-    header {
-      // Adjust vertical position as offset from default center
-      top: calc(50svh - 250px);
-    }
-
-    h1 {
-      color: #ffd430;
-      text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-    }
-  }
-}
-```
-
-<Canvas of={HeroHeadlineStories.VideoHero} />
-
-## Inline hero
-
-To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
-
-  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
-</script>
-
-<!-- Set `stacked` to `false` -->
-<HeroHeadline
-  {embedded}
-  stacked={false}
-  section="Global news"
-  hed="The plunge from 29,000 feet"
-  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
-  class="mb-0"
-  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
-  publishTime={new Date('2020-01-01').toISOString()}
->
-  <GraphicBlock
-    width="widest"
-    role="figure"
-    class="my-0"
-    ariaDescription="Earthquake impact map"
-    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-  >
-    <!-- Pass `assetsPath` if in graphics kit -->
-    <CrashMap assetsPath={assets || '/'} />
-  </GraphicBlock>
-</HeroHeadline>
-```
-
-<Canvas of={HeroHeadlineStories.InlineHero} />
-
-## Custom hed, dek and byline
-
-The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek, which lets you to customise the headline and dek by passing [snippets](https://svelte.dev/docs/svelte/snippet) into the `hed` and `dek` props.
-
-Since `Headline` internally uses the [Byline](?path=/docs/components-text-elements-headline--docs) component, you can also customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
-
-```svelte
-<!-- App.svelte -->
-<HeroHeadline
-  class="custom-hed"
-  authors={[
-    'Prasanta Kumar Dutta',
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Anurag Rao',
-  ]}
-  publishTime={new Date('2023-05-11').toISOString()}
-  img={eurovisImgSrc}
-  getAuthorPage={(author) => {
-    return `mailto:${author.replace(' ', '')}@example.com`;
-  }}
->
-  <!-- Custom hed snippet -->
-  {#snippet hed()}
-    <h1>
-      <div class="body-note">A visual guide to</div>
-      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-    </h1>
-  {/snippet}
-
-  <!-- Custom dek snippet -->
-  {#snippet dek()}
-    <div class="dek">
-      <p>
-        Performers from 37 countries are coming together May 9-13 in Liverpool,
-        England, for the 67th annual Eurovision Song Contest. The winner gets
-        the trophy and their country gets the right to host next year’s event,
-        produced by the European Broadcasting Union (EBU).
-      </p>
-    </div>
-  {/snippet}
-</HeroHeadline>
-```
-
-Add styles in `global.scss`:
-
-```scss
-// global.scss
-.custom-hed {
-  h1 {
-    .body-note {
-      color: #ffffff;
-    }
-    .title {
-      color: #ffffff;
-      text-shadow: 1px 1px 8px #ff7c88;
-      filter: drop-shadow(0px 0px 12px #ff7c88);
-    }
-  }
-
-  .dek {
-    margin-block-start: 1rem;
-    p {
-      color: #ffffff;
-      text-shadow: 1px 1px 8px #ff7c88;
-      filter: drop-shadow(0px 0px 12px #ff7c88);
-    }
-  }
-}
-```
-
-<Canvas of={HeroHeadlineStories.CustomHed} />

package/dist/components/HeroHeadline/HeroHeadline.stories.svelte

@@ -1,264 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import HeroHeadline from './HeroHeadline.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Text elements/HeroHeadline',
-    component: HeroHeadline,
-    argTypes: {
-      hedSize: {
-        control: 'select',
-        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
-      },
-      hedWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-      hedAlign: {
-        control: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-    },
-  });
-</script>
-
-<script lang="ts">
-  import polarImgSrc from './demo/polar.jpg';
-  import eurovisImgSrc from './demo/eurovis.jpeg';
-
-  import Block from '../Block/Block.svelte';
-  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
-  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import Video from '../Video/Video.svelte';
-
-  import CrashMap from './demo/graphics/crash.svelte';
-  import QuakeMap from './demo/graphics/quakemap.svelte';
-</script>
-
-<Story name="Photo hero" exportName="PhotoHero">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-  <HeroHeadline
-    section="World News"
-    hed="Reuters Graphics Interactive"
-    dek="The beginning of a beautiful page"
-    authors={['Jane Doe', 'John Doe']}
-    publishTime={new Date('2022-03-04').toISOString()}
-    img={polarImgSrc}
-    notes="Photo by REUTERS"
-    ariaDescription="A photo of a polar bear"
-  />
-</Story>
-
-<Story name="Transparent header" exportName="TransparentHeader">
-  <div class="transparent-header">
-    <Block width="fluid" class="chromatic-ignore">
-      <SiteHeader />
-    </Block>
-    <HeroHeadline
-      section="World News"
-      hed="Reuters Graphics Interactive"
-      dek="The beginning of a beautiful page"
-      authors={['Jane Doe', 'John Doe']}
-      publishTime={new Date('2022-03-04').toISOString()}
-      img={polarImgSrc}
-      ariaDescription="A photo of a polar bear"
-    />
-  </div>
-</Story>
-
-<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'Earthquake devastates Afghanistan'}
-    hedSize={'big'}
-    hedWidth="wide"
-    class="custom-hero mb-0"
-    authors={[
-      'Anand Katakam',
-      'Vijdan Mohammad Kawoosa',
-      'Adolfo Arranz',
-      'Wen Foo',
-      'Simon Scarr',
-      'Aman Bhargava',
-      'Jitesh Chowdhury',
-      'Manas Sharma',
-      'Aditi Bhandari',
-    ]}
-    publishTime={new Date('2022-06-24').toISOString()}
-  >
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      ariaDescription="Earthquake impact map"
-    >
-      <QuakeMap />
-    </GraphicBlock>
-  </HeroHeadline>
-  <style>.hero-wrapper {
-  --heroHeight: 85svh;
-}
-@media (max-width: 960px) {
-  .hero-wrapper {
-    --heroHeight: 65svh;
-  }
-}
-@media (max-height: 850px) {
-  .hero-wrapper {
-    --heroHeight: 100svh;
-  }
-}
-@media (max-width: 960px) and (orientation: landscape) {
-  .hero-wrapper {
-    --heroHeight: 200svh;
-  }
-}
-.hero-wrapper .custom-hero.headline {
-  align-items: flex-end !important;
-}
-@media (max-width: 1100px) {
-  .hero-wrapper .custom-hero.headline {
-    max-width: var(--normal-column-width) !important;
-  }
-}
-
-.hero-wrapper.embedded {
-  --heroHeight: 1000px;
-}</style>
-</Story>
-
-<Story name="Video hero" exportName="VideoHero">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    class="video-hero"
-    hed="The conflict in Ethiopia"
-    hedSize="bigger"
-    hedWidth="wide"
-    authors={['Aditi Bhandari ', 'David Lewis']}
-    publishTime={new Date('2020-12-18').toISOString()}
-  >
-    <Video
-      width="widest"
-      class="my-0"
-      showControls={false}
-      preloadVideo="auto"
-      playVideoWhenInView={false}
-      src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
-      poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
-      notes="Drone footage from the Village 8 refugee camp in Sudan."
-      ariaDescription="Aerial footage of people houses in refugee camp"
-    />
-  </HeroHeadline>
-  <style>.hero-wrapper {
-  --heroHeight: calc(100svh - 60px);
-}
-.hero-wrapper .video-hero.headline header {
-  top: calc(50svh - 250px);
-}
-.hero-wrapper .video-hero.headline h1 {
-  color: #ffd430;
-  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-}</style>
-</Story>
-
-<Story name="Inline hero" exportName="InlineHero">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <!-- Set `stacked` to `false` -->
-  <HeroHeadline
-    stacked={false}
-    section="Global news"
-    hed="The plunge from 29,000 feet"
-    dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
-    class="mb-0"
-    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
-    publishTime={new Date('2020-01-01').toISOString()}
-  >
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      ariaDescription="Earthquake impact map"
-      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-    >
-      <CrashMap />
-    </GraphicBlock>
-  </HeroHeadline>
-</Story>
-
-<Story name="Custom hed" exportName="CustomHed">
-  <HeroHeadline
-    class="custom-hed"
-    authors={[
-      'Prasanta Kumar Dutta',
-      'Dea Bankova',
-      'Aditi Bhandari',
-      'Anurag Rao',
-    ]}
-    publishTime={new Date('2023-05-11').toISOString()}
-    img={eurovisImgSrc}
-    getAuthorPage={(author: string) => {
-      return `mailto:${author.replace(' ', '')}@example.com`;
-    }}
-  >
-    {#snippet hed()}
-      <h1>
-        <div class="body-note">A visual guide to</div>
-        <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-      </h1>
-    {/snippet}
-
-    {#snippet dek()}
-      <div class="dek">
-        <p>
-          Performers from 37 countries are coming together May 9-13 in
-          Liverpool, England, for the 67th annual Eurovision Song Contest. The
-          winner gets the trophy and their country gets the right to host next
-          year’s event, produced by the European Broadcasting Union (EBU).
-        </p>
-      </div>
-    {/snippet}
-  </HeroHeadline>
-
-  <style>.custom-hed h1 .body-note {
-  color: #ffffff;
-}
-.custom-hed h1 .title {
-  color: #ffffff;
-  text-shadow: 1px 1px 8px #ff7c88;
-  filter: drop-shadow(0px 0px 12px #ff7c88);
-}
-.custom-hed .dek {
-  margin-block-start: 1rem;
-}
-.custom-hed .dek p {
-  color: #ffffff;
-  text-shadow: 1px 1px 8px #ff7c88;
-  filter: drop-shadow(0px 0px 12px #ff7c88);
-}</style>
-</Story>
-
-<style>.transparent-header :global(.nav-container) {
-  background-color: transparent !important;
-}
-.transparent-header :global(.nav-container .inner) {
-  background-color: transparent !important;
-  border: none !important;
-}
-.transparent-header :global(.hero-wrapper) {
-  margin-block-start: -64px;
-}</style>