From b0e3f111a4a79ce6cca90bcba36d9622b9b0915a Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Tue, 15 Aug 2023 18:02:26 +0100 Subject: [PATCH] first draft of byline --- src/components/Byline/Byline.stories.svelte | 10 +-- src/components/Byline/Byline.svelte | 64 ++++++++++++++----- .../Byline/stories/docs/component.md | 9 ++- src/index.js | 1 + 4 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte index 894b08d6..b45d0cef 100644 --- a/src/components/Byline/Byline.stories.svelte +++ b/src/components/Byline/Byline.stories.svelte @@ -12,9 +12,9 @@ ...withComponentDocs(componentDocs), // https://storybook.js.org/docs/svelte/essentials/controls argTypes: { - hedSize: { + align: { control: 'select', - options: ['small', 'normal', 'big'], + options: ['left', 'center'], }, }, }; @@ -29,11 +29,13 @@ + import Block from '../Block/Block.svelte'; + import slugify from 'slugify'; + import { apdate } from 'journalize'; + /** * Array of author names, which will be slugified to create links to Reuters author pages */ @@ -13,6 +17,11 @@ * @type {string} */ export let updateTime: string = ''; + /** + * Alignment of the byline. + * @type {string} + */ + export let align: 'left' | 'center' = 'left'; /** * Add an id to to target with custom CSS. * @type {string} @@ -25,9 +34,16 @@ let cls: string = ''; export { cls as class }; - import Block from '../Block/Block.svelte'; - import slugify from 'slugify'; - import { apdate } from 'journalize'; + /** + * Custom function that returns an author page URL. + * @param author + */ + export let getAuthorPage = (author: string): string => { + const authorSlug = slugify(author.trim(), { lower: true }); + return `https://www.reuters.com/authors/${authorSlug}/`; + }; + + $: alignmentClass = align === 'left' ? 'text-left' : 'text-center'; const isValidDate = (datetime) => { if (!datetime) return false; @@ -48,18 +64,19 @@ first.getDate() === second.getDate(); - +