Merge pull request #204 from reuters-graphics/header-fix

Header fix

.changeset/khaki-experts-bow.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Fix for changed thumbnail API schema

.storybook/add-ons/canvas-docs/Tab.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useParameter, useStorybookState } from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/components';
+import { PARAM_KEY } from './constants.ts';
+import * as Blocks from '@storybook/blocks';
+
+interface PanelProps {
+  active: boolean | undefined;
+}
+
+const Tab: React.FC<PanelProps> = (props) => {
+  const { storyId } = useStorybookState(); // Get the current story ID
+  const markdownContent = useParameter<Record<string, string>>(PARAM_KEY, {});
+
+  // Fetch Markdown content specific to the current story
+  const content =
+    markdownContent[storyId] || 'No documentation provided for this story.';
+
+  console.log('PROPS', props);
+
+  return (
+    <AddonPanel active={!!props.active}>
+      <Blocks.Wrapper>
+        <div style={{ padding: '15px' }} className="sbdocs sbdocs-content">
+          <Blocks.Markdown>{content}</Blocks.Markdown>
+        </div>
+      </Blocks.Wrapper>
+    </AddonPanel>
+  );
+};
+
+export default Tab;

.storybook/add-ons/canvas-docs/constants.ts

@@ -0,0 +1,3 @@
+export const ADDON_ID = 'storybook/canvas-docs';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = 'canvasDocs';

.storybook/add-ons/canvas-docs/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { addons, types } from '@storybook/manager-api';
+import { ADDON_ID, PANEL_ID } from './constants';
+import Tab from './Tab';
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Docs',
+    match: ({ viewMode }) => viewMode === 'story',
+    render: (props) => <Tab {...props} />,
+  });
+});

.storybook/manager.ts

@@ -1,5 +1,6 @@
 import { addons } from '@storybook/manager-api';
 import theme from './Theme';
+import './add-ons/canvas-docs';
 
 addons.setConfig({
   isFullscreen: false,

package.json

@@ -54,6 +54,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",

pnpm-lock.yaml

@@ -108,6 +108,9 @@ importers:
       '@storybook/components':
         specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
+      '@storybook/csf':
+        specifier: ^0.1.12
+        version: 0.1.12
       '@storybook/manager-api':
         specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
@@ -1102,8 +1105,8 @@ packages:
     peerDependencies:
       storybook: ^8.4.4
 
-  '@storybook/csf@0.1.11':
-    resolution: {integrity: sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==}
+  '@storybook/csf@0.1.12':
+    resolution: {integrity: sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==}
 
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
@@ -5096,7 +5099,7 @@ snapshots:
 
   '@storybook/addon-links@8.4.4(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
-      '@storybook/csf': 0.1.11
+      '@storybook/csf': 0.1.12
       '@storybook/global': 5.0.0
       storybook: 8.4.4(prettier@3.3.3)
       ts-dedent: 2.2.0
@@ -5150,7 +5153,7 @@ snapshots:
 
   '@storybook/blocks@8.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
-      '@storybook/csf': 0.1.11
+      '@storybook/csf': 0.1.12
       '@storybook/icons': 1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       storybook: 8.4.4(prettier@3.3.3)
       ts-dedent: 2.2.0
@@ -5172,7 +5175,7 @@ snapshots:
 
   '@storybook/core@8.4.4(prettier@3.3.3)':
     dependencies:
-      '@storybook/csf': 0.1.11
+      '@storybook/csf': 0.1.12
       better-opn: 3.0.2
       browser-assert: 1.2.1
       esbuild: 0.24.0
@@ -5195,7 +5198,7 @@ snapshots:
       storybook: 8.4.4(prettier@3.3.3)
       unplugin: 1.16.0
 
-  '@storybook/csf@0.1.11':
+  '@storybook/csf@0.1.12':
     dependencies:
       type-fest: 2.19.0
 
@@ -5271,7 +5274,7 @@ snapshots:
 
   '@storybook/test@8.4.4(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
-      '@storybook/csf': 0.1.11
+      '@storybook/csf': 0.1.12
       '@storybook/global': 5.0.0
       '@storybook/instrumenter': 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@testing-library/dom': 10.4.0

src/components/Block/Block.stories.svelte

@@ -9,11 +9,17 @@
   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',

src/components/ReferralBlock/ReferralBlock.svelte

@@ -78,7 +78,11 @@
       const data = (await response.json()) as Referrals;
       const articles = data.result.articles
         .filter((a) => a?.headline_category || a?.kicker?.name)
-        .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
+        .filter(
+          (a) =>
+            a?.thumbnail?.renditions?.landscape?.['240w'] ||
+            a?.thumbnail?.resizer_url
+        )
         .filter((a) => !a?.content?.third_party)
         .filter(articleIsNotCurrentPage)
         .slice(0, number);
@@ -146,13 +150,24 @@
                   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>

src/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>