Create a button on Toolbar in Storybook

This is my Preview > globalTypes:

globalTypes: {
feedback: {
description: 'Answer our survey',
defaultValue: false,
toolbar: {
title: 'Survey',
icon: 'link',
items: [{ value: true, title: 'Go to Survey' }],
showName: true,
},
},
},


Got 2 issues.

1. If I erase the items property the storybook doesn't load, white screen
2. I didn't find a way to binding a link.

These are my tries:

items: [
{
value: 'survey',
title: 'Take our survey',
onClick: () => {
window.open('https://www.google.com', '_blank');
}
}
],


items: [
{ value: 'survey', title: 'Take our survey'}
],
onChange: (value) => {
if (value === 'survey') {
window.open('https://www.google.com', '_blank');
}
}


Using this import:

import { addons } from '@storybook/manager-api';


this before the const preview: Preview

addons.getChannel().on('openSurvey', () => {
window.open(SURVEY_URL, '_blank');
});


this on parameters:

surveyLink: 'https://www.google.com/'


items: [{ value: true, title: 'Go to Survey' }],
showName: true,
onClick: () => {
addons.getChannel().emit('openSurvey');
return false;
}


And a lot more with and AI (not proud of these last), without success.

Also tried with a console.log message but nothing appears on the console.

onClick and onChange both with capital and lower case letters.

It would be perfect without the Item property, cause the idea is to just click, and go to the link.

Continue reading...