component text style sweep

reuters-graphics · Aug 31, 2023 · e7a79c5 · e7a79c5
1 parent 60ba223
commit e7a79c5
Show file tree

Hide file tree

Showing 23 changed files with 116 additions and 110 deletions.
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
@@ -11,7 +11,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="notes mb-24">
+<Block class="notes">
   {#if text}
     {@html marked.parse(text)}
   {/if}

diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -97,7 +97,7 @@
   };
 </script>
 
-<Block width="{width}" id="{id}" class="photo-carousel {cls}">
+<Block width="{width}" id="{id}" class="photo-carousel fmy-5 {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
@@ -116,11 +116,11 @@
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
-                  class="m-0 w-full relative"
+                  class="fm-0 w-full relative"
                   style="height: {carouselHeight}px;"
                 >
                   <img
-                    class="w-full h-full my-0"
+                    class="w-full h-full fmy-0"
                     data-splide-lazy="{photo.src}"
                     alt="{photo.altText}"
                     style:object-fit="{photo.objectFit ||
@@ -132,7 +132,7 @@
                     <slot name="credit" credit="{photo.credit}" />
                   {:else}
                     <span
-                      class="credit absolute m-0 leading-tighter font-note text-xxs"
+                      class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
                       class:contain-fit="{photo.objectFit === 'contain' ||
                         defaultImageObjectFit === 'contain'}"
                       >{photo.credit}</span
@@ -168,7 +168,7 @@
           <div class="splide__progress__bar"></div>
         </div>
 
-        <div class="splide__arrows">
+        <div class="splide__arrows fp-1">
           <button class="splide__arrow splide__arrow--prev">
             <Fa icon="{faChevronLeft}" fw />
           </button>
