### Start Development Server for Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/contributing/quickstart.mdx

This command starts the development server using pnpm, enabling you to develop and test your new component. Ensure you have pnpm installed and are in the project's root directory.

```shell
pnpm start
```

--------------------------------

### Documenting Svelte Component Props: FeaturePhoto Example

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/svelte-components.mdx

This code snippet demonstrates how a Svelte component's props are typically documented, showing an example of the 'FeaturePhoto' component. It includes the import statement and a usage example with various props like src, altText, caption, and width, indicating the expected data types.

```svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
</script>

<FeaturePhoto
  src="https://reuters.com/images/myImage.jpg"
  altText="Some alt text"
  caption="A caption"
  width="normal"
/>
```

--------------------------------

### Install Graphics Components

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/intro.mdx

This command installs the @reuters-graphics/graphics-components package using pnpm. Ensure you have pnpm installed or use your preferred package manager.

```bash
pnpm i @reuters-graphics/graphics-components
```

--------------------------------

### ArchieML Document Structure for ProfileCard

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/archieml.mdx

Shows an example of how data for a ProfileCard component would be structured within an ArchieML document. This highlights the key-value pairs that correspond to component props.

```yaml
[blocks]
# ...

type: profile-card
name: Tom
age: 10
picture: images/tom-the-cat.jpg
birthday: 2020-09-25
bio: A very frisky feline.

... and an avid mouser!
:end
isGood: true

# ...
[]
```

--------------------------------

### Configurable Column Widths with SCSS Classes (Svelte/SCSS)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Article/Article.mdx

Provides an example of creating a reusable Svelte component that dynamically applies column widths based on a `width` prop, utilizing SCSS for styling and CSS variables for width definitions. It includes styles for various predefined widths and a fluid option.

```svelte
<script>
  let { width = 'normal' } = $props();
</script>

<div class="my-special-container {width}">
  <!-- Story content -->
</div>

<style lang="scss">
  div.my-special-container {
    max-width: var(--normal-column-width);
    &.narrower {
      max-width: var(--narrower-column-width);
    }
    &.narrow {
      max-width: var(--narrow-column-width);
    }
    &.wide {
      max-width: var(--wide-column-width);
    }
    &.wider {
      max-width: var(--wider-column-width);
    }
    &.widest {
      max-width: 100%;
    }
    &.fluid {
      width: calc(100% + 30px);
      margin-inline-start: -15px;
      max-width: none;
    }
  }
</style>
```

--------------------------------

### SEO Component Usage with ArchieML Data (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/SEO/SEO.mdx

Shows how to integrate the SEO component with data sourced from an ArchieML document and SvelteKit's app stores. This example assumes content is loaded from '$locales/en/content.json' and package information from '$pkg'. It dynamically sets SEO and sharing metadata.

```svelte
<script>
  import { SEO } from '@reuters-graphics/graphics-components';
  import pkg from '$pkg';
  import content from '$locales/en/content.json';
  import { assets } from '$app/paths';
  import { page } from '$app/stores';
</script>

<SEO
  baseUrl={VITE_BASE_URL}
  pageUrl={$page.url}
  seoTitle={content.seoTitle}
  seoDescription={content.seoDescription}
  shareTitle={content.shareTitle}
  shareDescription={content.shareDescription}
  shareImgPath={`${assets}/${content.shareImgPath}`}
  shareImgAlt={content.shareImgAlt}
  publishTime={pkg?.reuters?.graphic?.published}
  updateTime={pkg?.reuters?.graphic?.updated}
  authors={pkg?.reuters?.graphic?.authors}
/>
```

--------------------------------

### Conditional Analytics Loading in SvelteKit Environments

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Analytics/Analytics.mdx

This example shows how to conditionally load the Analytics component based on the environment. It uses SvelteKit's '$app/environment' and '$app/stores' to prevent analytics from being sent in development or on preview servers, ensuring data accuracy.

```svelte
<script>
  import { Analytics } from '@reuters-graphics/graphics-components';
  import { dev } from '$app/environment';
  import { page } from '$app/stores';
</script>

{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
  <Analytics />
{/if}
```

--------------------------------

### Importing and Using a Custom Svelte Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/svelte-components.mdx

This example demonstrates how to define a simple Svelte component named 'Button.svelte' and then import and use it within another Svelte component, 'App.svelte'. It shows how to pass data to the child component via props.

```svelte
<!-- Button.svelte -->
<script>
  let { text = 'Click me' } = $props();
</script>

<button>{text}</button>
```

```svelte
<!-- App.svelte -->
<script>
  import Button from './Button.svelte';
</script>

<main>
  <h1>Welcome to Svelte</h1>
  <Button text="Press here" />
</main>
```

