@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -1,14 +1,50 @@
 <!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
-<script>export let dates;
-export let symbolColour = "var(--theme-colour-brand-rules)";
-export let dateColour = "var(--theme-colour-accent, red)";
-let cls = "";
-export { cls as class };
-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 Markdown from "../Markdown/Markdown.svelte";
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faLink } from '@fortawesome/free-solid-svg-icons';
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  interface Event {
+    title: string;
+    titleLink?: string;
+    context?: string;
+  }
+  interface EventDate {
+    date: string;
+    events: Event[];
+  }
+
+  interface Props {
+    /**
+     * An array of dates with events.
+     */
+    dates: EventDate[];
+    /**
+     * Set a colour for the timeline bullet symbols and line.
+     */
+    symbolColour?: string;
+    /**
+     * Set a colour for the date headings in the timeline.
+     */
+    dateColour?: string;
+    /**
+     * Set a class to target with SCSS.
+     */
+    class?: string;
+    /**
+     * Set an ID to target with SCSS.
+     */
+    id?: string;
+  }
+
+  let {
+    dates,
+    symbolColour = 'var(--theme-colour-brand-rules)',
+    dateColour = 'var(--theme-colour-accent, red)',
+    class: cls = '',
+    id = '',
+  }: Props = $props();
 </script>
 
 <Block width="normal" {id} class="simple-timeline-container fmy-6 {cls}">
@@ -20,24 +56,24 @@ import Markdown from "../Markdown/Markdown.svelte";
             cx="10"
             cy="12"
             r="5"
-            stroke="{symbolColour}"
+            stroke={symbolColour}
             stroke-width="2"
             fill="transparent"
           ></circle>
         </svg>
         <div
           class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
-          style:color="{dateColour}"
+          style:color={dateColour}
         >
           {date.date}
         </div>
         {#each date.events as event}
           <div class="event pb-2">
             {#if event.titleLink}
-              <a href="{event.titleLink}" target="_blank">
+              <a href={event.titleLink} target="_blank">
                 <div class="title h3">
                   {event.title}
-                  <span class="text-sm"><Fa fw icon="{faLink}" /></span>
+                  <span class="text-sm"><Fa fw icon={faLink} /></span>
                 </div>
               </a>
             {:else}
@@ -46,7 +82,7 @@ import Markdown from "../Markdown/Markdown.svelte";
               </div>
             {/if}
             {#if event.context}
-              <Markdown source="{event.context}" />
+              <Markdown source={event.context} />
             {/if}
           </div>
         {/each}

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

@@ -1,45 +1,35 @@
-import { SvelteComponent } 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}
-           */ class?: string;
-        /**
-           * Set an ID to target with SCSS.
-           * @type {string}
-           */ id?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SimpleTimelineProps = typeof __propDef.props;
-export type SimpleTimelineEvents = typeof __propDef.events;
-export type SimpleTimelineSlots = typeof __propDef.slots;
-/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) */
-export default class SimpleTimeline extends SvelteComponent<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+interface Event {
+    title: string;
+    titleLink?: string;
+    context?: string;
+}
+interface EventDate {
+    date: string;
+    events: Event[];
 }
-export {};
+interface Props {
+    /**
+     * An array of dates with events.
+     */
+    dates: EventDate[];
+    /**
+     * Set a colour for the timeline bullet symbols and line.
+     */
+    symbolColour?: string;
+    /**
+     * Set a colour for the date headings in the timeline.
+     */
+    dateColour?: string;
+    /**
+     * Set a class to target with SCSS.
+     */
+    class?: string;
+    /**
+     * Set an ID to target with SCSS.
+     */
+    id?: string;
+}
+/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) */
+declare const SimpleTimeline: import("svelte").Component<Props, {}, "">;
+type SimpleTimeline = ReturnType<typeof SimpleTimeline>;
+export default SimpleTimeline;

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Twitter from './svgs/Twitter.svelte';
   import YouTube from './svgs/YouTube.svelte';
   import Facebook from './svgs/Facebook.svelte';
@@ -14,7 +14,17 @@
     linkedin: LinkedIn,
   };
 
