@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/HeroHeadline/stories/docs/backgroundGraphic.md

@@ -1,84 +0,0 @@
-Reuters Graphics headline with ai2svelte graphic as background.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-  import QuakeMap from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Earthquake devastates Afghanistan'}"
-  hedSize="{'big'}"
-  hedWidth="wide"
-  class="custom-hero mb-0"
-  dek=""
-  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()}"
->
-  <div slot="background">
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      textWidth="normal"
-      notes=""
-      ariaDescription="Earthquake impact map"
-    >
-      <svelte:component this="{QuakeMap}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .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 smaller 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;
-  }
-</style>
-```

package/dist/components/HeroHeadline/stories/docs/backgroundVideo.md

@@ -1,51 +0,0 @@
-Add a cover video and position the title with ease.
-
-```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  class="custom-hero"
-  hed="The conflict in Ethiopia"
-  hedSize="bigger"
-  hedWidth="wide"
-  authors="{['Aditi Bhandari ', 'David Lewis']}"
-  publishTime="{new Date('2020-12-18').toISOString()}"
->
-  <div slot="background">
-    <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"
-    />
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .hero-wrapper {
-    --heroHeight: calc(100svh - 60px);
-    .custom-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);
-      }
-    }
-  }
-</style>
-```

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

@@ -1,20 +0,0 @@
-Reuters Graphics headline with a Hero media
-
-```svelte
-<script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  img="{`${assets}/images/myImage.jpg`}"
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'World News'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
-/>
-```

package/dist/components/HeroHeadline/stories/docs/customHed.md

@@ -1,43 +0,0 @@
-Add a custom styled headline.
-
-```svelte
-<script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  class="custom-hed"
-  authors="{[
-    'Prasanta Kumar Dutta',
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Anurag Rao',
-  ]}"
-  publishTime="{new Date('2023-05-11').toISOString()}"
-  img="{`${assets}/images/myImage.jpg`}"
->
-  <h1 slot="hed">
-    <div class="body-note">A visual guide to</div>
-    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-  </h1>
-</HeroHeadline>
-
-<style lang="scss">
-  .custom-hed {
-    h1 {
-      .body-note {
-        color: #ffffff;
-      }
-      .title {
-        color: #ffffff;
-        text-shadow: 1px 1px 8px #ff7c88;
-        filter: drop-shadow(0px 0px 12px #ff7c88);
-      }
-    }
-  }
-</style>
-```

package/dist/components/HeroHeadline/stories/docs/inlineGraphic.md

@@ -1,38 +0,0 @@
-Reuters Graphics headline followed by a graphic or any media block.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'The plunge from 29,000 feet'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
-  section="{'Global news'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <GraphicBlock
-      width="widest"
-      role="img"
-      class="my-0"
-      textWidth="normal"
-      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-      ariaDescription="Aerial map showing trajectory of crash"
-    >
-      <svelte:component this="{Map}" assetsPath="{assets || '/'}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-```

package/dist/components/HeroHeadline/stories/docs/inlinePhoto.md

@@ -1,34 +0,0 @@
-Reuters Graphics headline followed by a graphic or any media block.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    FeaturePhoto,
-  } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Buried under the bricks'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
-  section="{'Global news'}"
-  authors="{['Mariano Zafra']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <FeaturePhoto
-      width="widest"
-      class="my-0"
-      src="{`${assets}/images/myImage.jpg`}"
-      caption="Photo by REUTERS/Nacho Doce."
-      altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
-    />
-  </div>
-</HeroHeadline>
-```

package/dist/components/HeroHeadline/stories/docs/inlineVideo.md

@@ -1,34 +0,0 @@
-Add a cover video and position the title with ease.
-
-```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Devastation in Derna'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
-  section="{'Global news'}"
-  authors="{['Simon Scarr']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <Video
-      width="widest"
-      class="my-0"
-      showControls="{false}"
-      preloadVideo="auto"
-      playVideoWhenInView="{false}"
-      src="{assets}/videos/intro.mp4"
-      notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
-      ariaDescription="alttext fot video"
-    />
-  </div>
-</HeroHeadline>
-```

package/dist/components/HeroHeadline/stories/docs/transparentHeader.md

@@ -1,17 +0,0 @@
-Make the hero full bleed and under the header.
-
-```scss
-// global.scss
-
-.nav-container {
-  background-color: transparent !important;
-}
-.nav-container .inner {
-  background-color: transparent !important;
-  border: none;
-}
-
-.hero-wrapper {
-  margin-top: -64px;
-}
-```

package/dist/components/HeroHeadline/stories/graphics/crash.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  CrashProps */
-/** @typedef {typeof __propDef.events}  CrashEvents */
-/** @typedef {typeof __propDef.slots}  CrashSlots */
-export default class Crash extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CrashProps = typeof __propDef.props;
-export type CrashEvents = typeof __propDef.events;
-export type CrashSlots = 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/HeroHeadline/stories/graphics/quakemap.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  QuakemapProps */
-/** @typedef {typeof __propDef.events}  QuakemapEvents */
-/** @typedef {typeof __propDef.slots}  QuakemapSlots */
-export default class Quakemap extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type QuakemapProps = typeof __propDef.props;
-export type QuakemapEvents = typeof __propDef.events;
-export type QuakemapSlots = 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/InfoBox/stories/docs/component.md

@@ -1,17 +0,0 @@
-InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
-
-Switch the theme prop to `dark` for a dark page infobox.
-
-Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
-
-```svelte
-<script>
-  import { InfoBox } from '@reuters-graphics/graphics-components';
-</script>
-
-<InfoBox
-  title="About this data"
-  text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
-  notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
-/>
-```

package/dist/components/Markdown/Markdown.stories.svelte

@@ -1,28 +0,0 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import Markdown from "./Markdown.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/Markdown",
-  component: Markdown,
-  ...withComponentDocs(componentDocs)
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Block from '../Block/Block.svelte';
-</script>
-
-<Template let:args>
-  <Block>
-    <Markdown {...args} />
-  </Block>
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    source: 'This is *some* text in **markdown**.',
-  }}"
-/>

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

@@ -1,23 +0,0 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Markdown;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MarkdownProps = typeof __propDef.props;
-export type MarkdownEvents = typeof __propDef.events;
-export type MarkdownSlots = typeof __propDef.slots;
-export default class Markdown extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots> {
-}
-export {};

package/dist/components/Markdown/Markdown.svelte

@@ -1,34 +0,0 @@
-<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) -->
-<script>import { marked } from "marked";
-import { staticMarkdown } from "./stores";
-export let source = "";
-export let parseInline = false;
-$: markdown = parseInline ? marked.parseInline(source) : marked.parse(source);
-const setInnerHTML = (node, html) => {
-  node.innerHTML = html;
-  return {
-    update(html2) {
-      node.innerHTML = html2;
-    },
-    destroy() {
-      node.innerHTML = "";
-    }
-  };
-};
-</script>
-
-{#if source}
-  {#if $staticMarkdown}
-    <div>
-      {@html markdown}
-    </div>
-  {:else}
-    <div use:setInnerHTML="{markdown}"></div>
-  {/if}
-{/if}
-
-<style>
-  div {
-    display: contents;
-  }
-</style>

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

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** A Markdown formatted string */ source?: string;
-        /** Parse markdown inline, i.e., without wrapping it in paragraph tags */ parseInline?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MarkdownProps = typeof __propDef.props;
-export type MarkdownEvents = typeof __propDef.events;
-export type MarkdownSlots = typeof __propDef.slots;
-/** `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) */
-export default class Markdown extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots> {
-}
-export {};

