@reuters-graphics/graphics-components 3.2.1 → 3.3.0

package/dist/components/BlogPost/BlogPost.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  interface Props {
+    /** Title of the blog post */
+    title: string;
+    /**
+     * A sluggable title of the blog post.
+     *
+     * **Important:** Do not change this title after publishing the post. Changes will break
+     * published links to the post.
+     */
+    slugTitle: string;
+    /**
+     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     */
+    base: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors: string[];
+    /** Publish time as a datetime string. */
+    publishTime: string;
+    /** Update time as a datetime string. */
+    updateTime?: string;
+    /** Add an id to target post headline with custom CSS. */
+    id?: string;
+    /** Add extra classes to target post headline with custom CSS. */
+    cls?: string;
+    /**
+     * If the post is the last on the page, remove the dividing rule used to separate posts.
+     */
+    isLastPost?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    title = 'Reuters Graphics blog post',
+    slugTitle = 'Reuters Graphics blog post',
+    base = '',
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    id = '',
+    cls = '',
+    isLastPost = false,
+    children,
+  }: Props = $props();
+
+  import PostHeadline from './PostHeadline.svelte';
+  import { slugify } from '../../utils';
+  import { getShortDate } from './utils';
+
+  let shortPubDate = $derived(getShortDate(publishTime));
+</script>
+
+<article id={slugify(slugTitle)} class="post-anchor">
+  <PostHeadline
+    hed={title}
+    sluggableHed={slugTitle}
+    {base}
+    {authors}
+    {publishTime}
+    {updateTime}
+    {id}
+    {cls}
+  />
+  <a href="{base}/{shortPubDate}/{slugify(slugTitle)}/" hidden>
+    {title}
+  </a>
+  {@render children?.()}
+</article>
+
+{#if !isLastPost}
+  <div class="divider"></div>
+{/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 */
+.divider {
+  height: 1px;
+  max-width: 594px;
+  width: calc(100% - 40px);
+  margin: 4rem auto;
+  border-top: solid 1px var(--tr-muted-grey);
+}
+
+.post-anchor {
+  scroll-margin-top: 125px;
+}
+@media (min-width: 768px) {
+  .post-anchor {
+    scroll-margin-top: 150px;
+  }
+}
+@media (min-width: 1200px) {
+  .post-anchor {
+    scroll-margin-top: 175px;
+  }
+}</style>

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

@@ -0,0 +1,33 @@
+interface Props {
+    /** Title of the blog post */
+    title: string;
+    /**
+     * A sluggable title of the blog post.
+     *
+     * **Important:** Do not change this title after publishing the post. Changes will break
+     * published links to the post.
+     */
+    slugTitle: string;
+    /**
+     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     */
+    base: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors: string[];
+    /** Publish time as a datetime string. */
+    publishTime: string;
+    /** Update time as a datetime string. */
+    updateTime?: string;
+    /** Add an id to target post headline with custom CSS. */
+    id?: string;
+    /** Add extra classes to target post headline with custom CSS. */
+    cls?: string;
+    /**
+     * If the post is the last on the page, remove the dividing rule used to separate posts.
+     */
+    isLastPost?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const BlogPost: import("svelte").Component<Props, {}, "">;
+type BlogPost = ReturnType<typeof BlogPost>;
+export default BlogPost;

package/dist/components/BlogPost/CopyLink.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { slugify } from '../../utils';
+  import { getShortDate } from './utils';
+  import { faLink } from '@fortawesome/free-solid-svg-icons';
+
+  interface Props {
+    /** The published date of the post. */
+    publishedDate?: string;
+    /** The heading of the post. */
+    hed?: string;
+    /** Base path prepended to the copied URL, e.g. "/graphics". */
+    base: string;
+    /** The ARIA label for the copy link button. */
+    ariaLabel?: string;
+    /** The message to display before copying the link. */
+    copyMessageBefore?: string;
+    /** The message to display after copying the link. */
+    copyMessageAfter?: string;
+  }
+
+  let {
+    publishedDate = '',
+    hed = '',
+    base = '',
+    ariaLabel = 'Copy link to this post',
+    copyMessageBefore = 'Copy link',
+    copyMessageAfter = 'Copied',
+  }: Props = $props();
+
+  let hovering = $state(false);
+  let clicked = $state(false);
+
+  let publishDate = $derived(getShortDate(publishedDate));
+</script>
+
+<div class="link-container pl-0.5">
+  <div class="mask"></div>
+  <button
+    class:clicked
+    aria-label={ariaLabel}
+    role="link"
+    onclick={(e) => {
+      e.preventDefault();
+      clicked = true;
+      navigator.clipboard.writeText(
+        `${window.location.origin}${base}/${publishDate}/${slugify(hed)}/`
+      );
+      setTimeout(() => {
+        clicked = false;
+      }, 2000);
+    }}
+    onmouseenter={() => {
+      hovering = true;
+    }}
+    onmouseleave={() => {
+      hovering = false;
+    }}
+  >
+    <Fa icon={faLink} />
+  </button>
+
+  {#if !clicked}
+    <div class="message" class:active={hovering}>{copyMessageBefore}</div>
+  {:else}
+    <div class="message" class:active={clicked}>{copyMessageAfter}</div>
+  {/if}
+</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 */
+.link-container {
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  overflow-y: hidden;
+  position: relative;
+}
+.link-container .message {
+  background-color: var(--theme-colour-text-primary);
+  color: var(--theme-colour-background);
+  font-size: var(--theme-font-size-xxs);
+  font-weight: 500;
+  padding-inline-start: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  line-height: 1.7;
+  display: inline-flex;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  transform: translateX(-100px);
+  transition: all 0.15s ease;
+  opacity: 0;
+}
+.link-container .message.active {
+  transform: translateX(-10px);
+  opacity: 1;
+}
+
+.mask {
+  background-color: var(--theme-colour-background);
+  display: inline-block;
+  height: 30px;
+  width: 20px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+button {
+  z-index: 1;
+  background-color: var(--theme-colour-background);
+  border-radius: 50%;
+  font-size: var(--theme-font-size-sm);
+  aspect-ratio: 1;
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  border: 1px solid var(--theme-colour-background);
+  color: var(--tr-light-grey);
+  cursor: pointer;
+}
+button:hover, button.clicked {
+  color: var(--tr-dark-grey);
+  border: 1px solid var(--tr-dark-grey);
+}</style>

package/dist/components/BlogPost/CopyLink.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** The published date of the post. */
+    publishedDate?: string;
+    /** The heading of the post. */
+    hed?: string;
+    /** Base path prepended to the copied URL, e.g. "/graphics". */
+    base: string;
+    /** The ARIA label for the copy link button. */
+    ariaLabel?: string;
+    /** The message to display before copying the link. */
+    copyMessageBefore?: string;
+    /** The message to display after copying the link. */
+    copyMessageAfter?: string;
+}
+declare const CopyLink: import("svelte").Component<Props, {}, "">;
+type CopyLink = ReturnType<typeof CopyLink>;
+export default CopyLink;

package/dist/components/BlogPost/PostHeadline.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { apdate } from 'journalize';
+  import CopyLink from './CopyLink.svelte';
+  import { slugify } from '../../utils';
+  import Kinesis from '../KinesisLogo/KinesisLogo.svelte';
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+
+  interface Props {
+    /** Headline of the blog post */
+    hed: string;
+    /**
+     * A sluggable headline of the blog post.
+     *
+     * **Important:** Do not change this headline after publishing the post. Changes will break
+     * published links to the post.
+     */
+    sluggableHed: string;
+    /** Base path prepended to the copied URL, e.g. "/graphics". */
+    base: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors: string[];
+    /** Publish time as a datetime string. */
+    publishTime: string;
+    /** Update time as a datetime string. */
+    updateTime?: string;
+    /** Add an id to target with custom CSS. */
+    id?: string;
+    /** Add extra classes to target with custom CSS. */
+    cls?: string;
+  }
+
+  let {
+    hed = 'Reuters Graphics blog post',
+    sluggableHed = 'Reuters Graphics blog post',
+    base = '',
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    id = '',
+    cls = '',
+  }: Props = $props();
+
+  const isValidDate = (datetime: string) => {
+    if (!datetime) return false;
+    if (!Date.parse(datetime)) return false;
+    return true;
+  };
+
+  const formatTime = (datetime: string) =>
+    new Date(datetime).toLocaleTimeString([], {
+      hour: 'numeric',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+
+  const areSameDay = (first: Date, second: Date) =>
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
+
+  let hedMain = $derived(hed.split(' ').slice(0, -1).join(' '));
+  let hedWidow = $derived(hed.split(' ').slice(-1).join(' '));
+</script>
+
+<Block {id} class="headline-container post-headline fmt-7 {cls}" width="normal">
+  <header class="headline">
+    <div class="kinesis">
+      <Kinesis width="30px" colour="#fff" />
+    </div>
+    <div class="dateline-container">
+      {#if isValidDate(publishTime)}
+        <div class="published-time font-bold whitespace-nowrap inline-block">
+          <time class="uppercase" datetime={publishTime}>
+            {#if isValidDate(updateTime)}
+              {apdate(new Date(publishTime))}
+            {:else}
+              {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
+                publishTime
+              )}
+            {/if}
+          </time>
+        </div>
+      {/if}
+      {#if isValidDate(publishTime) && isValidDate(updateTime)}
+        <div class="updated-time font-bold whitespace-nowrap block">
+          <span>Updated</span>
+          <time class="uppercase" datetime={updateTime}>
+            {#if areSameDay(new Date(publishTime), new Date(updateTime))}
+              {formatTime(updateTime)}
+            {:else}
+              {apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(updateTime)}
+            {/if}
+          </time>
+        </div>
+      {/if}
+    </div>
+    <div class="title">
+      {#if hed}
+        <h2>
+          <a href="#{slugify(sluggableHed)}">
+            {hedMain}
+            <span
+              >{hedWidow}
+              <CopyLink
+                hed={sluggableHed}
+                publishedDate={publishTime}
+                {base}
+              /></span
+            >
+          </a>
+        </h2>
+      {/if}
+    </div>
+    <Byline {authors} />
+  </header>
+</Block>
+
+<style>@charset "UTF-8";
+/* 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 */
+.headline {
+  position: relative;
+}
+.headline .kinesis {
+  position: absolute;
+  top: -12px;
+  left: -50px;
+  background-color: #d64000;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 860px) {
+  .headline .kinesis {
+    display: none;
+  }
+}
+
+.dateline-container {
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-xs);
+  line-height: 1.3;
+  font-weight: 400;
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  text-align: left;
+  color: var(--theme-colour-accent);
+}
+@media (min-width: 510px) {
+  .dateline-container .updated-time {
+    display: inline-block;
+  }
+  .dateline-container .updated-time:before {
+    content: "·";
+    margin: 0 5px 0 3px;
+  }
+}
+
+h2 {
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  font-weight: 900;
+}
+h2 a {
+  color: inherit;
+  text-decoration: none;
+}
+h2 span {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: baseline;
+}</style>

package/dist/components/BlogPost/PostHeadline.svelte.d.ts

@@ -0,0 +1,26 @@
+interface Props {
+    /** Headline of the blog post */
+    hed: string;
+    /**
+     * A sluggable headline of the blog post.
+     *
+     * **Important:** Do not change this headline after publishing the post. Changes will break
+     * published links to the post.
+     */
+    sluggableHed: string;
+    /** Base path prepended to the copied URL, e.g. "/graphics". */
+    base: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors: string[];
+    /** Publish time as a datetime string. */
+    publishTime: string;
+    /** Update time as a datetime string. */
+    updateTime?: string;
+    /** Add an id to target with custom CSS. */
+    id?: string;
+    /** Add extra classes to target with custom CSS. */
+    cls?: string;
+}
+declare const PostHeadline: import("svelte").Component<Props, {}, "">;
+type PostHeadline = ReturnType<typeof PostHeadline>;
+export default PostHeadline;

package/dist/components/BlogPost/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts a date string to a short date format.
+ * @param d - The date string to be converted.
+ * @returns The short date format string.
+ */
+export declare const getShortDate: (d: string) => string;

package/dist/components/BlogPost/utils.js

@@ -0,0 +1,6 @@
+/**
+ * Converts a date string to a short date format.
+ * @param d - The date string to be converted.
+ * @returns The short date format string.
+ */
+export const getShortDate = (d) => new Date(d).toISOString().split('T')[0];