-  export let links = {};
+  interface Props {
+    links: {
+      company_description?: string;
+      social_links?: {
+        type: string;
+        url: string;
+      }[];
+    };
+  }
+
+  let { links = {} }: Props = $props();
 </script>
 
 {#if links.social_links}
@@ -29,11 +39,13 @@
         <div>
           <ul class="links">
             {#each links.social_links as link}
+              {@const SvelteComponent =
+                symbols[link.type as keyof typeof symbols]}
               <li class="social-links symbol">
-                <a href="{normalizeUrl(link.url)}">
+                <a href={normalizeUrl(link.url)}>
                   <div class="button">
                     <div class="social">
-                      <svelte:component this="{symbols[link.type]}" />
+                      <SvelteComponent />
                     </div>
                   </div>
                 </a>
@@ -54,10 +66,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .content-container {
-  max-width: 1440px;
   width: 100%;
   margin: 0 auto;
+  max-width: 1440px;
 }
+
 .company {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -66,6 +79,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .company .content-container {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+}
+.company .content-container {
   grid-column-gap: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
@@ -83,26 +98,36 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-template-columns: repeat(4, 1fr);
   }
 }
+
 .company {
   border-top: 1px solid var(--nav-rules);
 }
+.company .content-container {
+  box-sizing: border-box;
+}
 .company .content-container {
   padding-left: 2.2222222222vw;
+}
+.company .content-container {
   padding-right: 2.2222222222vw;
-  box-sizing: border-box;
 }
 @media (max-width: 1023px) {
   .company .content-container {
     padding-left: 4.2666666667vw;
+  }
+  .company .content-container {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .company .content-container {
     padding-left: 32px;
+  }
+  .company .content-container {
     padding-right: 32px;
   }
 }
+
 .company .content-container {
   grid-row-gap: 24px;
 }
@@ -119,6 +144,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-row: auto;
   }
 }
+
 .links {
   padding: 0;
   margin: 0;
@@ -140,6 +166,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   align-items: center;
   color: inherit;
 }
+
 .symbol {
   list-style: none;
   display: inline-block;
@@ -149,6 +176,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .symbol:first-child {
   margin-left: 0;
 }
+
 section.company {
   max-width: 100%;
 }

package/dist/components/SiteFooter/CompanyLinks.svelte.d.ts

@@ -1,25 +1,12 @@
-/** @typedef {typeof __propDef.props}  CompanyLinksProps */
-/** @typedef {typeof __propDef.events}  CompanyLinksEvents */
-/** @typedef {typeof __propDef.slots}  CompanyLinksSlots */
-export default class CompanyLinks extends SvelteComponent<{
-    links?: {} | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CompanyLinksProps = typeof __propDef.props;
-export type CompanyLinksEvents = typeof __propDef.events;
-export type CompanyLinksSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        links?: {} | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    links: {
+        company_description?: string;
+        social_links?: {
+            type: string;
+            url: string;
+        }[];
     };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+}
+declare const CompanyLinks: import("svelte").Component<Props, {}, "">;
+type CompanyLinks = ReturnType<typeof CompanyLinks>;
+export default CompanyLinks;

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -1,7 +1,24 @@
-<script>
+<script lang="ts">
   import { normalizeUrl } from '../SiteHeader/NavBar/utils';
 
-  export let links = {};
+  interface Props {
+    links: {
+      ad_links?: {
+        url: string;
+        text: string;
+      }[];
+      misc_links: {
+        self?: boolean;
+        url: string;
+        text: string;
+      }[];
+      disclaimer_link?: string;
+      copyright_year: string;
+      copyright_link: string;
+    };
+  }
+
+  let { links }: Props = $props();
 </script>
 
 {#if links.ad_links}
@@ -11,7 +28,7 @@
         <ul class="link-group">
           {#each links.ad_links as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">
+              <a href={normalizeUrl(link.url)}>
                 {link.text}
               </a>
             </li>
@@ -20,7 +37,7 @@
       </section>
       <p class="disclaimer">
         All quotes delayed a minimum of 15 minutes. <a
-          href="{normalizeUrl(links.disclaimer_link)}"
+          href={normalizeUrl(links.disclaimer_link || '')}
           >See here for a complete list of exchanges and delays</a
         >.
       </p>
@@ -28,7 +45,7 @@
         <ul class="link-group">
           {#each links.misc_links.filter((d) => !d.self) as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">
+              <a href={normalizeUrl(link.url)}>
                 {link.text}
               </a>
             </li>
@@ -36,8 +53,8 @@
         </ul>
       </section>
       <p class="copyright">
-        © {links.copyright_year} Reuters.
-        <a href="{normalizeUrl(links.copyright_link)}">All rights reserved</a>
+        © {new Date().getFullYear()} Reuters.
+        <a href={normalizeUrl(links.copyright_link)}>All rights reserved.</a>
       </p>
     </div>
   </section>
@@ -51,10 +68,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .content-container {
-  max-width: 1440px;
   width: 100%;
   margin: 0 auto;
+  max-width: 1440px;
 }
+
 .legal {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -63,6 +81,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .legal .content-container {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+}
+.legal .content-container {
   grid-column-gap: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
@@ -80,26 +100,36 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-template-columns: repeat(4, 1fr);
   }
 }
+
 .legal {
   border-top: 1px solid var(--nav-rules);
 }
+.legal .content-container {
+  box-sizing: border-box;
+}
 .legal .content-container {
   padding-left: 2.2222222222vw;
+}
+.legal .content-container {
   padding-right: 2.2222222222vw;
-  box-sizing: border-box;
 }
 @media (max-width: 1023px) {
   .legal .content-container {
     padding-left: 4.2666666667vw;
+  }
+  .legal .content-container {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .legal .content-container {
     padding-left: 32px;
+  }
+  .legal .content-container {
     padding-right: 32px;
   }
 }
+
 .legal .content-container {
   grid-row-gap: 1.1111111111vw;
 }
@@ -162,6 +192,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-row: 4;
   }
 }
+
 .link-group {
   margin: 0;
   padding: 0;
@@ -178,10 +209,12 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: 14px;
   font-weight: 500;
 }
+
 section {
   max-width: 100%;
   margin: 0;
 }
+
 p.copyright,
 p.disclaimer {
   margin: 0;

package/dist/components/SiteFooter/LegalLinks.svelte.d.ts

@@ -1,25 +1,19 @@
-/** @typedef {typeof __propDef.props}  LegalLinksProps */
-/** @typedef {typeof __propDef.events}  LegalLinksEvents */
-/** @typedef {typeof __propDef.slots}  LegalLinksSlots */
-export default class LegalLinks extends SvelteComponent<{
-    links?: {} | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LegalLinksProps = typeof __propDef.props;
-export type LegalLinksEvents = typeof __propDef.events;
-export type LegalLinksSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        links?: {} | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    links: {
+        ad_links?: {
+            url: string;
+            text: string;
+        }[];
+        misc_links: {
+            self?: boolean;
+            url: string;
+            text: string;
+        }[];
+        disclaimer_link?: string;
+        copyright_year: string;
+        copyright_link: string;
     };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+}
+declare const LegalLinks: import("svelte").Component<Props, {}, "">;
+type LegalLinks = ReturnType<typeof LegalLinks>;
+export default LegalLinks;