@reuters-graphics/graphics-components 3.2.1 → 3.3.1

package/dist/components/ClockWall/Clock.svelte

@@ -0,0 +1,266 @@
+<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;
+  flex: 1 1 0px;
+}
+@media (max-width: 659px) {
+  .clock-container {
+    height: 48px;
+  }
+}
+.clock-container .clock-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.clock-container .clock-info p {
+  text-wrap: nowrap;
+}
+.clock-container svg {
+  aspect-ratio: 1/1;
+  width: auto;
+  height: 100%;
+}</style>

package/dist/components/ClockWall/Clock.svelte.d.ts

@@ -0,0 +1,28 @@
+declare const Clock: import("svelte").Component<{
+    /**
+     * 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?: "Light" | "Normal" | "Bold";
+    /**
+     * The size of the clock, either "XS", "MD", "LG", or "XL"
+     */
+    clockSize?: "XS" | "MD" | "LG" | "XL";
+}, {}, "">;
+type Clock = ReturnType<typeof Clock>;
+export default Clock;

package/dist/components/ClockWall/ClockWall.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+  import Clock from './Clock.svelte';
+
+  type ClockProps = ComponentProps<typeof Clock>;
+
+  interface City {
+    name: string;
+    tzIdentifier: string;
+  }
+
+  interface Props {
+    cities?: City[];
+    width?: ContainerWidth;
+    clockSize?: ClockProps['clockSize'];
+    clockWeight?: ClockProps['clockWeight'];
+  }
+
+  let {
+    cities = [
+      { name: 'Tehran', tzIdentifier: 'Asia/Tehran' },
+      { name: 'Tel Aviv', tzIdentifier: 'Asia/Tel_Aviv' },
+      { name: 'Washington D.C.', tzIdentifier: 'America/New_York' },
+    ],
+    width = 'normal',
+    clockSize = 'XS',
+    clockWeight = 'Bold',
+  }: Props = $props();
+</script>
+
+<Block {width} class="my-6">
+  <div id="clock-group">
+    {#each cities as city (city.tzIdentifier)}
+      <Clock
+        name={city.name}
+        tzIdentifier={city.tzIdentifier}
+        {clockSize}
+        {clockWeight}
+      />
+    {/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 */
+div#clock-group {
+  width: 100%;
+  margin: 0px auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 1rem;
+  justify-content: space-around;
+}
+@media (max-width: 659px) {
+  div#clock-group {
+    justify-content: center;
+  }
+}</style>

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import type { ContainerWidth } from '../@types/global';
+import Clock from './Clock.svelte';
+type ClockProps = ComponentProps<typeof Clock>;
+interface City {
+    name: string;
+    tzIdentifier: string;
+}
+interface Props {
+    cities?: City[];
+    width?: ContainerWidth;
+    clockSize?: ClockProps['clockSize'];
+    clockWeight?: ClockProps['clockWeight'];
+}
+declare const ClockWall: import("svelte").Component<Props, {}, "">;
+type ClockWall = ReturnType<typeof ClockWall>;
+export default ClockWall;

package/dist/components/KinesisLogo/KinesisLogo.svelte

