@reuters-graphics/graphics-components 3.10.0 → 4.0.0

package/dist/llm-docs/components/SimpleTimeline.md

@@ -0,0 +1,141 @@
+# SimpleTimeline
+
+**Category:** Components/Text elements/SimpleTimeline
+
+**Import:** `import { SimpleTimeline } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `dates` | `EventDate[]` | — | ✓ | An array of dates with events. |
+| `symbolColour` | `string` | `'var(--theme-colour-brand-rules)'` |  | Set a colour for the timeline bullet symbols and line. |
+| `dateColour` | `string` | `'var(--theme-colour-accent, red)'` |  | Set a colour for the date headings in the timeline. |
+| `class` | `string` | `''` |  | Set a class to target with SCSS. |
+| `id` | `string` | `''` |  | Set an ID to target with SCSS. |
+
+## Examples
+
+### Demo
+
+```svelte
+<SimpleTimeline dates={/* array — see Props/Types for full type */} />
+```
+
+### Multiple events
+
+```svelte
+<SimpleTimeline dates={/* array — see Props/Types for full type */} />
+```
+
+## Documentation
+
+# SimpleTimeline
+
+The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events.
+
+```svelte
+<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} />
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc.
+
+```yaml
+# 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...
+[]
+```
+
+... which you'll pass to the `SimpleTimeline` component.
+
+```svelte
+<!-- 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}
+/>
+```
+
+# Multiple events
+
+You can add multiple events to a single date by adding objects to the `events` array.
+
+```svelte
+<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} />
+```

package/dist/llm-docs/components/SiteFooter.md

@@ -0,0 +1,77 @@
+# SiteFooter
+
+**Category:** Components/Page furniture/SiteFooter
+
+**Import:** `import { SiteFooter } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `includeReferrals` | `boolean` | `true` |  | Set to `false` to remove graphics referrals |
+
+## Examples
+
+### Demo
+
+```svelte
+<SiteFooter />
+```
+
+### Customised theme
+
+```svelte
+<div>
+  <Theme base="dark">
+    <SiteFooter />
+  </Theme>
+</div>
+```
+
+### Remove referrals
+
+```svelte
+<SiteFooter includeReferrals={false} />
+```
+
+## Documentation
+
+# SiteFooter
+
+Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
+
+> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteFooter } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteFooter />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-sitefooter--customised-theme))
+
+```svelte
+<script>
+  import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteFooter />
+</Theme>
+```
+
+## Removing referrals
+
+Remove graphics referrals. ([Demo](?path=/story/components-page-furniture-sitefooter--remove-referrals))
+
+```svelte
+<script>
+  import { SiteFooter } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteFooter includeReferrals={false} />
+```

package/dist/llm-docs/components/SiteHeader.md

@@ -0,0 +1,55 @@
+# SiteHeader
+
+**Category:** Components/Page furniture/SiteHeader
+
+**Import:** `import { SiteHeader } from '@reuters-graphics/graphics-components'`
+
+## Examples
+
+### Demo
+
+```svelte
+<div>
+  <SiteHeader />
+</div>
+```
+
+### Customised theme
+
+```svelte
+<div>
+  <Theme base="dark">
+    <SiteHeader />
+  </Theme>
+</div>
+```
+
+## Documentation
+
+# SiteHeader
+
+Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
+
+> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeader />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-siteheader--customised-theme))
+
+```svelte
+<script>
+  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteHeader />
+</Theme>
+```

package/dist/llm-docs/components/SiteHeadline.md

@@ -0,0 +1,111 @@
+# SiteHeadline
+
+**Category:** Components/Text elements/SiteHeadline
+
+**Import:** `import { SiteHeadline } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `hed` | `string` | — |  | Headline |
+| `hedSize` | `HeadlineSize` | `'normal'` |  | Headline size Options: `small`, `normal`, `big` |
+| `section` | `string` | `'Graphics'` |  | Section title |
+| `sectionUrl` | `string` | `'https://graphics.reuters.com'` |  | Section URL, parsed as a string. Set to blank to remove link |
+| `authors` | `string[]` | — | ✓ | Array of author names, which will be slugified to create links to Reuters author pages |
+| `publishTime` | `string` | — | ✓ | Publish time as a datetime string |
+| `updateTime` | `string` | `''` |  | Update time as a datetime string |
+| `id` | `string` | `''` |  | Add an id to to target with custom CSS |
+| `class` | `string` | `''` |  | Add extra classes to target with custom CSS |
+| `getAuthorPage` | `(author: string) => string` | — |  | Custom function that returns an author page URL. |
+
+## Examples
+
+### Demo
+
+```svelte
+<SiteHeadline
+  hed="Ukraine makes surprising gains in counteroffensive"
+  authors={[
+      'Dea Bankova',
+      'Michael Ovaska',
+      'Samuel Granados',
+      'Prasanta Kumar Dutta',
+    ]}
+  publishTime={new Date('2021-09-12').toISOString()}
+  updateTime={new Date('2021-09-12T13:57:00').toISOString()}
+/>
+```
+
+### ArchieML
+
+```svelte
+<SiteHeadline
+  hed={content.hed}
+  section={content.section}
+  authors={content.authors.split(',')}
+  publishTime={content.published}
+/>
+```
+
+## Documentation
+
+# SiteHeadline
+
+The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
+
+```svelte
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline
+  hed="Ukraine makes suprising gains in swift counteroffensive"
+  authors={[
+    'Dea Bankova',
+    'Michael Ovaska',
+    'Samuel Granados',
+    'Prasanta Kumar Dutta',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+section: Global News # Optional
+sectionUrl: https://www.reuters.com/graphics/ # Optional
+hed: A beautiful page
+[authors]
+* Samuel Granados
+* Dea Bankova
+[]
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+... which you'll pass to the `SiteHeadline` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section={content.section}
+  sectionUrl={content.sectionUrl}
+  hed={content.hed}
+  authors={content.authors.split(',')}
+  publishTime={content.publishTime}
+  updateTime={content.updatTime}
+/>
+```

package/dist/llm-docs/components/Spinner.md

@@ -0,0 +1,43 @@
+# Spinner
+
+**Category:** Components/Utilities/Spinner
+
+**Import:** `import { Spinner } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `colour` | `string` | `'#666'` |  | Primary colour of the spinner. |
+| `width` | `number` | `40` |  | Outer width of the spinner |
+| `ringWidth` | `number` | `6` |  | Width of the spinner ring |
+| `speed` | `number` | `0.8` |  | How fast the spinner spins in seconds |
+| `containerPadding` | `number` | `10` |  | Vertical padding for the spinner's container |
+
+## Examples
+
+### Demo
+
+```svelte
+<Spinner />
+```
+
+## Documentation
+
+# Spinner
+
+The `Spinner` component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data.
+
+```svelte
+<script>
+  import { Spinner } from '@reuters-graphics/graphics-components';
+
+  let somethingsLoading = true;
+</script>
+
+{#if somethingsLoading}
+  <Spinner />
+{:else}
+  <p>The real deal is here.</p>
+{/if}
+```