few fixes

.storybook/preview.scss

@@ -1,4 +1,4 @@
-@import "../src/scss/fonts/mixins";
+@import "../src/scss/mixins";
 
 table.docblock-argstable {
   p {

src/components/Article/Article.stories.svelte

@@ -113,11 +113,12 @@
       position: absolute;
       bottom: 0;
       left: 5px;
+      color: white;
     }
     .padding-label {
       position: absolute;
       top: 0;
-      left: -15px;
+      left: -17px;
       span {
         font-size: 18px;
       }

src/components/Article/stories/docs/customWellWidths.md

@@ -12,6 +12,8 @@ The `Article` component also creates several column dimensions inside our articl
 
 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 }}
@@ -26,9 +28,7 @@ When combined with the `Block` component, you can set custom column widths by pa
 </Article>
 ```
 
-> Keep in mind, other tools, like our AI templates, use our default column widths, so customising those widths here may have downstream consequences for graphics made outside your code.
-
-If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container using the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
+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">

src/components/Block/stories/docs/component.md

@@ -1,4 +1,6 @@
-The `Block` component is the basic building block of stories.
+The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+
+Blocks are stacked vertically within the well created by the `Article` 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.
 

src/components/Block/stories/docs/customLayouts.md

@@ -1,4 +1,4 @@
-Our article well is designed to handle basic page layout when you're not trying to think about it, but it's also made to get out of the way quickly when you need to do something custom.
+Our article well is designed to provide a basic responsive layout issues for you, but it's also made to get out of the way quickly when you need to do something custom.
 
 If you need to get really radical, the easiest way 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.
 

src/components/BodyText/BodyText.stories.svelte

@@ -29,6 +29,10 @@
     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.`
   }}

src/components/BodyText/BodyText.svelte