@@ -0,0 +1,140 @@
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    colour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let { colour = '#D64000', width = '100%' }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 558.7 558.7"
+  style="width: {width}; --logoColour: {colour};"
+>
+  <g id="Primary_Logo" data-name="Primary Logo">
+    <path
+      class="cls-1"
+      d="M483,75c7.1,7.1,11,16.6,11,26.7s-3.9,19.6-11,26.7c-14.7,14.7-38.6,14.7-53.3,0-7.1-7.1-11-16.6-11-26.7s3.9-19.6,11-26.7c7.4-7.4,17-11.1,26.7-11.1s19.3,3.7,26.7,11.1Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M75.1,483.6c-14.7-14.7-14.7-38.7,0-53.4,7.1-7.1,16.6-11.1,26.7-11.1s19.6,3.9,26.7,11.1c14.7,14.7,14.7,38.7,0,53.4-7.1,7.1-16.6,11.1-26.7,11.1s-19.6-3.9-26.7-11.1Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M362.6,77.9h-.3c-8-3.5-14.3-9.8-17.6-17.9-3.4-8.1-3.4-17.1,0-25.3,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5s8.6.9,12.6,2.5c16.8,7,24.8,26.3,17.9,43.2-7,16.8-26.3,24.8-43.1,17.9h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M183.1,478.3c4.3,0,8.5.9,12.6,2.5,16.8,7,24.8,26.3,17.9,43.2-3.4,8.2-9.7,14.5-17.9,17.9-8.1,3.4-17.1,3.4-25.3,0-16.8-7-24.8-26.3-17.9-43.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M307.4,28.3c0,15.2-12,27.6-27,28.3h-1.3c-15.6,0-28.3-12.7-28.3-28.3S263.5,0,279.1,0s28.3,12.8,28.3,28.4h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M250.8,530.4c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M192.2,69.2c-5.8,2.4-12.2,2.4-18,0-5.9-2.4-10.4-7-12.8-12.8-5-12.1.7-25.9,12.8-30.9,2.9-1.2,6-1.8,9-1.8,9.3,0,18.1,5.5,21.8,14.6,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M365.9,489.5c3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c5.9,2.4,10.4,7,12.8,12.8,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.2,2.4-18.1,0-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,2.4-5.8,6.9-10.4,12.8-12.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M115.1,88.6c7.2,7.3,7.4,18.9.4,26.4l-.4.4c-7.4,7.4-19.4,7.4-26.7,0-7.4-7.4-7.4-19.4,0-26.8,3.7-3.7,8.5-5.5,13.4-5.5s9.7,1.8,13.4,5.5h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M442.8,443.5c3.6-3.7,8.5-5.5,13.3-5.5s9.7,1.8,13.4,5.5c3.6,3.5,5.5,8.3,5.5,13.4s-2,9.8-5.5,13.4c-7.4,7.4-19.3,7.4-26.7,0-3.6-3.6-5.5-8.4-5.5-13.4s2-9.8,5.5-13.4h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M38.4,205.1c-12-5-17.8-18.8-12.8-30.9,2.4-5.9,6.9-10.4,12.8-12.8,3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c12,5,17.7,18.8,12.8,30.9-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.3,2.4-18,0h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M519.8,353.7c5.8,2.4,10.4,6.9,12.8,12.8,2.4,5.9,2.4,12.2,0,18.1-5,12-18.8,17.8-30.8,12.8-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,3.8-9.1,12.6-14.6,21.8-14.6s6,.6,9,1.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M0,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3S0,295.1,0,279.5Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M501.6,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M16.8,388.1c-7-16.9,1-36.2,17.9-43.2,8.1-3.4,17.1-3.4,25.3,0,8.1,3.4,14.5,9.7,17.9,17.9s3.4,17.1,0,25.3c-3.4,8.1-9.7,14.5-17.9,17.9s-17.1,3.4-25.3,0c-8.1-3.4-14.5-9.7-17.9-17.9Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M480.1,195.9c-3.4-8.1-3.4-17.1,0-25.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5,13,0,25.3,7.7,30.5,20.4,7,16.9-1,36.2-17.9,43.2-8.1,3.4-17.1,3.4-25.3,0-8.1-3.4-14.5-9.7-17.9-17.9h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M359.3,359.7c-10.4,10.3-10.4,27.2,0,37.5,10.4,10.4,27.1,10.4,37.5,0,5-5,7.8-11.6,7.8-18.7s-2.8-13.8-7.8-18.7c-5.2-5.2-11.9-7.7-18.7-7.7s-13.6,2.6-18.8,7.7h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M138.3,263.3c-11.2-3-17.8-14.5-14.8-25.7,1.5-5.4,4.9-9.9,9.8-12.8,3.2-1.9,6.8-2.8,10.4-2.8s3.6.2,5.4.7c5.4,1.5,9.9,4.9,12.7,9.8s3.5,10.5,2.1,16c-3,11.2-14.5,17.9-25.7,14.9h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M408.9,335.9c-5.4-1.5-9.9-4.9-12.7-9.8s-3.5-10.5-2.1-16c1.5-5.4,4.9-10,9.8-12.8,3.2-1.9,6.9-2.8,10.5-2.8s3,.1,4.5.5l1,.3c11.2,3,17.8,14.6,14.8,25.7-1.5,5.4-4.9,10-9.8,12.8-4.9,2.8-10.5,3.6-16,2.1h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M127.6,320c-2.3-8.7,2.5-17.5,10.9-20.4l1-.3c8.9-2.4,18.2,3,20.6,11.9,1.2,4.4.6,8.9-1.7,12.8-2.2,3.9-5.9,6.7-10.2,7.9-4.4,1.2-8.8.6-12.8-1.7-3.9-2.2-6.7-5.9-7.8-10.2h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M405.9,257.8l-.7-.4c-3.5-2.3-6-5.7-7.1-9.8-2.4-9,2.9-18.2,11.9-20.6,8.9-2.4,18.2,2.9,20.6,11.9,2.4,9-2.9,18.2-11.9,20.6-4.3,1.2-8.8.5-12.8-1.7h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M189.4,386.7l-.5.5c-4.9,4.9-13,4.9-17.9,0-4.9-4.9-4.9-12.9,0-17.9s13-4.9,17.9,0c2.4,2.4,3.7,5.6,3.7,9s-1.1,6.1-3.2,8.4Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M386.9,171.2c2.4,2.4,3.7,5.6,3.7,9s-1.3,6.6-3.7,9c-4.9,4.9-13,4.9-17.9,0-2.4-2.4-3.7-5.6-3.7-9s1.3-6.6,3.7-9c2.4-2.4,5.6-3.7,9-3.7s6.6,1.3,9,3.7h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M257.3,406.3c2.2,3.9,2.8,8.4,1.7,12.8-1.2,4.4-3.9,8-7.8,10.2s-8.4,2.8-12.8,1.7c-8.9-2.4-14.3-11.6-11.9-20.6,1.2-4.4,3.9-8,7.8-10.2,3.9-2.2,8.4-2.8,12.8-1.7,4.4,1.2,7.9,4,10.2,7.9h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M300.6,152.5c-2.2-3.9-2.8-8.4-1.7-12.8,1.2-4.4,3.9-8,7.8-10.2,2.6-1.5,5.5-2.2,8.4-2.2s2.9.2,4.4.6c4.4,1.2,8,3.9,10.2,7.9,2.2,3.9,2.8,8.4,1.7,12.8-2.4,9-11.6,14.3-20.6,11.9-4.4-1.2-8-3.9-10.2-7.9h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M325.9,396.6l.9.5c4.4,2.8,7.5,7.1,8.9,12.2,3,11.2-3.6,22.8-14.8,25.7-5.5,1.5-11.1.7-16-2.1-4.9-2.8-8.3-7.3-9.8-12.8-1.5-5.4-.7-11.1,2.1-16,2.8-4.9,7.3-8.3,12.7-9.8,1.8-.5,3.7-.7,5.5-.7,3.6,0,7.2,1,10.5,2.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M248.2,164.3c-11.2,3-22.7-3.7-25.7-14.9-3-11.2,3.6-22.8,14.8-25.7,1.8-.5,3.6-.7,5.4-.7,9.3,0,17.8,6.2,20.3,15.6,3,11.2-3.6,22.8-14.8,25.7Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M180,206.5c14.6,0,26.4-11.9,26.4-26.5s-11.8-26.5-26.4-26.5-26.4,11.9-26.4,26.5,11.8,26.5,26.4,26.5Z"
+    ></path>
+  </g>
+</svg>
+
+<style>
+  .cls-1 {
+    fill: var(--logoColour);
+    stroke-width: 0px;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    /** "Kinesis" colour */
+    colour?: string;
+    /** CSS width value */
+    width?: string;
+}
+/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) */
+declare const KinesisLogo: import("svelte").Component<Props, {}, "">;
+type KinesisLogo = ReturnType<typeof KinesisLogo>;
+export default KinesisLogo;

