@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/BodyText/BodyText.stories.svelte

@@ -1,24 +1,16 @@
-<script context="module">import BodyText from "./BodyText.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import { withComponentDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/BodyText",
-  component: BodyText,
-  ...withComponentDocs(componentDocs)
-};
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import BodyText from './BodyText.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/BodyText',
+    component: BodyText,
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template let:args>
-  <BodyText {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
   
   Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
@@ -28,12 +20,14 @@ export const meta = {
   - Fillet
   
   Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
-  }}"
+  }}
 />
 
 <Story
   name="Typography sample"
-  args="{{
+  exportName="TypographySample"
+  tags={['!autodocs', '!dev']}
+  args={{
     class: 'body-text-typography-example-story',
     text: `<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
 
@@ -87,180 +81,20 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
 
 <p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
 `,
-  }}"
+  }}
+/>
+
+<Story
+  name="Custom styles"
+  exportName="CustomStyles"
+  tags={['!autodocs', '!dev']}
+  args={{
+    class: 'body-text-custom-styles-story',
+    text: `Venison shoulder <span class="highlight">ham hock</span> ham leberkas.`,
+  }}
 />
 
-<!-- svelte-ignore css-unused-selector -->
-<style global>@charset "UTF-8";
-.body-text-typography-example-story h2 {
-  position: relative;
-}
-.body-text-typography-example-story h2:before {
-  content: "H2";
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2:before {
-  font-size: 22px;
-}
-.body-text-typography-example-story h2 h3 {
-  position: relative;
-}
-.body-text-typography-example-story h2 h3:before {
-  content: "H3";
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2 h3:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2 h3:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2 h3:before {
-  font-size: 19px;
-}
-.body-text-typography-example-story h2 h4 {
-  position: relative;
-}
-.body-text-typography-example-story h2 h4:before {
-  content: "H4";
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2 h4:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2 h4:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2 h4:before {
-  font-size: 16px;
-}
-.body-text-typography-example-story h2 h5 {
-  position: relative;
-}
-.body-text-typography-example-story h2 h5:before {
-  content: "H5";
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2 h5:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2 h5:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2 h5:before {
-  font-size: 15px;
-}
-.body-text-typography-example-story h2 h6 {
-  position: relative;
-}
-.body-text-typography-example-story h2 h6:before {
-  content: "H6";
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2 h6:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2 h6:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2 h6:before {
-  font-size: 12px;
-}
-.body-text-typography-example-story h2 blockquote {
-  position: relative;
-}
-.body-text-typography-example-story h2 blockquote:before {
-  position: absolute;
-  top: 0;
-  left: -50px;
-  text-align: right;
-  display: block;
-  width: 40px;
-  color: #ddd;
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-weight: 800;
-  line-height: 1;
-}
-.body-text-typography-example-story h2 blockquote:before:hover {
-  color: #999;
-}
-@media (max-width: 800px) {
-  .body-text-typography-example-story h2 blockquote:before {
-    color: white !important;
-  }
-}
-.body-text-typography-example-story h2 blockquote:before {
-  content: "“";
-  font-size: 3rem;
-  line-height: 3rem;
-}
-.body-text-typography-example-story h2 blockquote blockquote:before {
-  display: none;
+<style>:global(.body-text-custom-styles-story span.highlight) {
+  background: palegoldenrod;
+  padding: 2px 4px;
 }</style>

package/dist/components/BodyText/BodyText.stories.svelte.d.ts

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import BodyText from './BodyText.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof BodyText;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BodyTextProps = typeof __propDef.props;
-export type BodyTextEvents = typeof __propDef.events;
-export type BodyTextSlots = typeof __propDef.slots;
-export default class BodyText extends SvelteComponent<BodyTextProps, BodyTextEvents, BodyTextSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BodyText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BodyText = InstanceType<typeof BodyText>;
+export default BodyText;

package/dist/components/BodyText/BodyText.svelte

@@ -1,12 +1,19 @@
 <!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
-<script>import Markdown from "../Markdown/Markdown.svelte";
-export let text;
-let cls = "";
-export { cls as class };
-export let id = "";
-import Block from "../Block/Block.svelte";
+<script lang="ts">
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  import Block from '../Block/Block.svelte';
+  interface Props {
+    /** A markdown text string. */
+    text: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /** Add an id to the block tag to target it with custom CSS. */
+    id?: string;
+  }
+
+  let { text, class: cls = '', id = '' }: Props = $props();
 </script>
 
 <Block {id} class="fmy-6 {cls}">
-  <Markdown source="{text}" />
+  <Markdown source={text} />
 </Block>

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

@@ -1,25 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * A markdown text string.
-           * @type {string}
-           * @required
-           */ text: string;
-        /** Add a class to target with SCSS. */ class?: string;
-        /** Add an id to the block tag to target it with custom CSS. */ id?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BodyTextProps = typeof __propDef.props;
-export type BodyTextEvents = typeof __propDef.events;
-export type BodyTextSlots = typeof __propDef.slots;
-/** `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) */
-export default class BodyText extends SvelteComponent<BodyTextProps, BodyTextEvents, BodyTextSlots> {
+interface Props {
+    /** A markdown text string. */
+    text: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /** Add an id to the block tag to target it with custom CSS. */
+    id?: string;
 }
-export {};
+/** `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) */
+declare const BodyText: import("svelte").Component<Props, {}, "">;
+type BodyText = ReturnType<typeof BodyText>;
+export default BodyText;

package/dist/components/Byline/Byline.mdx

@@ -0,0 +1,110 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BylineStories from './Byline.stories.svelte';
+
+<Meta of={BylineStories} />
+
+# Byline
+
+The `Byline` component adds a byline, published and updated datelines to your page.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[authors]
+* Dea Bankova
+* Prasanta Kumar Dutta
+* Anurag Rao
+* Mariano Zafra
+[]
+publishTime: 2021-09-12T00:00:00.000Z
+updateTime: 2021-09-12T12:57:00.000Z
+```
+
+... which you'll pass to the `Byline` component.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<Byline
+  authors={content.authors}
+  publishTime={content.publishTime}
+  updateTime={content.updateTime}
+/>
+```
+
+<Canvas of={BylineStories.Demo} />
+
+## Custom byline, published and updated datelines
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
+
+```svelte
+<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  <!-- Optional custom byline -->
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+
+  <!-- Optional custom published dateline -->
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+
+  <!-- Optional custom updated dateline -->
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>
+```
+
+<Canvas of={BylineStories.Customised} />
+
+## Custom author page
+
+By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.
+
+To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.
+
+```svelte
+<!-- Pass a custom function as `getAuthorPage` -->
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00Z"
+  updateTime="2021-09-12T13:57:00Z"
+  getAuthorPage={(author) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+/>
+```
+
+<Canvas of={BylineStories.CustomAuthorPage} />
+````

package/dist/components/Byline/Byline.stories.svelte

@@ -1,39 +1,63 @@
-<script context="module">import Byline from "./Byline.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import { withComponentDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/Byline",
-  component: Byline,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    align: {
-      control: "select",
-      options: ["left", "center"]
-    }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Byline from './Byline.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Byline',
+    component: Byline,
+    tags: ['autodocs'],
+    argTypes: {
+      align: {
+        control: 'select',
+        options: ['left', 'center'],
+      },
+    },
+  });
 </script>
 
-<Template let:args>
-  <Byline {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    align: 'left',
+  name="Demo"
+  args={{
     authors: [
       'Dea Bankova',
-      'Aditi Bhandari',
       'Prasanta Kumar Dutta',
       'Anurag Rao',
       'Mariano Zafra',
     ],
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),
-  }}"
+  }}
+/>
+
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+    {#snippet byline()}
+      <strong>BY REUTERS GRAPHICS</strong>
+    {/snippet}
+    {#snippet published()}
+      PUBLISHED on some custom date and time
+    {/snippet}
+    {#snippet updated()}
+      <em>Updated every 5 minutes</em>
+    {/snippet}
+  </Byline>
+</Story>
+
+<Story
+  name="Custom author page"
+  exportName="CustomAuthorPage"
+  tags={['!autodocs', '!dev']}
+  args={{
+    authors: [
+      'Dea Bankova',
+      'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
+    ],
+    publishTime: '2021-09-12T00:00:00Z',
+    updateTime: '2021-09-12T13:57:00Z',
+    getAuthorPage: (author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    },
+  }}
 />

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

@@ -1,29 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        align: {
-            control: string;
-            options: string[];
-        };
+import Byline from './Byline.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Byline;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BylineProps = typeof __propDef.props;
-export type BylineEvents = typeof __propDef.events;
-export type BylineSlots = typeof __propDef.slots;
-export default class Byline extends SvelteComponent<BylineProps, BylineEvents, BylineSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Byline: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Byline = InstanceType<typeof Byline>;
+export default Byline;