--------------------------------

### Advanced ScrollerVideo with ScrollerBase and Jump Control (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/ScrollerVideo/ScrollerVideo.mdx

This Svelte example showcases advanced integration of ScrollerVideo with ScrollerBase, focusing on controlling video playback based on the scroller's index. The `jumpVideo` function uses `scrollerVideo.setVideoPercentage` to jump to the start (0%) or end (100%) of the video depending on the current `index` of the ScrollerBase. The `onReady` prop is used to call `jumpVideo` once the ScrollerVideo is ready, and `trackScroll` is set to `false` to prevent default scroll-based playback.

```svelte
<script lang="ts">
  import {
    ScrollerVideo,
    ScrollerBase,
    type ScrollerVideoInstance,
  } from '@reuters-graphics/graphics-components';
  import { onDestroy } from 'svelte';

  let scrollerVideo: ScrollerVideoInstance | undefined = $state(undefined);
  let animationFrame = $state(0);
  let index = $state(0); // index for the current step in ScrollerBase

  // If ScrollerBase is on index 0, jump to the start of the video.
  // Otherwise, jump to 1, or 100% (the end), of the video.
  function jumpVideo() {
    if (index === 0) {
      scrollerVideo?.setVideoPercentage(0, {
        jump: false, // Eases the jump
      });
    } else {
      scrollerVideo?.setVideoPercentage(1, {
        jump: false,
      });
    }
  }
</script>

<ScrollerBase bind:index query="div.step-foreground-container">
  <!-- ScrollerVideo as background -->
  {#snippet backgroundSnippet()}
    <!-- Pass `jumpVideo` to `onReady` and set `trackScroll` to `false` -->
    <ScrollerVideo
      bind:scrollerVideo
      src={Tennis}
      height="100lvh"
      trackScroll={false}
      showDebugInfo
      onReady={jumpVideo}
    />
  {/snippet}

  <!-- Simple text foregrounds -->
  {#snippet foregroundSnippet()}
    <div class="step-foreground-container">
      <h3 class="text-center">Index {index}</h3>
    </div>
    <div class="step-foreground-container">
      <h3 class="text-center">Index {index}</h3>
    </div>
  {/snippet}
</ScrollerBase>
```

--------------------------------

### FeaturePhoto Component with ArchieML Integration (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/FeaturePhoto/FeaturePhoto.mdx

Illustrates how to integrate the FeaturePhoto component with content sourced from an ArchieML document. This example shows parsing an ArchieML block object to dynamically populate the `FeaturePhoto` component's props, including `width`, `src`, `altText`, and `caption`.

```svelte
<!-- App.svelte -->
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
  import { assets } from '$app/paths';
</script>

{#each content.blocks as block}
  {#if block.Type === 'text'}
    <!-- ... -->
  {:else if block.type === 'photo'}
    <FeaturePhoto
      width={block.width}
      src={`${assets}/${block.src}`}
      altText={block.altText}
      caption={block.caption}
    />
  {/if}
{/each}
```

--------------------------------

### Optimizing Video with FFmpeg for ScrollerVideo

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/ScrollerVideo/ScrollerVideo.mdx

Provides an example FFmpeg command to optimize video files for web use with the ScrollerVideo component. This includes converting to H.264, setting resolution, frame rate, and other encoding parameters to ensure broad browser compatibility and reduce file size.

```bash
npx ffmpeg -y -i <input_video_src>.mp4 -c:v libx264 -movflags +faststart -crf 24 -r 24 -g 72 -vf scale=720:-1 -profile:v high -preset veryslow -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -an <output_video>.mp4
```

--------------------------------

### Dynamic ProfileCard Rendering with ArchieML Data (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/archieml.mdx

Demonstrates how to dynamically render the ProfileCard component in Svelte using data fetched from an ArchieML JSON file. This example includes type conversions for props like age, birthday, and isGood.

```svelte
<script>
  // These are usually already imported for you
  import { assets } from '$app/paths';
  // Your ArchieML doc
  import content from '$locales/en/content.json';

  // Your component from graphics-components
  import { ProfileCard } from '@reuters-graphics/graphics-components';
</script>

{#each content.blocks as block}
  {#if block.type === 'text'}
    <!-- ... -->
  {:else if block.type === 'profile-card'}
    <ProfileCard
      name={block.name}
      age={parseInt(block.age)}
      img={`${assets}/${block.picture}`}
      birthday={new Date(block.birthday)}
      bio={block.bio}
      isGood={block.isGood === 'true'}
    />
    <!-- ... -->
  {/if}
{/each}
```

--------------------------------

### Passing Data to a Svelte Component via Props

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/svelte-components.mdx

