@reuters-graphics/graphics-components 3.0.25 → 3.0.27

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -1,66 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import BeforeAfter from './BeforeAfter.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Multimedia/BeforeAfter',
-    component: BeforeAfter,
-    argTypes: {
-      handleColour: { control: 'color' },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  });
-</script>
-
-<script>
-  import beforeImg from './images/myrne-before.jpg';
-  import afterImg from './images/myrne-after.jpg';
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    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.',
-  }}
-/>
-
-<Story name="With text" exportName="WithText">
-  <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."
-  >
-    {#snippet beforeOverlay()}
-      <div class="overlay p-3 before">
-        <p class="h4 font-bold">July 7, 2020</p>
-        <p class="body-note">Initially, this site was far smaller.</p>
-      </div>
-    {/snippet}
-    {#snippet afterOverlay()}
-      <div class="overlay p-3 after">
-        <p class="h4 font-bold">Oct. 20, 2020</p>
-        <p class="body-note">But then forces built up.</p>
-      </div>
-    {/snippet}
-    {#snippet caption()}
-      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
-    {/snippet}
-  </BeforeAfter>
-
-  <style>.overlay {
-  background: rgba(0, 0, 0, 0.45);
-  max-width: 350px;
-}
-.overlay p {
-  color: #ffffff;
-}</style>
-</Story>

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

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

package/dist/components/Block/Block.mdx

@@ -1,99 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-
-import * as BlockStories from './Block.stories.svelte';
-
-<Meta of={BlockStories} />
-
-# Block
-
-The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece.
-
-Blocks are stacked vertically within the well created by the [Article](./?path=/docs/components-page-layout-article--docs) component. They can have different widths on larger screens depending on the `width` prop.
-
-> 📌 Many of our other components already use the `Block` component internally. You'll usually only need to use it yourself if you're making something custom.
-
-```svelte
-<script>
-  import { Block } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block>
-  <!-- Contents for this block goes here -->
-</Block>
-```
-
-<Canvas of={BlockStories.Demo} />
-
-## Custom layouts
-
-Our article well is designed to provide a basic responsive layout for you, but it also lets you customise.
-
-The radical but easiest way to do this is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
-
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
-
-```svelte
-<Block width="fluid">
-  <div class="my-radical-container">
-    <!-- Now, you have full control over layout! -->
-  </div>
-</Block>
-```
-
-<Canvas of={BlockStories.CustomLayout} />
-
-## Snap widths
-
-Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
-
-You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
-
-```svelte
-<Block width="wider" snap={true}>
-  <!-- Contents for this block -->
-</Block>
-```
-
-<Canvas of={BlockStories.SnapWidthsBasic} />
-
-If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
-
-> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
-
-```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>
-```
-
-This is probably easier to see in action than explain in words, so [resize the demo](./?path=/docs/components-page-layout-block--snap-skip-widths) to get a better picture of how it all works.
-
-## Using with custom column widths
-
-Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the [Article](./?path=/docs/components-page-layout-article--docs) component (**rare!**), you need to do a littie work to use this functionality.
-
-Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Then define a few SCSS variables corresponding to your custom column widths, and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
-
-```svelte
-<Block width="wider" snap={true} class="custom-blocks">
-  <!-- Contents for this block -->
-</Block>
-
-<style lang="scss">
-  // Define custom column widths
-  $column-width-narrower: 310px;
-  $column-width-narrow: 450px;
-  $column-width-normal: 600px;
-  $column-width-wide: 860px;
-  $column-width-wider: 1400px;
-
-  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
-
-  :global {
-    div.custom-blocks {
-      @include mixins.block-snap-widths; // Use the `block-snap-widths` mixin
-    }
-  }
-</style>
-```

package/dist/components/Block/Block.stories.svelte

@@ -1,181 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Block from './Block.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Page layout/Block',
-    component: Block,
-    tags: ['autodocs'],
-    argTypes: {
-      width: {
-        control: 'select',
-        options: [
-          'narrower',
-          'narrow',
-          'normal',
-          'wide',
-          'wider',
-          'widest',
-          'fluid',
-        ],
-      },
-    },
-  });
-</script>
-
-<script>
-  import Article from '../Article/Article.svelte';
-</script>
-
-<Story name="Demo">
-  <Article id="block-demo-article">
-    <div class="article-boundaries">
-      <div class="label">Article</div>
-      <Block>
-        <div class="label">Block</div>
-      </Block>
-    </div>
-  </Article>
-</Story>
-
-<Story name="Custom layout" exportName="CustomLayout">
-  <Block width="fluid">
-    <!-- Enter bootstrap grid! -->
-    <div id="block-flex-example">
-      <div class="row">
-        <div class="col">Column</div>
-        <div class="col-6">Column</div>
-        <div class="col">Column</div>
-      </div>
-      <div class="row">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-      </div>
-    </div>
-  </Block>
-</Story>
-
-<Story name="Snap widths" exportName="SnapWidthsBasic">
-  <Article id="block-demo-article">
-    <div class="article-boundaries">
-      <div class="label">Article</div>
-      <h4>snap widths</h4>
-      <Block snap={true}>
-        <div class="label">Block</div>
-      </Block>
-    </div>
-  </Article>
-</Story>
-
-<Story name="Snap and skip widths" exportName="SnapSkipWidths">
-  <Article id="block-demo-article">
-    <div class="article-boundaries">
-      <div class="label">Article</div>
-      <h4>Regular layout</h4>
-
-      <Block width="narrower" snap={true} class="block-snap-widths-demo">
-        narrower
-      </Block>
-      <Block width="narrow" snap={true} class="block-snap-widths-demo">
-        narrow
-      </Block>
-      <Block width="normal" snap={true} class="block-snap-widths-demo">
-        normal
-      </Block>
-      <Block width="wide" snap={true} class="block-snap-widths-demo">
-        wide
-      </Block>
-      <Block width="wider" snap={true} class="block-snap-widths-demo">
-        wider
-      </Block>
-
-      <h4>with snap and skip</h4>
-      <Block width="narrower" snap={true} class="block-snap-widths-demo even">
-        narrower
-      </Block>
-      <Block width="narrow" snap={true} class="block-snap-widths-demo even">
-        narrow
-      </Block>
-      <Block
-        width="normal"
-        snap={true}
-        class="block-snap-widths-demo even skip-narrow"
-      >
-        normal.skip-narrow
-      </Block>
-      <Block
-        width="wide"
-        snap={true}
-        class="block-snap-widths-demo even skip-normal skip-narrow"
-      >
-        wide.skip-normal.skip-narrow
-      </Block>
-      <Block
-        width="wider"
-        snap={true}
-        class="block-snap-widths-demo even skip-wide"
-      >
-        wider.skip-wide
-      </Block>
-    </div>
-  </Article>
-</Story>
-
-<style>h4 {
-  text-align: center;
-}
-
-:global(#block-demo-article) {
-  background-color: #ddd;
-  position: relative;
-  width: calc(100% + 30px);
-  margin-inline-start: -15px;
-}
-
-:global(#block-demo-article .article-boundaries) {
-  padding: 0 0 18px;
-  width: 100%;
-  height: 100%;
-  background-color: #bbb;
-}
-
-:global(#block-demo-article div.article-block) {
-  height: 100px;
-  background: #81a1c1;
-}
-
-:global(#block-demo-article div.article-block.block-snap-widths-demo) {
-  margin-block-end: 2px;
-  height: 40px;
-  font-size: 11px;
-}
-
-:global(#block-demo-article div.article-block.block-snap-widths-demo.even) {
-  background: rgb(211, 132, 123);
-}
-
-:global(#block-demo-article .label,
-    #block-demo-article div.article-block.block-snap-widths-demo) {
-  padding-inline-start: 3px;
-  color: white;
-  font-weight: 500;
-}
-
-div#block-flex-example {
-  padding: 25px 0;
-}
-div#block-flex-example div.row {
-  display: flex;
-}
-div#block-flex-example div.row > div {
-  background-color: rgb(211, 132, 123);
-  border: 1px solid white;
-  border-radius: 4px;
-  padding: 20px;
-  color: white;
-  text-align: center;
-  flex-grow: 1;
-}
-div#block-flex-example div.row:first-child div {
-  background: #81a1c1;
-}</style>

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

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

