From 5a61f95123bcd1022fac2d8a1cb0ffaaf55e8573 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Thu, 7 Sep 2023 18:09:33 +0530
Subject: [PATCH] fixes to headline and table #116

---
 src/components/Byline/Byline.svelte           |  14 +--
 .../HeroHeadline/Hero.stories.svelte          |   2 +-
 src/components/HeroHeadline/Hero.svelte       | 108 +++++++++---------
 .../stories/docs/inlineGraphic.md             |   2 +-
 src/components/NoteText/NoteText.svelte       |   3 +-
 src/components/SearchInput/SearchInput.svelte |  10 +-
 src/components/Table/Pagination.svelte        |   4 +-
 src/components/Table/Table.stories.svelte     |   1 +
 src/components/Table/Table.svelte             |  18 +--
 src/scss/tokens/text/mixins/_text-role.scss   |   3 +-
 10 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index 9723c81c..06b77e92 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -66,7 +66,7 @@
 
 <Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
-    <div class="byline">
+    <div class="byline body-caption">
       {#if $$slots.byline}
         <!-- Custom byline -->
         <slot name="byline" />
@@ -92,7 +92,7 @@
         {/if}
       {/if}
     </div>
-    <div class="dateline fmt-0">
+    <div class="dateline body-caption fmt-0">
       {#if $$slots.published}
         <div class="whitespace-nowrap inline-block">
           <!-- Custom published dateline -->
@@ -144,11 +144,11 @@
     }
   }
 
