Skip to content

[B2BP-1363] - Fix storybook image URLs #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 17, 2025
Merged

[B2BP-1363] - Fix storybook image URLs #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d3574c
Fix storybook image URLs
NicolaGiornetta Oct 16, 2025
658b42b
Replace custom background color for Feature component
NicolaGiornetta Oct 16, 2025
4ded405
Add background image to dark themed Form component
NicolaGiornetta Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/khaki-clouds-poke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-website": patch
---

Fix storybook image URLs
14 changes: 8 additions & 6 deletions apps/nextjs-website/stories/Bannerlink/bannerlinkCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ export const BannerLinkTemplate: StoryFn<BannerLinkProps> = (args) => (
<BannerLink {...args} />
);

const getIcon = (theme: 'light' | 'dark') =>
theme === 'light'
? 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg'
: 'https://d2mk0pc4ejgxx6.cloudfront.net/dark_icon_dee9ab4f99.svg';

const generateDefaultProps = (
theme: 'light' | 'dark'
): Partial<BannerLinkProps> => ({
Expand All @@ -19,8 +24,7 @@ const generateDefaultProps = (
informazioni utili come il codice univoco della notifica (IUN)
</p>
),
iconURL:
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
iconURL: getIcon(theme),
ctaButtons: [
{
text: 'Scrivici',
Expand Down Expand Up @@ -55,8 +59,7 @@ const generateTwoColumnProps = (
informazioni utili come il codice univoco della notifica (IUN)
</p>
),
iconURL:
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
iconURL: getIcon(theme),
ctaButtons: [
{
text: 'Scrivici',
Expand All @@ -79,8 +82,7 @@ const generateTwoColumnProps = (
venerdì dalle 08:00 alle 20:00 e il sabato dalle 08:00 alle 14:00.
</p>
),
iconURL:
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
iconURL: getIcon(theme),
ctaButtons: [
{
text: 'Chiamaci',
Expand Down
4 changes: 2 additions & 2 deletions apps/nextjs-website/stories/Cards/cardsCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ export const generateItems = (count: number): CardsItemProps[] =>
Array.from({ length: count }, (_, i) => ({
title: `Card ${i + 1}`,
text: `This is card ${i + 1}`,
iconURL: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
iconURL: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
}));

// Function to generate items
export const generateItemsWithLinks = (count: number): CardsItemProps[] =>
Array.from({ length: count }, (_, i) => ({
title: `Card ${i + 1}`,
text: `This is card ${i + 1}`,
iconURL: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
iconURL: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
links: [
{
label: `Link ${i + 1}`,
Expand Down
8 changes: 4 additions & 4 deletions apps/nextjs-website/stories/Editorial-Switch/dark.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ Default.args = {
width: 'standard',
image: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pa-infoblock-5.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
mobileImage: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pi-infoblock-1.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
Expand All @@ -55,13 +55,13 @@ Default.args = {
width: 'standard',
image: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pa-infoblock-5.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
mobileImage: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pi-infoblock-1.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
Expand Down
8 changes: 4 additions & 4 deletions apps/nextjs-website/stories/Editorial-Switch/light.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ Default.args = {
width: 'standard',
image: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pa-infoblock-5.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
mobileImage: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pi-infoblock-1.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
Expand All @@ -55,13 +55,13 @@ Default.args = {
width: 'standard',
image: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pa-infoblock-5.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
mobileImage: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pi-infoblock-1.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
Expand Down
4 changes: 2 additions & 2 deletions apps/nextjs-website/stories/Editorial/editorialCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ const generateDefaultProps = (
width: 'standard',
image: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pa-infoblock-5.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
mobileImage: (
<img
src='https://notifichedigitali.pagopa.it/static/images/pi-infoblock-1.png'
src='https://d2mk0pc4ejgxx6.cloudfront.net/editorial_4e8d32980e.png'
alt='placeholder'
/>
),
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/Feature/featureCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const generateItems = (
iconURL:
theme === 'dark'
? 'https://d2mk0pc4ejgxx6.cloudfront.net/dark_icon_dee9ab4f99.svg'
: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
...(withLinks
? {
link: {
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/Feature/light.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,5 @@ export const LightFeatureFullWithCustomBackground: StoryFn<typeof Feature> =
FeatureTemplate.bind({});
LightFeatureFullWithCustomBackground.args = {
...defaultPropsLightWithLinks,
background: '#000',
background: '#F2F2F2',
};
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/Footer/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const StorybookFooter = ({
socialLinks: [
{
iconURL:
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
href: '#',
ariaLabel: 'Social',
},
Expand Down
6 changes: 6 additions & 0 deletions apps/nextjs-website/stories/Form/formCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ const generateFormProps = (theme: 'light' | 'dark'): FormProps => ({
</p>
),
themeVariant: 'SEND',
...(theme === 'dark' && {
background: {
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/hero_enti_background_35829ff95a.png',
srcSet: '',
},
}),
});

export const FormTemplate: StoryFn<FormProps> = (args) => <Form {...args} />;
Expand Down
6 changes: 3 additions & 3 deletions apps/nextjs-website/stories/FramedVideo/dark.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const VideoWithTextLeft: StoryFn<typeof FramedVideo> =
VideoWithTextLeft.args = {
...defaultsDark,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
text: {
title: 'Aenean commodo ligula eget dolor',
body: `Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Expand All @@ -33,7 +33,7 @@ export const VideoWithTextRight: StoryFn<typeof FramedVideo> =
VideoWithTextRight.args = {
...defaultsDark,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
text: {
title: 'Aenean commodo ligula eget dolor',
body: `Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Expand All @@ -52,7 +52,7 @@ export const VideoFullScreen: StoryFn<typeof FramedVideo> =
VideoFullScreen.args = {
...defaultsDark,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
};

export const NoVideo: StoryFn<typeof FramedVideo> = FramedVideoTemplate.bind(
Expand Down
6 changes: 3 additions & 3 deletions apps/nextjs-website/stories/FramedVideo/light.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const VideoWithTextLeft: StoryFn<typeof FramedVideo> =
VideoWithTextLeft.args = {
...defaultsLight,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
text: {
title: 'Aenean commodo ligula eget dolor',
body: `Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Expand All @@ -33,7 +33,7 @@ export const VideoWithTextRight: StoryFn<typeof FramedVideo> =
VideoWithTextRight.args = {
...defaultsLight,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
text: {
title: 'Aenean commodo ligula eget dolor',
body: `Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Expand All @@ -52,7 +52,7 @@ export const VideoFullScreen: StoryFn<typeof FramedVideo> =
VideoFullScreen.args = {
...defaultsLight,
videoURL:
'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
'https://d2mk0pc4ejgxx6.cloudfront.net/2023_12_14_16_24_35_Trim_online_video_cutter_com_d9b4283685.mp4',
};

export const NoVideo: StoryFn<typeof FramedVideo> = FramedVideoTemplate.bind(
Expand Down
16 changes: 8 additions & 8 deletions apps/nextjs-website/stories/Header/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const makeHeaderProps = ({
logo: {
src:
customLogo ??
'https://notifichedigitali.pagopa.it/static/images/logo.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/logo_sedn_6453fc30cd.svg',
alt: 'Logo',
href: '#',
},
Expand Down Expand Up @@ -100,7 +100,7 @@ const makeHeaderProps = ({
buttonText: 'Bottone Card Link',
href: '#',
icons: [
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
],
},
{
Expand All @@ -113,8 +113,8 @@ const makeHeaderProps = ({
buttonText: 'Bottone Card Link',
href: '#',
icons: [
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
],
},
{
Expand All @@ -127,9 +127,9 @@ const makeHeaderProps = ({
buttonText: 'Bottone Card Link',
href: '#',
icons: [
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
],
},
],
Expand Down Expand Up @@ -160,7 +160,7 @@ const makeHeaderProps = ({
buttonText: 'Bottone Card Link',
href: '#',
icons: [
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
],
},
],
Expand Down
4 changes: 2 additions & 2 deletions apps/nextjs-website/stories/Hero/heroCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ const createHeroProps = (
subtitle: withSubtitle ? subtitle : '',
ctaButtons: withButtons ? ctaButtons : [],
image: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-enti-foreground.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/bg_hero_54e55afdee.png',
srcSet: '',
alt: 'Alt text for image',
},
...(theme === 'dark' && {
background: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-enti-background.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/hero_enti_background_35829ff95a.png',
srcSet: '',
},
}),
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/HeroChips/herochipsCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const createHeroChipsProps = (
subtitle: withSubtitle ? subtitle : '',
...(theme === 'dark' && {
background: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-enti-background.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/hero_enti_background_35829ff95a.png',
srcSet: '',
},
}),
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/HeroCounter/herocounterCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const createHeroCounterProps = (
}),
...(theme === 'dark' && {
background: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-enti-background.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/hero_enti_background_35829ff95a.png',
srcSet: '',
},
}),
Expand Down
6 changes: 3 additions & 3 deletions apps/nextjs-website/stories/HighlightBox/default.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ HighlightBoxFull.args = {
title: 'Sta arrivando IT Wallet!',
body: 'Se hai tra 18 e 35 anni compiuti puoi richiedere su IO la Carta Giovani Nazionale, istituita dal Dipartimento per le Politiche Giovanili e il Servizio Civile Universale. La carta dà diritto a sconti e agevolazioni per l’accesso ad attività culturali, sportive e ricreative, anche con finalità formative.',
image: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-cittadini-foreground.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/heo_cittadini_5acf230a3e.png',
srcSet: '',
},
eyelet: 'In arrivo su IO',
Expand All @@ -37,7 +37,7 @@ HighlightBoxWithoutButton.args = {
title: 'Sta arrivando IT Wallet!',
body: 'Se hai tra 18 e 35 anni compiuti puoi richiedere su IO la Carta Giovani Nazionale, istituita dal Dipartimento per le Politiche Giovanili e il Servizio Civile Universale. La carta dà diritto a sconti e agevolazioni per l’accesso ad attività culturali, sportive e ricreative, anche con finalità formative.',
image: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-cittadini-foreground.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/heo_cittadini_5acf230a3e.png',
srcSet: '',
},
eyelet: 'In arrivo su IO',
Expand All @@ -50,7 +50,7 @@ HighlightBoxWithoutEyelet.args = {
title: 'Sta arrivando IT Wallet!',
body: 'Se hai tra 18 e 35 anni compiuti puoi richiedere su IO la Carta Giovani Nazionale, istituita dal Dipartimento per le Politiche Giovanili e il Servizio Civile Universale. La carta dà diritto a sconti e agevolazioni per l’accesso ad attività culturali, sportive e ricreative, anche con finalità formative.',
image: {
src: 'https://notifichedigitali.pagopa.it/static/images/hero-cittadini-foreground.png',
src: 'https://d2mk0pc4ejgxx6.cloudfront.net/heo_cittadini_5acf230a3e.png',
srcSet: '',
},
eyelet: '',
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs-website/stories/HowTo/howtoCommons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const generateSteps = (
iconURL:
theme === 'dark'
? 'https://d2mk0pc4ejgxx6.cloudfront.net/dark_icon_dee9ab4f99.svg'
: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_f76dbe7883.svg',
: 'https://d2mk0pc4ejgxx6.cloudfront.net/light_icon_45a3f353d1.svg',
}),
index: i,
theme,
Expand Down
Loading
Loading