@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,322 +0,0 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import backgroundGraphicDocs from "./stories/docs/backgroundGraphic.md?raw";
-import inlineGraphicDocs from "./stories/docs/inlineGraphic.md?raw";
-import inlinePhotoDocs from "./stories/docs/inlinePhoto.md?raw";
-import transparentHeaderDocs from "./stories/docs/transparentHeader.md?raw";
-import videoDocs from "./stories/docs/backgroundVideo.md?raw";
-import customHedDocs from "./stories/docs/customHed.md?raw";
-import HeroHeadline from "./Hero.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/HeroHeadline",
-  component: HeroHeadline,
-  ...withComponentDocs(componentDocs),
-  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>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @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 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';
-</script>
-
-<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

@@ -1,42 +0,0 @@
-import { SvelteComponent } from "svelte";
-import HeroHeadline from './Hero.svelte';
-export declare const meta: {
-    argTypes: {
-        hedSize: {
-            control: string;
-            options: string[];
-        };
-        hedWidth: {
-            control: string;
-            options: string[];
-        };
-        hedAlign: {
-            control: string;
-            options: string[];
-        };
-        width: {
-            control: string;
-            options: string[];
-        };
-    };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof HeroHeadline;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type HeroProps = typeof __propDef.props;
-export type HeroEvents = typeof __propDef.events;
-export type HeroSlots = typeof __propDef.slots;
-export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
-}
-export {};

package/dist/components/HeroHeadline/Hero.svelte

@@ -1,193 +0,0 @@
-<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
-<script>export let embedded = false;
-export let img = null;
-export let ariaDescription = null;
-export let notes = null;
-export let hed = "Reuters Graphics Interactive";
-let cls = "";
-export { cls as class };
-export let hedSize = "normal";
-export let hedAlign = "center";
-export let hedWidth = "normal";
-export let dek = null;
-export let section = null;
-export let authors = [];
-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>
-    <!-- Background media hero-->
-    {#if $$slots.background || img}
-      <Block width="fluid" class="hero-headline background-hero fmt-0">
-        {#if $$slots.hed}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          >
-            <!-- Headline named slot -->
-            <div slot="hed">
-              <slot name="hed" />
-            </div>
-          </Headline>
-        {:else}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          />
-        {/if}
-
-        <div class="graphic-container">
-          {#if $$slots.background}
-            <!-- Hero graphic named slot -->
-            <slot name="background" />
-          {:else}
-            <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}
-
-    <!-- Inline hero -->
-    {#if $$slots.inline}
-      <Block width="fluid" class="hero-headline inline-hero">
-        <PaddingReset containerIsFluid="{true}">
-          {#if $$slots.hed}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            >
-              <!-- Headline named slot -->
-              <div slot="hed">
-                <slot name="hed" />
-              </div>
-            </Headline>
-          {:else}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            />
-          {/if}
-        </PaddingReset>
-        <div class="graphic-container">
-          <!-- Hero named slot -->
-          <slot name="inline" />
-        </div>
-      </Block>
-    {/if}
-  </div>
-
-  <div class="hero-byline fmb-6">
-    {#if $$slots.byline}
-      <!-- Custom byline/dateline -->
-      <slot name="byline" />
-    {:else if authors.length > 0 || publishTime}
-      <Byline {authors} {publishTime} {updateTime} 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) {
-  margin-top: 0;
-  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%);
-}
-@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/Hero.svelte.d.ts

@@ -1,75 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { HeadlineSize } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /** Set to true for embeddables. */ embedded?: boolean;
-        /**
-           * Path to background image
-           * @type {string}
-           */ img?: string | null;
-        /**
-           * ARIA description, passed in as a markdown string.
-           * @type {string}
-           */ ariaDescription?: string | null;
-        /**
-           * Notes to the graphic, passed in as a markdown string.
-           * @type {string}
-           */ notes?: string | null;
-        /**
-           * Headline, parsed as an _inline_ markdown string in an `h1` element.
-           * @type {string}
-           */ hed?: string;
-        /** Add extra classes to the block tag to target it with custom CSS. */ class?: string;
-        /**
-           * Headline size
-           * @type {string}
-           */ hedSize?: HeadlineSize;
-        /**
-           * Headline horizontal alignment
-           * @type {string}
-           */ hedAlign?: "left" | "center" | "right";
-        /**
-           * Width of the headline.
-           */ hedWidth?: "normal" | "wide" | "wider" | "widest";
-        /**
-           * Dek, parsed as a markdown string.
-           * @type {string}
-           */ dek?: string | null;
-        /**
-           * Section title
-           * @type {string}
-           */ section?: string | null;
-        /**
-           * Array of author names, which will be slugified to create links to Reuters author pages
-           */ authors?: string[];
-        /**
-           * Publish time as a datetime string.
-           * @type {string}
-           */ publishTime?: string;
-        /**
-           * Update time as a datetime string.
-           * @type {string}
-           */ updateTime?: string;
-        /**
-           * Width of the Hero graphic.
-           */ width?: "normal" | "wide" | "wider" | "widest";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        hed: {};
-        background: {};
-        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-text-elements-heroheadline--docs) */
-export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
-}
-export {};