This example shows how to pass data to a Svelte component using props. It specifically demonstrates passing the 'text' prop to a Button component, illustrating how the component renders the provided text.

```svelte
<Button text="Click me!" />
```

```html
<button>Click me!</button>
```

--------------------------------

### Video Component Configuration from ArchieML Data

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Video/Video.mdx

Shows how to dynamically configure the Video component using data parsed from an ArchieML document. This example iterates through blocks, identifies video types, and maps ArchieML properties to Video component props, including converting string booleans to actual booleans using a utility function.

```svelte
<!-- App.svelte -->
<script>
  import { Video } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
</script>

{#each content.blocks as block}
  {#if block.type === 'video'}
    <Video
      ariaDescription={block.ariaDescription}
      src={`${assets}/${block.src}`}
      width={block.width}
      loopVideo={truthy(block.loopVideo)}
      notes={block.notes}
    />
  {/if}
{/each}
```

--------------------------------

### ArchieML Document Structure for InfoBox

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/InfoBox/InfoBox.mdx

Provides an example of an ArchieML document structure that can be used to define content for the InfoBox component. It shows the 'type', 'title', 'text', and 'notes' fields, which correspond to the props used by the InfoBox component in Svelte.

```yaml
# Archie ML doc
[blocks]

type: info-box
title: What you need to know about the war
text: Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.

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.
:end
notes: [Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)
[]
```

--------------------------------

### Integrating Custom Foreground Components with ArchieML (Svelte & YAML)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Scroller/Scroller.mdx

Explains the process of using custom foreground components when content is managed via ArchieML. It involves registering custom foreground components in `App.svelte` and referencing them by name in the ArchieML document. The example shows how to map these references to actual Svelte components during the rendering process.

```svelte
<!-- App.svelte -->
<script>
  import content from '$locales/en/content.json';

  // Background ai2svelte graphics
  import AiMap1 from './ai2svelte/my-map-1.svelte';
  import AiMap2 from './ai2svelte/my-map-2.svelte';
  import AiMap3 from './ai2svelte/my-map-3.svelte';

  // Foreground components, which can be ai2svelte or not.
  import Foreground1 from './ai2svelte/my-foreground-1.svelte';

  // Graphics kit only
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...

  // Background ai2svelte graphics components
  const aiCharts = {
    AiMap1,
    AiMap2,
    AiMap3,
    // Other charts...
  };

  // Foreground components
  const foregroundComponents = {
    Foreground1,
    // Other components...
  };
</script>

<!-- ArchieML doc -->
# ArchieML doc
[blocks]
type: ai-scroller
id: my-map-scroller
foregroundPosition: left
stackBackground: true

# Array of step objects
  [.steps]
    background: AiMap1
    # You can still use a markdown string even if other step/s use a custom foreground component
    foreground: #### Step 1

    Here's where something happend.
    :end
    altText: A map showing the Upper West side in New York City.
    :end

    background: AiMap2
    foreground: Foreground1 # The name of your custom foreground component
    altText: The same map now highlights 98th Street.
    :end
    background: AiMap3
    foreground: #### Step 3

    ... and now there are multiple protests.
    :end
    altText: The same map now highlights three locations near 98th Street where something particulary important happened.
    :end
  []
[]

<!-- Rendering the Scroller component -->
<!-- App.svelte -->
{#each content.blocks as block}
  {#if block.type === 'ai-scroller'}
    <Scroller
      id={block.id}
      backgroundWidth={block.width}
      foregroundPosition={block.foregroundPosition}
      stackBackground={truthy(block.stackBackground)}
      steps={block.steps.map((step) => ({
        background: aiCharts[step.background],
        backgroundProps: { assetsPath: assets || '/' },
        foreground: foregroundComponents[step.foreground] || step.foreground,
        foregroundProps: { assetsPath: assets || '/' },
        altText: step.altText,
      }))}
    />
  {/if}
{/each}

```

```yaml
# ArchieML doc
[blocks]
type: ai-scroller
id: my-map-scroller
foregroundPosition: left
stackBackground: true

# Array of step objects
  [.steps]
    background: AiMap1
    # You can still use a markdown string even if other step/s use a custom foreground component
    foreground: #### Step 1

    Here's where something happend.
    :end
    altText: A map showing the Upper West side in New York City.
    :end

    background: AiMap2
    foreground: Foreground1 # The name of your custom foreground component
    altText: The same map now highlights 98th Street.
    :end
    background: AiMap3
    foreground: #### Step 3

    ... and now there are multiple protests.
    :end
    altText: The same map now highlights three locations near 98th Street where something particulary important happened.
    :end
  []
[]

```

