Merge pull request #378 from reuters-graphics/sk-lottie-test

exposes width and height

src/components/Lottie/Lottie.mdx

@@ -39,6 +39,8 @@ To use the `Lottie` component, import it and provide the Lottie animation source
 
 **Use `lvh` or `svh` units instead of `vh`** as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile and other devices where elements such as the address bar appear and disappear and affect the height.
 
+The component also provides a `width` prop to set the width of the Lottie container. While the `width` prop defaults to `fluid`, it allows any `ContainerWidth` value such as `narrower`, `narrow`, `normal`, `wide`, `wider`, `widest`, `fluid`, or a custom CSS width value like `600px` or `80vw`.
+
 If importing the Lottie file directly into a Svelte component, make sure to append **?url** to the import statement (see example below). This ensures that the file is treated as a URL.
 
 > 💡TIP: Set `showDebugInfo` prop to `true` to display information about the component state.

src/components/Lottie/Lottie.stories.svelte

@@ -40,42 +40,53 @@
   let progress = $state(0);
 </script>
 
-<Story name="Demo">
+<Story name="Demo" args={{ autoplay: true, showDebugInfo: true }}>
-  <Lottie src={DemoLottie} autoplay={true} showDebugInfo={true} />
+  {#snippet children(args)}
+    <Lottie src={DemoLottie} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Segment">
+<Story
-  <Lottie
+  name="Segment"
-    src={DemoLottie}
+  args={{
-    autoplay
+    autoplay: true,
-    loop
+    loop: true,
-    showDebugInfo
+    showDebugInfo: true,
-    segment={[0, 20]}
+    segment: [0, 20],
-    speed={0.5}
+    speed: 0.5,
-  />
+  }}
+>
+  {#snippet children(args)}
+    <Lottie src={DemoLottie} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Marker">
+<Story
-  <Lottie
+  name="Marker"
-    src={MarkerSample}
+  args={{
-    showDebugInfo
+    autoplay: true,
-    autoplay
+    loop: true,
-    marker="ballerina"
+    showDebugInfo: true,
-    loop
+    marker: 'ballerina',
-    mode="bounce"
+    mode: 'bounce',
-  />
+  }}
+>
+  {#snippet children(args)}
+    <Lottie src={MarkerSample} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Themes">
+<Story name="Themes" args={{ autoplay: true, showDebugInfo: true }}>
-  <Lottie
+  {#snippet children(args)}
-    src={ThemesSample}
+    <Lottie
-    showDebugInfo
+      src={ThemesSample}
-    autoplay
+      bind:progress
-    bind:progress
+      themeId={progress < 0.33 ? 'Water'
-    themeId={progress < 0.33 ? 'Water'
+      : progress < 0.66 ? 'air'
-    : progress < 0.66 ? 'air'
+      : 'earth'}
-    : 'earth'}
+      {...args}
-  />
+    />
+  {/snippet}
 </Story>
 
 <Story name="Using with ScrollerBase" exportName="ScrollerBase">

src/components/Lottie/Lottie.svelte

@@ -11,12 +11,12 @@
     isReverseMode,
     createRenderConfig,
     isNullish,
+    isContainerWidth,
   } from './ts/utils';
   import { Tween } from 'svelte/motion';
 
   // Components
   import Debug from './Debug.svelte';
-  import WASM from './lottie/dotlottie-player.wasm?url';
 
   // Types
   import type { Props } from './ts/types';
@@ -49,7 +49,8 @@
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
-    height = '100lvh',
+    width = 'fluid',
+    height = 'auto',
     showDebugInfo = false,
     lottieState = createLottieState(),
     progress = $bindable(0),
@@ -157,8 +158,6 @@
       themeId,
     });
 
-    DotLottie.setWasmUrl(WASM);
-
     lottiePlayer.addEventListener('load', onLoadEvent);
     lottiePlayer.addEventListener('frame', onRenderEvent);
     lottiePlayer.addEventListener('complete', onCompleteEvent);
@@ -396,7 +395,13 @@
   });
 </script>
 
-<div class="lottie-block">
+<div
+  class="lottie-block"
+  class:debug-border={showDebugInfo}
+  style="max-width: {isContainerWidth(width) ?
+    `var(--${width}-column-width)`
+  : width};"
+>
   {#if showDebugInfo && lottiePlayer}
     <Debug componentState={lottieState} />
   {/if}
@@ -420,15 +425,22 @@
   :global(.lottie-block) {
     position: relative;
     height: 100%;
+    width: 100%;
+    margin: 0 auto;
 
     .lottie-container {
       width: 100%;
       height: 100%;
     }
+
     canvas {
       width: 100%;
       height: 100%;
       display: block;
     }
   }
+
+  .debug-border {
+    border: 1px dashed lightgray;
+  }
 </style>

src/components/Lottie/demo/withScrollerBase.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import BodyText from '../../BodyText/BodyText.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import Lottie from '../Lottie.svelte';
   import LottieSample from '../lottie/themesLottie.zip?url';
@@ -11,8 +12,14 @@
   let top = $state(0);
   let threshold = $state(0.5);
   let bottom = $state(1);
+
+  const dummyText = `Greetings, earthling. This placeholder text is running in debug mode. All bugs have been upgraded to features, and all features downgraded to TODOs. If you find yourself reading this, you are now the sysadmin of your own destiny. 
+  
+  Remember the network is down because someone tripped over the Ethernet cable.  Keep calm and RTFM before summoning the wizard. In case of panic, type 'kill -9' and hope for the best. End of line. Insert witty comment here.`;
 </script>
 
+<BodyText text={dummyText} />
+
 <ScrollerBase
   {top}
   {threshold}
@@ -35,6 +42,8 @@
   {/snippet}
 </ScrollerBase>
 
+<BodyText text={dummyText} />
+
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
@@ -42,8 +51,12 @@
     height: 100lvh;
     width: 50%;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     h3 {
+      width: 100%;
       background-color: antiquewhite;
       text-align: center;
     }

src/components/Lottie/ts/types.ts

@@ -5,6 +5,7 @@ import {
   type DotLottie as DotLottieType,
 } from '@lottiefiles/dotlottie-web';
 import { type LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '../../@types/global';
 
 type DotlottieProps = {
   autoplay?: Config['autoplay'];
@@ -33,6 +34,7 @@ export type Props = DotlottieProps & {
   // Additional properties can be added here if needed
   lottiePlayer?: DotLottieType | undefined;
   showDebugInfo?: boolean;
+  width?: string | ContainerWidth;
   height?: string;
   lottieState?: LottieState;
   progress?: number;

src/components/Lottie/ts/utils.ts

@@ -1,5 +1,6 @@
 import type { DotLottie } from '@lottiefiles/dotlottie-web';
 import type { LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '$lib/components/@types/global';
 
 function constrain(n: number, low: number, high: number) {
   return Math.max(Math.min(n, high), low);
@@ -109,3 +110,18 @@ export function createRenderConfig() {
 export function isNullish(value: unknown): boolean {
   return value === null || value === undefined || value === '';
 }
+
+/**
+ * Checks if a value is of type ContainerWidth
+ */
+export function isContainerWidth(string: any): string is ContainerWidth {
+  return (
+    string === 'narrower' ||
+    string === 'narrow' ||
+    string === 'normal' ||
+    string === 'wide' ||
+    string === 'wider' ||
+    string === 'widest' ||
+    string === 'fluid'
+  );
+}