package/dist/components/BodyText/BodyText.mdx

@@ -1,115 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-
-import * as BodyTextStories from './BodyText.stories.svelte';
-
-<Meta of={BodyTextStories} />
-
-# BodyText
-
-The `BodyText` component creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, links, blockquotes and other markdown-supported elements.
-
-```svelte
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-
-  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
-  
-Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
-
-- Steak
-- [Pork chop](https://www.google.com)
-- Fillet
-  
-Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
-</script>
-
-<BodyText text={markdownText} />
-```
-
-<Canvas of={BodyTextStories.Demo} />
-
-## Using with ArchieML docs
-
-With the graphics kit, you'll likely get your text value from an ArchieML doc...
-
-```yaml
-# ArchieML doc
-[blocks]
-
-type: text
-text: Bacon ipsum ...
-
-... etc.
-:end
-
-[]
-```
-
-... which you'll parse out of a ArchieML block object before passing to the `BodyText` component.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-  import content from '$locales/en/content.json';
-</script>
-
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-    <BodyText text={block.text} />
-  {/if}
-{/each}
-```
-
-<Canvas of={BodyTextStories.Demo} />
-
-## Styling text
-
-Styles are built in for many text elements created by `BodyText`, including headings, ordered and unordered lists, links, blockquotes and even drop caps (using a `"drop-cap"` classed span).
-
-```svelte
-<BodyText
-  text="<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola ..."
-/>
-```
-
-<Canvas of={BodyTextStories.TypographySample} />
-
-### Custom styles
-
-To add your own styling, you can write styles in a global SCSS stylesheet:
-
-```svelte
-<BodyText
-  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
-/>
-```
-
-```scss
-// global.scss
-span.highlight {
-  background: palegoldenrod;
-  padding: 2px 4px;
-}
-```
-
-<Canvas of={BodyTextStories.CustomStyles} />
-
-If you want to make sure styles for one portion of text don't apply other parts of the page, add a `class` to BodyText to use as an additional selector.
-
-```svelte highlight=2
-<BodyText
-  class="my-special-text-block"
-  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
-/>
-```
-
-```scss
-// global.scss
-.my-special-text-block {
-  span.highlight {
-    background: palegoldenrod;
-    padding: 2px 4px;
-  }
-}
-```

package/dist/components/BodyText/BodyText.stories.svelte

@@ -1,100 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import BodyText from './BodyText.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Text elements/BodyText',
-    component: BodyText,
-  });
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
-  
-  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
-
-  - Steak
-  - [Pork chop](https://www.google.com)
-  - Fillet
-  
-  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
-  }}
-/>
-
-<Story
-  name="Typography sample"
-  exportName="TypographySample"
-  tags={['!autodocs', '!dev']}
-  args={{
-    class: 'body-text-typography-example-story',
-    text: `<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
-
-## Biltong turducken ground round kevin
-
-Pig est irure buffalo ullamco. Sunt beef ribs tri-tip, chislic officia sint dolor. Spare ribs drumstick ground round, irure duis cillum id chicken est ipsum ut. 
-
-Qui cupidatat chislic buffalo consequat deserunt. 
-
-Andouille sint shankle quis velit nostrud chislic meatloaf culpa labore corned beef chuck spare ribs. Filet mignon eu shankle in, meatloaf ut dolor ham hock ut.
-
-### Venison shoulder ham hock ham leberkas flank beef ribs fatback, jerky meatball ham hock
-  
-Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. Veniam laboris sunt chislic. Aute doner porchetta nulla, tongue venison ad ex in do.
-
-- Steak
-    - Capicola 
-- [Pork chop](https://www.google.com)
-- Fillet landjaeger commodo
-
-Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.
-
-Minim id buffalo dolore ad, **boudin chicken laboris** excepteur qui eiusmod. 
-
-#### Jerky prosciutto burgdoggen
-
-Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequat proident velit. Jerky meatball pig nulla irure laboris fatback et rump ut dolore.
-
-Biltong enim consequat pork chop, flank ea.
-
-> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
-> > Ronald McDonald
-
-Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
-
-##### Venison pork chop
-
-Alcatra bacon mollit boudin. Capicola ut tongue biltong, cow cillum pariatur sausage.
-
-1. Minim ribeye
-2. Prosciutto laborum
-3. Salami doner irure
-
-Consectetur ribeye consequat pork capicola. T-bone ad laborum beef ribs picanha.
-
-###### Alcatra bacon mollit boudin
-
-Tempor tail doner chicken incididunt beef ribs. Ad ullamco in cupim venison. Leberkas rump ullamco adipisicing, laboris excepteur voluptate.
-
-Ham hock id porchetta elit. Sint spare ribs aute buffalo.
-
-<p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
-`,
-  }}
-/>
-
-<Story
-  name="Custom styles"
-  exportName="CustomStyles"
-  tags={['!autodocs', '!dev']}
-  args={{
-    class: 'body-text-custom-styles-story',
-    text: `Venison shoulder <span class="highlight">ham hock</span> ham leberkas.`,
-  }}
-/>
-
-<style>:global(.body-text-custom-styles-story span.highlight) {
-  background: palegoldenrod;
-  padding: 2px 4px;
-}</style>

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

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