--------------------------------

### Import and Render Lottie Animation in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Lottie/Lottie.mdx

This snippet demonstrates how to import and render a Lottie animation within a Svelte component. It utilizes the '@reuters-graphics/graphics-components' Lottie component and requires appending '?url' to the Lottie file import path for proper handling as a URL. The example shows basic usage with 'src', 'autoplay', and 'showDebugInfo' props.

```svelte
<script lang="ts">
  import { Lottie } from '@reuters-graphics/graphics-components';

  // Import Lottie file
  import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path
</script>

<Lottie src={MyLottie} autoplay={true} showDebugInfo={true} />
```

--------------------------------

### ArchieML Integration with Graphics Components (Svelte)

Source: https://context7.com/reuters-graphics/graphics-components/llms.txt

This example demonstrates a comprehensive integration of various @reuters-graphics/graphics-components within a Svelte application, designed to render content structured using ArchieML. It showcases components like `Article`, `Theme`, `Headline`, `BodyText`, `FeaturePhoto`, `GraphicBlock`, `Scroller`, `SiteHeader`, `SiteFooter`, `SEO`, and `Analytics`, along with custom AI-generated graphics.

```svelte
<script>
  import {
    Article,
    Theme,
    Headline,
    BodyText,
    FeaturePhoto,
    GraphicBlock,
    Scroller,
    SiteHeader,
    SiteFooter,
    SEO,
    Analytics,
  } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
  import { assets } from '$app/paths';
  import { truthy, containerWidth } from '$utils/propValidators';

  // Import ai2svelte graphics
  import MyMap from './ai2svelte/map.svelte';
  const aiCharts = { MyMap };
</script>

<SEO
  baseUrl={import.meta.env.BASE_URL}
  seoTitle={content.seoTitle}
  seoDescription={content.seoDescription}
  shareTitle={content.shareTitle}
  shareDescription={content.shareDescription}
  shareImgPath={`${assets}/${content.shareImgPath}`}
/>

<Analytics />

<Theme base={content.theme || 'light'}>
  <SiteHeader />

  <Article>
    <Headline
      hed={content.headline}
      dek={content.dek}
      section={content.section}
      authors={content.authors}
      publishTime={content.publishTime}
    />

    {#each content.blocks as block}
      {#if block.type === 'text'}
        <BodyText text={block.text} />
      {:else if block.type === 'photo'}
        <FeaturePhoto
          src={`${assets}/${block.src}`}
          altText={block.altText}
          caption={block.caption}
          width={containerWidth(block.width)}
        />
      {:else if block.type === 'ai-graphic'}
        {@const Chart = aiCharts[block.chart]}
        <GraphicBlock
          title={block.title}
          description={block.description}
          notes={block.notes}
          width={containerWidth(block.width)}
          ariaDescription={block.altText}
        >
          <Chart assetsPath={assets || '/'} />
        </GraphicBlock>
      {:else if block.type === 'scroller'}
        <Scroller
          backgroundWidth={containerWidth(block.backgroundWidth)}
          foregroundPosition={block.foregroundPosition}
          stackBackground={truthy(block.stackBackground)}
          steps={block.steps.map((step) => ({
            background: aiCharts[step.background],
            backgroundProps: { assetsPath: assets || '/' },
            foreground: step.foreground,
            altText: step.altText,
          }))}
        />
      {/if}
    {/each}
  </Article>

  <SiteFooter />
</Theme>
```

--------------------------------

### Basic BeforeAfter Component Implementation in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/BeforeAfter/BeforeAfter.mdx

Demonstrates the fundamental usage of the BeforeAfter component in a Svelte application. It requires 'beforeSrc', 'beforeAlt', 'afterSrc', and 'afterAlt' props to display the image comparison. The 'assets' path from '$app/paths' is used for local image paths.

```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."
/>
```

--------------------------------

### Snap Widths for Block Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Block/Block.mdx

Illustrates how to use the 'snap' prop to make the Block container snap to predefined breakpoints as the window resizes, instead of fluidly resizing. This is useful for static graphics that look best at specific widths.

```svelte
<Block width="wider" snap={true}>
  <!-- Contents for this block -->
</Block>
```

--------------------------------

### Basic Svelte Component Usage

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/intro.mdx

Demonstrates how to import and use the BodyText component from @reuters-graphics/graphics-components within a Svelte application. This example shows a simple integration.

```svelte
<script>
  import { BodyText } from '@reuters-graphics/graphics-components';
</script>

<BodyText text={'Hello world!'} />
```

--------------------------------

### Display Reuters Logo in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/ReutersLogo/ReutersLogo.mdx

