@reuters-graphics/graphics-components 1.0.30 → 1.1.1

package/dist/components/Article/Article.stories.svelte

@@ -0,0 +1,122 @@
+<script>import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+import componentDocs from "./stories/docs/component.md?raw";
+import customWellWidthsDocs from "./stories/docs/customWellWidths.md?raw";
+import Article from "./Article.svelte";
+import Block from "../Block/Block.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../docs/utils/withParams.js";
+</script>
+
+<Meta
+  title="Layout/Article"
+  component="{Article}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <Article {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    embedded: false,
+    id: '',
+  }}"
+>
+  <Article id="article-story-basic">
+    <div class="demo-container">
+      <div class="background-label">Article container</div>
+      <div class="padding-label"><span>⇤</span>15px padding</div>
+    </div>
+  </Article>
+</Story>
+
+<Story name="Custom columns" {...withStoryDocs(customWellWidthsDocs)}>
+  <Article id="article-column-widths-demo">
+    <div class="article-boundaries">
+      <Block id="section-demo" width="narrower">narrower</Block>
+      <Block id="section-demo" width="narrow">narrow</Block>
+      <Block id="section-demo">normal</Block>
+      <Block id="section-demo" width="wide">wide</Block>
+      <Block id="section-demo" width="wider">wider</Block>
+      <Block id="section-demo" width="widest">widest</Block>
+      <Block id="section-demo" width="fluid">fluid</Block>
+    </div>
+  </Article>
+  <Article
+    id="article-column-widths-demo"
+    columnWidths="{{
+      narrower: 310,
+      narrow: 450,
+      normal: 550,
+      wide: 675,
+      wider: 1400,
+    }}"
+  >
+    <div class="article-boundaries custom">
+      <Block id="section-demo" width="narrower">narrower*</Block>
+      <Block id="section-demo" width="narrow">narrow*</Block>
+      <Block id="section-demo">normal*</Block>
+      <Block id="section-demo" width="wide">wide*</Block>
+      <Block id="section-demo" width="wider">wider*</Block>
+      <Block id="section-demo" width="widest">widest</Block>
+      <Block id="section-demo" width="fluid">fluid</Block>
+    </div>
+  </Article>
+</Story>
+
+<style>:global(#article-story-basic, #article-column-widths-demo) {
+  width: calc(100% + 30px);
+  margin-left: -15px;
+}
+
+:global(#article-column-widths-demo) {
+  background-color: #ddd;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+:global(#article-column-widths-demo .article-boundaries) {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #bbb;
+}
+
+:global(#article-column-widths-demo .article-boundaries.custom div.article-block) {
+  background: rgb(211, 132, 123);
+}
+
+:global(#article-column-widths-demo div.article-block) {
+  height: 300px;
+  background: #81a1c1;
+  margin-bottom: 2px;
+  height: 50px;
+  padding-left: 3px;
+  color: white;
+  font-size: 12px;
+}
+
+div.demo-container {
+  height: 300px;
+  background: #ccc;
+  position: relative;
+  font-size: 12px;
+}
+div.demo-container .background-label {
+  position: absolute;
+  bottom: 0;
+  left: 5px;
+  color: #666;
+}
+div.demo-container .padding-label {
+  position: absolute;
+  top: 0;
+  left: -17px;
+}
+div.demo-container .padding-label span {
+  font-size: 18px;
+}</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ArticleProps = typeof __propDef.props;
+export type ArticleEvents = typeof __propDef.events;
+export type ArticleSlots = typeof __propDef.slots;
+export default class Article extends SvelteComponent<ArticleProps, ArticleEvents, ArticleSlots> {
+}
+export {};

package/dist/components/Article/Article.svelte

@@ -1,35 +1,26 @@
 <!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->
-<script>/** Set to true for embeddables. */
-export let embedded = false;
-/** Add an id to the article tag to target it with custom CSS. */
+<script>export let embedded = false;
 export let id = null;
-/** ARIA role of the article */
 export let role = null;
-/** Set custom widths for the normal, wide and wider column dimensions */
 export let columnWidths = {
-    narrower: 330,
-    narrow: 510,
-    normal: 660,
-    wide: 930,
-    wider: 1200,
+  narrower: 330,
+  narrow: 510,
+  normal: 660,
+  wide: 930,
+  wider: 1200
 };
-import cssVariables from '../../actions/cssVariables/index.js';
+import cssVariables from "../../actions/cssVariables/index.js";
 $: columnWidthVars = {
-    'narrower-column-width': columnWidths.narrower + 'px',
-    'narrow-column-width': columnWidths.narrow + 'px',
-    'normal-column-width': columnWidths.normal + 'px',
-    'wide-column-width': columnWidths.wide + 'px',
-    'wider-column-width': columnWidths.wider + 'px',
+  "narrower-column-width": columnWidths.narrower + "px",
+  "narrow-column-width": columnWidths.narrow + "px",
+  "normal-column-width": columnWidths.normal + "px",
+  "wide-column-width": columnWidths.wide + "px",
+  "wider-column-width": columnWidths.wider + "px"
 };
 </script>
 
 <main>