@@ -18,6 +18,8 @@
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
+  // Technically... we probably should unbind these styles from the component
+  // and import them in the app through a separate scss file.
   @import "../../scss/mixins";
 
   :global {

src/components/BodyText/stories/docs/component.md

@@ -1,8 +1,8 @@
-Parse mardown-formatted text.
+Body text includes the main text of your page.
 
 ```svelte
 <script>
-  import { BodyText } from '@reuters-graphics/graphics-svelte-components';
+  import { BodyText } from '@reuters-graphics/graphics-components';
 
   const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
   
@@ -13,3 +13,19 @@ Parse mardown-formatted text.
 
 <BodyText text="{markdownText}" />
 ```
+
+```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}
+
+
+```

src/components/EndNotes/EndNotes.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  /**
-   * A markdown text string.
-   * @type {string}
-   * @required
-   */
-  export let text: string;
-  
-  import { marked } from 'marked';
-</script>
-
-<section class="end-notes">
-  {#if text}
-    {@html marked.parse(text)}
-  {/if}
-</section>

src/components/EndNotes/stories/docs/component.md

@@ -1,17 +0,0 @@
-End notes section.
-
-```svelte
-<script>
-  import { EndNotes } from '@reuters-graphics/graphics-svelte-components';
-
-  const markdownText = `### Source
-
-Reuters research.
-
-### Credits
-
-People.`;
-</script>
-
-<EndNotes text="{markdownText}" />
-```

src/components/Headline/Headline.stories.svelte

@@ -51,7 +51,7 @@
     <!-- Use named slots to add a byline... -->
     <span slot="byline">By <strong>Peppa Pig</strong></span>
     <!-- ...and a dateline. -->
-    <span slot="dateline">Published Jan. 1, 2020</span>
+    <span slot="dateline">Published <time datetime="{new Date('2020-01-01').toISOString()}">Jan. 1, 2020</time></span>
   </Headline>
 </Story>
 
@@ -64,6 +64,6 @@
     <img slot="crown" src="{crownImgSrc}" alt="Illustration of Europe" />
     <!-- Override the hed with a named slot -->
     <h1 slot="hed" class="spaced font-serif">Europa</h1>
-    <span slot="dateline">Published Jan. 1, 2020</span>
+    <span slot="dateline">Published <time datetime="{new Date('2020-01-01').toISOString()}">Jan. 1, 2020</time></span>
   </Headline>
 </Story>

src/components/NoteText/NoteText.stories.svelte

@@ -4,15 +4,15 @@
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
 
-  import EndNotes from './EndNotes.svelte';
+  import NoteText from './NoteText.svelte';
 
   import {
     withComponentDocs
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
-    title: 'Components/EndNotes',
-    component: EndNotes,
+    title: 'Components/NoteText',
+    component: NoteText,
     ...withComponentDocs(componentDocs),
   };
 </script>
@@ -20,18 +20,18 @@
 <Meta {...meta} />
 
 <Template let:args>
-  <EndNotes {...args} />
+  <NoteText {...args} />
 </Template>
 
 <Story
   name="Default"
   args={{
-    text: `### Source
+    text: `## Source
 
-Reuters research.
+[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
 
-### Credits
+#### Credits
 
-People.`
+Jane Doe & John Doe`
   }}
 />

src/components/NoteText/NoteText.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  /**
+   * A markdown text string.
+   * @type {string}
+   * @required
+   */
+  export let text: string;
+  
+  import { marked } from 'marked';
+  import Block from '../Block/Block.svelte';
+</script>
+
+<Block cls="notes">
+  {#if text}
+    {@html marked.parse(text)}
+  {/if}
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  // Same as body text... we probably should unbind these styles from the component
+  // and import them in the app through a separate scss file.
+  @import "../../scss/mixins";
+
+  :global {
+    div.article-block.notes {
+      @include note-text;
+    }
+  }
+</style>

src/components/NoteText/stories/docs/component.md

@@ -0,0 +1,19 @@
+Note text includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
+
+Note text can be fed a markdown string, but text styling is intentionally restricted in this component. For example, all heading tags are forced to a single font size and weight.
+
+```svelte
+<script>
+  import { NoteText } from '@reuters-graphics/graphics-components';
+
+  const markdownText = `### Source
+
+Reuters research.
+
+### Credits
+
+People.`;
+</script>
+
+<NoteText text="{markdownText}" />
+```

src/components/SiteFooter/Referrals/Link.svelte

@@ -21,9 +21,12 @@
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  @import '../../../scss/bootstrap/main';
   @import '@reuters-graphics/style-main/scss/fonts/mixins';
 
+  a {
+    text-decoration: none;
+  }
+
   .image {
     width: 100%;
     padding-bottom: 50%;
@@ -59,7 +62,7 @@
     width: 25%;
     padding: 0 10px;
 
-    @include media-breakpoint-down(sm) {
+    @media (max-width: 768px) {
       width: 33.33333%;
 
       &:nth-child(4) {
@@ -67,7 +70,7 @@
       }
     }
 
-    @include media-breakpoint-down(xs) {
+    @media (max-width: 575px) {
       width: 50%;
 
       &:nth-child(3) {

src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -40,6 +40,14 @@
   @import '../../scss/_grids.scss';
   @import '../../scss/_z-indexes.scss';
 
+  a {
+    text-decoration: none;
+    &:hover {
+      color: inherit;
+      text-decoration: underline !important;
+    }
+  }
+
   .more-sections {
     position: relative;
 
@@ -71,6 +79,10 @@
         display: inline-block;
         padding: 4px 0;
         margin-bottom: 2px;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline !important;
+        }
       }
     }
 
@@ -84,6 +96,10 @@
       @media (min-width: 1300px) {
         font-size: 18px;
       }
+      text-decoration: none;
+        &:hover {
+          text-decoration: underline !important;
+        }
     }
   }
 </style>

src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -46,6 +46,14 @@
   @import '../../scss/_colors.scss';
   @import '../../scss/_breakpoints.scss';
 
+  a {
+    text-decoration: none;
+    &:hover {
+      color: inherit;
+      text-decoration: underline !important;
+    }
+  }
+
   .sections {
     display: flex;
 
@@ -97,6 +105,10 @@
     @media (min-width: 1300px) {
       font-size: 18px;
     }
+    &:hover {
+      color: inherit;
+      text-decoration: underline !important;
+    }
   }
 
   li > a {

src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -43,6 +43,7 @@
     flex-direction: row;
     justify-content: flex-start;
     color: var(--nav-primary, $tr-dark-grey);
+    text-decoration: none;
 
     &:hover,
     &:focus {

src/components/SiteHeader/NavBar/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import DownArrow from './DownArrow.svelte';
-  import SectionDrowdown from './NavDropdown/SectionDrowdown.svelte';
+  import SectionDropdown from './NavDropdown/SectionDropdown.svelte';
   import MoreDropdown from './NavDropdown/MoreDropdown.svelte';
   import { normalizeUrl } from './utils/index';
   import { getContext } from 'svelte';
@@ -67,7 +67,7 @@
               </button>
             </div>
             {#if $activeSection === section.id}
-              <SectionDrowdown
+              <SectionDropdown
                 section="{section}"
                 headingText="{`Latest in ${section.name}`}"
               />
@@ -160,6 +160,7 @@
       a,
       span {
         color: var(--nav-primary, $tr-dark-grey);
+        text-decoration: none;
         &:hover,
         &:active {
           text-decoration: none;

src/components/SiteHeader/SiteHeader.stories.svelte

@@ -7,6 +7,7 @@
   import darkThemeDocs from './stories/docs/darkTheme.md?raw';
 
   import SiteHeader, { themes } from './SiteHeader.svelte';
+  import Block from '../Block/Block.svelte';
 
   import {
     withComponentDocs,
@@ -26,7 +27,7 @@
 <Meta {...meta} />
 
 <Template let:args>
-  <div>
+  <div class="cancel-article">
     <SiteHeader {...args} />
   </div>
 </Template>
@@ -45,7 +46,9 @@
 
 
 <style>
-  div {
-    min-height: 89px;
+  div.cancel-article {
+    min-height: 625px;
+    width: calc(100% + 30px);
+    margin-left: -15px;
   }
 </style>

src/components/SiteHeader/SiteHeader.svelte

@@ -134,6 +134,10 @@
     @include for-tablet-down {
       height: $mobile-nav-height;
     }
+
+    a {
+      text-decoration: none;
+    }
   }
 
   .scroll-container {

src/index.js

@@ -3,7 +3,7 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
 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 EndNotes } from './components/EndNotes/EndNotes.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 Headline } from './components/Headline/Headline.svelte';

src/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@import "fonts/mixins";
-
 @import "mixins/block";
-@import "mixins/body-text";
+@import "mixins/body-text";
+@import "mixins/fonts";
+@import "mixins/note-text";

src/scss/bootstrap/_main.scss

@@ -12,22 +12,22 @@
 // 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";
+// // Helpers
+// @import "bootstrap/scss/helpers";
 
-// Utilities
-@import "bootstrap/scss/utilities/api";
+// // Utilities
+// @import "bootstrap/scss/utilities/api";
 
 
 // // This should go somewhere...

src/scss/bootstrap/_variables.scss

@@ -0,0 +1,10 @@
+// Controls spacing like bootstrap's margin classes...
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+);

src/scss/components/_end-notes.scss

@@ -1,21 +0,0 @@
-.end-notes {
-  margin: 40px auto 0;
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @extend .font-sans;
-
-    margin: 1rem 0 0;
-    font-size: 1rem;
-  }
-
-  p {
-    @extend .font-sans;
-
-    font-size: 1rem;
-    font-weight: 200;
-  }
-}

src/scss/fonts/_rules.scss

@@ -1,4 +1,4 @@
-@import "mixins";
+@import "../mixins";
 
 .font-sans {
   @include font-sans;

src/scss/main.scss

@@ -18,5 +18,4 @@
 
 // Components
 @import "components/article-metadata";
-@import "components/end-notes";
 @import "components/graphic";

src/scss/mixins/_body-text.scss

@@ -1,11 +1,15 @@
 @import "@reuters-graphics/style-color/scss/sequential/sesame";
 @import "@reuters-graphics/style-color/scss/thematic/brand";
 
-@import "../fonts/mixins";
+@import "fonts";
 @import "../typography/font-size";
 
 @mixin body-text {
-  p {
+  p,
+  ul li,
+  ul li p,
+  ol li,
+  ol li p {
     @include font-serif;
 
     @extend .paragraph-size;
@@ -13,14 +17,21 @@
     -webkit-font-smoothing: antialiased;
 
     a {
-      color: inherit;
+      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.3rem;
       background-repeat: repeat-x;
+      text-decoration: none;
+      // TODO: Assign this to background colour CSS var and the underline will skip descenders
+    //   text-shadow:
+    // 1px 1px white,
+    // 1px -1px white,
+    // -1px 1px white,
+    // -1px -1px white;
 
       @media(max-width: 540px) {
-        background-position: 0 1.2rem;
+        background-position: 0 1.1rem;
       }
 
       &:hover {
@@ -44,9 +55,12 @@
     }
   }
 
-  ul li,
-  ol li {
-    @extend .paragraph-size;
+  ul {
+    padding-left: 1.75rem;
+    list-style-type: square;
+  }
+  p + ul {
+    margin-top: -0.75rem;
   }
 
   blockquote {

src/scss/mixins/_fonts.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import "../fonts/variables";
 
 @mixin font-sans($i: false) {
   $important: if($i, "!important", "");

src/scss/mixins/_note-text.scss

@@ -0,0 +1,33 @@
+@import "fonts";
+
+@mixin note-text {  
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include font-display;
+
+    margin: 1rem 0 0;
+    font-size: 1rem;
+  }
+
+  p {
+    @include font-display;
+
+    font-size: 1rem;
+    font-weight: 200;
+    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;
+      }
+    }
+  }
+}

src/scss/typography/_rules.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @import "variables";
 @import "mixins";
-@import "../fonts/mixins";
+@import "../mixins";
 
 
 h1,