package/dist/index.d.ts

@@ -3,9 +3,12 @@ export { default as resizeObserver } from './actions/resizeObserver/index';
 export { prettifyDate } from './utils/index';
 export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
+export { default as BlogPost } from './components/BlogPost/BlogPost.svelte';
+export { default as BlogTOC } from './components/BlogTOC/BlogTOC.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
+export { default as ClockWall } from './components/ClockWall/ClockWall.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as Byline } from './components/Byline/Byline.svelte';
 export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
@@ -21,6 +24,7 @@ export { default as HorizontalScroller } from './components/HorizontalScroller/H
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
+export { default as KinesisLogo } from './components/KinesisLogo/KinesisLogo.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
 export { default as TileMap } from './components/TileMap/TileMap.svelte';
 export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';

package/dist/index.js

@@ -6,9 +6,12 @@ export { prettifyDate } from './utils/index';
 // Components
 export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
+export { default as BlogPost } from './components/BlogPost/BlogPost.svelte';
+export { default as BlogTOC } from './components/BlogTOC/BlogTOC.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
+export { default as ClockWall } from './components/ClockWall/ClockWall.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as Byline } from './components/Byline/Byline.svelte';
 export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
@@ -24,6 +27,7 @@ export { default as HorizontalScroller } from './components/HorizontalScroller/H
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
+export { default as KinesisLogo } from './components/KinesisLogo/KinesisLogo.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
 export { default as TileMap } from './components/TileMap/TileMap.svelte';
 export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';

