@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import ToolsHeader from './ToolsHeader.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 ToolsHeader;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToolsHeaderProps = typeof __propDef.props;
-export type ToolsHeaderEvents = typeof __propDef.events;
-export type ToolsHeaderSlots = typeof __propDef.slots;
-export default class ToolsHeader extends SvelteComponent<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ToolsHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToolsHeader = InstanceType<typeof ToolsHeader>;
+export default ToolsHeader;

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -1,31 +1,72 @@
 <!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) -->
-<script>export let id = "";
-let cls = "";
-export { cls as class };
-export let sticky = false;
-export let background = "transparent";
-export let borderBottom = "1px solid #dedede";
-export let logoProps = { logoColour: "#404040" };
-export let homeLink = "/";
-import ReutersGraphicsLogo from "../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte";
+<script lang="ts">
+  import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Snippet content */
+    children?: Snippet;
+
+    /** ID of the header container */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Make the header stick when user scrolls.
+     */
+    sticky?: boolean;
+    /**
+     * Background CSS
+     */
+    background?: string;
+    /**
+     * Border bottom CSS
+     */
+    borderBottom?: string;
+    /**
+     * Colour props passed to `ReutersGraphicsLogo` component.
+     */
+    logoProps?: {
+      logoColour?: string;
+      textColor?: string;
+    };
+    /**
+     * Link the logo points to.
+     */
+    homeLink?: string;
+  }
+
+  let {
+    children,
+    id = '',
+    class: cls = '',
+    sticky = false,
+    background = 'transparent',
+    borderBottom = '1px solid #dedede',
+    logoProps = { logoColour: '#404040' },
+    homeLink = '/',
+  }: Props = $props();
 </script>
 
 <header
   {id}
-  class="{cls}"
+  class={cls}
   class:sticky
   style:background
-  style:border-bottom="{borderBottom}"
+  style:border-bottom={borderBottom}
 >
   <div class="logo-container">
-    <a href="{homeLink}">
+    <a href={homeLink}>
       <ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
     </a>
   </div>
-  <div class="menu-items-container">
-    <!-- Any additional content -->
-    <slot />
-  </div>
+
+  <!-- Any additional content -->
+  {#if children}
+    <div class="menu-items-container">
+      {@render children()}
+    </div>
+  {/if}
 </header>
 
 <style>header {

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

@@ -1,40 +1,36 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-        /**
-           * Make the header stick when user scrolls.
-           */ sticky?: boolean;
-        /**
-           * Background CSS
-           */ background?: string;
-        /**
-           * Border bottom CSS
-           */ borderBottom?: string;
-        /**
-           * Colour props passed to `ReutersGraphicsLogo` component.
-           */ logoProps?: {
-            logoColour?: string;
-            textColor?: string;
-        };
-        /**
-           * Link the logo points to.
-           */ homeLink?: string;
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Snippet content */
+    children?: Snippet;
+    /** ID of the header container */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Make the header stick when user scrolls.
+     */
+    sticky?: boolean;
+    /**
+     * Background CSS
+     */
+    background?: string;
+    /**
+     * Border bottom CSS
+     */
+    borderBottom?: string;
+    /**
+     * Colour props passed to `ReutersGraphicsLogo` component.
+     */
+    logoProps?: {
+        logoColour?: string;
+        textColor?: string;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToolsHeaderProps = typeof __propDef.props;
-export type ToolsHeaderEvents = typeof __propDef.events;
-export type ToolsHeaderSlots = typeof __propDef.slots;
-/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) */
-export default class ToolsHeader extends SvelteComponent<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
+    /**
+     * Link the logo points to.
+     */
+    homeLink?: string;
 }
-export {};
+/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) */
+declare const ToolsHeader: import("svelte").Component<Props, {}, "">;
+type ToolsHeader = ReturnType<typeof ToolsHeader>;
+export default ToolsHeader;

package/dist/components/Video/Video.mdx

