@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/Headline/stories/graphic.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  GraphicProps */
+/** @typedef {typeof __propDef.events}  GraphicEvents */
+/** @typedef {typeof __propDef.slots}  GraphicSlots */
+export default class Graphic extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GraphicProps = typeof __propDef.props;
+export type GraphicEvents = typeof __propDef.events;
+export type GraphicSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

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

@@ -0,0 +1,335 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
+  // @ts-ignore raw
+  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
+  // @ts-ignore raw
+  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
+  // @ts-ignore raw
+  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
+  // @ts-ignore raw
+  import videoDocs from './stories/docs/backgroundVideo.md?raw';
+  // @ts-ignore raw
+  import customHedDocs from './stories/docs/customHed.md?raw';
+
+  // @ts-ignore img
+  import polarImgSrc from './stories/polar.jpg';
+  // @ts-ignore img
+  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';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+  import Video from '../Video/Video.svelte';
+
+  import CrashMap from './stories/graphics/crash.svelte';
+  import QuakeMap from './stories/graphics/quakemap.svelte';
+
+  import {
+    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'],
+      },
+      hedWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  };
+</script>
+
+<Meta
+  title="Components/HeroHeadline"
+  component="{HeroHeadline}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline {...args} />
+</Template>
+
+<Story
+  name="With backdrop photo"
+  args="{{
+    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,
+  }}"
+/>
+
+<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
+  <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="{['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" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'Earthquake devastates Afghanistan'}"
+    hedSize="{'big'}"
+    hedWidth="wide"
+    class="custom-hero mb-0"
+    dek=""
+    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()}"
+  >
+    <div slot="background">
+      <GraphicBlock
+        width="widest"
+        role="figure"
+        class="my-0"
+        textWidth="normal"
+        notes=""
+        ariaDescription="Earthquake impact map"
+      >
+        <svelte:component this="{QuakeMap}" />
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+  <style>.hero-wrapper {
+  --heroHeight: 85svh;
+}
+.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;
+  }
+}
+@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.embedded {
+  --heroHeight: 1000px;
+}</style>
+</Story>
+
+<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
+  <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()}"
+  >
+    <div slot="background">
+      <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"
+      />
+    </div>
+  </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="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'Buried under the bricks'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
+    section="{'Global news'}"
+    authors="{['Mariano Zafra']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  >
+    <div slot="inline">
+      <FeaturePhoto
+        width="widest"
+        class="my-0"
+        src="https://www.reuters.com/graphics/MOROCCO-QUAKE/CONSTRUCTION/xmpjlblojpr/cdn/images/opening.jpg"
+        caption="Photo by REUTERS/Nacho Doce."
+        altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
+      />
+    </div>
+  </HeroHeadline>
+</Story>
+
+<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'The plunge from 29,000 feet'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
+    section="{'Global news'}"
+    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  >
+    <div slot="inline">
+      <GraphicBlock
+        width="widest"
+        role="img"
+        class="my-0"
+        textWidth="normal"
+        notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+        ariaDescription="Aerial map showing trajectory of crash"
+      >
+        <svelte:component this="{CrashMap}" />
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+</Story>
+
+<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'Devastation in Derna'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
+    section="{'Global news'}"
+    authors="{['Simon Scarr']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  >
+    <div slot="inline">
+      <Video
+        width="widest"
+        class="my-0"
+        showControls="{false}"
+        preloadVideo="auto"
+        playVideoWhenInView="{false}"
+        src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
+        notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
+        ariaDescription="alttext fot video"
+      />
+    </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>.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);
+}</style>
+</Story>
+
+<style>.transparent-header :global(.nav-container) {
+  background-color: transparent !important;
+}
+.transparent-header :global(.nav-container .inner) {
+  background-color: transparent !important;
+  border: none;
+}
+.transparent-header :global(.hero-wrapper) {
+  margin-top: -64px;
+}</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  HeroProps */
+/** @typedef {typeof __propDef.events}  HeroEvents */
+/** @typedef {typeof __propDef.slots}  HeroSlots */
+export default class Hero extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/HeroHeadline/Hero.svelte

@@ -1,80 +1,29 @@
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
-<script>/** Set to true for embeddables. */
-export let embedded = false;
-/**
- * Path to background image
- * @type {string}
- */
+<script>export let embedded = false;
 export let img = null;
-/**
- * ARIA description, passed in as a markdown string.
- * @type {string}
- */
 export let ariaDescription = null;
-/**
- * Notes to the graphic, passed in as a markdown string.
- * @type {string}
- */
 export let notes = null;
-/**
- * Headline, parsed as an _inline_ markdown string in an `h1` element.
- * @type {string}
- */
-export let hed = 'Reuters Graphics Interactive';
-/** Add extra classes to the block tag to target it with custom CSS. */
-let cls = '';
+export let hed = "Reuters Graphics Interactive";
+let cls = "";
 export { cls as class };
