From a09b510dc2472dbee70382ee6adbeac5f6847db3 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sun, 14 Aug 2022 20:00:21 +0100
Subject: [PATCH] buncha stuff

---
 .../YourComponent/YourComponent.svelte        |  16 +-
 .../DatawrapperChart.stories.svelte           |  15 +-
 .../DatawrapperChart/DatawrapperChart.svelte  |  57 ++++---
 .../stories/docs/withChatter.md               |   9 +-
 .../GraphicBlock/GraphicBlock.stories.svelte  |  82 +++++++++++
 .../GraphicBlock/GraphicBlock.svelte          | 111 ++++++++++++++
 .../GraphicBlockTextWrapper.svelte            |  15 ++
 .../GraphicBlock/stories/docs/component.md    |  21 +++
 .../GraphicBlock/stories/docs/customText.md   |  11 ++
 .../GraphicBlock/stories/placeholder.png      | Bin 0 -> 2334 bytes
 src/components/Headline/Headline.svelte       | 139 ++++++++++++------
 .../SiteFooter/Referrals/Referrals.svelte     |   2 +
 .../SiteFooter/Referrals/index.svelte         |   4 +
 .../SiteFooter/SiteFooter.stories.svelte      |   3 +-
 src/components/SiteFooter/SiteFooter.svelte   |  11 +-
 .../NavBar/NavDropdown/SectionDropdown.svelte |   2 +-
 .../SiteHeader/SiteHeader.stories.svelte      |   4 +-
 src/index.js                                  |   5 +-
 src/scss/_mixins.scss                         |   1 +
 src/scss/bootstrap/_main.scss                 |  20 +--
 src/scss/colours/thematic/_nord.scss          |  40 +++++
 src/scss/colours/thematic/_tr.scss            |  27 ++++
 src/scss/components/_graphic.scss             |  41 ------
 src/scss/main.scss                            |   1 -
 src/scss/mixins/_body-text.scss               |  12 +-
 src/scss/mixins/_graphic.scss                 |  64 ++++++++
 src/scss/mixins/_note-text.scss               |   1 +
 27 files changed, 561 insertions(+), 153 deletions(-)
 create mode 100644 src/components/GraphicBlock/GraphicBlock.stories.svelte
 create mode 100644 src/components/GraphicBlock/GraphicBlock.svelte
 create mode 100644 src/components/GraphicBlock/GraphicBlockTextWrapper.svelte
 create mode 100644 src/components/GraphicBlock/stories/docs/component.md
 create mode 100644 src/components/GraphicBlock/stories/docs/customText.md
 create mode 100644 src/components/GraphicBlock/stories/placeholder.png
 create mode 100644 src/scss/colours/thematic/_nord.scss
 create mode 100644 src/scss/colours/thematic/_tr.scss
 delete mode 100644 src/scss/components/_graphic.scss
 create mode 100644 src/scss/mixins/_graphic.scss

diff --git a/bin/newComponent/template/YourComponent/YourComponent.svelte b/bin/newComponent/template/YourComponent/YourComponent.svelte
index 25e68616..469e0f07 100644
--- a/bin/newComponent/template/YourComponent/YourComponent.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.svelte
@@ -21,23 +21,23 @@
   
   /** Width of the component within the text well. */
   export let width: ContainerWidth = 'normal';
+
+  import Block from '../../Block/Block.svelte';
 </script>
 
-<section class="photo {width}">
+<Block {width} cls="photo">
   <div
     style:background-image={`url(${src})`}
     style:height={`${height}px`}
   />
   <p class="visually-hidden">{altText}</p>
-</section>
+</Block>
 
 <style lang="scss">
