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

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -76,7 +76,7 @@
 }
 
 .legal {
-  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  border-top: 1px solid var(--nav-rules);
 }
 .legal .content-container {
   padding-left: 2.2222222222vw;
@@ -170,8 +170,8 @@
   align-items: center;
 }
 .link-group li a {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  color: var(--nav-primary, #404040);
+  font-family: var(--theme-font-family-sans-serif);
+  color: var(--nav-primary);
   font-size: 14px;
   font-weight: 500;
 }
@@ -184,9 +184,9 @@ section {
 p.copyright,
 p.disclaimer {
   margin: 0;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   font-size: 14px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary);
 }
 p.copyright a,
 p.disclaimer a {

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -157,16 +157,16 @@
   display: flex;
   align-items: center;
   margin: 8px 0;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
 }
 .quick-links ul li a {
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary);
   font-weight: 500;
   font-size: 16px;
 }
 
 section.quick-links {
-  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  border-top: 1px solid var(--nav-rules);
   max-width: 100%;
 }
 section.quick-links .content-container {
@@ -187,7 +187,7 @@ section.quick-links .content-container {
   }
 }
 section.quick-links h3 {
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary);
   font-size: 16px;
   font-weight: 400;
   margin: 0;

package/dist/components/SiteFooter/Referrals/Link.svelte