-  .byline,
-  .dateline {
-    @include body-caption;
-    @include fmb-1;
-  }
+  // .byline,
+  // .dateline {
+  //   @include body-caption;
+  //   @include fmb-1;
+  // }
 
   @media (min-width: $column-width-narrower) {
     .dateline {
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 93d4427b..f02e5c0f 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -244,7 +244,7 @@
   >
     <div slot="inline">
       <GraphicBlock
-        width="fluid"
+        width="widest"
         role="figure"
         class="my-0"
         textWidth="normal"
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index 40f1756e..d881209f 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -82,10 +82,9 @@
 
   import Headline from '../Headline/Headline.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import TextBlock from '../GraphicBlock/TextBlock.svelte';
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
-  import { marked } from 'marked';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 
   let hedClass;
   $: {
@@ -137,7 +136,8 @@
             dek="{dek}"
           />
         {/if}
-        <div class="background-container">
+
+        <div class="graphic-container">
           {#if $$slots.background}
             <!-- Hero graphic named slot -->
             <slot name="background" />
@@ -147,6 +147,7 @@
               role="img"
               class="my-0"
               textWidth="normal"
+              notes="{notes}"
               ariaDescription="{ariaDescription}"
             >
               <div
@@ -157,42 +158,37 @@
           {/if}
         </div>
       </Block>
-      {#if notes}
-        <TextBlock width="normal">
-          <aside>
-            {@html marked(notes)}
-          </aside>
-        </TextBlock>
-      {/if}
     {/if}
 
     <!-- Inline hero -->
     {#if $$slots.inline}
       <Block width="fluid" class="hero-headline inline-hero">
-        {#if $$slots.hed}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
-          >
-            <!-- Headline named slot -->
-            <div slot="hed">
-              <slot name="hed" />
-            </div>
-          </Headline>
-        {:else}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
-          />
-        {/if}
+        <PaddingReset containerIsFluid="{true}">
+          {#if $$slots.hed}
+            <Headline
+              class="{cls} !text-{hedAlign}"
+              width="{hedWidth}"
+              section="{section}"
+              hedSize="{hedSize}"
+              hed="{hed}"
+              dek="{dek}"
+            >
+              <!-- Headline named slot -->
+              <div slot="hed">
+                <slot name="hed" />
+              </div>
+            </Headline>
+          {:else}
+            <Headline
+              class="{cls} !text-{hedAlign}"
+              width="{hedWidth}"
+              section="{section}"
+              hedSize="{hedSize}"
+              hed="{hed}"
+              dek="{dek}"
+            />
+          {/if}
+        </PaddingReset>
         <div class="graphic-container">
           <!-- Hero named slot -->
           <slot name="inline" />
@@ -200,20 +196,20 @@
       </Block>
     {/if}
   </div>
-</div>
 
-<div class="hero-byline fmb-6">
-  {#if $$slots.byline}
-    <!-- Custom byline/dateline -->
-    <slot name="byline" />
-  {:else if authors.length > 0 || publishTime}
-    <Byline
-      authors="{authors}"
-      publishTime="{publishTime}"
-      updateTime="{updateTime}"
-      align="left"
-    />
-  {/if}
+  <div class="hero-byline fmb-6">
+    {#if $$slots.byline}
+      <!-- Custom byline/dateline -->
+      <slot name="byline" />
+    {:else if authors.length > 0 || publishTime}
+      <Byline
+        authors="{authors}"
+        publishTime="{publishTime}"
+        updateTime="{updateTime}"
+        align="left"
+      />
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">
@@ -221,15 +217,11 @@
 
   .hero-wrapper {
     :global(.background-hero) {
-      height: var(--heroHeight, 100svh);
+      min-height: var(--heroHeight, 100svh);
       max-height: 1800px;
       position: relative;
     }
 
-    :global(.hero-headline) {
-      overflow-x: hidden;
-    }
-
     :global(.background-hero .headline) {
       @include fmt-0;
       z-index: 1;
@@ -243,6 +235,10 @@
       height: var(--heroHeight, 100svh);
       max-height: 1800px;
       transform: translateX(-50%);
+
+      @media (max-width: 690px) {
+        padding: 0 15px;
+      }
     }
 
     :global(aside p) {
@@ -256,6 +252,14 @@
       height: var(--heroHeight);
       object-fit: cover;
     }
+
+    :global(.graphic-container .article-block:not(.graphic)) {
+      @media (max-width: 690px) {
+        width: 100%;
+        padding: 0 15px;
+        margin-left: 0;
+      }
+    }
   }
 
   .hero-byline {
diff --git a/src/components/HeroHeadline/stories/docs/inlineGraphic.md b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
index c4b395ce..9a6ef10a 100644
--- a/src/components/HeroHeadline/stories/docs/inlineGraphic.md
+++ b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
@@ -18,7 +18,7 @@ Reuters Graphics headline followed by a graphic or any media block.
 >
   <div slot="inline">
     <GraphicBlock
-      width="fluid"
+      width="widest"
       role="figure"
       class="my-0"
       textWidth="normal"
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 048ce779..1a4e087a 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -32,13 +32,14 @@
       @include font-medium;
       @include tracking-normal;
       @include fmt-3;
-      @include fmb-0;
+      margin-bottom: 0.125rem;
       text-transform: none;
     }
 
     p {
       @include body-caption;
       @include fmt-0;
+      @include fmb-2;
     }
   }
 </style>
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 4d212124..8037d283 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <div class="search relative inline-flex items-center" class:active="{active}">
-  <div class="search--icon absolute ml-2 mt-1">
+  <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
   <input
@@ -39,7 +39,7 @@
     bind:value="{value}"
   />
   <div
-    class="search--x absolute mt-1"
+    class="search--x absolute"
     role="button"
     tabindex="0"
     class:invisible="{!active}"
@@ -56,8 +56,8 @@
   .search {
     width: 250px;
     .search--icon {
-      left: 0;
-      top: 0;
+      left: 0.5rem;
+      top: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-brand-rules;
@@ -71,7 +71,7 @@
     }
     .search--x {
       right: 0;
-      top: 0;
+      top: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-text-primary;
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index 73822874..b6e6c71b 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -44,7 +44,7 @@
   }
 </script>
 
-<nav aria-label="pagination" class="pagination fmt-2">
+<nav aria-label="pagination" class="pagination fmt-4">
   <button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
     ><div class="icon-wrapper">
       <LeftArrow />
@@ -107,7 +107,7 @@
       align-items: center;
       flex-direction: column;
       width: auto;
-      min-width: 7rem;
+      min-width: 5rem;
     }
   }
 
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index 5cfd39b1..cc54ab5d 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -139,6 +139,7 @@
     sortDirection: 'descending',
     paginated: true,
     title: 'Press Freedom Index',
+    notes: 'Note: data as of 2018',
     source: 'Source: Reporters Without Borders',
   }}"
 />
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 1e65d7bd..292e975b 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -308,18 +308,23 @@
           {/if}
         </tbody>
         {#if notes || source}
-          <tfoot class="table--tfoot block fmt-2">
+          <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan="{includedFields.length}">{@html notes}</td
-                >
+                <td class="" colspan="{includedFields.length}">
+                  <div class="fmt-2">
+                    {@html notes}
+                  </div>
+                </td>
               </tr>
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan="{includedFields.length}"
-                  >{@html source}</td
-                >
+                <td class="" colspan="{includedFields.length}">
+                  <div class="fmt-1">
+                    {@html source}
+                  </div>
+                </td>
               </tr>
             {/if}
           </tfoot>
@@ -388,7 +393,6 @@
       }
     }
     tfoot.table--tfoot {
-      border-spacing: 0 clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
       tr {
         border-bottom: 0;
       }
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index 398e56f5..25c660c6 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -76,8 +76,7 @@
   @include text-xs;
   @include leading-tighter;
   @include font-regular;
-  @include fmt-1;
-  @include fmb-2;
+  @include fmy-1;
 }
 
 @mixin body-link {