-/**
- * Headline size
- * @type {string}
- */
-export let hedSize = 'normal';
-/**
- * Headline horizontal alignment
- * @type {string}
- */
-export let hedAlign = 'center';
-/**
- * Width of the headline.
- */
-export let hedWidth = 'normal';
-/**
- * Dek, parsed as a markdown string.
- * @type {string}
- */
+export let hedSize = "normal";
+export let hedAlign = "center";
+export let hedWidth = "normal";
 export let dek = null;
-/**
- * Section title
- * @type {string}
- */
 export let section = null;
-/**
- * Array of author names, which will be slugified to create links to Reuters author pages
- */
 export let authors = [];
-/**
- * Publish time as a datetime string.
- * @type {string}
- */
-export let publishTime = '';
-/**
- * Update time as a datetime string.
- * @type {string}
- */
-export let updateTime = '';
-/**
- * Width of the Hero graphic.
- */
-export let width = 'widest';
-import Headline from '../Headline/Headline.svelte';
-import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-import Block from '../Block/Block.svelte';
-import Byline from '../Byline/Byline.svelte';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+export let publishTime = "";
+export let updateTime = "";
+export let width = "widest";
+import Headline from "../Headline/Headline.svelte";
+import GraphicBlock from "../GraphicBlock/GraphicBlock.svelte";
+import Block from "../Block/Block.svelte";
+import Byline from "../Byline/Byline.svelte";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
 </script>
 
 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
-  <div class="hero-wrapper fmb-6" class:embedded="{embedded}">
+  <div class="hero-wrapper fmb-6" class:embedded>
     <!-- Background media hero-->
     {#if $$slots.background || img}
       <Block width="fluid" class="hero-headline background-hero fmt-0">
@@ -82,10 +31,10 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
           <Headline
             class="{cls} !text-{hedAlign}"
             width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
           >
             <!-- Headline named slot -->
             <div slot="hed">
@@ -96,10 +45,10 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
           <Headline
             class="{cls} !text-{hedAlign}"
             width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
           />
         {/if}
 
@@ -109,12 +58,12 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
             <slot name="background" />
           {:else}
             <GraphicBlock
-              width="{width}"
+              {width}
               role="img"
               class="my-0"
               textWidth="normal"
-              notes="{notes}"
-              ariaDescription="{ariaDescription}"
+              {notes}
+              {ariaDescription}
             >
               <div
                 class="background-image"
@@ -134,10 +83,10 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
             <Headline
               class="{cls} !text-{hedAlign}"
               width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
             >
               <!-- Headline named slot -->
               <div slot="hed">
@@ -148,10 +97,10 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
             <Headline
               class="{cls} !text-{hedAlign}"
               width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
             />
           {/if}
         </PaddingReset>
@@ -168,12 +117,7 @@ import PaddingReset from '../PaddingReset/PaddingReset.svelte';
       <!-- Custom byline/dateline -->
       <slot name="byline" />
     {:else if authors.length > 0 || publishTime}
-      <Byline
-        authors="{authors}"
-        publishTime="{publishTime}"
-        updateTime="{updateTime}"
-        align="left"
-      />
+      <Byline {authors} {publishTime} {updateTime} align="left" />
     {/if}
   </div>
 </div>
@@ -223,8 +167,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   display: block;
   width: 100%;
   height: var(--heroHeight);
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 @media (max-width: 690px) {
   .hero-wrapper :global(.graphic-container .article-block.notes) {
@@ -233,19 +176,15 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     margin-left: 0;
   }
 }
-
 .hero-byline :global(.byline-container) {
   z-index: 1;
   position: relative;
 }
-
 .background-image {
   width: auto;
   height: var(--heroHeight, 100svh);
   max-height: 1800px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

package/dist/{@types/components → components}/HeroHeadline/Hero.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import { HeadlineSize } from '../@types/global';
+import { SvelteComponent } from "svelte";
+import type { HeadlineSize } from '../@types/global';
 declare const __propDef: {
     props: {
         /** Set to true for embeddables. */ embedded?: boolean;
@@ -27,10 +27,10 @@ declare const __propDef: {
         /**
            * Headline horizontal alignment
            * @type {string}
-           */ hedAlign?: 'left' | 'center' | 'right';
+           */ hedAlign?: "left" | "center" | "right";
         /**
            * Width of the headline.
-           */ hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+           */ hedWidth?: "normal" | "wide" | "wider" | "widest";
         /**
            * Dek, parsed as a markdown string.
            * @type {string}
@@ -52,7 +52,7 @@ declare const __propDef: {
            */ updateTime?: string;
         /**
            * Width of the Hero graphic.
-           */ width?: 'normal' | 'wide' | 'wider' | 'widest';
+           */ width?: "normal" | "wide" | "wider" | "widest";
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -63,11 +63,13 @@ declare const __propDef: {
         inline: {};
         byline: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HeroProps = typeof __propDef.props;
 export type HeroEvents = typeof __propDef.events;
 export type HeroSlots = typeof __propDef.slots;
 /** `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) */
-export default class Hero extends SvelteComponentTyped<HeroProps, HeroEvents, HeroSlots> {
+export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
 }
 export {};