From 4767578aa44895f1562c8868cf96bd68d85188b3 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Sat, 2 Sep 2023 21:04:01 +0530
Subject: [PATCH] edits for #116

---
 .../DatawrapperChart/DatawrapperChart.svelte  |  2 +-
 .../GraphicBlock/GraphicBlock.svelte          | 97 +++++++++----------
 src/components/Headline/Headline.svelte       |  2 +-
 src/components/NoteText/NoteText.svelte       |  5 +-
 .../SiteHeadline/SiteHeadline.svelte          |  2 +-
 src/scss/reset/_typography.scss               | 32 +++---
 src/scss/tokens/text/mixins/_text-role.scss   |  9 +-
 7 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 12bd9bcb..faaa22f6 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -51,7 +51,7 @@
    * of the text well. Can't ever be wider than `width`.
    * @type {string}
    */
-  export let textWidth: ContainerWidth | null = null;
+  export let textWidth: ContainerWidth | null = 'normal';
 
   let frameElement;
 
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 5520ddd3..89490fa2 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -41,7 +41,7 @@
    * of the text well. Can't ever be wider than `width`.
    * @type {string}
    */
-  export let textWidth: ContainerWidth | null = null;
+  export let textWidth: ContainerWidth | null = 'normal';
 
   /**
    * Title of the graphic
@@ -81,55 +81,53 @@
   ariaLabel="{ariaLabel}"
   class="graphic fmy-5 {cls}"
 >
-  <div>
-    {#if $$slots.title}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <TextBlock width="{textWidth}">
-          <!-- Custom title content -->
-          <slot name="title" />
-        </TextBlock>
-      </PaddingReset>
-    {:else if title}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <TextBlock width="{textWidth}">
-          <h3>{title}</h3>
-          {#if description}
-            {@html marked(description)}
-          {/if}
-        </TextBlock>
-      </PaddingReset>
-    {/if}
-    <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
-      <!-- Graphic content -->
-      <slot />
-    </AriaHidden>
-    {#if $$slots.aria || ariaDescription}
-      <div class="visually-hidden">
-        {#if $$slots.aria}
-          <!-- Custom ARIA markup -->
-          <slot name="aria" />
-        {:else}
-          {@html marked(ariaDescription)}
+  {#if $$slots.title}
+    <PaddingReset containerIsFluid="{width === 'fluid'}">
+      <TextBlock width="{textWidth}">
+        <!-- Custom title content -->
+        <slot name="title" />
+      </TextBlock>
+    </PaddingReset>
+  {:else if title}
+    <PaddingReset containerIsFluid="{width === 'fluid'}">
+      <TextBlock width="{textWidth}">
+        <h3>{title}</h3>
+        {#if description}
+          {@html marked(description)}
         {/if}
-      </div>
-    {/if}
-    {#if $$slots.notes}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <TextBlock width="{textWidth}">
-          <!-- Custom notes content -->
-          <slot name="notes" />
-        </TextBlock>
-      </PaddingReset>
-    {:else if notes}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <TextBlock width="{textWidth}">
-          <aside class="fmt-2">
-            {@html marked(notes)}
-          </aside>
-        </TextBlock>
-      </PaddingReset>
-    {/if}
-  </div>
+      </TextBlock>
+    </PaddingReset>
+  {/if}
+  <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
+    <!-- Graphic content -->
+    <slot />
+  </AriaHidden>
+  {#if $$slots.aria || ariaDescription}
+    <div class="visually-hidden">
+      {#if $$slots.aria}
+        <!-- Custom ARIA markup -->
+        <slot name="aria" />
+      {:else}
+        {@html marked(ariaDescription)}
+      {/if}
+    </div>
+  {/if}
+  {#if $$slots.notes}
+    <PaddingReset containerIsFluid="{width === 'fluid'}">
+      <TextBlock width="{textWidth}">
+        <!-- Custom notes content -->
+        <slot name="notes" />
+      </TextBlock>
+    </PaddingReset>
+  {:else if notes}
+    <PaddingReset containerIsFluid="{width === 'fluid'}">
+      <TextBlock width="{textWidth}">
+        <aside class="fmt-2">
+          {@html marked(notes)}
+        </aside>
+      </TextBlock>
+    </PaddingReset>
+  {/if}
 </Block>
 
 <!-- svelte-ignore css-unused-selector -->
@@ -140,6 +138,7 @@
     // Dek
     p {
       @include body-note;
+      @include font-light;
     }
     // Caption and Sources
     aside {
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index e6ee43d9..5f7bf7f7 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -73,7 +73,7 @@
   }
 </script>
 
-<Block width="{width}" class="headline text-center fmt-9 fmb-5 {cls}">
+<Block width="{width}" class="headline text-center fmt-7 fmb-5 {cls}">
   <header class="relative">
     {#if $$slots.crown}
       <div class="crown-container">
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 3b781c66..01865563 100644
--- 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">
+<Block class="notes fmt-5 fmb-7">
   {#if text}
     {@html marked.parse(text)}
   {/if}
@@ -22,9 +22,6 @@
   @import '../../scss/mixins';
 
   .article-block.notes {
-    @include fmb-9;
-    @include fmt-7;
-
     h2,
     h3,
     h4,
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 6b0cd9eb..271be5fa 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -70,7 +70,7 @@
   }
 </script>
 
-<Block id="{id}" class="headline-container fmt-9 fmb-5 {cls}" width="normal">
+<Block id="{id}" class="headline-container fmt-7 fmb-5 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 53b520c5..fe160f04 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -12,7 +12,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 
   .theme {
-    font-size: calc(0.85 * var(--theme-font-size-base));
+    font-size: calc(0.9 * var(--theme-font-size-base));
     color: var(--theme-colour-text-primary);
   }
 }
@@ -56,26 +56,34 @@ h6 {
 // Body text
 //////////////
 
-%body-type-block {
-  display: block;
-  @include body-text;
-}
-
 text {
   @include body-note;
 }
 
 p {
-  @extend %body-type-block;
+  display: block;
+  @include body-text;
 }
 
 ol,
 ul {
-  @extend %body-type-block;
-  padding-left: 2rem;
-  ol,
-  ul {
-    margin-bottom: 0;
+  display: block;
+  @include body-note;
+  @include fmb-5;
+  li {
+    @include fpl-1;
+    @include fmy-2;
+    @include font-regular;
+  }
+}
+
+ul {
+  @include fpl-2;
+
+  li::marker {
+    content: '–';
+    @include font-light;
+    @include text-secondary;
   }
 }
 
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index bde6b085..02ce6047 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -44,6 +44,7 @@
   @include leading-tight;
   @include text-sm;
   @include text-secondary;
+  @include font-semibold;
   @include tracking-wide;
   text-transform: uppercase;
   @include fmt-4;
@@ -64,8 +65,7 @@
   @include fmt-0;
   @include fmb-2;
   @include font-note;
-  font-size: calc(0.85 * var(--theme-font-size-base));
-  @include font-light;
+  font-size: calc(0.9 * var(--theme-font-size-base));
   @include text-primary;
   @include leading-tight;
 }
@@ -87,8 +87,3 @@
   text-decoration-thickness: 1px;
   text-decoration-color: var(--theme-colour-text-secondary);
 }
-
-// @mixin \!h1 {
-//   @include \!text-primary;
-//   @include \!font-bold;
-// }