@reuters-graphics/graphics-components 0.0.2 → 0.0.3

package/dist/@types/components/SimpleTimeline/SimpleTimeline.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * An array of dates with events.
+           * @required
+           */ dates: {
+            date: string;
+            events: {
+                title: string;
+                titleLink?: string;
+                context?: string;
+            }[];
+        }[];
+        /**
+           * Set a colour for the timeline bullet symbols and line.
+           * @type {string}
+           */ symbolColour?: string;
+        /**
+           * Set a colour for the date headings in the timeline.
+           * @type {string}
+           */ dateColour?: string;
+        /**
+           * Set a class to target with SCSS.
+           * @type {string}
+           */ cls?: string;
+        /**
+           * Set an ID to target with SCSS.
+           * @type {string}
+           */ id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SimpleTimelineProps = typeof __propDef.props;
+export declare type SimpleTimelineEvents = typeof __propDef.events;
+export declare type SimpleTimelineSlots = typeof __propDef.slots;
+/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) */
+export default class SimpleTimeline extends SvelteComponentTyped<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+}
+export {};

package/dist/@types/index.d.ts

@@ -17,6 +17,7 @@ export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from "./components/Scroller/Scroller.svelte";
 export { default as SEO } from "./components/SEO/SEO.svelte";
 export { default as Sharer } from "./components/Sharer/Sharer.svelte";
+export { default as SimpleTimeline } from "./components/SimpleTimeline/SimpleTimeline.svelte";
 export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte";
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -0,0 +1,126 @@
+<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) -->
+<script>/**
+ * An array of dates with events.
+ * @required
+ */
+export let dates;
+/**
+ * Set a colour for the timeline bullet symbols and line.
+ * @type {string}
+ */
+export let symbolColour = '#ccc';
+/**
+ * Set a colour for the date headings in the timeline.
+ * @type {string}
+ */
+export let dateColour = 'var(--theme-colour-accent, red)';
+/**
+ * Set a class to target with SCSS.
+ * @type {string}
+ */
+export let cls = '';
+/**
+ * Set an ID to target with SCSS.
+ * @type {string}
+ */
+export let id = '';
+import Block from '../Block/Block.svelte';
+import Fa from 'svelte-fa/src/fa.svelte';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { marked } from 'marked';
+</script>
+
+<Block width="normal" id="{id}" cls="simple-timeline-container {cls}">
+  <div class="timeline" style="--symbol-colour:{symbolColour};">
+    {#each dates as date}
+      <div class="date">
+        <svg height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke="{symbolColour}"
+            stroke-width="2"
+            fill="transparent"></circle>
+        </svg>
+        <h5 style:color="{dateColour}">{date.date}</h5>
+        {#each date.events as event}
+          <div class="event pb-2">
+            {#if event.titleLink}
+              <a href="{event.titleLink}" target="_blank">
+                <h6>
+                  {event.title} <span><Fa fw icon="{faLink}" /></span>
+                </h6>
+              </a>
+            {:else}
+              <h6>{event.title}</h6>
+            {/if}
+            {#if event.context}
+              {@html marked(event.context)}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style>.timeline {
+  margin-top: 2rem;
+  padding-left: 8px;
+  padding-right: 15px;
+}
+.timeline .date {
+  border-left: 1px solid var(--symbol-colour);
+  padding-left: 20px;
+  padding-bottom: 1rem;
+  position: relative;
+  margin: 0;
+  display: block;
+}
+.timeline .date:last-child {
+  border-left: 1px solid var(--theme-colour-background, #fff);
+}
+.timeline .date h5 {
+  font-size: 0.95rem;
+  margin-top: 0px;
+}
+.timeline svg {
+  background-color: var(--theme-colour-background, #fff);
+  position: absolute;
+  top: -1px;
+  left: -10px;
+}
+.timeline div.event h6 {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--theme-colour-text-primary, #666);
+}
+.timeline div.event a {
+  color: var(--theme-colour-text-primary, #666);
+  text-decoration: none;
+}
+.timeline div.event a:hover {
+  text-decoration: underline;
+}
+.timeline div.event a h6 span {
+  opacity: 0.5;
+  font-size: 1rem;
+}
+.timeline div.event a h6:hover span {
+  opacity: 0.8;
+}
+.timeline div.event :global(p) {
+  margin-top: 0;
+  margin-bottom: 0.7rem;
+  font-size: 1rem;
+  font-weight: 300;
+  color: var(--theme-colour-text-primary, #666);
+  font-family: var(--theme-font-family-sans-serif);
+}
+.timeline div.event :global(p):last-of-type {
+  margin-bottom: 0;
+}
+.timeline div.event :global(a) {
+  color: var(--theme-colour-text-primary, #666);
+}</style>

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
 export { default as Sharer } from './components/Sharer/Sharer.svelte';
+export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';
 export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -133,6 +133,7 @@
     "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",
     "./components/Sharer/utils/meta": "./dist/components/Sharer/utils/meta.js",
     "./components/Sharer/utils/twitter": "./dist/components/Sharer/utils/twitter.js",
+    "./components/SimpleTimeline/SimpleTimeline.svelte": "./dist/components/SimpleTimeline/SimpleTimeline.svelte",
     "./components/SiteFooter/CompanyLinks.svelte": "./dist/components/SiteFooter/CompanyLinks.svelte",
     "./components/SiteFooter/LegalLinks.svelte": "./dist/components/SiteFooter/LegalLinks.svelte",
     "./components/SiteFooter/QuickLinks.svelte": "./dist/components/SiteFooter/QuickLinks.svelte",