@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/HeroHeadline/HeroHeadline.stories.svelte

@@ -0,0 +1,264 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import HeroHeadline from './HeroHeadline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/HeroHeadline',
+    component: HeroHeadline,
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      hedWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  });
+</script>
+
+<script lang="ts">
+  import polarImgSrc from './demo/polar.jpg';
+  import eurovisImgSrc from './demo/eurovis.jpeg';
+
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import Video from '../Video/Video.svelte';
+
+  import CrashMap from './demo/graphics/crash.svelte';
+  import QuakeMap from './demo/graphics/quakemap.svelte';
+</script>
+
+<Story name="Photo hero" exportName="PhotoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+  <HeroHeadline
+    section="World News"
+    hed="Reuters Graphics Interactive"
+    dek="The beginning of a beautiful page"
+    authors={['Jane Doe', 'John Doe']}
+    publishTime={new Date('2022-03-04').toISOString()}
+    img={polarImgSrc}
+    notes="Photo by REUTERS"
+    ariaDescription="A photo of a polar bear"
+  />
+</Story>
+
+<Story name="Transparent header" exportName="TransparentHeader">
+  <div class="transparent-header">
+    <Block width="fluid" class="chromatic-ignore">
+      <SiteHeader />
+    </Block>
+    <HeroHeadline
+      section="World News"
+      hed="Reuters Graphics Interactive"
+      dek="The beginning of a beautiful page"
+      authors={['Jane Doe', 'John Doe']}
+      publishTime={new Date('2022-03-04').toISOString()}
+      img={polarImgSrc}
+      ariaDescription="A photo of a polar bear"
+    />
+  </div>
+</Story>
+
+<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed={'Earthquake devastates Afghanistan'}
+    hedSize={'big'}
+    hedWidth="wide"
+    class="custom-hero mb-0"
+    authors={[
+      'Anand Katakam',
+      'Vijdan Mohammad Kawoosa',
+      'Adolfo Arranz',
+      'Wen Foo',
+      'Simon Scarr',
+      'Aman Bhargava',
+      'Jitesh Chowdhury',
+      'Manas Sharma',
+      'Aditi Bhandari',
+    ]}
+    publishTime={new Date('2022-06-24').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+    >
+      <QuakeMap />
+    </GraphicBlock>
+  </HeroHeadline>
+  <style>.hero-wrapper {
+  --heroHeight: 85svh;
+}
+@media (max-width: 960px) {
+  .hero-wrapper {
+    --heroHeight: 65svh;
+  }
+}
+@media (max-height: 850px) {
+  .hero-wrapper {
+    --heroHeight: 100svh;
+  }
+}
+@media (max-width: 960px) and (orientation: landscape) {
+  .hero-wrapper {
+    --heroHeight: 200svh;
+  }
+}
+.hero-wrapper .custom-hero.headline {
+  align-items: flex-end !important;
+}
+@media (max-width: 1100px) {
+  .hero-wrapper .custom-hero.headline {
+    max-width: var(--normal-column-width) !important;
+  }
+}
+
+.hero-wrapper.embedded {
+  --heroHeight: 1000px;
+}</style>
+</Story>
+
+<Story name="Video hero" exportName="VideoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <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()}
+  >
+    <Video
+      width="widest"
+      class="my-0"
+      showControls={false}
+      preloadVideo="auto"
+      playVideoWhenInView={false}
+      src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+      poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
+      notes="Drone footage from the Village 8 refugee camp in Sudan."
+      ariaDescription="Aerial footage of people houses in refugee camp"
+    />
+  </HeroHeadline>
+  <style>.hero-wrapper {
+  --heroHeight: calc(100svh - 60px);
+}
+.hero-wrapper .video-hero.headline header {
+  top: calc(50svh - 250px);
+}
+.hero-wrapper .video-hero.headline h1 {
+  color: #ffd430;
+  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+}</style>
+</Story>
+
+<Story name="Inline hero" exportName="InlineHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <!-- Set `stacked` to `false` -->
+  <HeroHeadline
+    stacked={false}
+    section="Global news"
+    hed="The plunge from 29,000 feet"
+    dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+    class="mb-0"
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+    >
+      <CrashMap />
+    </GraphicBlock>
+  </HeroHeadline>
+</Story>
+
+<Story name="Custom hed" exportName="CustomHed">
+  <HeroHeadline
+    class="custom-hed"
+    authors={[
+      'Prasanta Kumar Dutta',
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Anurag Rao',
+    ]}
+    publishTime={new Date('2023-05-11').toISOString()}
+    img={eurovisImgSrc}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
+  >
+    {#snippet hed()}
+      <h1>
+        <div class="body-note">A visual guide to</div>
+        <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+      </h1>
+    {/snippet}
+
+    {#snippet dek()}
+      <div class="dek">
+        <p>
+          Performers from 37 countries are coming together May 9-13 in
+          Liverpool, England, for the 67th annual Eurovision Song Contest. The
+          winner gets the trophy and their country gets the right to host next
+          year’s event, produced by the European Broadcasting Union (EBU).
+        </p>
+      </div>
+    {/snippet}
+  </HeroHeadline>
+
+  <style>.custom-hed h1 .body-note {
+  color: #ffffff;
+}
+.custom-hed h1 .title {
+  color: #ffffff;
+  text-shadow: 1px 1px 8px #ff7c88;
+  filter: drop-shadow(0px 0px 12px #ff7c88);
+}
+.custom-hed .dek {
+  margin-top: 1rem;
+}
+.custom-hed .dek p {
+  color: #ffffff;
+  text-shadow: 1px 1px 8px #ff7c88;
+  filter: drop-shadow(0px 0px 12px #ff7c88);
+}</style>
+</Story>
+
+<style>.transparent-header :global(.nav-container) {
+  background-color: transparent !important;
+}
+.transparent-header :global(.nav-container .inner) {
+  background-color: transparent !important;
+  border: none !important;
+}
+.transparent-header :global(.hero-wrapper) {
+  margin-top: -64px;
+}</style>

package/dist/components/HeroHeadline/HeroHeadline.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import HeroHeadline from './HeroHeadline.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HeroHeadline: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HeroHeadline = InstanceType<typeof HeroHeadline>;
+export default HeroHeadline;

package/dist/components/HeroHeadline/HeroHeadline.svelte

@@ -0,0 +1,277 @@
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HeadlineSize } from '../@types/global';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import Headline from '../Headline/Headline.svelte';
+  import Byline from '../Byline/Byline.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+
+  export interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /**
+     * Optional snippet for a custom hero graphic, photo, etc.
+     */
+    children?: Snippet;
+    /** Set to `false` for inline hero media */
+    stacked?: boolean;
+    /**
+     * Path to the background hero image
+     */
+    img?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /** Add classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /**
+     * Headline size: small, normal, big, bigger, biggest
+     */
+    hedSize?: HeadlineSize;
+    /**
+     * Headline horizontal alignment: left, center, right
+     */
+    hedAlign?: 'left' | 'center' | 'right';
+    /**
+     * Width of the headline: normal, wide, wider, widest
+     */
+    hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Dek, parsed as a markdown string OR as a custom snippet.
+     */
+    dek?: string | Snippet;
+    /**
+     * Section title
+     */
+    section?: string;
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Width of the hero graphic: normal, wide, wider, widest
+     */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /** Set to true for embeds. */
+    embedded?: boolean;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
+  }
+
+  let {
+    hed,
+    stacked = true,
+    img,
+    ariaDescription,
+    notes,
+    class: cls = '',
+    hedSize = 'normal',
+    hedAlign = 'center',
+    hedWidth = 'normal',
+    dek,
+    section,
+    authors = [],
+    publishTime,
+    updateTime,
+    width = 'widest',
+    embedded = false,
+    children,
+    getAuthorPage,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+</script>
+
+<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
+  <div class="hero-wrapper fmb-6" class:embedded>
+    <!-- stacked media hero-->
+    {#if stacked}
+      <Block width="fluid" class="hero-headline background-hero fmt-0">
+        <!-- Handles string or snippet `hed` -->
+        <Headline
+          class="{cls} !text-{hedAlign}"
+          width={hedWidth}
+          {section}
+          {hedSize}
+          {hed}
+          {dek}
+        />
+
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <GraphicBlock
+              {width}
+              role="img"
+              class="my-0"
+              textWidth="normal"
+              {notes}
+              {ariaDescription}
+            >
+              <div
+                class="background-image"
+                style="background-image: url({img})"
+              ></div>
+            </GraphicBlock>
+          {/if}
+        </div>
+      </Block>
+    {/if}
+
+    <!-- Non-stacked hero -->
+    {#if stacked === false}
+      <Block width="fluid" class="hero-headline inline-hero">
+        <PaddingReset containerIsFluid={true}>
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width={hedWidth}
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
+          />
+        </PaddingReset>
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <FeaturePhoto
+              {width}
+              class="my-0"
+              src={img}
+              caption={notes}
+              altText={ariaDescription || ''}
+            />
+          {/if}
+        </div>
+      </Block>
+    {/if}
+  </div>
+
+  <div class="hero-byline fmb-6">
+    {#if byline}
+      <!-- Custom byline/dateline -->
+      {@render byline()}
+    {:else if authors.length > 0 || publishTime}
+      <Byline
+        {authors}
+        {publishTime}
+        {updateTime}
+        {getAuthorPage}
+        {published}
+        {updated}
+        align="left"
+      />
+    {/if}
+  </div>
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.hero-wrapper :global(.background-hero) {
+  min-height: var(--heroHeight, 100svh);
+  max-height: 1800px;
+  position: relative;
+}
+.hero-wrapper :global(.background-hero .headline) {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 50%;
+  height: var(--heroHeight, 100svh);
+  max-height: 1800px;
+  transform: translateX(-50%);
+  margin-top: 0;
+}
+@media (max-width: 690px) {
+  .hero-wrapper :global(.background-hero .headline) {
+    padding: 0 15px;
+  }
+}
+.hero-wrapper :global(aside p) {
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-xs);
+  line-height: 1.3;
+  font-weight: 400;
+  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+}
+.hero-wrapper :global(.background-hero video) {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--heroHeight);
+  object-fit: cover;
+}
+@media (max-width: 690px) {
+  .hero-wrapper :global(.graphic-container .article-block.notes) {
+    width: 100%;
+    padding: 0 15px;
+    margin-left: 0;
+  }
+}
+
+.hero-byline :global(.byline-container) {
+  z-index: 1;
+  position: relative;
+}
+
+.background-image {
+  width: auto;
+  height: var(--heroHeight, 100svh);
+  max-height: 1800px;
+  user-select: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}</style>

package/dist/components/HeroHeadline/HeroHeadline.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { Snippet } from 'svelte';
+import type { HeadlineSize } from '../@types/global';
+export interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /**
+     * Optional snippet for a custom hero graphic, photo, etc.
+     */
+    children?: Snippet;
+    /** Set to `false` for inline hero media */
+    stacked?: boolean;
+    /**
+     * Path to the background hero image
+     */
+    img?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /** Add classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /**
+     * Headline size: small, normal, big, bigger, biggest
+     */
+    hedSize?: HeadlineSize;
+    /**
+     * Headline horizontal alignment: left, center, right
+     */
+    hedAlign?: 'left' | 'center' | 'right';
+    /**
+     * Width of the headline: normal, wide, wider, widest
+     */
+    hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Dek, parsed as a markdown string OR as a custom snippet.
+     */
+    dek?: string | Snippet;
+    /**
+     * Section title
+     */
+    section?: string;
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Width of the hero graphic: normal, wide, wider, widest
+     */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /** Set to true for embeds. */
+    embedded?: boolean;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
+}
+/** `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) */
+declare const HeroHeadline: import("svelte").Component<Props, {}, "">;
+type HeroHeadline = ReturnType<typeof HeroHeadline>;
+export default HeroHeadline;