This snippet demonstrates how to import and use the ReutersLogo component within a Svelte application. It requires the '@reuters-graphics/graphics-components' package to be installed.

```svelte
<script>
  import { ReutersLogo } from '@reuters-graphics/graphics-components';
</script>

<ReutersLogo />
```

--------------------------------

### Import and Use a Svelte Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/using-docs.mdx

Demonstrates the basic syntax for importing and using a Svelte component within your project. This is the simplest way to integrate a component as shown in the introduction of component documentation pages.

```svelte
import MyComponent from './path/to/MyComponent.svelte';

<MyComponent prop1="value1" />
```

--------------------------------

### Apply Custom Styles to BodyText Elements

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/BodyText/BodyText.mdx

Illustrates how to apply custom styles to elements rendered by BodyText. This example shows adding a 'highlight' class to a span for custom styling via SCSS.

```svelte
<BodyText
  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
/>
```

```scss
// global.scss
span.highlight {
  background: palegoldenrod;
  padding: 2px 4px;
}
```

--------------------------------

### Basic Table Implementation

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Table/Table.mdx

Demonstrates the fundamental usage of the Table component by passing a data object. It requires importing the Table component and the data source.

```svelte
<script>
  import { Table } from '@reuters-graphics/graphics-components';

  import data from './data.json'; // Import your data
</script>

<Table {data} />
```

--------------------------------

### Svelte: Use EndNotes with ArchieML Data

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/EndNotes/EndNotes.mdx

This example demonstrates how to integrate the EndNotes component with data fetched from an ArchieML document. It assumes the ArchieML data is parsed into a JSON object and passed to the component.

```svelte
<!-- graphics kit -->
<script>
  import { EndNotes } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
</script>

<EndNotes notes={content.endNotes} />
```

--------------------------------

### Svelte Action Introduction

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/actions/intro.mdx

This snippet demonstrates the basic structure and import statements for Svelte actions within a Storybook environment. It includes meta information and parameters for documentation pages.

```javascript
import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';

<Meta title="Actions/Intro" parameters={{ ...parameters }} />
```

--------------------------------

### FeaturePhoto Component Basic Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/FeaturePhoto/FeaturePhoto.mdx

Demonstrates the fundamental usage of the FeaturePhoto component in a Svelte application. It shows how to import the component and pass essential props like `src`, `altText`, and `caption`. The `assets` import is noted for its use within the graphics kit.

```svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
</script>

<FeaturePhoto
  src={`${assets}/images/myImage.jpg`}
  altText="Some alt text"
  caption="A caption"
/>
```

--------------------------------

### Set Body Background Color in SCSS

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Theme/Theme.mdx

Example of setting the body's background color in SCSS. This is often done in conjunction with the Theme component to ensure the entire page background is styled correctly.

```scss
// global.scss
body {
  background-color: #2e3440;
}
```

--------------------------------

### Mermaid Diagram: Text Align Token Examples

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/styles/tokens/intro.mdx

Illustrates specific text alignment tokens and their corresponding CSS properties. This diagram shows how tokens like 'text-left' translate into CSS rules.

```mermaid
graph LR;
  TD("`**Text align tokens**`")---TA;
  TD---TB;
  TD---TC;
  TA(text-left)-->TX("text-align: left;");
  TB(text-center)-->TY("text-align: center;");
  TC(text-right)-->TZ("text-align: right;");
```

--------------------------------

### Basic SEO Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/SEO/SEO.mdx

Demonstrates the fundamental usage of the SEO component with direct prop values. It requires the '@reuters-graphics/graphics-components' package and accepts props for base URL, page URL, SEO titles and descriptions, social media sharing details, and publication/update times.

```svelte
<script>
  import { SEO } from '@reuters-graphics/graphics-components';
</script>

<SEO
  baseUrl="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps"
  pageUrl={new URL(
    'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/countries/united-kingdom/'
  )}
  seoTitle="A title for Google"
  seoDescription="A description for Google"
  shareTitle="A title for Twitter/Facebook"
  shareDescription="A description for Twitter/Facebook"
  shareImgPath="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
  shareImgAlt="An image showing global COVID infection rates"
  publishTime="2020-09-15T00:00:00.000Z"
  updateTime="2021-01-10T12:30:00.000Z"
  authors={[
    { name: 'Jane Doe', link: 'https://www.reuters.com/authors/jane-doe/' },
    { name: 'John Doe', link: 'https://www.reuters.com/authors/john-doe/' },
  ]}
/>
```

--------------------------------

### Svelte PhotoPack with Smart Default Layouts

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/PhotoPack/PhotoPack.mdx

Demonstrates using the PhotoPack component in Svelte without specifying the 'layouts' prop, enabling automatic responsive layout generation. Assumes 'assets' and 'PhotoPack' are imported.