-  section.photo {
-    div {
-      width: 100%;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
+  div {
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
   .visually-hidden {
     clip: rect(0 0 0 0);
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index bfb02459..2a95bc6f 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -38,24 +38,19 @@
     src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
-    title: 'Global abortion access',
+    frameTitle: 'Global abortion access',
   }}
 />
 
 <Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
   <DatawrapperChart
-    title='Global abortion access'
+    frameTitle='Global abortion access'
     ariaLabel='map'
     id='abortion-rights-map'
     src='https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html'
+    title="Global abortion access"
+    description="A map of worldwide access to abortion."
+    notes={'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}
   >
-    <div slot="title" class="title">
-      <h3>Global abortion access</h3>
-      <p>A map of worldwide access to abortion.</p>
-    </div>
-    <aside slot="notes">
-      <p class="note">Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.</p>
-      <p class="source">Source: Center for Reproductive Rights</p>
-    </aside>
   </DatawrapperChart>
 </Story>
\ No newline at end of file
diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 613400de..ca2b6721 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -1,17 +1,33 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Block from '../Block/Block.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  /**
+   * Title of the graphic
+   * @type {string}
+   */
+   export let title: string | null = null;
+
+  /**
+   * Description of the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let description: string | null = null;
   /** 
-   * iFrame title 
+   * iframe title 
    * @required
    */
-  export let title: string = '';
+  export let frameTitle: string = '';
+  /**
+   * Notes to the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+   export let notes: string | null = null;
   /** 
-   * iFrame aria label
+   * iframe aria label
    * @required
    */
   export let ariaLabel: string = '';
-  /** iFrame id */
+  /** iframe id */
   export let id: string = '';
   /** 
    * Datawrapper embed URL
@@ -21,13 +37,21 @@
 
   type ScrollingOption = 'auto' | 'yes' | 'no';
 
-  /** iFrame scrolling option */
+  /** iframe scrolling option */
   export let scrolling: ScrollingOption = 'no';
 
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
   /** Width of the chart within the text well. */
   export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
 
+  /**
+   * Set a different width for the text within the text well, for example, 
+   * "normal" to keep the title, description and notes inline with the rest
+   * of the text well. Can't ever be wider than `width`.
+   * @type {string}
+   */
+   export let textWidth: ContainerWidth | null = null;
+
   onMount(() => {
     if (typeof window !== 'undefined') {
       window.addEventListener('message', function (e) {
@@ -46,32 +70,29 @@
   });
 </script>
 
-<Block cls="graphic" {width}>
+<GraphicBlock {width} {textWidth} {title} {description} {notes}>
   {#if $$slots.title}
-    <div class="chatter-container">
-      <!-- Custom headline and chatter slot -->
-      <slot name="title" />
-    </div>
+    <!-- Custom headline and chatter slot -->
+    <slot name="title" />
   {/if}
 
   <div class="datawrapper-chart">
     <iframe
-      title="{title}"
+      title="{frameTitle}"
       aria-label="{ariaLabel}"
       id="{id}"
       src="{src}"
       scrolling="{scrolling}"
       frameborder="0"
-      style="width: 0; min-width: 100% !important; border: none;"></iframe>
+      style="width: 0; min-width: 100% !important; border: none;"
+    ></iframe>
   </div>
 
   {#if $$slots.notes}
-    <div class="chatter-container">
-      <!-- Custom notes and source slot -->
-      <slot name="notes" />
-    </div>
+    <!-- Custom notes and source slot -->
+    <slot name="notes" />
   {/if}
-</Block>
+</GraphicBlock>
 
 <style lang="scss">
   .datawrapper-chart {
diff --git a/src/components/DatawrapperChart/stories/docs/withChatter.md b/src/components/DatawrapperChart/stories/docs/withChatter.md
index 2459808b..c11a170e 100644
--- a/src/components/DatawrapperChart/stories/docs/withChatter.md
+++ b/src/components/DatawrapperChart/stories/docs/withChatter.md
@@ -1,4 +1,5 @@
-By default, Datawrapper will export your chart with the title, chatter and notes. At the moment, these
-don't match our styles, can't be made to fit into the well and will necessarily stretch to fit the graph width and
-can't be modified. You can do all of these things by removing all the text from your Datawrapper chart before
-publishing it and instead adding whatever you need inside the component via slots as below.
+By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
+
+At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
+
+Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
new file mode 100644
index 00000000..e16f295b
--- /dev/null
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -0,0 +1,82 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import customTextDocs from './stories/docs/customText.md?raw';
+
+  import GraphicBlock from './GraphicBlock.svelte';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  // @ts-ignore
+  import PlaceholderImg from './stories/placeholder.png';
+
+  const meta = {
+    title: 'Components/GraphicBlock',
+    component: GraphicBlock,
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <GraphicBlock {...args}>
+    <div class="demo-graphic">
+      <img src="{PlaceholderImg}" alt="placeholder" />
+    </div>
+  </GraphicBlock>
+</Template>
+
+<Story
+  name="Basic"
+  args="{{
+    width: 'normal',
+    title: 'Bacon ipsum dolor amet t-bone',
+    description: "Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.",
+    notes: "Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+  }}"
+/>
+
+<Story
+  name="Custom text"
+  {...withStoryDocs(customTextDocs)}
+>
+  <GraphicBlock
+    width="normal"
+    notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
+  >
+    <div slot="title">
+      <h5>My smaller title</h5>
+    </div>
+    <div class="demo-graphic">
+      <img src="{PlaceholderImg}" alt="placeholder" />
+    </div>
+  </GraphicBlock>
+</Story>
+
+<style lang="scss">
+  div.demo-graphic {
+    height: 400px;
+    background-color: #ddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      opacity: 0.4;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
new file mode 100644
index 00000000..29c5bd88
--- /dev/null
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  // You can declare custom types to help users implement your component.
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+  
+  /** 
+   * Width of the component within the text well.
+   * @type {string}
+   */
+  export let width: ContainerWidth = 'normal';
+
+  /** 
+   * Add an id to the block tag to target it with custom CSS.
+   * @type {string}
+   */
+  export let id: string = '';
+  /** 
+   * Add extra classes to the block tag to target it with custom CSS.
+   * @type {string}
+   */
+  export let cls: string = '';
+
+  /** Snap block to column widths, rather than fluidly resizing them. */
+  export let snap: boolean = false;
+
+  /** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
+  export let noMargin: boolean = false;
+
+  /** 
+   * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+   * @type {string}
+   */
+  export let role: string | null = null;
+
+  /**
+   * Notes to the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let notes: string | null = null;
+
+  /**
+   * Set a different width for the text within the text well, for example, 
+   * "normal" to keep the title, description and notes inline with the rest
+   * of the text well. Can't ever be wider than `width`.
+   * @type {string}
+   */
+  export let textWidth: ContainerWidth | null = null;
+
+  /**
+   * Title of the graphic
+   * @type {string}
+   */
+  export let title: string | null = null;
+
+  /**
+   * Description of the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let description: string | null = null;
+
+  /**
+   * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+   * @type {string}
+   */
+  export let ariaLabel: string = 'chart';
+
+  import GraphicBlockTextWrapper from "./GraphicBlockTextWrapper.svelte";
+  import Block from "../Block/Block.svelte";
+  import { marked } from 'marked';
+</script>
+
+<Block {id} {snap} {noMargin} {role} {width} {ariaLabel} cls="graphic {cls}">
+  <div>
+    {#if $$slots.title}
+      <GraphicBlockTextWrapper width={textWidth}>
+        <!-- Custom title content -->
+        <slot name="title" />
+      </GraphicBlockTextWrapper>
+    {:else if (title)}
+      <GraphicBlockTextWrapper width={textWidth}>
+        <h3>{title}</h3>
+        {#if (description)}
+          {@html marked(description)}
+        {/if}
+      </GraphicBlockTextWrapper>
+    {/if}
+    <!-- Graphic content -->
+    <slot></slot>
+    {#if $$slots.notes}
+      <GraphicBlockTextWrapper width={textWidth}>
+        <!-- Custom notes content -->
+        <slot name="notes" />
+      </GraphicBlockTextWrapper>
+    {:else if (notes)}
+      <GraphicBlockTextWrapper width={textWidth}>
+        <aside>
+          {@html marked(notes)}
+        </aside>
+      </GraphicBlockTextWrapper>
+    {/if}
+  </div>
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  @import "../../scss/mixins";
+  div {
+    :global {
+      @include graphic-text;
+    }
+  }
+</style>
diff --git a/src/components/GraphicBlock/GraphicBlockTextWrapper.svelte b/src/components/GraphicBlock/GraphicBlockTextWrapper.svelte
new file mode 100644
index 00000000..56f27c23
--- /dev/null
+++ b/src/components/GraphicBlock/GraphicBlockTextWrapper.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+  
+  /** Width of the component within the text well. */
+  export let width: ContainerWidth | null = null;
+  import Block from "../Block/Block.svelte";
+</script>
+
+{#if (width)}
+  <Block {width} noMargin={true}>
+    <slot></slot>
+  </Block>
+{:else}
+  <slot></slot>
+{/if}
diff --git a/src/components/GraphicBlock/stories/docs/component.md b/src/components/GraphicBlock/stories/docs/component.md
new file mode 100644
index 00000000..9e54af26
--- /dev/null
+++ b/src/components/GraphicBlock/stories/docs/component.md
@@ -0,0 +1,21 @@
+The `GraphicBlock` component is a more specific type of `Block` that handles text elements around your chart.
+
+Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
+
+---
+
+```svelte
+<script>
+  import { GraphicBlock } from '@reuters-graphics/graphics-svelte-components';
+</script>
+
+
+<GraphicBlock
+  width="normal"
+  title="Title for my chart"
+  description="Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta."
+  notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+>
+  <div id="my-chart"/>
+</GraphicBlock>
+```
diff --git a/src/components/GraphicBlock/stories/docs/customText.md b/src/components/GraphicBlock/stories/docs/customText.md
new file mode 100644
index 00000000..e4ba1566
--- /dev/null
+++ b/src/components/GraphicBlock/stories/docs/customText.md
@@ -0,0 +1,11 @@
+You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this:
+
+```svelte
+<GraphicBlock
+  width="normal"
+  notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
+>
+  <h5 slot="title">My smaller title</h5>
+  <div id="my-chart" />
+</GraphicBlock>
+```
diff --git a/src/components/GraphicBlock/stories/placeholder.png b/src/components/GraphicBlock/stories/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca5216495182ea6ef0ca2aca2c0c594b867275d2
GIT binary patch
literal 2334
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
A5dZ)H

literal 0
HcmV?d00001

diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 436a562c..43e6654b 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -15,48 +15,53 @@
    * Section colour
    */
   export let sectionColour: string = 'red';
+
+  import Block from '../Block/Block.svelte';
 </script>
 
-<header class="headline">
-  <!-- Crown named slot -->
-  <slot name="crown"></slot>
-  <div class="title">
-    {#if section}
-      <p class={`section-title color-${sectionColour}`}>{section}</p>
-    {/if}
-    {#if $$slots.hed}
-      <!-- Headline override named slot -->
-      <slot name="hed"></slot>
-    {:else}
-      <h1>{hed}</h1>
-    {/if}
-    {#if dek}
-      <p>{dek}</p>
-    {/if}
-  </div>
-  {#if ($$slots.byline || $$slots.dateline)}
-    <aside class="article-metadata">
-      {#if $$slots.byline}
-        <div class="byline-container">
-          <div class="byline">
-            <!-- Byline named slot -->
-            <slot name="byline"></slot>
-          </div>
-        </div>
+<Block>
+  <header class="headline">
+    <!-- Crown named slot -->
+    <slot name="crown"></slot>
+    <div class="title">
+      {#if section}
+        <p class={`section-title color-${sectionColour}`}>{section}</p>
       {/if}
-      {#if $$slots.dateline}
-        <div class="dateline-container">
-          <div class="published">
-            <!-- Dateline named slot -->
-            <slot name="dateline"></slot>
-          </div>
-        </div>
+      {#if $$slots.hed}
+        <!-- Headline override named slot -->
+        <slot name="hed"></slot>
+      {:else}
+        <h1>{hed}</h1>
       {/if}
-    </aside>
-  {/if}
-</header>
+      {#if dek}
+        <p>{dek}</p>
+      {/if}
+    </div>
+    {#if ($$slots.byline || $$slots.dateline)}
+      <aside class="article-metadata">
+        {#if $$slots.byline}
+          <div class="byline-container">
+            <div class="byline">
+              <!-- Byline named slot -->
+              <slot name="byline"></slot>
+            </div>
+          </div>
+        {/if}
+        {#if $$slots.dateline}
+          <div class="dateline-container">
+            <div class="published">
+              <!-- Dateline named slot -->
+              <slot name="dateline"></slot>
+            </div>
+          </div>
+        {/if}
+      </aside>
+    {/if}
+  </header>
+</Block>
 
 <style lang="scss">
+  @import "@reuters-graphics/style-color/scss/thematic/brand";
   @import "../../scss/mixins";
 
   header.headline {
@@ -64,21 +69,57 @@
     margin-top: 4rem;
     margin-bottom: 3rem;
 
-    h1 {
-      font-size: 4rem;
-      margin: 5px 0;
-      line-height: 1.1;
+    :global {
+      h1 {
+        font-size: 4rem;
+        margin: 5px 0;
+        line-height: 1.1;
+      }
+
+      p {
+        @include font-display;
+
+        margin: 0;
+        font-weight: 200;
+
+        &.section-title {
+          font-size: 1rem;
+          font-weight: 800;
+        }
+      }
+    }
+    .article-metadata {
+      padding: 40px 0;
+
+      @include font-sans;
+
+      text-align: center;
+
+      .byline-container {
+        margin-bottom: 2px;
+      }
+
+      .byline {
+        :global {
+          a {
+            color: $brand-text;
+            text-decoration: none;
+          }
+        }
+      }
+
+      .dateline-container {
+        text-transform: uppercase;
+
+        color: $brand-text-secondary;
+        font-size: 0.8rem;
+        line-height: 1.2rem;
+      }
     }
 
-    p {
-      @include font-display;
-
-      margin: 0;
-      font-weight: 200;
-
-      &.section-title {
-        font-size: 1rem;
-        font-weight: 800;
+    section.headline {
+      .article-metadata {
+        padding: 2rem 0 0;
       }
     }
   }
diff --git a/src/components/SiteFooter/Referrals/Referrals.svelte b/src/components/SiteFooter/Referrals/Referrals.svelte
index 3169a466..ed98fd91 100644
--- a/src/components/SiteFooter/Referrals/Referrals.svelte
+++ b/src/components/SiteFooter/Referrals/Referrals.svelte
@@ -52,5 +52,7 @@
   .row {
     margin-right: -10px;
     margin-left: -10px;
+    display: flex;
+    flex-wrap: wrap;
   }
 </style>
diff --git a/src/components/SiteFooter/Referrals/index.svelte b/src/components/SiteFooter/Referrals/index.svelte
index 5fba2dab..0330b001 100644
--- a/src/components/SiteFooter/Referrals/index.svelte
+++ b/src/components/SiteFooter/Referrals/index.svelte
@@ -37,6 +37,10 @@
       color: var(--nav-primary, #666);
       a {
         color: var(--nav-primary, #666);
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
       }
     }
   }
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index 1f07a653..9a704635 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -71,6 +71,7 @@
 
 <style>
   div {
-    min-height: 89px;
+    width: calc(100% + 30px);
+    margin-left: -15px;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 6eeda362..d202bf2c 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -66,13 +66,22 @@
   </div>
 </footer>
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
   footer {
-    margin-top: 3rem;
+    margin-top: 4rem;
     background-color: var(--nav-background, #fff);
     div {
       max-width: 1400px;
       margin: 0 auto;
     }
+    :global {
+      a {
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 </style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 93e27611..9f80737b 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -49,7 +49,7 @@
   a {
     text-decoration: none;
     &:hover {
-      color: inherit;
+      color: var(--nav-primary, $tr-dark-grey);
       text-decoration: underline !important;
     }
   }
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index fda89c3a..15474496 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -27,7 +27,7 @@
 <Meta {...meta} />
 
 <Template let:args>
-  <div class="cancel-article">
+  <div>
     <SiteHeader {...args} />
   </div>
 </Template>
@@ -46,7 +46,7 @@
 
 
 <style>
-  div.cancel-article {
+  div {
     min-height: 625px;
     width: calc(100% + 30px);
     margin-left: -15px;
diff --git a/src/index.js b/src/index.js
index 0c172d6e..52615e65 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,16 @@
 // export { default as Ai2svelte } from './Ai2svelte/index.svelte';
+export { default as Article } from './components/Article/Article.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
+export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
-export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
+export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Hero } from './components/Hero/Hero.svelte';
+export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 // export { default as Scroller } from './Scroller/index.svelte';
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 28ac8f7e..08c500eb 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,4 +1,5 @@
 @import "mixins/block";
 @import "mixins/body-text";
 @import "mixins/fonts";
+@import "mixins/graphic";
 @import "mixins/note-text";
diff --git a/src/scss/bootstrap/_main.scss b/src/scss/bootstrap/_main.scss
index 2bcc25a6..41ecafa9 100644
--- a/src/scss/bootstrap/_main.scss
+++ b/src/scss/bootstrap/_main.scss
@@ -12,16 +12,16 @@
 // Layout & components
 @import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
-// @import "bootstrap/scss/type";
-// @import "bootstrap/scss/images";
-// @import "bootstrap/scss/containers";
-// @import "bootstrap/scss/grid";
-// @import "bootstrap/scss/tables";
-// @import "bootstrap/scss/forms";
-// @import "bootstrap/scss/buttons";
-// @import "bootstrap/scss/transitions";
-// @import "bootstrap/scss/dropdown";
-// @import "bootstrap/scss/button-group";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
 
 // // Helpers
 // @import "bootstrap/scss/helpers";
diff --git a/src/scss/colours/thematic/_nord.scss b/src/scss/colours/thematic/_nord.scss
new file mode 100644
index 00000000..3bcdf6b5
--- /dev/null
+++ b/src/scss/colours/thematic/_nord.scss
@@ -0,0 +1,40 @@
+$nord-0: #2E3440;
+$nord-polar-night-0: #2E3440;
+$nord-black: #2E3440;
+$nord-1: #3B4252;
+$nord-polar-night-1: #3B4252;
+$nord-2: #434C5E;
+$nord-polar-night-2: #434C5E;
+$nord-3: #4C566A;
+$nord-polar-night-3: #4C566A;
+$nord-4: #D8DEE9;
+$nord-snow-storm-0: #D8DEE9;
+$nord-5: #E5E9F0;
+$nord-snow-storm-1: #E5E9F0;
+$nord-6: #ECEFF4;
+$nord-snow-storm-2: #ECEFF4;
+$nord-white: #ECEFF4;
+$nord-7: #8FBCBB;
+$nord-frost-0: #8FBCBB;
+$nord-8: #88C0D0;
+$nord-frost-1: #88C0D0;
+$nord-9: #81A1C1;
+$nord-frost-2: #81A1C1;
+$nord-10: #5E81AC;
+$nord-frost-3: #5E81AC;
+$nord-blue: #5E81AC;
+$nord-11: #BF616A;
+$nord-aurora-0: #BF616A;
+$nord-red: #BF616A;
+$nord-12: #D08770;
+$nord-aurora-1: #D08770;
+$nord-orange: #D08770;
+$nord-13: #EBCB8B;
+$nord-aurora-2: #EBCB8B;
+$nord-yellow: #EBCB8B;
+$nord-14: #A3BE8C;
+$nord-aurora-3: #A3BE8C;
+$nord-green: #A3BE8C;
+$nord-15: #B48EAD;
+$nord-aurora-4: #B48EAD;
+$nord-purple: #B48EAD;
\ No newline at end of file
diff --git a/src/scss/colours/thematic/_tr.scss b/src/scss/colours/thematic/_tr.scss
new file mode 100644
index 00000000..b4f1be4f
--- /dev/null
+++ b/src/scss/colours/thematic/_tr.scss
@@ -0,0 +1,27 @@
+// Brand colours from RCOM's raptor system
+// https://github.com/tr/rcom-arc_raptor-ui/blob/develop/packages/rcom-raptor-ui_atomic/styles/_colors.scss
+$tr-orange: #fa6400;
+$tr-dark-orange: #dc4300;
+$tr-light-orange: #ffa100;
+$tr-dark-grey: #404040;
+$tr-medium-grey: #666666;
+$tr-light-grey: #afafaf;
+$tr-muted-grey: #d0d0d0;
+$tr-contrast-grey: #949494;
+$tr-hover-background-grey: #f8f8f8;
+$tr-light-muted-grey: #f4f4f4;
+$tr-ultra-light-grey: #fafafa;
+$tr-dark-blue: #005da2;
+$tr-light-blue: #0099c4;
+$tr-muted-blue: #4386B9;
+$tr-lighter-blue: #7FACCE;
+$tr-superlight-blue: #e5eef5;
+$tr-dark-purple: #621f95;
+$tr-light-purple: #6e3ab7;
+$tr-dark-red: #a00000;
+$tr-light-red: #dc0a0a;
+$tr-dark-green: #387c2b;
+$tr-light-green: #77a22d;
+$black: #000;
+$white: #fff;
+$ad-placeholder: #ffb1b1;
\ No newline at end of file
diff --git a/src/scss/components/_graphic.scss b/src/scss/components/_graphic.scss
deleted file mode 100644
index 0d7ba06a..00000000
--- a/src/scss/components/_graphic.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import "~@reuters-graphics/style-color/scss/sequential/sesame";
-
-$well-regular: 660px !default;
-$well-wide: 930px !default;
-$well-wider: 1200px !default;
-$graphic-narrower: 330px !default;
-$graphic-narrow: 510px !default;
-
-$grid-gutter-width: 30px; // The bootstrap default variable
-
-$component-margin: 3rem !default;
-
-section.graphic {
-  margin-top: $component-margin;
-  margin-bottom: $component-margin;
-
-  @extend .font-sans;
-
-  &.bordered {
-    @extend .separated;
-  }
-
-  h3 {
-    margin-bottom: 0.5rem;
-  }
-
-  p {
-    @extend .font-sans;
-    @extend .paragraph-size;
-  }
-
-  // Use for footnotes and source lines
-  aside {
-    p {
-      @extend .small-size;
-
-      margin-bottom: 5px;
-      color: $brand-text-secondary;
-    }
-  }
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 2dc8e6a9..bcf6718e 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -18,4 +18,3 @@
 
 // Components
 @import "components/article-metadata";
-@import "components/graphic";
diff --git a/src/scss/mixins/_body-text.scss b/src/scss/mixins/_body-text.scss
index 0f17a4a6..a585764e 100644
--- a/src/scss/mixins/_body-text.scss
+++ b/src/scss/mixins/_body-text.scss
@@ -1,8 +1,6 @@
-@import "@reuters-graphics/style-color/scss/sequential/sesame";
-@import "@reuters-graphics/style-color/scss/thematic/brand";
-
 @import "fonts";
 @import "../typography/font-size";
+@import "../colours/thematic/tr";
 
 @mixin body-text {
   p,
@@ -16,6 +14,8 @@
 
     -webkit-font-smoothing: antialiased;
 
+    color: $tr-dark-grey;
+
     a {
       color: currentColor;
       background-size: 1px 1px;
@@ -48,7 +48,7 @@
     &::after {
       display: block;
       content: '';
-      background: $brand-secondary;
+      background: $tr-medium-grey;
       height: 3px;
       width: 100px;
       margin: 10px auto 2rem;
@@ -65,7 +65,7 @@
 
   blockquote {
     margin: 30px 0;
-    border-left: 2px solid $brand-secondary;
+    border-left: 2px solid $tr-medium-grey;
     padding-left: 15px;
 
     p {
@@ -79,7 +79,7 @@
       margin: -5px 0 0;
 
       p {
-        color: $gray-500;
+        color: $tr-dark-grey;
         font-size: 1rem;
 
         @media(max-width: 540px) {
diff --git a/src/scss/mixins/_graphic.scss b/src/scss/mixins/_graphic.scss
new file mode 100644
index 00000000..bc1d2b46
--- /dev/null
+++ b/src/scss/mixins/_graphic.scss
@@ -0,0 +1,64 @@
+@import "../colours/thematic/tr";
+@import "fonts";
+
+@mixin graphic-text {
+  h3 {
+    margin-bottom: 0.5rem;
+    color: $tr-dark-grey;
+  }
+
+  p {
+    -webkit-font-smoothing: antialiased;
+    @include font-display;
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    color: $tr-dark-grey;
+    margin-bottom: 1rem;
+    // &:last-of-type {
+    //   margin-bottom: 0;
+    // }
+  
+    @media(max-width: 540px) {
+      font-size: 1rem;
+      line-height: 1.35rem;
+    }
+
+    a {
+      color: currentColor;
+      background-size: 1px 1px;
+      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+      background-position: 0 1.1rem;
+      background-repeat: repeat-x;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // Used for footnotes and source lines
+  aside {
+    p {
+      @include font-display;
+      margin-bottom: 0;
+      color: $tr-medium-grey;
+      font-size: 0.9rem;
+      line-height: 1.2rem;
+      
+
+      @media(max-width: 540px) {
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+      }
+
+      a {
+        color: currentColor;
+        text-decoration: underline;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/scss/mixins/_note-text.scss b/src/scss/mixins/_note-text.scss
index f6d2f3db..ff59f72e 100644
--- a/src/scss/mixins/_note-text.scss
+++ b/src/scss/mixins/_note-text.scss
@@ -10,6 +10,7 @@
 
     margin: 1rem 0 0;
     font-size: 1rem;
+    letter-spacing: 0.5px;
   }
 
   p {