@reuters-graphics/graphics-components 2.0.1 → 2.0.2

package/dist/components/Block/Block.stories.svelte

@@ -3,10 +3,16 @@ import customLayoutsDocs from "./stories/docs/customLayouts.md?raw";
 import snapWidthsDocs from "./stories/docs/snapWidths.md?raw";
 import Block from "./Block.svelte";
 import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+import { toId } from "@storybook/csf";
 export const meta = {
   title: "Components/Page layout/Block",
   component: Block,
-  ...withComponentDocs(componentDocs),
+  parameters: {
+    ...withComponentDocs(componentDocs).parameters,
+    canvasDocs: {
+      [toId("Components/Page layout/Block", "default")]: componentDocs
+    }
+  },
   argTypes: {
     width: {
       control: "select",

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

@@ -1,16 +1,19 @@
 import { SvelteComponent } from "svelte";
 export declare const meta: {
+    title: string;
+    component: typeof Block;
+    parameters: {
+        canvasDocs: {
+            [x: string]: any;
+        };
+        docs: any;
+    };
     argTypes: {
         width: {
             control: string;
             options: string[];
         };
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Block;
 };
 declare const __propDef: {
     props: Record<string, never>;

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -31,7 +31,9 @@ const getReferrals = async () => {
       })
     );
     const data = await response.json();
-    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter((a) => a?.thumbnail?.renditions?.landscape?.["240w"]).filter((a) => !a?.content?.third_party).filter(articleIsNotCurrentPage).slice(0, number);
+    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter(
+      (a) => a?.thumbnail?.renditions?.landscape?.["240w"] || a?.thumbnail?.resizer_url
+    ).filter((a) => !a?.content?.third_party).filter(articleIsNotCurrentPage).slice(0, number);
     referrals = articles;
   } catch {
     console.warn("Unable to fetch referral links.");
@@ -95,13 +97,24 @@ onMount(getReferrals);
                   class="image-container block m-0 overflow-hidden relative"
                   class:xs="{clientWidth && clientWidth < 450}"
                 >
-                  <img
-                    class="block object-cover m-0 w-full"
-                    data-chromatic="ignore"
-                    src="{referral.thumbnail.renditions.landscape['240w']}"
-                    alt="{referral.thumbnail.caption ||
-                      referral.thumbnail.alt_text}"
-                  />
+                  {#if referral.thumbnail.resizer_url}
+                    <img
+                      class="block object-cover m-0 w-full"
+                      data-chromatic="ignore"
+                      src="{referral.thumbnail
+                        .resizer_url}&width=120&quality=80"
+                      alt="{referral.thumbnail.caption ||
+                        referral.thumbnail.alt_text}"
+                    />
+                  {:else}
+                    <img
+                      class="block object-cover m-0 w-full"
+                      data-chromatic="ignore"
+                      src="{referral.thumbnail.renditions.landscape['240w']}"
+                      alt="{referral.thumbnail.caption ||
+                        referral.thumbnail.alt_text}"
+                    />
+                  {/if}
                 </div>
               </div>
             </a>

package/dist/components/Scroller/stories/docs/ai2svelte.md

@@ -40,85 +40,3 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
   embedded="{false}"
 />
 ```
-
-When working with a ArchieML doc, here's an example of how you can tie your text into your steps.
-
-```yaml
-# Google doc block
-Type: scroller
-ID: map-scrolly
-Step1Text: #### Step 1
-
-Lorem Ipsum
-:end
-AltText1: A map showing the Upper West side in New York City.
-:end
-
-Step2Text: #### Step 2
-
-Lorem Ipsum
-:end
-AltText2: The same map now highlights 98th Street.
-:end
-
-Step3Text: #### Step 3
-
-Lorem Ipsum
-:end
-AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
-:end
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // Previos imports and stuff...
-
-  // This should be already imported for you.
-  import content from '$locales/en/content.json';
-
-  // Get the data for the block in content by its ID
-  const scrollerBlock = content.blocks.find(
-    (block) => block.ID === 'map-scrolly'
-  );
-
-  // Now plug your text into your step foregrounds
-  const steps = [
-    {
-      background: MyAiMap1,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step1Text,
-      altText: scrollerBlock.AltText1,
-    },
-    {
-      background: MyAiMap2,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step2Text,
-      altText: scrollerBlock.AltText2,
-    },
-    {
-      background: MyAiMap3,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step3Text,
-      altText: scrollerBlock.AltText3,
-    },
-  ];
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type === 'text'}
-    <!-- ... other blocks -->
-
-    <!-- Copy/paste into your blocks loop! -->
-  {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
-    <Scroller
-      steps="{steps}"
-      backgroundWidth="fluid"
-      foregroundPosition="middle"
-      stackBackground="{true}"
-      embedded="{false}"
-    />
-    <!-- END copy/paste -->
-  {/if}
-{/each}
-```

package/dist/components/Scroller/stories/docs/archieML.md

@@ -75,7 +75,7 @@ stackBackground: true
         stackBackground="{block.stackBackground === 'true'}"
         steps="{block.steps.map((step) => ({
           background: aiCharts[step.background],
-          backgroundProps: assets || '/',
+          backgroundProps: { assetsPath: assets || '/' },
           foreground: step.text,
           altText: step.altText,
         }))}"

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -13,12 +13,19 @@
       <span>{story.title}</span>
       <time datetime="{story.display_time}">{getTime(story.display_time)}</time>
     </div>
-    {#if thumbnail}
+    {#if thumbnail && (thumbnail.resizer_url || thumbnail?.renditions?.square?.['120w'])}
       <div class="thumbnail">
-        <img
-          src="{thumbnail.renditions.square['120w']}"
-          alt="{thumbnail.alt_text}"
-        />
+        {#if thumbnail.resizer_url}
+          <img
+            src="{thumbnail.resizer_url}&width=120&quality=80"
+            alt="{thumbnail.alt_text}"
+          />
+        {:else}
+          <img
+            src="{thumbnail.renditions.square['120w']}"
+            alt="{thumbnail.alt_text}"
+          />
+        {/if}
       </div>
     {/if}
   </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -42,6 +42,7 @@
     "@storybook/blocks": "^8.4.4",
     "@storybook/builder-vite": "^8.4.4",
     "@storybook/components": "^8.4.4",
+    "@storybook/csf": "^0.1.12",
     "@storybook/manager-api": "^8.4.4",
     "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/svelte": "^8.4.4",