#95 Headline

src/components/@types/global.ts

@@ -13,6 +13,10 @@ export type Option = {
  */
 export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
+/**
+ * Used to set headline class fluid size from text-2xl to text-6xl
+ */
+export type HeadlineSize = 'small' | 'normal' | 'big' | 'bigger' | 'biggest';
 /**
  * A step in the Scroller component.
  */

src/components/Headline/Headline.stories.svelte

@@ -19,13 +19,20 @@
     withComponentDocs,
     withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
+
+  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/Headline"
-  component="{Headline}"
-  {...withComponentDocs(componentDocs)}
-/>
+<Meta title="Components/Headline" component="{Headline}" {...metaProps} />
 
 <Template let:args>
   <Headline {...args} />
@@ -36,6 +43,7 @@
   args="{{
     section: 'World News',
     hed: 'Reuters Graphics interactive',
+    hedSize: 'normal',
   }}"
 />
 
@@ -75,7 +83,7 @@
     <!-- Add a crown -->
     <img slot="crown" src="{crownImgSrc}" alt="Illustration of Europe" />
     <!-- Override the hed with a named slot -->
-    <h1 slot="hed" class="spaced font-serif">Europa</h1>
+    <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
     <span slot="dateline"
       >Published <time datetime="{new Date('2020-01-01').toISOString()}"
         >Jan. 1, 2020</time

src/components/Headline/Headline.svelte

@@ -1,10 +1,19 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script lang="ts">
+  import { HeadlineSize } from '../@types/global';
+
   /**
    * Headline, parsed as an _inline_ markdown string in an `h1` element.
    * @type {string}
    */
   export let hed: string = 'Reuters Graphics Interactive';
+
+  /**
+   * Headline size
+   * @type {string}
+   */
+  export let hedSize: HeadlineSize = 'normal';
+
   /**
    * Dek, parsed as a markdown string.
    * @type {string}
@@ -18,25 +27,45 @@
 
   import Block from '../Block/Block.svelte';
   import { marked } from 'marked';
+
+  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 class="mb-1">
-  <header class="headline">
+  <header class="headline text-center mb-0 my-16 text-primary">
     {#if $$slots.crown}
-      <div class="crown-container">
+      <div class="crown-container flex justify-center items-center">
         <!-- Crown named slot -->
         <slot name="crown" />
       </div>
     {/if}
     <div class="title">
       {#if section}
-        <p class="{'section-title'}">{section}</p>
+        <p class="section-title">{section}</p>
       {/if}
       {#if $$slots.hed}
         <!-- Headline named slot -->
         <slot name="hed" />
       {:else}
-        <h1>{@html marked.parseInline(hed)}</h1>
+        <h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
       {/if}
       {#if $$slots.dek}
         <!-- Dek named slot-->
@@ -46,7 +75,11 @@
       {/if}
     </div>
     {#if $$slots.byline || $$slots.dateline}
-      <aside class="article-metadata" class:pt-1="{!dek}">
+      <aside
+        class="article-metadata pb-0 font-not text-primary text-center leading-none"
+        class:pt-2="{!dek}"
+        class:pt-8="{dek}"
+      >
         {#if $$slots.byline}
           <div class="byline-container">
             <div class="byline">
@@ -56,7 +89,9 @@
           </div>
         {/if}
         {#if $$slots.dateline}
-          <div class="dateline-container">
+          <div
+            class="dateline-container text-xxs tracking-wide text-secondary uppercase"
+          >
             <div class="published">
               <!-- Dateline named slot -->
               <slot name="dateline" />
@@ -72,25 +107,18 @@
   @use '../../scss/mixins' as *;
 
   header.headline {
-    text-align: center;
-    margin-top: 4rem;
-    margin-bottom: 0;
-    @include text-primary;
-
     :global {
       h1 {
-        font-size: 4rem;
-        margin: 5px 0;
-        line-height: 1.2;
-        @include font-sans;
-        @include text-primary;
+        @extend %fmy-1;
+        @extend %fmx-auto;
       }
 
       p {
         @include font-sans;
         @include text-primary;
+        @include leading-tighter;
         margin: 0;
-        font-weight: 200;
+        font-weight: 300;
 
         &.section-title {
           font-size: 1rem;
@@ -100,14 +128,8 @@
       }
     }
     .article-metadata {
-      padding: 40px 0;
-      @include font-sans;
-      @include text-primary;
-
-      text-align: center;
-
       .byline-container {
-        margin-bottom: 2px;
+        @extend %fmb-1;
       }
 
       .byline {
@@ -118,21 +140,6 @@
           }
         }
       }
-
-      .dateline-container {
-        text-transform: uppercase;
-
-        @include text-secondary;
-        font-size: 0.8rem;
-        line-height: 1.2rem;
-        letter-spacing: 0.2px;
-      }
-    }
-
-    div.crown-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
     }
   }
 </style>

src/components/Headline/stories/docs/withCrown.md

@@ -10,7 +10,7 @@ Add a crown image in the `crown` named slot and override the headline in the `he
   <!-- Add a crown -->
   <img slot="crown" src="{`${assets}/images/crown.png`}" />
   <!-- Override the hed with a named slot -->
-  <h2 slot="hed" class="spaced font-serif">Europa</h2>
+  <h1 slot="hed" class="font-serif tracking-wide">Europa</h1>
   <span slot="dateline">Published Jan. 1, 2020</span>
 </Headline>
 ```