hypnagaga/packages/graphics-components/docs/assets/Headline-Cv_LyF7m.js

import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as o,C as t}from"./index-Z-6k0Xrj.js";import{H as a,D as c,B as p,C as l,a as d,b as h}from"./Headline.stories-D7G2C9TY.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Headline-C-tkYFZ6.js";import"./Block-D3Ui8rd-.js";import"./Byline-BhU2Zjcl.js";import"./each-CVpBMMjG.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./Markdown-DUxFwijc.js";import"./size-DMdj3-I9.js";function i(s){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{of:a}),`
`,e.jsx(n.h1,{id:"headline",children:"Headline"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Headline"})," component creates headlines in the legacy Reuters Graphics style, with the text centred on the page."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Headline } from '@reuters-graphics/graphics-components';
<\/script>

<Headline
  hed="Reuters Graphics Interactive"
  dek="The beginning of a beautiful page"
  section="World News"
/>
`})}),`
`,e.jsx(t,{of:c}),`
`,e.jsx(n.h2,{id:"with-bylines-and-dateline",children:"With bylines and dateline"}),`
`,e.jsxs(n.p,{children:["Optionally, you can add authors and a publish time to the headline, which the ",e.jsx(n.code,{children:"Headline"})," component internally renders with the ",e.jsx(n.a,{href:"./?path=/docs/components-text-elements-byline--docs",children:"Byline"})," component."]}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": Since ",e.jsx(n.code,{children:"Headline"})," uses ",e.jsx(n.code,{children:"Byline"}),", you can customise the author page hyperlink and bylines with the ",e.jsx(n.code,{children:"getAuthorPage"}),", ",e.jsx(n.code,{children:"byline"}),", ",e.jsx(n.code,{children:"published"})," and ",e.jsx(n.code,{children:"updated"})," props."]}),`
`]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Headline } from '@reuters-graphics/graphics-components';
<\/script>

<Headline
  hed={'Reuters Graphics Interactive'}
  dek={'The beginning of a beautiful page'}
  section={'Global news'}
  authors={['Jane Doe']}
  publishTime={new Date('2020-01-01').toISOString()}
  getAuthorPage={(author) => \`mailto:\${author.replace(' ', '')}@example.com\`}
/>
`})}),`
`,e.jsx(t,{of:p}),`
`,e.jsx(n.h2,{id:"custom-hed-and-dek",children:"Custom hed and dek"}),`
`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"hed"})," and/or ",e.jsx(n.code,{children:"dek"})," ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," to override those elements with custom elements."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Headline } from '@reuters-graphics/graphics-components';
<\/script>

<Headline width="wide">
  <!-- Custom hed snippet -->
  {#snippet hed()}
    <h1 class="custom-hed">
      <span class="small block text-base">The secret to</span>
      “The Nutcracker's”
      <span class="small block text-base fpt-1">success</span>
    </h1>
  {/snippet}

  <!-- Custom dek snippet -->
  {#snippet dek()}
    <p class="custom-dek !fmt-3">
      How “The Nutcracker” ballet became an<span
        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
      >and a financial pillar of ballet companies across the country
    </p>
  {/snippet}
</Headline>

<!-- Custom styles -->
<style lang="scss">
  .custom-hed {
    line-height: 0.9;
  }
  .custom-dek {
    span {
      background-color: #fde68a;
    }
  }
</style>
`})}),`
`,e.jsx(t,{of:l}),`
`,e.jsx(n.h2,{id:"with-crown-image",children:"With crown image"}),`
`,e.jsxs(n.p,{children:["To add a crown image, use the ",e.jsx(n.code,{children:"crown"})," ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippet"}),"."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Headline } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths';
<\/script>

<Headline
  class="!fmt-3"
  hed="Europa"
  publishTime={new Date('2020-01-01').toISOString()}
>
  <!-- Add a crown -->
  {#snippet crown()}
    <img
      src={crownImgSrc}
      width="100"
      class="mx-auto mb-0"
      alt="Illustration of Europe"
    />
  {/snippet}
</Headline>
`})}),`
`,e.jsx(t,{of:d}),`
`,e.jsx(n.h2,{id:"with-crown-graphic",children:"With crown graphic"}),`
`,e.jsx(n.p,{children:"Add a full graphic or any other component in the crown."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Headline } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // If in Graphis Kit

  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
<\/script>

<Headline
  width="wider"
  class="!fmt-1"
  hed={'Unfriendly skies'}
  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
  section={'Ukraine Crisis'}
  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
  publishTime={new Date('2022-03-04').toISOString()}
>
  <!-- Add a crown graphic -->
  {#snippet crown()}
    <!-- Pass \`assetsPath\` if in graphics kit -->
    <Map assetsPath={assets || '/'} />
  {/snippet}
</Headline>
`})}),`
`,e.jsx(t,{of:h})]})}function U(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{U as default};