From cd1d4d97f0daa271c1a34bd1d089b65b8e01d9e8 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 22 Jul 2023 16:54:36 +0100
Subject: [PATCH] closes #103

---
 .storybook/preview.scss                       |  3 ++-
 .storybook/preview.ts                         |  1 +
 src/components/BeforeAfter/BeforeAfter.svelte |  2 +-
 src/components/Block/Block.stories.svelte     | 22 +++++++++-------
 src/components/Block/Block.svelte             |  3 ++-
 .../Block/stories/docs/snapWidths.md          |  4 +--
 src/components/BodyText/BodyText.svelte       |  6 ++++-
 .../DocumentCloud/DocumentCloud.svelte        |  5 ++--
 .../FeaturePhoto/FeaturePhoto.svelte          |  2 +-
 .../GraphicBlock/GraphicBlock.svelte          |  5 ++--
 src/components/GraphicBlock/TextBlock.svelte  |  2 +-
 src/components/Headline/Headline.svelte       |  2 +-
 src/components/NoteText/NoteText.svelte       |  2 +-
 .../PhotoCarousel/PhotoCarousel.svelte        |  5 ++--
 src/components/PhotoPack/PhotoPack.svelte     |  5 ++--
 .../ReferralBlock/ReferralBlock.svelte        |  5 ++--
 .../Scroller/Embedded/Background.svelte       |  2 +-
 .../Scroller/Embedded/Foreground.svelte       |  2 +-
 src/components/Scroller/Scroller.svelte       | 12 ++++-----
 .../SimpleTimeline/SimpleTimeline.svelte      |  5 ++--
 .../SiteHeadline/SiteHeadline.svelte          |  5 ++--
 src/components/Table/Table.svelte             |  5 ++--
 src/components/ToolsHeader/ToolsHeader.svelte |  5 ++--
 src/components/Video/Video.svelte             |  2 +-
 .../CopyColourTable/ImportSnippet.jsx         |  2 +-
 src/docs/styles/colours/intro.stories.mdx     | 26 +++++++++++++++++++
 src/scss/colours/_main.scss                   |  2 ++
 src/scss/main.scss                            |  1 +
 28 files changed, 95 insertions(+), 48 deletions(-)
 create mode 100644 src/docs/styles/colours/intro.stories.mdx
 create mode 100644 src/scss/colours/_main.scss

diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index d5d56b7a..d15fb4d1 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -61,8 +61,9 @@ div.sbdocs-content {
 
   a {
     @include font-display;
-    color: var(--gfx-colour-tr-muted-blue);
+    color: #0071a1;
     text-decoration: none;
+    text-underline-offset: 2px;
     &:hover {
       text-decoration: underline;
     }
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 869a9e5b..34a35c37 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -67,6 +67,7 @@ export const parameters = {
           ],
           'Borders',
           'Colours', [
+            'Intro',
             'Primary',
             'Thematic',
             '*',
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 472c7f21..64ca670c 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -153,7 +153,7 @@
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block width="{width}" id="{id}" cls="photo before-after">
+  <Block width="{width}" id="{id}" class="photo before-after">
     <div
       style="height: {containerHeight}px;"
       bind:clientWidth="{containerWidth}"
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 61e79519..06798a0b 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -73,41 +73,43 @@
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block width="narrower" snap="{true}" cls="block-snap-widths-demo"
+      <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" cls="block-snap-widths-demo"
+      <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
         >narrow</Block
       >
-      <Block width="normal" snap="{true}" cls="block-snap-widths-demo"
+      <Block width="normal" snap="{true}" class="block-snap-widths-demo"
         >normal</Block
       >
-      <Block width="wide" snap="{true}" cls="block-snap-widths-demo">wide</Block
+      <Block width="wide" snap="{true}" class="block-snap-widths-demo"
+        >wide</Block
       >
-      <Block width="wider" snap="{true}" cls="block-snap-widths-demo"
+      <Block width="wider" snap="{true}" class="block-snap-widths-demo"
         >wider</Block
       >
-      <Block width="narrower" snap="{true}" cls="block-snap-widths-demo even"
+      <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" cls="block-snap-widths-demo even"
+      <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
         >narrow</Block
       >
       <Block
         width="normal"
         snap="{true}"
-        cls="block-snap-widths-demo even skip-narrow">normal.skip-narrow</Block
+        class="block-snap-widths-demo even skip-narrow"
+        >normal.skip-narrow</Block
       >
       <Block
         width="wide"
         snap="{true}"
-        cls="block-snap-widths-demo even skip-normal skip-narrow"
+        class="block-snap-widths-demo even skip-normal skip-narrow"
         >wide.skip-normal.skip-narrow</Block
       >
       <Block
         width="wider"
         snap="{true}"
-        cls="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
+        class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
       >
     </div>
   </Article>
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index dcd0652d..bf6a8cdd 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -8,7 +8,8 @@
   /** Add an id to the block tag to target it with custom CSS. */
   export let id: string = '';
   /** Add extra classes to the block tag to target it with custom CSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   /** Snap block to column widths, rather than fluidly resizing them. */
   export let snap: boolean = false;
diff --git a/src/components/Block/stories/docs/snapWidths.md b/src/components/Block/stories/docs/snapWidths.md
index bd7f4a64..6dd16156 100644
--- a/src/components/Block/stories/docs/snapWidths.md
+++ b/src/components/Block/stories/docs/snapWidths.md
@@ -12,7 +12,7 @@ If you want to skip certain block widths entirely, you can add one or more class
 
 ```html
 <!-- Will skip wide and go straight to normal column width on resize. -->
-<Block width="wider" snap="{true}" cls="skip-wide">
+<Block width="wider" snap="{true}" class="skip-wide">
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -28,7 +28,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
 Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined 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.
 
 ```html
-<Block width="wider" snap="{true}" cls="custom-blocks">
+<Block width="wider" snap="{true}" class="custom-blocks">
   <!-- Your stuff for this block -->
 </Block>
 
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index 63280fc9..20293b20 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -7,11 +7,15 @@
    */
   export let text: string;
 
+  /** Add a class to target with SCSS. */
+  let cls: string = '';
+  export { cls as class };
+
   import { marked } from 'marked';
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="body-text">
+<Block class="body-text {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 55d3a2c9..89ad0e94 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -24,12 +24,13 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block width="{width}" id="{id}" cls="photo {cls}">
+<Block width="{width}" id="{id}" class="photo {cls}">
   <iframe
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
     title="{altText}"
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 696bc3e6..21e8b022 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -70,7 +70,7 @@
   });
 </script>
 
-<Block width="{width}" cls="photo">
+<Block width="{width}" class="photo">
   <figure bind:this="{container}" aria-label="media">
     {#if !lazy || (intersectable && intersecting)}
       <img src="{src}" alt="{altText}" />
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 57ab7531..dee7c707 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -17,7 +17,8 @@
    * Add extra classes to the block tag to target it with custom CSS.
    * @type {string}
    */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   /** Snap block to column widths, rather than fluidly resizing them. */
   export let snap: boolean = false;
@@ -78,7 +79,7 @@
   role="{role}"
   width="{width}"
   ariaLabel="{ariaLabel}"
-  cls="graphic {cls}"
+  class="graphic {cls}"
 >
   <div>
     {#if $$slots.title}
diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
index 73328797..f39a7e23 100644
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ b/src/components/GraphicBlock/TextBlock.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" cls="m-0">
+  <Block width="{width}" class="m-0">
     <slot />
   </Block>
 {:else}
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index edb1d576..79119685 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -20,7 +20,7 @@
   import { marked } from 'marked';
 </script>
 
-<Block cls="mb-1">
+<Block class="mb-1">
   <header class="headline">
     {#if $$slots.crown}
       <div class="crown-container">
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 64aaf01f..9b05c721 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -11,7 +11,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="notes mb-6">
+<Block class="notes mb-6">
   {#if text}
     {@html marked.parse(text)}
   {/if}
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 2c7a8dee..f9996891 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -9,7 +9,8 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   interface Image {
     /**
@@ -96,7 +97,7 @@
   };
 </script>
 
-<Block width="{width}" id="{id}" cls="photo-carousel {cls}">
+<Block width="{width}" id="{id}" class="photo-carousel {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index cafb9402..adfdd335 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -40,7 +40,8 @@
    * Add a class to target with SCSS.
    * @type {string}
    */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
@@ -88,7 +89,7 @@
   $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" cls="photopack {cls}">
+<Block width="{width}" id="{id}" class="photopack {cls}">
   <div class="photopack-container" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index 21b9fda6..e99cc9f7 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -38,7 +38,8 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   import Block from '../Block/Block.svelte';
   import { referrals } from './stores.js';
@@ -75,7 +76,7 @@
 </script>
 
 {#if $referrals.length === number}
-  <Block width="{width}" id="{id}" cls="referrals-block {cls}">
+  <Block width="{width}" id="{id}" class="referrals-block {cls}">
     {#if heading}
       <h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
     {/if}
diff --git a/src/components/Scroller/Embedded/Background.svelte b/src/components/Scroller/Embedded/Background.svelte
index 8081ba70..faf214c6 100644
--- a/src/components/Scroller/Embedded/Background.svelte
+++ b/src/components/Scroller/Embedded/Background.svelte
@@ -8,7 +8,7 @@
   import Block from '../../Block/Block.svelte';
 </script>
 
-<Block width="{backgroundWidth}" cls="background-container step-{index + 1}">
+<Block width="{backgroundWidth}" class="background-container step-{index + 1}">
   <div class="embedded-background step-{index + 1}" aria-hidden="true">
     <svelte:component
       this="{step.background}"
diff --git a/src/components/Scroller/Embedded/Foreground.svelte b/src/components/Scroller/Embedded/Foreground.svelte
index 2348574a..b6b011a4 100644
--- a/src/components/Scroller/Embedded/Foreground.svelte
+++ b/src/components/Scroller/Embedded/Foreground.svelte
@@ -18,7 +18,7 @@
     </div>
   {/if}
 {:else if typeof step.foreground === 'string'}
-  <Block cls="body-text step-{index + 1}">
+  <Block class="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
       {@html marked.parse(step.foreground)}
     </div>
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index e4dc9dfb..dfd20969 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -101,11 +101,11 @@
 </script>
 
 {#if !embedded}
-  <Block width="fluid" cls="scroller-container" id="{id}">
+  <Block width="fluid" class="scroller-container" id="{id}">
     <SvelteScroller
-      bind:index
-      bind:offset
-      bind:progress
+      bind:index="{index}"
+      bind:offset="{offset}"
+      bind:progress="{progress}"
       threshold="{threshold}"
       top="{top}"
       bottom="{bottom}"
@@ -122,7 +122,7 @@
         <div class="scroller-graphic-well">
           <Block
             width="{backgroundWidth}"
-            cls="background-container step-{index + 1}"
+            class="background-container step-{index + 1}"
           >
             <Background
               index="{index}"
@@ -140,7 +140,7 @@
     </SvelteScroller>
   </Block>
 {:else}
-  <Block width="widest" cls="scroller-container embedded" id="{id}">
+  <Block width="widest" class="scroller-container embedded" id="{id}">
     <Embedded
       steps="{steps}"
       embeddedLayout="{embeddedLayout}"
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index 88855a6c..f51fa0d9 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -28,7 +28,8 @@
    * Set a class to target with SCSS.
    * @type {string}
    */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
   /**
    * Set an ID to target with SCSS.
    * @type {string}
@@ -41,7 +42,7 @@
   import { marked } from 'marked';
 </script>
 
-<Block width="normal" id="{id}" cls="simple-timeline-container {cls}">
+<Block width="normal" id="{id}" class="simple-timeline-container {cls}">
   <div class="timeline" style="--symbol-colour:{symbolColour};">
     {#each dates as date}
       <div class="date">
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index d2236eae..2b9598c6 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -38,7 +38,8 @@
    * Add extra classes to target with custom CSS.
    * @type {string}
    */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   import Block from '../Block/Block.svelte';
   import slugify from 'slugify';
@@ -63,7 +64,7 @@
     first.getDate() === second.getDate();
 </script>
 
-<Block id="{id}" cls="headline-container {cls}" width="normal">
+<Block id="{id}" class="headline-container {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index b983aef7..23a78930 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -130,7 +130,8 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
@@ -213,7 +214,7 @@
   });
 </script>
 
-<Block width="{width}" id="{id}" cls="{cls}">
+<Block width="{width}" id="{id}" class="{cls}">
   <article class="table-wrapper">
     {#if title || dek || searchable || filterList}
       <header class="table--header">
diff --git a/src/components/ToolsHeader/ToolsHeader.svelte b/src/components/ToolsHeader/ToolsHeader.svelte
index ecc1ca73..14ec5e5b 100644
--- a/src/components/ToolsHeader/ToolsHeader.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.svelte
@@ -4,7 +4,8 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   /**
    * Make the header stick when user scrolls.
@@ -41,7 +42,7 @@
 <header
   id="{id}"
   class="{cls}"
-  class:sticky
+  class:sticky="{sticky}"
   style:background="{background}"
   style:border-bottom="{borderBottom}"
 >
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 454fc75e..196b4b2c 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -123,7 +123,7 @@
   on:touchstart="{setInteractedWithDom}"
 />
 
-<Block width="{width}" cls="video-container">
+<Block width="{width}" class="video-container">
   <div
     on:mouseover="{() => {
       interactiveControlsOpacity = controlsOpacity;
diff --git a/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx b/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
index ca97abef..6a6ab81a 100644
--- a/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
+++ b/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
@@ -15,7 +15,7 @@ const Copyable = (props) => {
 
   useEffect(() => {
     if(timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => { setCopied(false); }, 1000);
+    timeout = setTimeout(() => { setCopied(false); }, 1500);
   }, [copied]);
 
   const handleClick = async({ partial }) => {
diff --git a/src/docs/styles/colours/intro.stories.mdx b/src/docs/styles/colours/intro.stories.mdx
new file mode 100644
index 00000000..a1d96327
--- /dev/null
+++ b/src/docs/styles/colours/intro.stories.mdx
@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
+import { extractCssColourVariables } from '../../utils/parseCss';
+
+<Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Working with colours
+
+Colour palettes are provided as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) you can use in your own styles. Some are included by default, others can be imported in your global stylesheet and then used.
+
+```scss
+/* global.scss */
+@import '@reuters-graphics/graphics-components/dist/scss/colours/primary/_blue.scss';
+
+p {
+  color: var(--grey-400); // Included by default
+}
+
+p.blue-bg {
+  color: white;
+  background-colour: var(--blue-600); // Imported palette
+}
+```
diff --git a/src/scss/colours/_main.scss b/src/scss/colours/_main.scss
new file mode 100644
index 00000000..e45c2cf9
--- /dev/null
+++ b/src/scss/colours/_main.scss
@@ -0,0 +1,2 @@
+@import 'primary/grey';
+@import 'thematic/tr';
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 2ffda308..f6a5c365 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -18,6 +18,7 @@
 @import 'mixins';
 
 // Style rules
+@import 'colours/main';
 @import 'borders/main';
 @import 'spacers/main';
 @import 'typography/rules';