```svelte
<script>
  import { PhotoPack } from '@reuters-graphics/graphics-components';

  const images = [
    { src: `${assets}/image1.jpg`, altText: 'Photo 1', caption: 'Caption 1' },
    { src: `${assets}/image2.jpg`, altText: 'Photo 2', caption: 'Caption 2' },
    { src: `${assets}/image3.jpg`, altText: 'Photo 3', caption: 'Caption 3' },
    { src: `${assets}/image4.jpg`, altText: 'Photo 4', caption: 'Caption 4' },
  ];
</script>

<!-- No layouts prop = smart defaults! -->
<PhotoPack {images} width="wide" />
```

--------------------------------

### ArchieML Data Structure for GraphicBlock

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/GraphicBlock/GraphicBlock.mdx

An example of an ArchieML document structure used to define content for the GraphicBlock component, particularly when integrating with ai2svelte graphics. It specifies the graphic type, dimensions, title, description, notes, and alternative text.

```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
[]
```

--------------------------------

### Basic InfoBox Usage in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/InfoBox/InfoBox.mdx

Demonstrates the fundamental usage of the InfoBox component in a Svelte application. It shows how to import and render the component with essential props like title, text, and notes. The text prop supports newline characters for formatting.

```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. 

 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/)'}
/>
```

--------------------------------

### Initialize PymChild Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/PymChild/PymChild.mdx

This snippet demonstrates the basic initialization of the PymChild component in Svelte. It imports the component and renders it with a polling interval of 500ms. No external dependencies are required beyond the '@reuters-graphics/graphics-components' library.

```svelte
<script>
  import { PymChild } from '@reuters-graphics/graphics-components';
</script>

<PymChild polling={500} />
```

--------------------------------

### BeforeAfter Component with Text Overlays and Captions using Svelte Snippets

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/BeforeAfter/BeforeAfter.mdx

Illustrates advanced usage of the BeforeAfter component by incorporating text overlays and captions via Svelte snippets. The 'beforeOverlay', 'afterOverlay', and 'caption' snippets allow for custom content, which also serves as ARIA descriptions. Styling is applied using SCSS.

```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>
```

--------------------------------

### Basic Article Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Article/Article.mdx

Demonstrates the fundamental way to include and use the Article component in a Svelte application. It serves as a container for story content.

```svelte
<script>
  import { Article } from '@reuters-graphics/graphics-components';
</script>

<Article>
  <!-- The story content goes here! -->
</Article>
```

--------------------------------

### Play Lottie Animation Segment from ArchieML

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Lottie/Lottie.mdx

Configures the Lottie component to play a specific segment of an animation based on ArchieML data. It parses 'start' and 'end' frames from a nested '.segment' block and uses the 'speed' property for playback control.

```svelte
<script lang="ts">
  import { Lottie } from '@reuters-graphics/graphics-components';

  // Graphics kit only
  import { assets } from '$app/paths'; // 👇 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👇 If using in the graphics kit...
</script>

{#each content.blocks as block}
  <!-- Inside the content.blocks for loop... -->
  {#if block.type == 'lottie'}
    <Lottie
      src={`${assets}/${block.src}`}
      segment={[parseInt(block.segment.start), parseInt(block.segment.end)]}
      showDebugInfo={truthy(block.showDebugInfo)}
      loop={truthy(block.loop)}
      speed={parseInt(block.speed)}
    />
  {/if}
{/each}
```

--------------------------------

### PhotoPack Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/PhotoPack/PhotoPack.mdx

Demonstrates how to use the PhotoPack component in a Svelte application. It shows the import statement and how to pass the `images` and `layouts` arrays as props to the component.

```svelte
<script>
  import { PhotoPack } from '@reuters-graphics/graphics-components';

  /** Array of photo metadata */
  const images = [
    {
      src: 'https://...',
      altText: 'Alt text',
      caption: 'Lorem ipsum. REUTERS/Photog',
      // Optional max-height of images across all layouts
      maxHeight: 800,
    },
    // ...
  ];

  /** Set the number of photos in each row at various breakpoints */
  const layouts = [
    {
      breakpoint: 450, // Applies to containers wider than 450px
      rows: [1, 2, 1], // Number of photos in each row
    },
    // Another layout for containers wider than 750px
    { breakpoint: 750, rows: [1, 3] },
  ];
</script>

<PhotoPack {images} {layouts} />
```

--------------------------------

### Basic Block Component Usage

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Block/Block.mdx

Demonstrates the fundamental usage of the Block component. It imports the Block from '@reuters-graphics/graphics-components' and renders it as a container for content. This is the most common way to use the component.

