@reuters-graphics/graphics-components 3.2.1 → 3.3.0

package/dist/components/BlogTOC/BlogTOC.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import TOCList from './TOCList.svelte';
+  import { apmonth } from 'journalize';
+  import { slugify } from '../../utils';
+  import { slide } from 'svelte/transition';
+  import Fa from 'svelte-fa';
+  import {
+    faCaretDown,
+    faAngleDoubleUp,
+    faAngleDoubleDown,
+  } from '@fortawesome/free-solid-svg-icons';
+
+  interface Post {
+    title: string;
+    slugTitle: string;
+    publishTime: string;
+  }
+
+  interface Props {
+    posts: Post[];
+    /** Base path prepended to post links, e.g. "/graphics". */
+    base: string;
+    /** The label for the table of contents toggle button. */
+    label?: string;
+    /** The maximum height of the table of contents list in pixels. */
+    maxHeight?: number;
+  }
+
+  let {
+    posts,
+    base = '',
+    label = 'All posts',
+    maxHeight = 600,
+  }: Props = $props();
+
+  let showContents = $state(false);
+  let scrollPos = $state(0);
+  let listHeight = $state(0);
+
+  const contents = $derived(
+    [...posts]
+      .sort(
+        (a, b) =>
+          new Date(a.publishTime).getTime() - new Date(b.publishTime).getTime()
+      )
+      .map((post) => ({
+        date: `${apmonth(new Date(post.publishTime))} ${new Date(post.publishTime).getDate()}`,
+        events: [
+          {
+            title: post.title,
+            titleLink: `${base}/#${slugify(post.slugTitle)}`,
+          },
+        ],
+      }))
+  );
+</script>
+
+{#if contents.length > 1}
+  <Block width="normal" class="my-0 relative">
+    <div class="table-of-contents" style="--mh: {maxHeight}px;">
+      <div class="flex w-full">
+        <button
+          onclick={() => {
+            showContents = !showContents;
+            scrollPos = 0;
+          }}
+          ><div class="icon" class:expanded={showContents}>
+            <Fa icon={faCaretDown} size="lg" />
+          </div>
+          <div
+            class="label text-xs uppercase leading-loose tracking-wide py-0.5"
+          >
+            {label}
+          </div></button
+        >
+      </div>
+      <Block
+        width="narrow"
+        class="my-0 ml-2 relative {showContents ? 'fpb-6' : ''}"
+      >
+        <div>
+          {#if showContents}
+            <div
+              class="content-container fmt-3"
+              transition:slide={{ axis: 'y', duration: 350 }}
+              onscroll={(e) => {
+                scrollPos = e.currentTarget.scrollTop;
+              }}
+            >
+              <TOCList dates={contents} bind:listHeight />
+
+              {#if scrollPos > 10 && listHeight > maxHeight}
+                <div class="scroll-icon up">
+                  <Fa icon={faAngleDoubleUp} />
+                </div>
+              {/if}
+
+              {#if listHeight > maxHeight && scrollPos < 0.95 * (listHeight - maxHeight)}
+                <div class="scroll-icon down">
+                  <Fa icon={faAngleDoubleDown} />
+                </div>
+              {/if}
+            </div>
+          {/if}
+        </div></Block
+      >
+    </div>
+  </Block>
+{/if}
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.table-of-contents {
+  overflow: hidden;
+  margin-bottom: calc(-2 * clamp(0.88rem, 0.83rem + 0.21vw, 1rem));
+}
+
+.content-container {
+  max-height: var(--mh);
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+.scroll-icon {
+  position: absolute;
+  margin-left: -4px;
+  color: var(--theme-colour-accent);
+  background-color: var(--theme-colour-background);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.scroll-icon.up {
+  top: 0px;
+  animation: fade_scroll_up 1.5s ease-in-out infinite;
+}
+.scroll-icon.down {
+  bottom: 30px;
+  animation: fade_scroll_down 1.5s ease-in-out infinite;
+}
+
+@keyframes fade_scroll_up {
+  0% {
+    transform: translate(0, 5px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+}
+@keyframes fade_scroll_down {
+  0% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, 5px);
+    opacity: 0;
+  }
+}
+button {
+  border: 0;
+  background-color: transparent;
+  display: inline-flex;
+  font-family: var(--theme-font-family-hed);
+  font-weight: normal;
+  padding: 0;
+  color: var(--theme-colour-accent);
+  font-size: var(--theme-font-size-sm);
+  align-items: center;
+  cursor: pointer;
+}
+button div.icon {
+  z-index: 1;
+  font-size: var(--theme-font-size-sm);
+  line-height: 1.7;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--theme-colour-accent);
+  color: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+}
+button div.icon.expanded {
+  transform: rotate(180deg);
+}
+button div.label {
+  color: var(--theme-colour-accent);
+  display: inline-flex;
+  font-weight: 500;
+  padding-inline-start: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-left: -15px;
+  position: relative;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+button div.label:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  background-color: var(--theme-colour-accent);
+}</style>

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

@@ -0,0 +1,17 @@
+interface Post {
+    title: string;
+    slugTitle: string;
+    publishTime: string;
+}
+interface Props {
+    posts: Post[];
+    /** Base path prepended to post links, e.g. "/graphics". */
+    base: string;
+    /** The label for the table of contents toggle button. */
+    label?: string;
+    /** The maximum height of the table of contents list in pixels. */
+    maxHeight?: number;
+}
+declare const BlogToc: import("svelte").Component<Props, {}, "">;
+type BlogToc = ReturnType<typeof BlogToc>;
+export default BlogToc;

package/dist/components/BlogTOC/TOCList.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+
+  interface DateEvent {
+    title: string;
+    titleLink: string;
+  }
+
+  interface DateEntry {
+    date: string;
+    events: DateEvent[];
+  }
+
+  interface Props {
+    dates: DateEntry[];
+    /** Colour for the timeline bullet symbols and line. */
+    symbolColour?: string;
+    /** Colour for the date headings. */
+    dateColour?: string;
+    /** The height of the list, bindable for the parent to read. */
+    listHeight?: number;
+    id?: string;
+    class?: string;
+  }
+
+  let {
+    dates,
+    symbolColour = 'var(--theme-colour-brand-rules)',
+    dateColour = 'var(--theme-colour-accent, red)',
+    listHeight = $bindable(0),
+    id = '',
+    class: cls = '',
+  }: Props = $props();
+</script>
+
+<Block width="normal" {id} class="simple-timeline-container {cls}">
+  <div
+    bind:clientHeight={listHeight}
+    class="timeline"
+    style="--symbol-colour:{symbolColour};"
+  >
+    {#each dates as date}
+      <div class="date">
+        <svg class="absolute bg" height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke={symbolColour}
+            stroke-width="2"
+            fill="transparent"
+          ></circle>
+        </svg>
+        <div class="timeline-date" style:color={dateColour}>
+          {date.date}
+        </div>
+        {#each date.events as event}
+          <div class="event">
+            <a href={event.titleLink}>
+              <div class="title">{event.title}</div>
+            </a>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.timeline {
+  padding-left: 0.5rem;
+  padding-right: 0.875rem;
+}
+.timeline .date {
+  position: relative;
+  padding-top: 0.125rem;
+  padding-left: 1.25rem;
+  padding-bottom: 1rem;
+  scroll-snap-align: start;
+  border-left: 1px solid var(--symbol-colour);
+}
+.timeline .date:last-child {
+  border-left: 1px solid var(--theme-colour-background);
+  padding-block-end: 0;
+}
+.timeline .timeline-date {
+  font-family: var(--theme-font-family-note);
+  font-size: var(--theme-font-size-xs);
+  text-transform: uppercase;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+  margin-block-end: 0;
+}
+.timeline svg {
+  top: -1px;
+  left: -10.5px;
+}
+.timeline div.title {
+  color: var(--theme-colour-text-primary);
+  font-weight: 600;
+  font-family: var(--theme-font-family-subhed);
+  line-height: 1.15;
+  font-size: var(--theme-font-size-base);
+  margin-block-start: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  font-weight: 500;
+}
+.timeline div.event a {
+  text-decoration: none;
+}
+.timeline div.event a:hover {
+  text-decoration: underline;
+}
+.timeline div.event :global(p) {
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  font-family: var(--theme-font-family-note);
+  font-size: calc(0.9 * var(--theme-font-size-base));
+  color: var(--theme-colour-text-primary);
+  line-height: 1.3;
+  font-weight: 300;
+}</style>

package/dist/components/BlogTOC/TOCList.svelte.d.ts

@@ -0,0 +1,22 @@
+interface DateEvent {
+    title: string;
+    titleLink: string;
+}
+interface DateEntry {
+    date: string;
+    events: DateEvent[];
+}
+interface Props {
+    dates: DateEntry[];
+    /** Colour for the timeline bullet symbols and line. */
+    symbolColour?: string;
+    /** Colour for the date headings. */
+    dateColour?: string;
+    /** The height of the list, bindable for the parent to read. */
+    listHeight?: number;
+    id?: string;
+    class?: string;
+}
+declare const TocList: import("svelte").Component<Props, {}, "listHeight">;
+type TocList = ReturnType<typeof TocList>;
+export default TocList;

package/dist/components/Byline/Byline.svelte

@@ -13,7 +13,7 @@
     /**
      * Publish time as a datetime string.
      */
-    publishTime: string;
+    publishTime?: string;
     /**
      * Update time as a datetime string.
      */
@@ -52,7 +52,7 @@
 
   let {
     authors = [],
-    publishTime,
+    publishTime = '',
     updateTime,
     align = 'auto',
     id = '',

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

@@ -7,7 +7,7 @@ interface Props {
     /**
      * Publish time as a datetime string.
      */
-    publishTime: string;
+    publishTime?: string;
     /**
      * Update time as a datetime string.
      */

package/dist/components/ClockWall/Clock.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+
+  const CLOCK_WEIGHT = { Light: 1, Normal: 2, Bold: 4 } as const;
+  type ClockWeight = keyof typeof CLOCK_WEIGHT;
+
+  const CLOCK_SIZE = { XS: 48, MD: 80, LG: 120, XL: 160 } as const;
+  type ClockSize = keyof typeof CLOCK_SIZE;
+
+  interface Props {
+    /**
+     * The name of the clock (to be displayed), e.g. "New York"
+     */
+    name: string;
+    /**
+     * The UTC time to display, defaults to current time
+     */
+    UTCTime?: Date;
+    /**
+     * The timezone identifier, e.g. "America/New_York"
+     */
+    tzIdentifier: string;
+    /**
+     * Whether to show the clock, defaults to true
+     */
+    showClock?: boolean;
+    /**
+     * The weight of the clock, either "normal" or "bold"
+     */
+    clockWeight?: ClockWeight;
+    /**
+     * The size of the clock, either "XS", "MD", "LG", or "XL"
+     */
+    clockSize?: ClockSize;
+  }
+
+  const {
+    name,
+    UTCTime = new Date(new Date().toUTCString()),
+    tzIdentifier,
+    showClock = true,
+    clockWeight = 'Normal',
+    clockSize = 'MD',
+  }: Props = $props();
+
+  /**
+   * Converts a UTC date to a specified timezone and formats it to a.m./p.m. style.
+   *
+   * @param utcDate - The UTC date to convert.
+   * @param timezone - The timezone identifier.
+   * @returns The formatted time string.
+   *
+   */
+  function convertUTCToTimezone(utcDate: Date, timezone: string) {
+    const time = new Date(utcDate).toLocaleString('en-US', {
+      timeZone: timezone,
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+
+    // Convert AM/PM to a.m./p.m. format
+    return time.replace('AM', 'a.m.').replace('PM', 'p.m.');
+  }
+
+  let clockInterval: ReturnType<typeof setInterval> | null = null;
+  let time: string = $state(convertUTCToTimezone(UTCTime, tzIdentifier));
+
+  onMount(() => {
+    clockInterval = setInterval(() => {
+      time = convertUTCToTimezone(
+        new Date(new Date().toUTCString()),
+        tzIdentifier
+      );
+    }, 1000 * 10); // Update every 10 seconds
+  });
+
+  let minute: number = $derived(
+    parseFloat(time?.split(' ')[0].split(':')[1]) || 0
+  );
+  let hour: number = $derived(
+    parseFloat(time?.split(' ')[0].split(':')[0]) || 0
+  );
+
+  onDestroy(() => {
+    if (clockInterval) {
+      clearInterval(clockInterval);
+      clockInterval = null;
+    }
+  });
+</script>
+
+<div class="clock-container" style="--clock-size: {CLOCK_SIZE[clockSize]}px;">
+  {#if showClock}
+    <svg class="clock-svg" width="100%" height="100%" viewBox="0 0 120 120">
+      <defs>
+        <filter id="inset-shadow">
+          <!-- Shadow offset -->
+          <feOffset dx="0" dy="4" />
+          <!-- Shadow blur -->
+          <feGaussianBlur stdDeviation="8" result="offset-blur" />
+          <!-- Invert drop shadow to make an inset shadow-->
+          <feComposite
+            operator="out"
+            in="SourceGraphic"
+            in2="offset-blur"
+            result="inverse"
+          />
+          <!-- Cut colour inside shadow -->
+          <feFlood flood-color="black" flood-opacity=".2" result="color" />
+          <feComposite operator="in" in="color" in2="inverse" result="shadow" />
+          <!-- Placing shadow over element -->
+          <feComposite operator="over" in="shadow" in2="SourceGraphic" />
+        </filter>
+      </defs>
+      <circle
+        class="clock-outer-border"
+        cx="50%"
+        cy="50%"
+        r="58"
+        fill="transparent"
+        stroke="#cccccc"
+        stroke-width="2"
+      ></circle>
+      <circle
+        class="clock-inner-shadow"
+        cx="50%"
+        cy="50%"
+        r="54"
+        fill="#ffffff"
+        filter="url(#inset-shadow)"
+      ></circle>
+      <g id="clock-ticks" style="mix-blend-mode: multiply;">
+        {#each Array(12) as _, i (i)}
+          <line
+            class="clock-hour-mark"
+            x1="50%"
+            y1="56"
+            x2="50%"
+            y2="64"
+            stroke="var(--tr-light-grey)"
+            stroke-width="2"
+            transform-origin="50% 50%"
+            transform="rotate({i * 30}) translate(0, -46)"
+          ></line>
+        {/each}
+      </g>
+      <g
+        id="clock-hand-minute"
+        transform-origin="50% 50%"
+        transform="rotate({(minute / 60) * 360})"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="4"
+          fill="transparent"
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+        ></circle>
+        <line
+          x1="50%"
+          y1={60 - 4 - 36}
+          x2="50%"
+          y2={60 - 4}
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+        <line
+          x1="50%"
+          y1={60 + 4}
+          x2="50%"
+          y2={60 + 4 + 4}
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+      </g>
+      <g
+        id="clock-hand-hour"
+        transform-origin="50% 50%"
+        transform="rotate({(hour / 12) * 360 + (360 / 12) * (minute / 60)})"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="4"
+          fill="transparent"
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+        ></circle>
+        <line
+          x1="50%"
+          y1={60 - 4 - 24}
+          x2="50%"
+          y2={60 - 4}
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+        <line
+          x1="50%"
+          y1={60 + 4}
+          x2="50%"
+          y2={60 + 4 + 4}
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+      </g>
+      <circle
+        class="clock-origin"
+        cx="50%"
+        cy="50%"
+        r="2"
+        fill="var(--tr-dark-grey)"
+      ></circle>
+    </svg>
+  {/if}
+  <div class="clock-info">
+    <p class="m-0 p-0 font-sans font-medium leading-none text-sm">
+      {name}
+    </p>
+    <p
+      class="m-0 p-0 font-sans text-xs leading-none"
+      style="color: var(--tr-medium-grey);"
+    >
+      {time}
+    </p>
+  </div>
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.clock-container {
+  height: var(--clock-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+@media (max-width: 659px) {
+  .clock-container {
+    height: 48px;
+  }
+}
+.clock-container .clock-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.clock-container svg {
+  aspect-ratio: 1/1;
+  width: auto;
+  height: 100%;
+}</style>