package/dist/journalize.d.ts

@@ -16,4 +16,13 @@ declare module 'journalize' {
    * @returns The converted value
    */
   export function intcomma(val: number | string): string;
+
+  /**
+   * Returns an AP-formatted month string that corresponds with the supplied
+   * Date. If an `input` is not passed, it will use the result of `new Date();`.
+   *
+   * @param date - The supplied Date
+   * @returns The converted date as a string
+   */
+  export function apmonth(date?: Date): string;
 }

package/dist/utils/index.d.ts

@@ -24,3 +24,10 @@ export declare const getAuthorPageUrl: (author: string) => string;
  *
  */
 export declare const prettifyDate: (input: string) => string;
+/**
+ * Converts a string into a URL-friendly slug.
+ *
+ * @param str The string to be slugified.
+ * @returns The slugified string.
+ */
+export declare const slugify: (str: string) => string;

package/dist/utils/index.js

@@ -1,4 +1,4 @@
-import slugify from 'slugify';
+import slug from 'slugify';
 /** Helper function to generate a random 4-character string */
 export const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
     .toString(16)
@@ -7,7 +7,7 @@ export const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
  * Custom function that returns an author page URL.
  */
 export const getAuthorPageUrl = (author) => {
-    const authorSlug = slugify(author.trim(), { lower: true });
+    const authorSlug = slug(author.trim(), { lower: true });
     return `https://www.reuters.com/authors/${authorSlug}/`;
 };
 /** Formats a string containing a full or 3-letter abbreviated month, AM/PM, and am/pm to match the Reuters style.
@@ -79,3 +79,10 @@ const prettifyAmPm = (text) => {
         return `${digit} ${formattedDesignator}`;
     });
 };
+/**
+ * Converts a string into a URL-friendly slug.
+ *
+ * @param str The string to be slugified.
+ * @returns The slugified string.
+ */
+export const slugify = (str) => slug(str, { lower: true, strict: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",