-  <article
-    id="{id}"
-    class:embedded
-    role="{role}"
-    use:cssVariables="{columnWidthVars}"
-  >
+  <article {id} class:embedded {role} use:cssVariables="{columnWidthVars}">
     <!-- Article content -->
     <slot />
   </article>

package/dist/{@types/components → components}/Article/Article.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** Set to true for embeddables. */ embedded?: boolean;
@@ -23,11 +23,13 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ArticleProps = typeof __propDef.props;
 export type ArticleEvents = typeof __propDef.events;
 export type ArticleSlots = typeof __propDef.slots;
 /** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) */
-export default class Article extends SvelteComponentTyped<ArticleProps, ArticleEvents, ArticleSlots> {
+export default class Article extends SvelteComponent<ArticleProps, ArticleEvents, ArticleSlots> {
 }
 export {};

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

@@ -0,0 +1,13 @@
+The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
+
+> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
+
+```svelte
+<script>
+  import { Article } from '@reuters-graphics/graphics-components';
+</script>
+
+<Article>
+  <!-- The story stuff goes in here! -->
+</Article>
+```

package/dist/components/Article/stories/docs/customWellWidths.md

@@ -0,0 +1,87 @@
+The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
+
+- `narrower` A bit narrower than narrow...
+- `narrow` A bit narrower than the text column
+- `normal` **The main width of the body text column**
+- `wide` A bit wider than the text column
+- `wider` A bit wider than wide...
+- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
+- `fluid` Fully edge-to-edge
+
+When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
+
+> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
+
+```svelte
+<Article
+  columnWidths="{{
+    narrower: 310,
+    narrow: 450,
+    normal: 550,
+    wide: 675,
+    wider: 1400,
+  }}"
+>
+  <Block width="narrower" />
+  <Block width="narrow" />
+  <Block width="normal" />
+  <Block width="wide" />
+  <Block width="wider" />
+  <Block width="widest" />
+  <Block width="fluid" />
+</Article>
+```
+
+If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
+
+```svelte
+<div class="my-special-container">
+  <!-- Stuffs... -->
+</div>
+
+<style lang="scss">
+  div.my-special-container {
+    max-width: var(--wide-column-width);
+  }
+</style>
+```
+
+... or you can make your component entirely configurable within the article well doing something like this:
+
+```svelte
+<script>
+  export let width = 'normal';
+</script>
+
+<div class="my-special-container {width}">
+  <!-- Stuffs... -->
+</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-left: -15px;
+      max-width: none;
+    }
+  }
+</style>
+```
+
+Here's an example of how custom\* `columnWidths` can be used to change the article well columns:

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

@@ -0,0 +1,116 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import withOverlaysDocs from './stories/docs/withOverlays.md?raw';
+  // @ts-ignore raw
+  import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';
+
+  import BeforeAfter from './BeforeAfter.svelte';
+
+  // @ts-ignore raw
+  import beforeImg from './stories/myrne-before.jpg';
+  // @ts-ignore raw
+  import afterImg from './stories/myrne-after.jpg';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      handleColour: { control: 'color' },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
+
+<Template let:args>
+  <BeforeAfter {...args} />
+</Template>
+
+<Story
+  name="Default"
+  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 overlays" {...withStoryDocs(withOverlaysDocs)}>
+  <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."
+  >
+    <div slot="beforeOverlay" 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>
+    <div slot="afterOverlay" 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>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  </BeforeAfter>
+
+  <style>.overlay {
+  background: rgba(0, 0, 0, 0.45);
+  max-width: 350px;
+}
+.overlay.after {
+  text-align: right;
+}
+.overlay p {
+  color: #ffffff;
+}</style>
+</Story>
+
+<Story name="ARIA descriptions" {...withStoryDocs(ariaDescriptionsDocs)}>
+  <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."
+  >
+    <div let:description="{id}" slot="beforeOverlay" class="overlay p-3">
+      <p class="body-caption" {id}>
+        On July 7, 2020, the base contained only a few transport vehicles.
+      </p>
+    </div>
+    <div let:description="{id}" slot="afterOverlay" class="overlay p-3">
+      <!-- 👇 id can also be used on an element containing multiple text elements -->
+      <div {id}>
+        <p class="body-caption">
+          But by October, tanks and artillery could be seen.
+        </p>
+        <p class="body-caption">
+          In total, over 50 pieces of heavy machinery and 200 personnel are now
+          based here.
+        </p>
+      </div>
+    </div>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  </BeforeAfter>
+  <style>div.overlay {
+  max-width: 250px;
+  background: rgba(0, 0, 0, 0.45);
+}
+div.overlay p {
+  color: #ffffff;
+}</style>
+</Story>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  BeforeAfterProps */
+/** @typedef {typeof __propDef.events}  BeforeAfterEvents */
+/** @typedef {typeof __propDef.slots}  BeforeAfterSlots */
+export default class BeforeAfter extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BeforeAfterProps = typeof __propDef.props;
+export type BeforeAfterEvents = typeof __propDef.events;
+export type BeforeAfterSlots = 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 {};