hero headline stories

reuters-graphics · Aug 30, 2023 · 60ba223 · 60ba223
1 parent 10f4c55
commit 60ba223
Show file tree

Hide file tree

Showing 11 changed files with 440 additions and 113 deletions.
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
@@ -77,7 +77,7 @@
 </Story>
 
 <Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
-  <Headline>
+  <Headline width="wide">
     <h1 class="custom-hed" slot="hed">
       <span class="small block text-base">The secret to</span>
       “The Nutcracker's”

diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
@@ -74,7 +74,7 @@
 </script>
 
 <Block width="{width}" class="headline text-center fmt-9 fmb-5 {cls}">
-  <header>
+  <header class="relative">
     {#if $$slots.crown}
       <div class="crown-container">
         <!-- Crown named slot -->

diff --git a/src/components/Headline/stories/docs/customHed.md b/src/components/Headline/stories/docs/customHed.md
@@ -5,7 +5,7 @@ Use the `hed` and/or `dek` named slots to override those elements with completel
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>
 
-<Headline>
+<Headline width="wide">
   <h1 class="custom-hed" slot="hed">
     <span class="small block text-base">The secret to</span>
     “The Nutcracker's”

diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
@@ -7,10 +7,20 @@
   import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
   // @ts-ignore
   import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
+  // @ts-ignore
+  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
+  // @ts-ignore
+  import videoDocs from './stories/docs/backgroundVideo.md?raw';
+  // @ts-ignore
+  import customHedDocs from './stories/docs/customHed.md?raw';
 
   // @ts-ignore
   import polarImgSrc from './stories/polar.jpg';
+  // @ts-ignore
+  import eurovisImgSrc from './stories/eurovis.jpeg';
 
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
   import HeroHeadline from './Hero.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
 
@@ -34,6 +44,10 @@
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest'],
       },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest'],
@@ -49,6 +63,10 @@
 />
 
 <Template let:args>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline {...args} />
 </Template>
 
@@ -64,12 +82,33 @@
   }}"
 />
 
+<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
+  <div class="transparent-header">
+    <Block width="fluid">
+      <SiteHeader />
+    </Block>
+
+    <HeroHeadline
+      section="World News"
+      hed="Reuters Graphics Interactive"
+      dek="The beginning of a beautiful page"
+      authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+      publishTime="{new Date('2022-03-04').toISOString()}"
+      img="{polarImgSrc}"
+    />
+  </div>
+</Story>
+
 <Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline
     hed="{'Earthquake devastates Afghanistan'}"
     hedSize="{'big'}"
     hedWidth="wide"
-    class="mb-0"
+    class="custom-hero mb-0"
     dek=""
     authors="{[
       'Anand Katakam',
@@ -86,7 +125,7 @@
   >
     <div slot="background">
       <GraphicBlock
-        width="fluid"
+        width="widest"
         role="figure"
         class="my-0"
         textWidth="normal"
@@ -98,31 +137,102 @@
     </div>
   </HeroHeadline>
   <style lang="scss">
-    .hero-headline .headline {
-      align-items: flex-end;
+    .hero-wrapper {
+      .custom-hero.headline {
+        // Adjust vertical positioning
+        align-items: flex-end !important;
 
-      @media (max-width: 1100px) {
-        max-width: var(--normal-column-width) !important;
+        @media (max-width: 1100px) {
+          // Adjust line length of title
+          max-width: var(--normal-column-width) !important;
+        }
       }
-    }
 
-    .hero-wrapper {
       // Make hero smaller than 100vh
       --heroHeight: 85svh;
 
       @media (max-width: 960px) {
         --heroHeight: 65svh;
       }
 
+      // For small height
+      @media (max-height: 850px) {
+        --heroHeight: 100svh;
+      }
+
       // Custom hero sizing for landscape mobile
       @media (max-width: 960px) and (orientation: landscape) {
         --heroHeight: 200svh;
       }
     }
+
+    // Override default fixed height for hero layout in embeds
+    .hero-wrapper.embedded {
+      --heroHeight: 1000px;
+    }
+  </style>
+</Story>
+
+<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    class="video-hero"
+    hed="The conflict in Ethiopia"
+    hedSize="bigger"
+    hedWidth="wide"
+    authors="{['Aditi Bhandari ', 'David Lewis']}"
+    publishTime="{new Date('2020-12-18').toISOString()}"
+  >
+    <div slot="background">
+      <GraphicBlock
+        width="widest"
+        role="figure"
+        class="my-0"
+        textWidth="normal"
+        notes="Drone footage from the Village 8 refugee camp in Sudan."
+        ariaDescription="Aerial footage of people houses in refugee camp"
+      >
+        <!-- svelte-ignore a11y-media-has-caption -->
+        <video
+          autoplay
+          muted
+          playsinline
+          loop
+          preload="true"
+          width="100%"
+          poster="video-poster.png"
+          src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+        >
+        </video>
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      --heroHeight: calc(100svh - 60px);
+      .video-hero.headline {
+        header {
+          // Adjust vertical position as offset from default center
+          top: calc(50svh - 250px);
+        }
+
+        h1 {
+          color: #ffd430;
+          text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+        }
+      }
+    }
   </style>
 </Story>
 
 <Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline
     hed="{'The plunge from 29,000 feet'}"
     hedWidth="wide"
@@ -146,3 +256,53 @@
     </div>
   </HeroHeadline>
 </Story>
+
+<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+  <HeroHeadline
+    class="custom-hed"
+    authors="{[
+      'Prasanta Kumar Dutta',
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Anurag Rao',
+    ]}"
+    publishTime="{new Date('2023-05-11').toISOString()}"
+    img="{eurovisImgSrc}"
+  >
+    <h1 slot="hed">
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  </HeroHeadline>
+
+  <style lang="scss">
+    .custom-hed {
+      h1 {
+        .body-note {
+          color: #ffffff;
+        }
+        .title {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<style lang="scss">
+  .transparent-header {
+    :global(.nav-container) {
+      background-color: transparent !important;
+    }
+    :global(.nav-container .inner) {
+      background-color: transparent !important;
+      border: none;
+    }
+
+    :global(.hero-wrapper) {
+      margin-top: -64px;
+    }
+  }
+</style>