@@ -188,8 +188,8 @@
     .photo-slide {
       figure {
         span.credit {
-          bottom: 4px;
-          left: 10px;
+          bottom: 0;
+          left: 0;
           color: white;
           text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
             1px 1px 0 #333;
@@ -210,8 +210,7 @@
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
-        padding: 0px;
-        padding-top: 4px;
+
         button {
           display: flex;
           font-size: 14px;
@@ -248,11 +247,11 @@
         flex-wrap: nowrap;
         li {
           flex-grow: 1;
+          margin-top: -9px;
           button {
             width: 100%;
             height: 7px;
             border-radius: 0;
-            margin: 0 0px;
             padding: 0;
             border: 1px solid $theme-colour-background;
             background: $theme-colour-text-secondary;

diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
@@ -89,11 +89,8 @@
   $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" class="photopack {cls}">
-  <div
-    class="photopack-container w-full mb-2"
-    bind:clientWidth="{containerWidth}"
-  >
+<Block width="{width}" id="{id}" class="photopack fmy-5 {cls}">
+  <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div
         class="photopack-row flex justify-between"
@@ -120,17 +117,19 @@
     {/each}
   </div>
   <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <Block width="{captionWidth}" class="photopack-captions-container">
-      {#each rows as row, ri}
-        {#each row as img, i}
-          {#if img.caption}
-            <div id="{id}-figure-{ri}-{i}" class="caption">
-              {@html marked(img.caption)}
-            </div>
-          {/if}
+    <div class="notes contents">
+      <Block width="{captionWidth}" class="photopack-captions-container">
+        {#each rows as row, ri}
+          {#each row as img, i}
+            {#if img.caption}
+              <div id="{id}-figure-{ri}-{i}" class="caption">
+                {@html marked(img.caption)}
+              </div>
+            {/if}
+          {/each}
         {/each}
-      {/each}
-    </Block>
+      </Block>
+    </div>
   </PaddingReset>
 </Block>
 
@@ -150,14 +149,24 @@
     }
   }
 
-  :global {
-    .photopack-captions-container {
-      @include \!fmy-2;
-      div.caption {
-        p {
-          @include body-caption;
-        }
-      }
+  .notes {
+    :global(.photopack-captions-container) {
+      @include fmy-2;
+    }
+
+    :global(.photopack-captions-container .caption p) {
+      @include body-caption;
     }
   }
+
+  // :global {
+  //   .photopack-captions-container {
+  //     @include \!fmy-2;
+  //     div.caption {
+  //       p {
+  //         @include body-caption;
+  //       }
+  //     }
+  //   }
+  // }
 </style>
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -50,7 +50,7 @@
   args="{{
     section: '/lifestyle/sports/',
     number: 4,
-    cls: 'my-3',
+    class: 'fmy-5',
     heading: 'More World Cup coverage',
   }}"
 />
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -76,7 +76,7 @@
 </script>
 
 {#if $referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block {cls}">
+  <Block width="{width}" id="{id}" class="referrals-block fmy-5 {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"

diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
@@ -47,6 +47,7 @@
     max-width: initial;
     .step-foreground {
       max-width: calc($column-width-normal * 0.9);
+      border-radius: 0.25rem;
       @include fpy-5;
       @include fpx-4;
       background: rgba(255, 255, 255, 0.9);

diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
@@ -101,7 +101,7 @@
 </script>
 
 {#if !embedded}
-  <Block width="fluid" class="scroller-container" id="{id}">
+  <Block width="fluid" class="scroller-container fmy-5" id="{id}">
     <SvelteScroller
       bind:index="{index}"
       bind:offset="{offset}"

diff --git a/src/components/SearchInput/MagnifyingGlass.svelte b/src/components/SearchInput/MagnifyingGlass.svelte
@@ -15,7 +15,7 @@
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-text-secondary;
+      fill: $theme-colour-brand-rules;
     }
   }
 </style>
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
@@ -26,20 +26,22 @@
   }
 </script>
 
-<div class="search" class:active="{active}">
-  <div class="search--icon">
+<div class="search relative inline-flex items-center" class:active="{active}">
+  <div class="search--icon absolute ml-2 mt-1.5">
     <MagnifyingGlass />
   </div>
   <input
     id="search--input"
-    class="search--input"
+    class="search--input body-caption pl-8"
     type="text"
     placeholder="{searchPlaceholder}"
     on:input="{input}"
     bind:value="{value}"
   />
   <div
-    class="search--x"
+    class="search--x absolute mt-1"
+    role="button"
+    tabindex="0"
     class:invisible="{!active}"
     on:click="{clear}"
     on:keyup="{clear}"
@@ -52,34 +54,24 @@
   @use '../../scss/mixins' as *;
 
   .search {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 256px;
-    padding: 0 0 0 0.1rem;
+    width: 250px;
     .search--icon {
-      position: absolute;
-      left: 0.5rem;
-      top: 0.15rem;
+      left: 0;
+      top: 0;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-brand-rules;
     }
     .search--input {
-      @include font-sans;
-      @include text-primary;
-      padding: 0 0 0 2rem;
-      font-size: 0.8rem;
-      height: 33px;
+      height: 2.15rem;
       border: 1px solid $theme-colour-brand-rules;
       background: transparent;
-      border-radius: 6px;
+      border-radius: 0.25rem;
       width: 100%;
     }
     .search--x {
-      position: absolute;
       right: 0;
-      top: 0.15rem;
+      top: 0;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-text-primary;

diff --git a/src/components/SearchInput/X.svelte b/src/components/SearchInput/X.svelte
@@ -24,7 +24,7 @@
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-text-secondary;
+      fill: $theme-colour-brand-rules;
     }
     rect {
       fill: $theme-colour-background;

diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -106,7 +106,5 @@
   name="Default"
   args="{{
     dates,
-    symbolColour: '#999',
-    dateColour: '#e05a39',
   }}"
 />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -18,7 +18,7 @@
    * Set a colour for the timeline bullet symbols and line.
    * @type {string}
    */
-  export let symbolColour: string = '#ccc';
+  export let symbolColour: string = 'var(--theme-colour-brand-rules)';
   /**
    * Set a colour for the date headings in the timeline.
    * @type {string}
@@ -44,11 +44,11 @@
 
 <Block width="normal" id="{id}" class="simple-timeline-container {cls}">
   <div
-    class="timeline mt-8 pl-2 pr-3.5"
+    class="timeline fmy-5 pl-2 pr-3.5"
     style="--symbol-colour:{symbolColour};"
   >
     {#each dates as date}
-      <div class="date relative m-0 pl-5 pb-4">
+      <div class="date relative pt-0.5 pl-5 pb-4">
         <svg class="absolute bg" height="25" width="20">
           <circle
             cx="10"
@@ -59,7 +59,7 @@
             fill="transparent"></circle>
         </svg>
         <div
-          class="timeline-date font-subhed font-bold mt-0 text-sm fmb-1"
+          class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
           style:color="{dateColour}"
         >
           {date.date}
@@ -68,17 +68,13 @@
           <div class="event pb-2">
             {#if event.titleLink}
               <a href="{event.titleLink}" target="_blank">
-                <div
-                  class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
-                >
+                <div class="title h3">
                   {event.title}
                   <span class="text-sm"><Fa fw icon="{faLink}" /></span>
                 </div>
               </a>
             {:else}
-              <div
-                class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
-              >
+              <div class="title h3">
                 {event.title}
               </div>
             {/if}
@@ -105,6 +101,12 @@
       top: -1px;
       left: -10px;
     }
+    div.title {
+      @include fmt-2;
+      @include fmb-1;
+      @include font-medium;
+    }
+
     div.event {
       a {
         text-decoration: none;
@@ -121,12 +123,13 @@
         }
       }
       :global(p) {
-        @include fmb-2;
-        @include leading-normal;
-        @include font-light;
-        @include text-sm;
-        @include font-note;
-        @include text-primary;
+        @include body-note;
+        // @include fmb-2;
+        // @include leading-normal;
+        // @include font-light;
+        // @include text-sm;
+        // @include font-note;
+        // @include text-primary;
       }
     }
   }

diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/stories/docs/component.md
@@ -20,9 +20,5 @@ A simple, clean text timeline.
   ];
 </script>
 
-<SimpleTimeline
-  dates="{dates}"
-  symbolColour="#999"
-  dateColour="rgb(224, 90, 57)"
-/>
+<SimpleTimeline dates="{dates}" />
 ```