```svelte
<script>
  import { Block } from '@reuters-graphics/graphics-components';
</script>

<Block>
  <!-- Contents for this block goes here -->
</Block>
```

--------------------------------

### Video Component with Advanced Autoplay Settings

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Video/Video.mdx

Illustrates advanced autoplay configurations for the Video component. It demonstrates setting a custom `playVideoThreshold` to control when the video starts playing based on viewport visibility and disabling the `playVideoWhenInView` prop to force playback on page load.

```svelte
<script>
  import { Video } from '@reuters-graphics/graphics-components';
</script>

<Video
  ariaDescription="Required description of your video for screen readers."
  src="https://..."
  loopVideo={true}
  playVideoThreshold={0.9}
  notes="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
/>
```

--------------------------------

### Implement Spinner Component in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Spinner/Spinner.mdx

This snippet demonstrates how to use the Spinner component within a Svelte application. It conditionally renders the spinner based on a loading state variable, providing visual feedback during data fetching or processing. Ensure the '@reuters-graphics/graphics-components' library is installed.

```svelte
<script>
  import { Spinner } from '@reuters-graphics/graphics-components';

  let somethingsLoading = true;
</script>

{#if somethingsLoading}
  <Spinner />
{:else}
  <p>The real deal is here.</p>
{/if}
```

--------------------------------

### ProfileCard Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/archieml.mdx

Demonstrates how to use the ProfileCard component directly with hardcoded props in a Svelte environment. This serves as a baseline for understanding component structure and expected data types.

```svelte
<script>
  import { ProfileCard } from '@reuters-graphics/graphics-components';
</script>

<ProfileCard
  name="Kitty"
  age={2}
  img="https://cats.com/cat1.jpg"
  birthday={new Date('2020-09-25')}
  bio="Some notes.\n\nWith multiple paragraphs."
  isGood={true}
/>
```

--------------------------------

### ArchieML Data Structure for SEO

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/SEO/SEO.mdx

An example of an ArchieML document structure defining content for SEO and social media sharing. This YAML format outlines fields like 'slug', 'seoTitle', 'seoDescription', 'shareTitle', 'shareDescription', 'shareImgPath', and 'shareImgAlt', which can be directly mapped to the SEO component's props.

```yaml
# ArchieML doc
slug: ROOT-SLUG/WILD
seoTitle: Page title for search
seoDescription: Page description for search
shareTitle: Page title for social media
shareDescription: Page description for social media
shareImgPath: images/reuters-graphics.jpg
shareImgAlt: Alt text for share image.
```

--------------------------------

### Render InlineAd Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/AdSlot/InlineAd.mdx

This example shows how to conditionally render the InlineAd component within a Svelte application. It iterates through content blocks and displays an inline ad only if the block type is 'inline-ad' and the component is not in an embedded context. This ensures ads are displayed appropriately based on the page's content and environment.

```svelte
<!-- App.svelte -->
<script>
  import { InlineAd } from '@reuters-graphics/graphics-components';

  let { embedded = false } = $props();
</script>

{#each content.blocks as block}
  <!-- ... -->

  {#if block.Type === 'inline-ad'}
    <!-- Check if in an embed context! -->
    {#if !embedded}
      <InlineAd />
    {/if}
  {/if}

  <!-- ... -->
{/each}
```

--------------------------------

### Basic Scroller Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Scroller/Scroller.mdx

Demonstrates how to use the Scroller component with custom background components and defined steps. Each step can have its own background component, props, foreground content, and alt text.

```svelte
<script>
  import { Scroller } from '@reuters-graphics/graphics-components';

  import MyBackground from './MyBackground.svelte'; // Your own background component

  // Array of step objects that define the steps in your scroller.
  const steps = [
    {
      background: MyBackground,
      backgroundProps: { colour: 'red' }, // Optional props for your background component
      foreground: '#### Step 1\n\nLorem ipsum red',
      altText: 'Red background',
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'blue' },
      foreground: '#### Step 2\n\nLorem ipsum blue',
      altText: 'Blue background',
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'green' },
      foreground: '#### Step 3\n\nLorem ipsum green',
      altText: 'Green background',
    },
  ];
</script>

<Scroller {steps} foregroundPosition="middle" backgroundWidth="fluid" />

```

--------------------------------

### Format Table Column Values with fieldFormatters in Svelte

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Table/Table.mdx

This snippet demonstrates how to use the `fieldFormatters` option within a Svelte Table component. It takes an object where keys match column names and values are formatting functions. The example formats 'Net worth (in billions)' to include a '$' sign and one decimal place.

