From 31f6c15c8675eb2e5b550a034450de8ba93087ca Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sun, 30 Jul 2023 13:16:20 +0100
Subject: [PATCH] update SiteHeadline with hedSize prop

---
 .../SiteHeadline/SiteHeadline.stories.svelte  | 13 +++++++-
 .../SiteHeadline/SiteHeadline.svelte          | 31 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index 828b82da..b34a90a3 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -21,12 +21,23 @@
     Published: '2022-09-12T08:30:00.000Z',
     Updated: '',
   };
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+    },
+  };
 </script>
 
 <Meta
   title="Components/SiteHeadline"
   component="{SiteHeadline}"
-  {...withComponentDocs(componentDocs)}
+  {...metaProps}
 />
 
 <Template let:args>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 131204fc..00da0ca6 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
+  import { HeadlineSize } from '../@types/global';
+
   /**
    * Headline
    * @type {string}
    * @required
    */
   export let hed: string = 'Reuters Graphics Interactive';
+  /**
+   * Headline size
+   * @type {string}
+   */
+  export let hedSize: HeadlineSize = 'normal';
   /**
    * Section title.
    * @type {string}
@@ -62,6 +69,26 @@
     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}" class="headline-container !my-16 {cls}" width="normal">
@@ -81,7 +108,9 @@
         </p>
       {/if}
       {#if hed}
-        <h1 class="my-0 font-hed text-primary leading-none text-3xl">{hed}</h1>
+        <h1 class="my-0 font-hed text-primary leading-none {hedClass}">
+          {hed}
+        </h1>
       {/if}
     </div>
     <aside class="article-metadata mt-2 font-subhed">