@@ -51,7 +51,7 @@
   text-decoration: underline;
 }
 .referral p {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   color: var(--nav-primary, #666);
   font-size: 0.9rem;
   line-height: 1.2rem;

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -35,6 +35,7 @@ onMount(async () => {
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
   <div>

package/dist/components/SiteFooter/svgs/Facebook.svelte

@@ -14,5 +14,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/Graphics.svelte

@@ -14,5 +14,5 @@
 </svg>
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/Instagram.svelte

@@ -16,5 +16,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/LinkedIn.svelte

@@ -14,5 +14,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/Pictures.svelte

@@ -10,5 +10,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/Twitter.svelte

@@ -14,5 +14,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/Videos.svelte

@@ -10,5 +10,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteFooter/svgs/YouTube.svelte

@@ -14,5 +14,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -128,7 +128,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .header {
   padding-left: 2.2222222222vw;
   padding-right: 2.2222222222vw;
-  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+  border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 @media (max-width: 1023px) {
   .header {
@@ -148,7 +148,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   padding-right: 2.2222222222vw;
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 1px solid #d0d0d0;
+  border-bottom: 1px solid var(--tr-muted-grey);
   width: 100%;
   max-width: 100%;
 }
@@ -188,7 +188,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 .section .section-link,
 .section .subsection-link {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   text-decoration: none;
   line-height: 1.2;
   color: var(--nav-primary);

package/dist/components/SiteHeader/NavBar/DownArrow.svelte

@@ -18,7 +18,7 @@
 <style>svg {
   margin-left: 4px;
   width: 10px;
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
   transition: transform 0.15s ease;
 }
 svg.rotated {

package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -82,7 +82,7 @@ a:hover {
 }
 .more-section-group .subsections .subsection-link {
   font-size: 16px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   line-height: 18px;
   font-weight: 400;
   display: inline-block;
@@ -99,7 +99,7 @@ a:hover {
   line-height: 18px;
   font-size: 16px;
   display: inline-block;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   text-decoration: none;
 }
 @media (min-width: 1300px) {

package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -46,7 +46,7 @@
   text-decoration: none;
 }
 a:hover {
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   text-decoration: underline !important;
 }
 
@@ -94,7 +94,7 @@ span.heading {
   text-decoration: none;
   text-transform: none;
   font-smooth: always;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   -webkit-font-smoothing: antialiased;
 }
 @media (min-width: 1300px) {
@@ -111,7 +111,7 @@ li > a {
   line-height: 1.75;
   letter-spacing: 0;
   font-size: 16px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   font-weight: 400;
   font-smooth: always;
   -webkit-font-smoothing: antialiased;

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte

@@ -13,7 +13,7 @@
   position: relative;
   height: 0;
   padding-bottom: 100%;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
 }
 
 .spinner {

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -38,7 +38,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   text-decoration: none;
 }
 .story-card a:hover, .story-card a:focus {
@@ -58,10 +58,10 @@
   width: calc(100% - 84px);
 }
 .story-card a .story-text span {
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   font-size: 16px;
   font-weight: 500;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
 }
 @media (min-width: 1300px) {
   .story-card a .story-text span {
@@ -76,7 +76,7 @@
   font-weight: 200;
 }
 .story-card a .story-text time {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   margin-top: 8px;
   display: block;
   font-size: 12px;

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -101,7 +101,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .dropdown-container {
-  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  border-top: 1px solid var(--nav-rules, var(--tr-muted-grey));
   box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   background: var(--nav-background, #fff);
@@ -174,7 +174,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 .stories-container .inner {
   padding-left: 2.2222222222vw;
-  border-left: 1px solid var(--nav-rules, #d0d0d0);
+  border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 @media (max-width: 1023px) {
   .stories-container .inner {
@@ -226,7 +226,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
 }
 .story-item:nth-child(1), .story-item:nth-child(2) {
-  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+  border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 .story-item:nth-child(3), .story-item:nth-child(4) {
   padding-top: 20px;
@@ -236,7 +236,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     padding-top: 20px;
   }
   .story-item:nth-child(3) {
-    border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+    border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
   }
 }
 
@@ -258,7 +258,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 span.latest {
   font-size: 16px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
 }
 @media (min-width: 1300px) {
   span.latest {

package/dist/components/SiteHeader/NavBar/index.svelte

@@ -144,7 +144,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .nav-item {
   display: inline-flex;
   padding: 0 10px;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   font-weight: 500;
   font-size: 16px;
 }
@@ -157,7 +157,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 .nav-item .nav-button a,
 .nav-item .nav-button span {
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
   text-decoration: none;
 }
 .nav-item .nav-button a:hover, .nav-item .nav-button a:active,
@@ -178,7 +178,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   bottom: 0;
   display: block;
   height: 4px;
-  background: var(--nav-accent, #fa6400);
+  background: var(--nav-accent, var(--tr-orange));
   opacity: 1 !important;
 }
 .nav-item .link {
@@ -193,7 +193,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   bottom: 0;
   display: block;
   height: 4px;
-  background: var(--nav-accent, #fa6400);
+  background: var(--nav-accent, var(--tr-orange));
 }
 
 .button {
@@ -205,10 +205,10 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
      -moz-appearance: none;
           appearance: none;
   cursor: pointer;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   font-weight: 500;
   font-size: 16px;
-  color: var(--nav-primary, #404040);
+  color: var(--nav-primary, var(--tr-dark-grey));
 }
 .button:not(.focused) {
   outline: none;

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -36,6 +36,7 @@ onMount(async () => {
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --nav-accent: var(--theme-colour-brand-logo, #fa6400);
     --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
   <div class="nav-container show-nav">
@@ -120,7 +121,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   top: 0;
   background: var(--nav-background, #fff);
   pointer-events: auto;
-  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+  border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 
 .main-bar {

package/dist/components/SiteHeader/svgs/Close.svelte

@@ -10,5 +10,5 @@
 >
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteHeader/svgs/Menu.svelte

@@ -15,5 +15,5 @@
 </svg>
 
 <style>svg {
-  fill: var(--nav-primary, #404040);
+  fill: var(--nav-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/SiteHeadline/SiteHeadline.svelte

@@ -4,6 +4,11 @@
  * @required
  */
 export let hed = 'Reuters Graphics Interactive';
+/**
+ * Headline size
+ * @type {string}
+ */
+export let hedSize = 'normal';
 /**
  * Section title.
  * @type {string}
@@ -37,7 +42,8 @@ export let id = '';
  * Add extra classes to target with custom CSS.
  * @type {string}
  */
-export let cls = '';
+let cls = '';
+export { cls as class };
 import Block from '../Block/Block.svelte';
 import slugify from 'slugify';
 import { apdate } from 'journalize';
@@ -56,31 +62,57 @@ const formatTime = (datetime) => new Date(datetime).toLocaleTimeString([], {
 const areSameDay = (first, second) => first.getFullYear() === second.getFullYear() &&
     first.getMonth() === second.getMonth() &&
     first.getDate() === second.getDate();
+let hedClass;
+$: {
+    switch (hedSize) {
+        case 'biggest':
+            hedClass = 'text-6xl';
+            break;
+        case 'bigger':
+            hedClass = 'text-5xl';
+            break;
+        case 'big':
+            hedClass = 'text-4xl';
+            break;
+        case 'small':
+            hedClass = 'text-2xl';
+            break;
+        default:
+            hedClass = 'text-3xl';
+    }
+}
 </script>
 
-<Block id="{id}" cls="headline-container {cls}" width="normal">
+<Block id="{id}" class="headline-container !my-16 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
-        <p class="section-title">
+        <p
+          class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
+        >
           {#if sectionUrl}
-            <a href="{sectionUrl}">{section}</a>
+            <a class="no-underline !text-secondary" href="{sectionUrl}"
+              >{section}</a
+            >
           {:else}
             {section}
           {/if}
         </p>
       {/if}
       {#if hed}
-        <h1>{hed}</h1>
+        <h1 class="my-0 font-hed text-primary leading-none {hedClass}">
+          {hed}
+        </h1>
       {/if}
     </div>
-    <aside class="article-metadata">
+    <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline">
+        <div class="byline text-sm text-primary font-bold leading-tight">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
               <a
+                class="no-underline"
                 href="https://www.reuters.com/authors/{slugify(author.trim(), {
                   lower: true,
                 })}/"
@@ -95,7 +127,9 @@ const areSameDay = (first, second) => first.getFullYear() === second.getFullYear
           {/if}
         </div>
       </div>
-      <div class="dateline-container">
+      <div
+        class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
+      >
         {#if isValidDate(publishTime)}
           <div>
             Published
@@ -129,96 +163,9 @@ const areSameDay = (first, second) => first.getFullYear() === second.getFullYear
   </header>
 </Block>
 
-<style>:global(div.article-block.headline-container) {
-  margin: 4rem auto;
-}
-
-header.headline {
-  text-align: center;
-  color: var(--theme-colour-text-primary, #404040);
-}
-header.headline h1 {
-  text-align: left;
-  font-size: 3rem;
-  line-height: 1.14;
-  margin: 0.6rem 0;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
-}
-@media (max-width: 900px) {
-  header.headline h1 {
-    font-size: 2.6rem;
-  }
-}
-@media (max-width: 600px) {
-  header.headline h1 {
-    font-size: 2.1rem;
-    font-weight: 500;
-  }
-}
-header.headline p {
-  font-family: var(--theme-font-family-subhed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
-  margin: 0;
-  font-weight: 200;
-}
-header.headline p.section-title {
-  font-weight: 800;
-  color: var(--theme-colour-text-secondary, #afafaf);
-  text-align: left;
-  font-size: 1.2rem;
-  opacity: 0.8;
-}
-@media (max-width: 600px) {
-  header.headline p.section-title {
-    font-size: 1rem;
-  }
-}
-header.headline p.section-title a {
-  color: var(--theme-colour-text-secondary, #afafaf);
-  text-decoration: none;
-}
-header.headline .article-metadata {
-  padding: 40px 0 0;
-  padding-top: 0;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
-  text-align: left;
-}
-header.headline .article-metadata .byline-container {
-  margin-bottom: 0px;
-}
-header.headline .article-metadata .byline {
-  font-weight: bold;
-  font-weight: 600;
-  font-size: 1rem;
-  line-height: 1.4rem;
-}
-@media (max-width: 600px) {
-  header.headline .article-metadata .byline {
-    font-size: 0.9rem;
-    line-height: 1.2rem;
-  }
-}
-header.headline .article-metadata .byline a {
-  color: var(--theme-colour-text-primary, #404040);
+<style>.byline a {
   text-decoration: none;
-  white-space: nowrap;
 }
-header.headline .article-metadata .byline a:hover {
+.byline a:hover {
   text-decoration: underline;
-}
-header.headline .article-metadata .dateline-container {
-  text-transform: uppercase;
-  color: var(--theme-colour-text-secondary, #666666);
-  font-size: 0.8rem;
-  line-height: 1.1rem;
-  letter-spacing: 0.3px;
-  margin-top: 0.5rem;
-}
-@media (max-width: 600px) {
-  header.headline .article-metadata .dateline-container {
-    font-size: 0.75rem;
-    line-height: 1.05rem;
-  }
 }</style>

package/dist/components/Spinner/Spinner.svelte

@@ -22,7 +22,7 @@ export let containerPadding = 10;
 <div
   style:width="100%"
   style:height="{`${width + containerPadding * 2}px`}"
-  class="component-container"
+  class="component-container flex items-center justify-center"
 >
   <div
     style="
@@ -35,8 +35,8 @@ export let containerPadding = 10;
       margin: 0 auto;
     "
   >
-    <div class="spinner-container">
-      <div class="spinner"></div>
+    <div class="spinner-container relative">
+      <div class="spinner absolute"></div>
     </div>
   </div>
 </div>
@@ -46,21 +46,13 @@ export let containerPadding = 10;
     transform: rotate(360deg);
   }
 }
-.component-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .spinner-container {
-  position: relative;
   height: 0;
   padding-bottom: 100%;
   color: var(--spinner-colour, #666);
 }
 
 .spinner {
-  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -69,7 +61,6 @@ export let containerPadding = 10;
   border: var(--spinner-ring-width, 6px) solid transparent;
   border-top-color: currentColor;
   animation: spinner var(--spinner-speed, 0.8s) linear infinite;
-  box-sizing: border-box;
 }
 .spinner::before {
   content: "";

package/dist/components/Table/Pagination.svelte

@@ -63,10 +63,10 @@ function goToNextPage() {
   margin-top: 1rem;
 }
 nav.pagination button {
-  border: 1px solid var(--theme-colour-text-secondary, #afafaf);
+  border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
   border-radius: 50%;
-  background: var(--theme-color-background);
-  color: var(--theme-colour-text-secondary, #afafaf);
+  background-color: var(--theme-colour-background);
+  color: var(--theme-colour-text-secondary);
   cursor: pointer;
   width: 35px;
   height: 35px;
@@ -87,8 +87,8 @@ nav.pagination button .icon-wrapper {
   white-space: nowrap;
 }
 nav.pagination button .icon-wrapper:hover {
-  color: var(--theme-colour-text-primary, #666666);
-  border-color: var(--theme-colour-text-primary, #666666);
+  color: var(--theme-colour-text-primary);
+  border-color: var(--theme-colour-text-primary, var(--tr-medium-grey));
 }
 nav.pagination .label {
   display: flex;
@@ -100,10 +100,10 @@ nav.pagination .label {
 }
 nav.pagination .label .records {
   font-size: 0.8rem;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--theme-font-family-sans-serif);
   font-weight: 300;
   margin: 0 1rem;
-  color: var(--theme-colour-text-primary, #666666);
+  color: var(--theme-colour-text-primary);
 }
 
 .visually-hidden {