```svelte
<script lang="ts">
  const fieldFormatters = {
    // The key must match the column name in the data exactly
    'Net worth (in billions)': (v) => '$' + v.toFixed(1),
  };
</script>

<Table
  data={yourData}
  {fieldFormatters}
  sortable={true}
  sortField="Net worth (in billions)"
  sortDirection="descending"
  title="The Richest Women in the World"
  source="Source: Forbes"
/>
```

--------------------------------

### Skipping Snap Widths in Block Component

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Block/Block.mdx

Demonstrates how to skip specific block widths when using the 'snap' prop by adding a 'skip-{block width class}' to the Block component. This allows for more granular control over the snapping behavior. Note that 'widest' and 'fluid' widths are always fluid.

```svelte
<!-- Will skip wide and go straight to normal column width on resize. -->
<Block width="wider" snap={true} class="skip-wide">
  <!-- Contents for this block -->
</Block>
```

--------------------------------

### Integrate ScrollerVideo with ScrollerBase (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/ScrollerVideo/ScrollerVideo.mdx

Demonstrates how to use the ScrollerVideo component within ScrollerBase to create a scrolling foreground effect over a video. It requires setting `trackScroll` to `false` and binding `progress` from ScrollerBase to `videoPercentage` in ScrollerVideo. This setup allows for custom HTML or components to act as foreground content that scrolls independently.

```svelte
<script lang="ts">
  import {
    ScrollerVideo,
    ScrollerBase,
  } from '@reuters-graphics/graphics-components';

  // Pass `progress` as `videoPercentage` to ScrollerVideo
  let progress = $state(0);
</script>

<ScrollerBase bind:progress query="div.step-foreground-container">
  {#snippet backgroundSnippet()}
    <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
    <ScrollerVideo
      src="my-video.mp4"
      height="100lvh"
      videoPercentage={Math.min(1, Math.max(progress, 0))}
      trackScroll={false}
      transitionSpeed={20}
    />
  {/snippet}
  {#snippet foregroundSnippet()}
    <!-- Add custom foreground HTML or component -->
    <div class="step-foreground-container">
      <h3 class="text-center">Step 1</h3>
    </div>
    <div class="step-foreground-container">
      <h3 class="text-center">Step 2</h3>
    </div>
    <div class="step-foreground-container">
      <h3 class="text-center">Step 3</h3>
    </div>
  {/snippet}
</ScrollerBase>

<style lang="scss">
  .step-foreground-container {
    height: 100lvh;
    width: 50%;
    padding: 1em;
    margin: auto;

    h3 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: white;
    }
  }
</style>
```

--------------------------------

### Basic SiteHeader Implementation (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/SiteHeader/SiteHeader.mdx

Demonstrates the fundamental usage of the SiteHeader component within a Svelte application. It requires importing the component from '@reuters-graphics/graphics-components'.

```svelte
<script>
  import { SiteHeader } from '@reuters-graphics/graphics-components';
</script>

<SiteHeader />
```

--------------------------------

### Basic Byline Component Usage (Svelte)

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Byline/Byline.mdx

Demonstrates the basic usage of the Byline component with a list of authors and publish/update times. This component is part of the '@reuters-graphics/graphics-components' library.

```svelte
<script>
  import { Byline } from '@reuters-graphics/graphics-components';
</script>

<Byline
  authors={[
    'Dea Bankova',
    'Prasanta Kumar Dutta',
    'Anurag Rao',
    'Mariano Zafra',
  ]}
  publishTime="2021-09-12T00:00:00.000Z"
  updateTime="2021-09-12T12:57:00.000Z"
/>
```

--------------------------------

### Video Component with Custom Text Snippet for Notes

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Video/Video.mdx

Demonstrates how to use Svelte snippets to provide custom HTML content for the video's notes. This allows for more complex styling and structure within the notes section compared to plain text. The example also includes SCSS mixins for styling the notes.

```svelte
<script>
  import { Video } from '@reuters-graphics/graphics-components';
</script>

<Video
  src="https://..."
  ariaDescription="Required description of your video for screen readers."
  title="Title for your video"
  description="Description for your video"
>
  <!-- Custom notes snippet -->
  {#snippet notes()}
    <aside>
      <p class="notes">Custom-styled notes for the video.</p>
    </aside>
  {/snippet}
</Video>

<style lang="scss">
  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;

  p.notes {
    @include mixins.body-note;
  }
</style>
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/reuters-graphics/graphics-components/blob/main/src/docs/guides/using-docs.mdx

Shows how to configure Storybook's Meta object for a component's documentation. This includes setting the title for navigation and passing additional parameters, such as those defined in '../utils/docsPage.js'.

```javascript
import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';

<Meta title="Guides/Using these docs" parameters={{ ...parameters }} />
```