@@ -0,0 +1,155 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as VideoStories from './Video.stories.svelte';
+
+<Meta of={VideoStories} />
+
+# Video
+
+The `Video` component adds a video with various controls to your page such as:
+
+- Play/pause button
+- Autoplay controls, i.e. whether the video plays when it comes into view or on page load
+- Looping
+- Audio controls
+- Text elements such as notes and titles
+
+```svelte
+<script>
+  import { Video } from '@reuters-graphics/graphics-components';
+</script>
+
+<Video
+  ariaDescription="Required description of your video for screen readers."
+  src="my-video.mp4"
+  width="wide"
+  notes="Optional caption for your video."
+/>
+```
+
+<Canvas of={VideoStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: video
+src: videos/my-video.mp4
+width: wide
+ariaDescription: Required description of your video for screen readers.
+notes: Optional caption for your video.
+loopVideo: true
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `Video` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { Video } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
+</script>
+
+{#each content.blocks as block}
+  {#if block.type === 'video'}
+    <Video
+      ariaDescription={block.ariaDescription}
+      src={`${assets}/${block.src}`}
+      width={block.width}
+      loopVideo={truthy(block.loopVideo)}
+      notes={block.notes}
+    />
+  {/if}
+{/each}
+```
+
+> **Note:** Some props, like `loopVideo`, expect boolean values. If you're using the graphics kit, you can use the `truthy()` util function to convert a string value to a boolean.
+
+## Autoplay controls
+
+By default, the video starts playing when 50% (0.5) of the video element's height comes into view. Adjust this with `playVideoThreshold`, which is a value between 0 and 1, where 0 means the video will start playing as soon as its top enters the viewport, and 1 means it will start when the whole video is in the viewport.
+
+To make the video play on page load regardless of whether it is in view, set the prop `playVideoWhenInView` to `false`.
+
+```svelte
+<script>
+  import { Video } from '@reuters-graphics/graphics-components';
+</script>
+
+<Video
+  ariaDescription="Required description of your video for screen readers."
+  src="https://..."
+  loopVideo={true}
+  playVideoThreshold={0.9}
+  notes="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
+/>
+```
+
+<Canvas of={VideoStories.Autoplay} />
+
+## Audio controls
+
+On most browsers, [autoplaying videos with sound](https://developer.chrome.com/blog/autoplay#:~:text=Muted%20autoplay%20is%20always%20allowed,to%20allow%20autoplay%20with%20sound.) is allowed only if the user has interacted with the page. (Autoplay is allowed with muted videos.)
+
+By default, this component will not autoplay videos with sound. To change this, set `soundAutoplay` to `true`. This will allow the video to autoplay with sound when it comes into view, but only if the user has already interacted with the page by clicking or tapping on it.
+
+Test this with the example below: the video will autoplay when it comes into view _only if_ you have clicked or tapped on the page before scrolling down to it.
+
+```svelte
+<script>
+  import { Video } from '@reuters-graphics/graphics-components';
+</script>
+
+<Video
+  ariaDescription="Required description of your video for screen readers."
+  src="https://..."
+  controlsColour="#152a1c"
+  controlsOpacityMax={1}
+  controlsOpacityMin={0.5}
+  muteVideo={false}
+  soundAutoplay={true}
+/>
+```
+
+<Canvas of={VideoStories.Audio} />
+
+## Adding text
+
+The `Video` component allows you to add a title, description and notes to your video, which are rendered by the `GraphicBlock` component.
+
+Customise the `notes` section by passing a [snippet](https://svelte.dev/docs/svelte/snippet) instead of a string.
+
+```svelte
+<script>
+  import { Video } from '@reuters-graphics/graphics-components';
+</script>
+
+<Video
+  src="https://..."
+  ariaDescription="Required description of your video for screen readers."
+  title="Title for your video"
+  description="Description for your video"
+>
+  <!-- Custom notes snippet -->
+  {#snippet notes()}
+    <aside>
+      <p class="notes">Custom-styled notes for the video.</p>
+    </aside>
+  {/snippet}
+</Video>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
+
+  p.notes {
+    @include mixins.body-note;
+  }
+</style>
+```
+
+<Canvas of={VideoStories.Text} />

package/dist/components/Video/Video.stories.svelte

@@ -1,88 +1,104 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import playAndLoopDocs from "./stories/docs/playAndLoop.md?raw";
-import controlsDocs from "./stories/docs/controls.md?raw";
-import Video from "./Video.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Multimedia/Video",
-  component: Video,
-  ...withComponentDocs(componentDocs)
-};
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Video from './Video.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/Video',
+    component: Video,
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import SilentVideo from './stories/videos/silent-video.mp4';
-  // @ts-ignore raw
-  import SoundVideo from './stories/videos/sound-video.mp4';
+  import SilentVideo from './demo/silent-video.mp4';
+  import SoundVideo from './demo/sound-video.mp4';
 </script>
 
-<Template let:args>
-  <Video {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    ariaDescription: 'Compulsory description of your video for screen readers.',
+  name="Demo"
+  args={{
+    ariaDescription: 'Required description of your video for screen readers.',
     src: SilentVideo,
     width: 'wide',
     notes: 'Optional caption for your video.',
-  }}"
+  }}
 />
 
 <Story
-  name="Playing and looping"
-  args="{{
-    ariaDescription: 'Compulsory description of your video for screen readers.',
+  name="Autoplay controls"
+  exportName="Autoplay"
+  args={{
+    ariaDescription: 'Required description of your video for screen readers.',
     src: SilentVideo,
-    width: 'normal',
     loopVideo: true,
     notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
-  }}"
-  {...withStoryDocs(playAndLoopDocs)}
+  }}
 />
 
 <Story
-  name="Controls"
-  args="{{
-    ariaDescription: 'Compulsory description of your video for screen readers.',
-    src: SilentVideo,
-    width: 'normal',
+  name="Audio controls"
+  exportName="Audio"
+  args={{
+    ariaDescription: 'Required description of your video for screen readers.',
+    src: SoundVideo,
     notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
+    controlsColour: '#152a1c',
+    controlsOpacityMax: 1,
+    controlsOpacityMin: 0.5,
     playVideoThreshold: 0.9,
-    controlsColour: 'white',
-    controlsOpacity: 1,
-    controlsPosition: 'bottom right',
-    separateReplayIcon: true,
-    loopVideo: false,
-    hoverToSeeControls: true,
-  }}"
-  {...withStoryDocs(controlsDocs)}
+    muteVideo: false,
+    soundAutoplay: true,
+  }}
 />
 
 <Story
-  name="Videos with sound"
-  args="{{
-    ariaDescription: 'Compulsory description of your video for screen readers.',
-    src: SoundVideo,
+  name="Controls"
+  args={{
+    ariaDescription: 'Required description of your video for screen readers.',
+    src: SilentVideo,
     width: 'normal',
     notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
-    showControls: true,
+    controlsColour: 'white',
+    controlsOpacityMax: 1,
+    controlsOpacityMin: 0.5,
+    controlsPosition: 'bottom right',
+    separateReplayIcon: true,
     loopVideo: false,
-    muteVideo: false,
-    playVideoWhenInView: true,
-    allowSoundToAutoplay: true,
-  }}"
-  {...withStoryDocs(controlsDocs)}
+    soundAutoplay: true,
+  }}
 />
+
+<Story name="Text elements" exportName="Text">
+  <Video
+    src={SilentVideo}
+    ariaDescription="Required description of your video for screen readers."
+    title="Title for your video"
+    description="Description for your video"
+  >
+    {#snippet notes()}
+      <aside>
+        <p class="notes">Custom-styled notes for the video.</p>
+      </aside>
+    {/snippet}
+  </Video>
+</Story>
+
+<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 */
+p.notes {
+  margin-top: 0;
+  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  font-family: var(--theme-font-family-note);
+  font-size: calc(0.9 * var(--theme-font-size-base));
+  color: var(--theme-colour-text-primary);
+  line-height: 1.3;
+}</style>

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import Video from './Video.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 Video;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type VideoProps = typeof __propDef.props;
-export type VideoEvents = typeof __propDef.events;
-export type VideoSlots = typeof __propDef.slots;
-export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Video: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;