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

package/dist/components/NoteText/NoteText.svelte

@@ -9,117 +9,29 @@ import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="notes mb-6">
+<Block class="notes mb-24">
   {#if text}
     {@html marked.parse(text)}
   {/if}
 </Block>
 
 <!-- svelte-ignore css-unused-selector -->
-<style global>:global(.paragraph-size) {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-:global(.paragraph-size.font-sans) {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  :global(.paragraph-size) {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  :global(.paragraph-size.font-sans) {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-:global(.paragraph-size.important) {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-:global(.paragraph-size.important.font-sans) {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  :global(.paragraph-size.important) {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  :global(.paragraph-size.important.font-sans) {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-:global(.small-size) {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  :global(.small-size) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-:global(.small-size.important) {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  :global(.small-size.important) {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-:global(.blockquote-size) {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  :global(.blockquote-size) {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-:global(.blockquote-size.important) {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  :global(.blockquote-size.important) {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-:global(div.article-block.notes) :global(h2),
+<style global>:global(div.article-block.notes) :global(h2),
 :global(div.article-block.notes) :global(h3),
 :global(div.article-block.notes) :global(h4),
 :global(div.article-block.notes) :global(h5),
 :global(div.article-block.notes) :global(h6) {
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  margin: var(--theme-font-size-base) 0 0;
+  font-size: var(--theme-font-size-sm);
   color: var(--theme-colour-text-primary);
-  margin: 1rem 0 0;
-  font-size: 1rem;
-  letter-spacing: 0.5px;
+  line-height: 1.25;
+  letter-spacing: 0em;
+  font-weight: 700;
+  text-transform: none;
 }
 :global(div.article-block.notes) :global(p) {
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  font-size: 1rem;
-  font-weight: 200;
-  color: var(--theme-colour-text-primary);
-}
-:global(div.article-block.notes) :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" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
-  background-position: 0 1.1rem;
-  background-repeat: repeat-x;
-  text-decoration: none;
-}
-:global(div.article-block.notes) :global(p) :global(a:hover) {
-  text-decoration: none;
+  font-family: var(--theme-font-family-note);
+  font-weight: 300;
+  font-size: var(--theme-font-size-sm);
+  line-height: 1.25;
 }</style>

package/dist/components/PhotoCarousel/PhotoCarousel.svelte

@@ -4,7 +4,8 @@ export let width = 'wider';
 /** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /**
  * Array of photos.
  * @required
@@ -53,8 +54,8 @@ const handleActiveChange = (e) => {
 };
 </script>
 
-<Block width="{width}" id="{id}" cls="photo-carousel {cls}">
-  <div class="carousel-container" bind:clientWidth="{containerWidth}">
+<Block width="{width}" id="{id}" class="photo-carousel {cls}">
+  <div class="carousel-container mb-2" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
       options="{{
@@ -70,9 +71,13 @@ const handleActiveChange = (e) => {
         <SplideTrack>
           {#each photos as photo, i}
             <SplideSlide>
-              <div class="photo-slide">
-                <figure style="height: {carouselHeight}px;">
+              <div class="photo-slide w-full h-full relative">
+                <figure
+                  class="m-0 w-full relative"
+                  style="height: {carouselHeight}px;"
+                >
                   <img
+                    class="w-full h-full"
                     data-splide-lazy="{photo.src}"
                     alt="{photo.altText}"
                     style:object-fit="{photo.objectFit ||
@@ -84,7 +89,7 @@ const handleActiveChange = (e) => {
                     <slot name="credit" credit="{photo.credit}" />
                   {:else}
                     <span
-                      class="credit"
+                      class="credit absolute m-0 leading-tighter font-note text-xxs"
                       class:contain-fit="{photo.objectFit === 'contain' ||
                         defaultImageObjectFit === 'contain'}"
                       >{photo.credit}</span
@@ -105,7 +110,10 @@ const handleActiveChange = (e) => {
               />
             {:else}
               {#key activeImageIndex}
-                <p class="caption" in:fly|local="{{ x: 20, duration: 175 }}">
+                <p
+                  class="caption font-note text-secondary text-xs mb-0 mx-0 mt-0.5"
+                  in:fly|local="{{ x: 20, duration: 175 }}"
+                >
                   {photos[activeImageIndex].caption}
                 </p>
               {/key}
@@ -130,33 +138,11 @@ const handleActiveChange = (e) => {
   </div>
 </Block>
 
-<style>.carousel-container {
-  margin-bottom: 10px;
-}
-.carousel-container .photo-slide {
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-.carousel-container .photo-slide figure {
-  margin: 0;
-  width: 100%;
-  position: relative;
-}
-.carousel-container .photo-slide figure img {
-  height: 100%;
-  width: 100%;
-}
-.carousel-container .photo-slide figure span.credit {
-  position: absolute;
+<style>.carousel-container .photo-slide figure span.credit {
   bottom: 4px;
   left: 10px;
-  margin: 0;
-  font-size: 0.7rem;
   color: white;
-  letter-spacing: 0.75px;
   text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
-  font-family: var(--theme-font-family-note);
 }
 .carousel-container .photo-slide figure span.credit.contain-fit {
   left: 50%;
@@ -175,7 +161,7 @@ const handleActiveChange = (e) => {
 }
 .carousel-container :global(.splide__arrows) :global(button) {
   display: flex;
-  font-size: 12px;
+  font-size: 14px;
   height: 30px;
   width: 30px;
   padding: 0;
@@ -184,6 +170,7 @@ const handleActiveChange = (e) => {
   border: 1px solid transparent;
   border-radius: 50%;
   background-color: transparent;
+  cursor: pointer;
   color: var(--theme-colour-text-secondary);
   opacity: 0.4;
 }
@@ -221,12 +208,4 @@ const handleActiveChange = (e) => {
 }
 .carousel-container :global(ul.splide__pagination) :global(li) :global(button.is-active) {
   opacity: 1;
-}
-.carousel-container p.caption {
-  margin: 5px 0 0;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-secondary, #666666);
-  font-size: 0.85rem;
-  line-height: 1.1rem;
-  font-weight: 300;
 }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -26,7 +26,8 @@ export let id = 'photopack-' + random4() + random4();
  * Add a class to target with SCSS.
  * @type {string}
  */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /** Width of the component within the text well. */
 export let width = 'normal';
 /**
@@ -67,23 +68,30 @@ l.rows.reduce((a, b) => a + b, 0) === images.length &&
 $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" cls="photopack {cls}">
-  <div class="photopack-container" bind:clientWidth="{containerWidth}">
+<Block width="{width}" id="{id}" class="photopack {cls}">
+  <div
+    class="photopack-container w-full mb-2"
+    bind:clientWidth="{containerWidth}"
+  >
     {#each rows as row, ri}
       <div
-        class="photopack-row"
+        class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
         style:margin-bottom="{gap + 'px'}"
       >
         {#each row as img, i}
-          <figure aria-labelledby="{id}-figure-{ri}-{i}">
+          <figure
+            class="relative m-0 p-0 flex-1"
+            aria-labelledby="{id}-figure-{ri}-{i}"
+          >
             <img
+              class="m-0 w-full h-full object-cover"
               src="{img.src}"
               alt="{img.altText}"
               style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
             />
             {#if !img.altText}
-              <div class="alt-warning">altText</div>
+              <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
             {/if}
           </figure>
         {/each}
@@ -96,7 +104,7 @@ $: rows = groupRows(images, layout);
         {#each rows as row, ri}
           {#each row as img, i}
             {#if img.caption}
-              <div id="{id}-figure-{ri}-{i}" class="caption">
+              <div id="{id}-figure-{ri}-{i}" class="caption mt-0 mx-0 fmb-2">
                 {@html marked(img.caption)}
               </div>
             {/if}
@@ -107,51 +115,20 @@ $: rows = groupRows(images, layout);
   </PaddingReset>
 </Block>
 
-<style>div.photopack-container {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-}
-div.photopack-container div.photopack-row {
-  display: flex;
-  justify-content: space-between;
-}
-div.photopack-container div.photopack-row figure {
-  flex: 1;
-  margin: 0;
-  padding: 0;
-  position: relative;
-}
-div.photopack-container div.photopack-row figure img {
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-div.photopack-container div.photopack-row figure div.alt-warning {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  padding: 5px 10px;
+<style>div.photopack-container div.photopack-row figure div.alt-warning {
   background-color: red;
   color: white;
-  position: absolute;
   top: 0;
   right: 0;
-  font-size: 14px;
-  line-height: 16px;
 }
 
-div.captions-container div.caption {
-  margin: 0 0 0.6rem;
-}
 div.captions-container div.caption:last-of-type {
   margin-bottom: 0;
 }
 div.captions-container div.caption :global(p) {
-  font-size: 0.85rem;
-  line-height: 1.1rem;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-secondary, #666666);
+  font-size: var(--theme-font-size-xs);
+  line-height: 1.25;
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
   margin: 0;
-  font-weight: 300;
 }</style>

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -28,7 +28,8 @@ export let width = 'wide';
 /** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 import Block from '../Block/Block.svelte';
 import { referrals } from './stores.js';
 import { onMount } from 'svelte';
@@ -59,12 +60,17 @@ getTime();
 </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>
+      <div
+        class="heading font-subhed text-secondary underline text-xs font-bold"
+        class:stacked="{clientWidth && clientWidth < 750}"
+      >
+        {heading}
+      </div>
     {/if}
     <div
-      class="referral-container"
+      class="referral-container inline-flex flex-wrap w-full justify-center"
       class:stacked="{clientWidth && clientWidth < 750}"
       class:xs="{clientWidth && clientWidth < 450}"
       bind:clientWidth="{clientWidth}"
@@ -76,26 +82,36 @@ getTime();
             target="{linkTarget}"
             rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
           >
-            <div class="referral-pack">
+            <div class="referral-pack flex justify-around my-0 mx-auto">
               <div
                 class="headline"
                 class:xs="{clientWidth && clientWidth < 450}"
               >
-                <div class="kicker" data-chromatic="ignore">
+                <div
+                  class="kicker m-0 font-note text-secondary"
+                  data-chromatic="ignore"
+                >
                   {referral.kicker.name}
                 </div>
-                <div class="title" data-chromatic="ignore">
+                <div
+                  class="title m-0 font-subhed font-bold text-primary"
+                  data-chromatic="ignore"
+                >
                   {referral.title}
                 </div>
-                <div class="publish-time" data-chromatic="ignore">
+                <div
+                  class="publish-time font-note text-secondary"
+                  data-chromatic="ignore"
+                >
                   {getTime(new Date(referral.display_time))}
                 </div>
               </div>
               <div
-                class="image-container"
+                class="image-container block m-0 overflow-hidden relative"
                 class:xs="{clientWidth && clientWidth < 450}"
               >
                 <img
+                  class="block object-cover m-0 w-full"
                   data-chromatic="ignore"
                   src="{referral.thumbnail.renditions.landscape['240w']}"
                   alt="{referral.thumbnail.caption ||
@@ -110,23 +126,15 @@ getTime();
   </Block>
 {/if}
 
-<style>h4 {
-  font-family: var(--theme-font-family-subhed);
-  color: var(--theme-colour-text-primary, #404040);
-  font-size: 1.1rem;
+<style>div.heading {
   margin: 0 0 5px;
-  font-weight: bold;
 }
-h4.stacked {
+div.heading.stacked {
   max-width: 450px;
   margin: 0 auto 5px;
 }
 
 .referral-container {
-  width: 100%;
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: center;
   gap: 10px 40px;
 }
 .referral-container a {
@@ -149,12 +157,6 @@ h4.stacked {
 .referral-container .referral:hover img {
   filter: brightness(85%);
 }
-.referral-container .referral div.referral-pack {
-  display: flex;
-  justify-content: space-around;
-  max-width: 450px;
-  margin: 0 auto;
-}
 .referral-container .referral .headline {
   display: inline-block;
   width: calc(100% - 140px);
@@ -171,34 +173,19 @@ h4.stacked {
   line-height: 1.1rem;
 }
 .referral-container .referral .headline .kicker {
-  font-family: var(--theme-font-family-subhed);
-  color: var(--theme-colour-text-secondary, #666666);
   font-size: 0.9rem;
-  margin: 0;
-  font-weight: 400;
 }
 .referral-container .referral .headline .title {
-  font-family: var(--theme-font-family-subhed);
-  color: var(--theme-colour-text-primary, #404040);
   font-size: 0.95rem;
   line-height: 1.15rem;
-  font-weight: bold;
-  margin: 0;
 }
 .referral-container .referral .headline .publish-time {
-  font-family: var(--theme-font-family-subhed);
-  color: var(--theme-colour-text-secondary, #666666);
   font-size: 0.75rem;
   margin: 2px 0 0;
-  font-weight: 400;
 }
 .referral-container .referral .image-container {
-  margin: 0;
-  overflow: hidden;
   border-radius: 10px;
-  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
-  display: block;
-  position: relative;
+  border: 1px solid var(--theme-colour-brand-rules);
   width: 140px;
   height: 90px;
 }
@@ -208,10 +195,5 @@ h4.stacked {
 }
 .referral-container .referral .image-container img {
   transition: filter 0.1s;
-  display: block;
-  width: 100%;
   height: inherit;
-  -o-object-fit: cover;
-     object-fit: cover;
-  margin: 0;
 }</style>

package/dist/components/Scroller/Background.svelte

@@ -9,7 +9,7 @@ export let stackBackground = true;
   <!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
   {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
     <div
-      class="step-background step-{i + 1}"
+      class="step-background step-{i + 1} w-full absolute"
       class:visible="{stackBackground ? i <= index : i === index}"
       class:hidden="{stackBackground ? i > index : i !== index}"
     >
@@ -22,8 +22,6 @@ export let stackBackground = true;
 {/each}
 
 <style>.step-background {
-  width: 100%;
-  position: absolute;
   transition: 0.5s opacity ease;
 }
 .step-background.hidden {

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

@@ -4,7 +4,7 @@ export let index;
 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}"