@reuters-graphics/graphics-components 0.1.6 → 0.1.7--canary.99.331bdb0.0

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -14,7 +14,7 @@ import Block from '../../Block/Block.svelte';
     </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>
@@ -34,196 +34,6 @@ import Block from '../../Block/Block.svelte';
   </div>
 {/if}
 
-<style>.paragraph-size, div.embedded-foreground :global(p), div.embedded-foreground :global(ul) :global(li), div.embedded-foreground :global(ul) :global(li) :global(p), div.embedded-foreground :global(ol) :global(li), div.embedded-foreground :global(ol) :global(li) :global(p) {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-.paragraph-size.font-sans, div.embedded-foreground :global(p.font-sans), div.embedded-foreground :global(ul) :global(li.font-sans), div.embedded-foreground :global(ol) :global(li.font-sans) {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  .paragraph-size, div.embedded-foreground :global(p), div.embedded-foreground :global(ul) :global(li), div.embedded-foreground :global(ul) :global(li) :global(p), div.embedded-foreground :global(ol) :global(li), div.embedded-foreground :global(ol) :global(li) :global(p) {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  .paragraph-size.font-sans, div.embedded-foreground :global(p.font-sans), div.embedded-foreground :global(ul) :global(li.font-sans), div.embedded-foreground :global(ol) :global(li.font-sans) {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-.paragraph-size.important, div.embedded-foreground :global(p.important), div.embedded-foreground :global(ul) :global(li.important), div.embedded-foreground :global(ol) :global(li.important) {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-.paragraph-size.important.font-sans, div.embedded-foreground :global(p.important.font-sans), div.embedded-foreground :global(ul) :global(li.important.font-sans), div.embedded-foreground :global(ol) :global(li.important.font-sans) {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  .paragraph-size.important, div.embedded-foreground :global(p.important), div.embedded-foreground :global(ul) :global(li.important), div.embedded-foreground :global(ol) :global(li.important) {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  .paragraph-size.important.font-sans, div.embedded-foreground :global(p.important.font-sans), div.embedded-foreground :global(ul) :global(li.important.font-sans), div.embedded-foreground :global(ol) :global(li.important.font-sans) {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  .small-size {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-.small-size.important {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  .small-size.important {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-.blockquote-size, div.embedded-foreground :global(blockquote) :global(p) {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  .blockquote-size, div.embedded-foreground :global(blockquote) :global(p) {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-.blockquote-size.important, div.embedded-foreground :global(blockquote) :global(p.important) {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  .blockquote-size.important, div.embedded-foreground :global(blockquote) :global(p.important) {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-div.embedded-foreground :global(h2),
-div.embedded-foreground :global(h3),
-div.embedded-foreground :global(h4),
-div.embedded-foreground :global(h5),
-div.embedded-foreground :global(h6),
-div.embedded-foreground :global(p),
-div.embedded-foreground :global(li),
-div.embedded-foreground :global(blockquote) {
-  color: var(--theme-colour-text-primary, #404040);
-}
-div.embedded-foreground :global(p),
-div.embedded-foreground :global(ul) :global(li),
-div.embedded-foreground :global(ul) :global(li) :global(p),
-div.embedded-foreground :global(ol) :global(li),
-div.embedded-foreground :global(ol) :global(li) :global(p) {
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-  color: var(--theme-colour-text-primary, #404040);
-}
-div.embedded-foreground :global(p) :global(a),
-div.embedded-foreground :global(ul) :global(li) :global(a),
-div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
-div.embedded-foreground :global(ol) :global(li) :global(a),
-div.embedded-foreground :global(ol) :global(li) :global(p) :global(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" style="stroke: currentColor; opacity: 0.8;" /></svg>');
-  background-position: 0 1.3rem;
-  background-repeat: repeat-x;
-  text-decoration: none;
-  text-shadow: 1px 1px var(--theme-colour-background, #ffffff), 1px -1px var(--theme-colour-background, #ffffff), -1px 1px var(--theme-colour-background, #ffffff), -1px -1px var(--theme-colour-background, #ffffff);
-}
-@media (max-width: 540px) {
-  div.embedded-foreground :global(p) :global(a),
-  div.embedded-foreground :global(ul) :global(li) :global(a),
-  div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
-  div.embedded-foreground :global(ol) :global(li) :global(a),
-  div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
-    background-position: 0 1.1rem;
-  }
-}
-div.embedded-foreground :global(p) :global(a:hover),
-div.embedded-foreground :global(ul) :global(li) :global(a:hover),
-div.embedded-foreground :global(ul) :global(li) :global(p) :global(a:hover),
-div.embedded-foreground :global(ol) :global(li) :global(a:hover),
-div.embedded-foreground :global(ol) :global(li) :global(p) :global(a:hover) {
-  text-decoration: none;
-}
-div.embedded-foreground :global(h2) {
-  margin: 4rem 0 2rem;
-  text-align: center;
-  font-weight: 600;
-}
-div.embedded-foreground :global(h2::after) {
-  display: block;
-  content: "";
-  background: var(--theme-colour-text-secondary, #666666);
-  height: 3px;
-  width: 100px;
-  margin: 10px auto 2rem;
-}
-div.embedded-foreground :global(ul) {
-  padding-left: 1.75rem;
-  list-style-type: square;
-}
-div.embedded-foreground :global(p) + :global(ul) {
-  margin-top: -0.75rem;
-}
-div.embedded-foreground :global(blockquote) {
-  margin: 30px 0;
-  border-left: 2px solid var(--theme-colour-text-secondary, #666666);
-  padding-left: 15px;
-}
-div.embedded-foreground :global(blockquote) :global(p) {
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-}
-div.embedded-foreground :global(blockquote) :global(blockquote) {
-  border: 0;
-  padding: 0;
-  margin: -5px 0 0;
-}
-div.embedded-foreground :global(blockquote) :global(blockquote) :global(p) {
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-  color: var(--theme-colour-text-primary, #404040);
-  font-size: 1rem;
-}
-@media (max-width: 540px) {
-  div.embedded-foreground :global(blockquote) :global(blockquote) :global(p) {
-    font-size: 0.9rem;
-  }
-}
-div.embedded-foreground :global(blockquote) :global(blockquote) :global(blockquote) {
-  display: none;
-}
-div.embedded-foreground :global(.font-sans) {
-  font-family: var(--theme-font-family-sans-serif, var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif)) !important;
-}
-div.embedded-foreground :global(p:last-child) {
+<style>div.embedded-foreground :global(p:last-child) {
   margin-bottom: 0;
-}
-
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  white-space: nowrap !important;
-  border: 0 !important;
 }</style>

package/dist/components/Scroller/Foreground.svelte

@@ -3,7 +3,10 @@ import { marked } from 'marked';
 </script>
 
 {#each steps as step, i}
-  <div class="step-foreground-container step-{i + 1}">
+  <div
+    class="step-foreground-container step-{i +
+      1} mb-20 h-screen flex items-center justify-center"
+  >
     {#if step.foreground === '' || !step.foreground}
       <!-- Empty foreground -->
       <div class="empty-step-foreground"></div>
@@ -13,7 +16,7 @@ import { marked } from 'marked';
         </div>
       {/if}
     {:else}
-      <div class="step-foreground">
+      <div class="step-foreground w-full">
         {#if typeof step.foreground === 'string'}
           {@html marked.parse(step.foreground)}
         {:else}
@@ -32,114 +35,18 @@ import { marked } from 'marked';
   </div>
 {/each}
 
-<style>.paragraph-size {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-.paragraph-size.font-sans {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  .paragraph-size {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  .paragraph-size.font-sans {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-.paragraph-size.important {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-.paragraph-size.important.font-sans {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  .paragraph-size.important {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  .paragraph-size.important.font-sans {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  .small-size {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-.small-size.important {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  .small-size.important {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-.blockquote-size {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  .blockquote-size {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-.blockquote-size.important {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  .blockquote-size.important {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-div.step-foreground-container {
-  height: 100vh;
+<style>div.step-foreground-container {
   width: initial;
   max-width: initial;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 5rem;
 }
 div.step-foreground-container .step-foreground {
   max-width: 550px;
-  width: 100%;
   padding: 1.2rem 30px;
   background: rgba(255, 255, 255, 0.8);
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
   margin-bottom: 0;
 }
-
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  white-space: nowrap !important;
-  border: 0 !important;
+div.step-foreground-container .step-foreground :global(*:first-child) {
+  margin-top: 0;
 }</style>

package/dist/components/Scroller/Scroller.svelte

@@ -84,11 +84,11 @@ let progress;
 </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}"
@@ -97,15 +97,16 @@ let progress;
     >
       <div
         slot="background"
-        class="background"
+        class="background min-h-screen relative p-0 flex justify-center"
         class:right="{foregroundPosition === 'left opposite'}"
         class:left="{foregroundPosition === 'right opposite'}"
         aria-hidden="true"
       >
-        <div class="scroller-graphic-well">
+        <div class="scroller-graphic-well w-full">
           <Block
             width="{backgroundWidth}"
-            cls="background-container step-{index + 1}"
+            class="background-container step-{index +
+              1} my-0 min-h-screen flex justify-center items-center relative"
           >
             <Background
               index="{index}"
@@ -117,13 +118,13 @@ let progress;
         </div>
       </div>
 
-      <div slot="foreground" class="foreground {foregroundPosition}">
+      <div slot="foreground" class="foreground {foregroundPosition} w-full">
         <Foreground steps="{steps}" />
       </div>
     </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}"
@@ -132,24 +133,7 @@ let progress;
   </Block>
 {/if}
 
-<style>.scroller-container {
-  width: calc(100% + 30px);
-  margin-left: -15px;
-  max-width: initial;
-}
-.scroller-container.embedded {
-  width: 100%;
-  padding: 0 15px;
-}
-
-div.background {
-  min-height: 100vh;
-  position: relative;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-div.background.left {
+<style>div.background.left {
   width: 50%;
   float: left;
 }
@@ -173,24 +157,8 @@ div.background.right {
 }
 div.background div.scroller-graphic-well {
   padding: 0 15px;
-  width: 100%;
-}
-div.background div.scroller-graphic-well :global(div.background-container) {
-  margin-top: 0;
-  margin-bottom: 0;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-div.background div.scroller-graphic-well :global(div.background-container.fluid) {
-  margin: 0 0 0 -15px;
 }
 
-div.foreground {
-  width: 100%;
-}
 div.foreground.right {
   width: 50%;
   float: right;

package/dist/components/SearchInput/MagnifyingGlass.svelte

@@ -14,5 +14,5 @@
   vertical-align: middle;
 }
 svg path {
-  fill: var(--theme-colour-text-secondary, #666666);
+  fill: var(--theme-colour-text-secondary);
 }</style>

package/dist/components/SearchInput/SearchInput.svelte

@@ -32,7 +32,12 @@ function clear() {
     on:input="{input}"
     bind:value="{value}"
   />
-  <div class="search--x" class:invisible="{!active}" on:click="{clear}">
+  <div
+    class="search--x"
+    class:invisible="{!active}"
+    on:click="{clear}"
+    on:keyup="{clear}"
+  >
     <X />
   </div>
 </div>
@@ -50,15 +55,15 @@ function clear() {
   top: 0.15rem;
   width: 1.5rem;
   height: 1.5rem;
-  fill: var(--theme-colour-brand-rules, #d0d0d0);
+  fill: var(--theme-colour-brand-rules);
 }
 .search .search--input {
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
+  font-family: var(--theme-font-family-sans-serif);
+  color: var(--theme-colour-text-primary);
   padding: 0 0 0 2rem;
   font-size: 0.8rem;
   height: 33px;
-  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  border: 1px solid var(--theme-colour-brand-rules);
   background: transparent;
   border-radius: 6px;
   width: 100%;
@@ -69,7 +74,7 @@ function clear() {
   top: 0.15rem;
   width: 1.5rem;
   height: 1.5rem;
-  fill: var(--theme-colour-text-primary, #666666);
+  fill: var(--theme-colour-text-primary);
   cursor: pointer;
 }
 .search .search--x.invisible {

package/dist/components/SearchInput/X.svelte

@@ -23,8 +23,8 @@
   vertical-align: middle;
 }
 svg path {
-  fill: var(--theme-colour-text-secondary, #666666);
+  fill: var(--theme-colour-text-secondary);
 }
 svg rect {
-  fill: var(--theme-colour-background, white);
+  fill: var(--theme-colour-background);
 }</style>

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -18,7 +18,8 @@ export let dateColour = 'var(--theme-colour-accent, red)';
  * Set a class to target with SCSS.
  * @type {string}
  */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /**
  * Set an ID to target with SCSS.
  * @type {string}
@@ -30,11 +31,14 @@ import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { marked } from 'marked';
 </script>
 
-<Block width="normal" id="{id}" cls="simple-timeline-container {cls}">
-  <div class="timeline" style="--symbol-colour:{symbolColour};">
+<Block width="normal" id="{id}" class="simple-timeline-container {cls}">
+  <div
+    class="timeline mt-8 pl-2 pr-3.5"
+    style="--symbol-colour:{symbolColour};"
+  >
     {#each dates as date}
-      <div class="date">
-        <svg height="25" width="20">
+      <div class="date relative m-0 pl-5 pb-4">
+        <svg class="absolute bg" height="25" width="20">
           <circle
             cx="10"
             cy="12"
@@ -43,17 +47,29 @@ import { marked } from 'marked';
             stroke-width="2"
             fill="transparent"></circle>
         </svg>
-        <h5 style:color="{dateColour}">{date.date}</h5>
+        <div
+          class="timeline-date font-subhed font-bold mt-0 text-sm fmb-1"
+          style:color="{dateColour}"
+        >
+          {date.date}
+        </div>
         {#each date.events as event}
           <div class="event pb-2">
             {#if event.titleLink}
               <a href="{event.titleLink}" target="_blank">
-                <h6>
-                  {event.title} <span><Fa fw icon="{faLink}" /></span>
-                </h6>
+                <div
+                  class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
+                >
+                  {event.title}
+                  <span class="text-sm"><Fa fw icon="{faLink}" /></span>
+                </div>
               </a>
             {:else}
-              <h6>{event.title}</h6>
+              <div
+                class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
+              >
+                {event.title}
+              </div>
             {/if}
             {#if event.context}
               {@html marked(event.context)}
@@ -65,62 +81,36 @@ import { marked } from 'marked';
   </div>
 </Block>
 
-<style>.timeline {
-  margin-top: 2rem;
-  padding-left: 8px;
-  padding-right: 15px;
+<style>.timeline div.event :global(p) {
+  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
+
 .timeline .date {
   border-left: 1px solid var(--symbol-colour);
-  padding-left: 20px;
-  padding-bottom: 1rem;
-  position: relative;
-  margin: 0;
-  display: block;
 }
 .timeline .date:last-child {
-  border-left: 1px solid var(--theme-colour-background, #fff);
-}
-.timeline .date h5 {
-  font-size: 0.95rem;
-  margin-top: 0px;
+  border-left: 1px solid var(--theme-colour-background);
 }
 .timeline svg {
-  background-color: var(--theme-colour-background, #fff);
-  position: absolute;
   top: -1px;
   left: -10px;
 }
-.timeline div.event h6 {
-  margin: 0;
-  font-size: 1.2rem;
-  color: var(--theme-colour-text-primary, #666);
-}
 .timeline div.event a {
-  color: var(--theme-colour-text-primary, #666);
   text-decoration: none;
 }
 .timeline div.event a:hover {
   text-decoration: underline;
 }
-.timeline div.event a h6 span {
+.timeline div.event a div.title span {
   opacity: 0.5;
-  font-size: 1rem;
 }
-.timeline div.event a h6:hover span {
+.timeline div.event a div.title:hover span {
   opacity: 0.8;
 }
 .timeline div.event :global(p) {
-  margin-top: 0;
-  margin-bottom: 0.7rem;
-  font-size: 1rem;
+  line-height: 1.5;
   font-weight: 300;
-  color: var(--theme-colour-text-primary, #666);
-  font-family: var(--theme-font-family-sans-serif);
-}
-.timeline div.event :global(p):last-of-type {
-  margin-bottom: 0;
-}
-.timeline div.event :global(a) {
-  color: var(--theme-colour-text-primary, #666);
+  font-size: var(--theme-font-size-sm);
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-primary);
 }</style>

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -79,7 +79,7 @@
 }
 
 .company {
-  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  border-top: 1px solid var(--nav-rules);
 }
 .company .content-container {
   padding-left: 2.2222222222vw;
@@ -122,12 +122,12 @@
 }
 .links .symbol .button {
   border-radius: 8px;
-  border: 1px solid var(--nav-rules, #d0d0d0);
+  border: 1px solid var(--nav-rules);
   background: var(--nav-background, #fff);
   color: var(--nav-primary, #666);
 }
 .links .symbol .button:hover {
-  border: 1px solid var(--nav-primary, #404040);
+  border: 1px solid var(--nav-primary);
 }
 .links .social {
   width: 40px;
@@ -155,7 +155,7 @@ section.company h2 {
   margin-bottom: 12px;
   line-height: 1.333;
   font-size: 16px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary);
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
@@ -165,9 +165,9 @@ section.company h2 {
   }
 }
 section.company p {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   line-height: 1.43;
   font-size: 14px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary);
   font-weight: 400;
 }</style>