@reuters-graphics/graphics-components 3.3.2 → 3.3.4

package/dist/components/Byline/Byline.svelte

@@ -1,6 +1,6 @@
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
-  import { getAuthorPageUrl } from '../../utils';
+  import { getAuthorPageUrl, formatTime } from '../../utils';
   import Block from '../Block/Block.svelte';
   import { apdate } from 'journalize';
   import type { Snippet } from 'svelte';
@@ -74,13 +74,6 @@
     return true;
   };
 
-  const formatTime = (datetime: string) =>
-    new Date(datetime).toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZoneName: 'short',
-    });
-
   const areSameDay = (first: Date, second: Date) =>
     first.getFullYear() === second.getFullYear() &&
     first.getMonth() === second.getMonth() &&

package/dist/components/LanguageButton/LanguageButton.svelte

@@ -0,0 +1,91 @@
+<!-- @component `LanguageButton` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-languagebutton--docs) -->
+<script lang="ts">
+  interface Props {
+    /** The current locale of the article */
+    locale: string | undefined;
+    /** Whether the article is embedded */
+    embedded?: boolean;
+    /** The base URL for the article */
+    base?: string;
+    /** Options for the language toggle button */
+    buttonOptions?: {
+      locale: string;
+      label: string;
+    };
+    /** Custom function for handling URL changes for locales and embed versions. */
+    setUrl?: () => string;
+  }
+
+  let {
+    locale = 'en',
+    embedded = false,
+    base,
+    buttonOptions = {
+      locale: 'es',
+      label: 'Leer en español',
+    },
+    setUrl,
+  }: Props = $props();
+
+  let translationLocale = buttonOptions.locale;
+
+  const handleLocale = () => {
+    if (setUrl) {
+      return setUrl();
+    }
+
+    if (embedded) {
+      if (locale === translationLocale) {
+        // If we're in the non-English article, link to the English article
+        return `${base}/embeds/en/page/`;
+      } else {
+        return `${base}/embeds/${translationLocale}/page`;
+      }
+    } else {
+      if (locale === translationLocale) {
+        // If we're in the non-English article, link to the English article
+        return `${base}/`;
+      } else {
+        return `${base}/${translationLocale}`;
+      }
+    }
+  };
+</script>
+
+<div class="language-button">
+  <a data-sveltekit-reload href={handleLocale()}
+    ><button
+      id="translate-button"
+      class="text-sm"
+      aria-label="Toggle article language"
+      >{locale === translationLocale ? 'Read in English' : (
+        buttonOptions.label
+      )}</button
+    ></a
+  >
+</div>
+
+<style>div {
+  display: flex;
+  justify-content: center;
+}
+div #translate-button {
+  position: absolute;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06rem;
+  font-size: var(--theme-font-size-xs);
+  background-color: #d3e1e1;
+  color: rgb(91, 101, 101);
+  padding: 2px 12px;
+  border-radius: 4px;
+  z-index: 10;
+  cursor: pointer;
+  position: relative;
+  border: none;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+div #translate-button:hover {
+  background-color: #889d9b;
+  color: #ebf7f7;
+}</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** The current locale of the article */
+    locale: string | undefined;
+    /** Whether the article is embedded */
+    embedded?: boolean;
+    /** The base URL for the article */
+    base?: string;
+    /** Options for the language toggle button */
+    buttonOptions?: {
+        locale: string;
+        label: string;
+    };
+    /** Custom function for handling URL changes for locales and embed versions. */
+    setUrl?: () => string;
+}
+/** `LanguageButton` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-languagebutton--docs) */
+declare const LanguageButton: import("svelte").Component<Props, {}, "">;
+type LanguageButton = ReturnType<typeof LanguageButton>;
+export default LanguageButton;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default as cssVariables } from './actions/cssVariables/index';
 export { default as resizeObserver } from './actions/resizeObserver/index';
-export { prettifyDate } from './utils/index';
+export { prettifyDate, getAuthorPageUrl, formatTime } 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';
@@ -25,6 +25,7 @@ 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 LanguageButton } from './components/LanguageButton/LanguageButton.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

@@ -2,7 +2,7 @@
 export { default as cssVariables } from './actions/cssVariables/index';
 export { default as resizeObserver } from './actions/resizeObserver/index';
 // Utils
-export { prettifyDate } from './utils/index';
+export { prettifyDate, getAuthorPageUrl, formatTime } from './utils/index';
 // Components
 export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
@@ -28,6 +28,7 @@ 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 LanguageButton } from './components/LanguageButton/LanguageButton.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/utils/index.d.ts

@@ -31,3 +31,5 @@ export declare const prettifyDate: (input: string) => string;
  * @returns The slugified string.
  */
 export declare const slugify: (str: string) => string;
+/** Formats a datetime string into a localized time string with hour, minute, and time zone for the dateline */
+export declare const formatTime: (datetime: string) => string;

package/dist/utils/index.js

@@ -86,3 +86,9 @@ const prettifyAmPm = (text) => {
  * @returns The slugified string.
  */
 export const slugify = (str) => slug(str, { lower: true, strict: true });
+/** Formats a datetime string into a localized time string with hour, minute, and time zone for the dateline */
+export const formatTime = (datetime) => new Date(datetime).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZoneName: 'short',
+});

package/package.json

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