package/dist/components/Markdown/stores.d.ts

@@ -1,23 +0,0 @@
-/**
- * Set to `false` in the browser to ensure Markdown content correctly updates
- * when a SvelteKit app hyrates.
- *
- * @example
- * ```javascript
- * // +layout.js
- * import { staticMarkdown } from '@reuters-graphics/graphics-components';
- * import { building } from '$app/environment';
- *
- * export const load = async() => {
- *   // Set the store with the value of building.
- *   staticMarkdown.set(building);
- *
- *   // Markdown using this content will correctly refresh when
- *   // a reader loads your page.
- *   const content = await fetchPageContent();
- *
- *   return { content };
- * }
- * ```
- */
-export declare const staticMarkdown: import("svelte/store").Writable<boolean>;

package/dist/components/Markdown/stores.js

@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-/**
- * Set to `false` in the browser to ensure Markdown content correctly updates
- * when a SvelteKit app hyrates.
- *
- * @example
- * ```javascript
- * // +layout.js
- * import { staticMarkdown } from '@reuters-graphics/graphics-components';
- * import { building } from '$app/environment';
- *
- * export const load = async() => {
- *   // Set the store with the value of building.
- *   staticMarkdown.set(building);
- *
- *   // Markdown using this content will correctly refresh when
- *   // a reader loads your page.
- *   const content = await fetchPageContent();
- *
- *   return { content };
- * }
- * ```
- */
-export const staticMarkdown = writable(true);

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

@@ -1,39 +0,0 @@
-The Markdown component renders markdown into HTML. That's it!
-
----
-
-```svelte
-<script>
-  import { Markdown } from '@reuters-graphics/graphics-components';
-</script>
-
-<Markdown source="{'My markdown **string**!'}" />
-```
-
-... well, almost.
-
-Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.
-
-For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
-
-```javascript
-// +layout.js
-import { staticMarkdown } from '@reuters-graphics/graphics-components';
-import { building } from '$app/environment';
-
-/** @type {import('./$types').LayoutLoad} */
-export const load = async () => {
-  // Set the staticMarkdown store with the value of building.
-  staticMarkdown.set(building);
-
-  // Now this content will correctly refresh when a reader loads your page.
-  const resp = await fetch(
-    'https://graphics.thomsonreuters.com/data/my-page-content.json'
-  );
-  const content = await resp.json();
-
-  return { content };
-};
-```
-
-If you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing.

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

@@ -1,35 +0,0 @@
-Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
-
-The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="fluid">
-  <!-- An edge-to-edge image -->
-  <img src="https//..." alt="..." width="100%" />
-  <PaddingReset>
-    <p>A caption for the image that will still be padded.</p>
-  </PaddingReset>
-</Block>
-```
-
-You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-
-  export let src = 'https://...';
-  export let width = 'fluid';
-</script>
-
-<Block width="{width}">
-  <img src="{src}" alt="..." width="100%" />
-  <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <p>A caption for the image that will be padded when Block is fluid.</p>
-  </PaddingReset>
-</Block>
-```