From 6431622ce5737a76b17c96abeed6119fd6830448 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Thu, 16 Jan 2025 11:15:23 +0000 Subject: [PATCH 1/6] fix for new referral API thumbnail schema --- .storybook/add-ons/canvas-docs/Tab.tsx | 32 +++++++++++++++++++ .storybook/add-ons/canvas-docs/constants.ts | 3 ++ .storybook/add-ons/canvas-docs/index.tsx | 13 ++++++++ .storybook/manager.ts | 1 + package.json | 1 + pnpm-lock.yaml | 17 ++++++---- src/components/Block/Block.stories.svelte | 8 ++++- .../ReferralBlock/ReferralBlock.svelte | 31 +++++++++++++----- .../NavBar/NavDropdown/StoryCard/index.svelte | 17 +++++++--- 9 files changed, 102 insertions(+), 21 deletions(-) create mode 100644 .storybook/add-ons/canvas-docs/Tab.tsx create mode 100644 .storybook/add-ons/canvas-docs/constants.ts create mode 100644 .storybook/add-ons/canvas-docs/index.tsx diff --git a/.storybook/add-ons/canvas-docs/Tab.tsx b/.storybook/add-ons/canvas-docs/Tab.tsx new file mode 100644 index 00000000..679e273d --- /dev/null +++ b/.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 = (props) => { + const { storyId } = useStorybookState(); // Get the current story ID + const markdownContent = useParameter>(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 ( + + +
+ {content} +
+ + + ); +}; + +export default Tab; diff --git a/.storybook/add-ons/canvas-docs/constants.ts b/.storybook/add-ons/canvas-docs/constants.ts new file mode 100644 index 00000000..1bde048d --- /dev/null +++ b/.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'; diff --git a/.storybook/add-ons/canvas-docs/index.tsx b/.storybook/add-ons/canvas-docs/index.tsx new file mode 100644 index 00000000..982daef1 --- /dev/null +++ b/.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) => , + }); +}); diff --git a/.storybook/manager.ts b/.storybook/manager.ts index f1e98430..65eed36e 100644 --- a/.storybook/manager.ts +++ b/.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, diff --git a/package.json b/package.json index 03d476c5..e8454bdf 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b72936dc..801a493e 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte index b8354ead..db87b9f9 100644 --- a/src/components/Block/Block.stories.svelte +++ b/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', diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte index a2036f80..35194bdb 100644 --- a/src/components/ReferralBlock/ReferralBlock.svelte +++ b/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}" > - {referral.thumbnail.caption || - referral.thumbnail.alt_text} + {#if referral.thumbnail.resizer_url} + {referral.thumbnail.caption || + referral.thumbnail.alt_text} + {:else} + {referral.thumbnail.caption || + referral.thumbnail.alt_text} + {/if} diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte index fd5a370b..c9e528e6 100644 --- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte +++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte @@ -13,12 +13,19 @@ {story.title} - {#if thumbnail} + {#if thumbnail && (thumbnail.resizer_url || thumbnail?.renditions?.square?.['120w'])}
- {thumbnail.alt_text} + {#if thumbnail.resizer_url} + {thumbnail.alt_text} + {:else} + {thumbnail.alt_text} + {/if}
{/if} From 64b6d88c567123d0a43075b5d79d1d506082377f Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Thu, 16 Jan 2025 11:15:46 +0000 Subject: [PATCH 2/6] docs(changeset): Fix for changed thumbnail API schema --- .changeset/khaki-experts-bow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-experts-bow.md diff --git a/.changeset/khaki-experts-bow.md b/.changeset/khaki-experts-bow.md new file mode 100644 index 00000000..b0428519 --- /dev/null +++ b/.changeset/khaki-experts-bow.md @@ -0,0 +1,5 @@ +--- +'@reuters-graphics/graphics-components': patch +--- + +Fix for changed thumbnail API schema From 365c3cc8e3d85d34136c8f2789e4c83d9c447bdc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 16 Jan 2025 11:19:40 +0000 Subject: [PATCH 3/6] RELEASING: Releasing 1 package(s) Releases: @reuters-graphics/graphics-components@2.0.2 [skip ci] --- .changeset/khaki-experts-bow.md | 5 ----- CHANGELOG.md | 6 ++++++ package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/khaki-experts-bow.md diff --git a/.changeset/khaki-experts-bow.md b/.changeset/khaki-experts-bow.md deleted file mode 100644 index b0428519..00000000 --- a/.changeset/khaki-experts-bow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reuters-graphics/graphics-components': patch ---- - -Fix for changed thumbnail API schema diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ed592ac..caa05c5e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @reuters-graphics/graphics-components +## 2.0.2 + +### Patch Changes + +- 64b6d88: Fix for changed thumbnail API schema + ## 2.0.1 ### Patch Changes diff --git a/package.json b/package.json index e8454bdf..37fa9ccf 100644 --- a/package.json +++ b/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", From 4f58fb361d39bf7bc93830ba99ac5dedc3513c76 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Fri, 7 Feb 2025 12:56:02 +0000 Subject: [PATCH 4/6] updates favicon --- src/components/SEO/SEO.svelte | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte index c1927493..cf8ec9e7 100644 --- a/src/components/SEO/SEO.svelte +++ b/src/components/SEO/SEO.svelte @@ -139,28 +139,26 @@ {seoTitle} + + - - From 50f4320eab574d09619f3d3bfcdebe9967118d9f Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Fri, 7 Feb 2025 12:56:18 +0000 Subject: [PATCH 5/6] docs(changeset): Updates favicons for new kinesis --- .changeset/calm-turtles-joke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/calm-turtles-joke.md diff --git a/.changeset/calm-turtles-joke.md b/.changeset/calm-turtles-joke.md new file mode 100644 index 00000000..1478039f --- /dev/null +++ b/.changeset/calm-turtles-joke.md @@ -0,0 +1,5 @@ +--- +'@reuters-graphics/graphics-components': patch +--- + +Updates favicons for new kinesis From 683ef672f04c77b85e809bd58e378e2aca4158ca Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 7 Feb 2025 13:00:47 +0000 Subject: [PATCH 6/6] RELEASING: Releasing 1 package(s) Releases: @reuters-graphics/graphics-components@2.0.3 [skip ci] --- .changeset/calm-turtles-joke.md | 5 ----- CHANGELOG.md | 6 ++++++ package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/calm-turtles-joke.md diff --git a/.changeset/calm-turtles-joke.md b/.changeset/calm-turtles-joke.md deleted file mode 100644 index 1478039f..00000000 --- a/.changeset/calm-turtles-joke.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reuters-graphics/graphics-components': patch ---- - -Updates favicons for new kinesis diff --git a/CHANGELOG.md b/CHANGELOG.md index caa05c5e..a70afc66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @reuters-graphics/graphics-components +## 2.0.3 + +### Patch Changes + +- 50f4320: Updates favicons for new kinesis + ## 2.0.2 ### Patch Changes diff --git a/package.json b/package.json index 37fa9ccf..b91a0798 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reuters-graphics/graphics-components", - "version": "2.0.2", + "version": "2.0.3", "type": "module", "private": false, "homepage": "https://reuters-graphics.github.io/graphics-components",