import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as a,C as t}from"./index-Z-6k0Xrj.js";import{S as l,D as s,M as c}from"./SimpleTimeline.stories-BjiqEDny.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"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./this-CrUBQEQ_.js";import"./index-C3C5q_jF.js";import"./Block-D3Ui8rd-.js";import"./Markdown-DUxFwijc.js";function o(i){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...r(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:l}),`
`,e.jsx(n.h1,{id:"simpletimeline",children:"SimpleTimeline"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"SimpleTimeline"})," component creates a basic timeline with dates, titles and descriptions of events."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { SimpleTimeline } from '@reuters-graphics/graphics-components';

  const dates = [
    {
      date: 'May 18',
      events: [
        {
          title: 'A title for the event',
          titleLink: 'https://...', // optional
          context: 'Lorem ipsum...', // optional
        },
        // More events...
      ],
    },
    // More dates...
  ];
<\/script>

<SimpleTimeline {dates} />
`})}),`
`,e.jsx(t,{of:s}),`
`,e.jsx(n.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
`,e.jsx(n.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# Archie ML doc

type: timeline
# Optional
class: timeline
id: timeline-1
symbolColour: var(--theme-colour-brand-rules, grey)
dateColour: var(--theme-colour-accent, red)
[.dates]
    # date object with events
    date: May 10
    [.events]
    title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion
    context:  The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.
    titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
    []

# More dates and events...
[]
`})}),`
`,e.jsxs(n.p,{children:["... which you'll pass to the ",e.jsx(n.code,{children:"SimpleTimeline"})," component."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- Graphics kit -->
<script>
  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
  import content from '$locales/en/content.json';
<\/script>

<SimpleTimeline
  dates={block.dates}
  class={block.class}
  symbolColour={block.symbolColour}
  id={block.id}
  dateColour={block.dateColour}
/>
`})}),`
`,e.jsx(t,{of:s}),`
`,e.jsx(n.h1,{id:"multiple-events",children:"Multiple events"}),`
`,e.jsxs(n.p,{children:["You can add multiple events to a single date by adding objects to the ",e.jsx(n.code,{children:"events"})," array."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { SimpleTimeline } from '@reuters-graphics/graphics-components';

  const dates = [
    {
      date: 'Feb. 25',
      // Multiple events for this date
      events: [
        {
          title: 'NATO deploys more troops',
          context:
            'NATO leaders said on Friday they were deploying more troops to eastern Europe after Russia invaded Ukraine, saying that Moscow had lied about its intentions.',
        },
        {
          title: 'Invasion continues',
          context:
            'Missiles pounded the Ukrainian capital as Russian forces pressed their advance and Ukrainian President Volodymyr Zelenskiy pleaded with the international community to do more, saying sanctions announced so far were not enough.\\n\\nRussian forces battered Ukrainian cities with artillery and cruise missiles but a defiant Zelenskiy said the capital Kyiv remained in Ukrainian hands.',
        },
      ],
    },
    {
      date: 'Feb. 24',
      events: [
        {
          title: 'Russia invades Ukraine',
        },
      ],
    },
  ];
<\/script>

<SimpleTimeline {dates} />
`})}),`
`,e.jsx(t,{of:c})]})}function D(i={}){const{wrapper:n}={...r(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(o,{...i})}):o(i)}export{D as default};