CLI: replace notes with background in generated examples

cypress/generated/addon-backgrounds.spec.ts

@@ -0,0 +1,12 @@
+describe('addon-backgrounds', () => {
+  before(() => {
+    cy.visitStorybook();
+  });
+
+  it('should have a dark background', () => {
+    // click on the button
+    cy.navigateToStory('button', 'with custom background');
+
+    cy.getPreviewIframe().should('have.css', 'background-color', 'rgb(51, 51, 51)');
+  });
+});

cypress/support/commands.js

@@ -62,6 +62,13 @@ Cypress.Commands.add('getStoryElement', {}, () => {
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });
 
+Cypress.Commands.add('getPreviewIframe', {}, () => {
+  cy.log('getPreviewIframe');
+  return cy
+    .get(`#storybook-preview-iframe`, { log: false })
+    .then((iframe) => cy.wrap(iframe, { log: false }));
+});
+
 Cypress.Commands.add('getDocsElement', {}, () => {
   cy.log('getDocsElement');
   return cy

cypress/support/index.d.ts

@@ -9,10 +9,16 @@ declare namespace Cypress {
      */
     visitStorybook(): Chainable<Element>;
 
+    /**
+     * Custom command to select the DOM element of the preview iframe in the canvas tab.
+     */
+    getPreviewIframe(): Chainable<Element>;
+
     /**
      * Custom command to select the DOM element of a story in the canvas tab.
      */
     getStoryElement(): Chainable<Element>;
+
     /**
      * Custom command to select the DOM element of a docs story in the canvas tab.
      */

lib/cli/src/frameworks/angular/1-Button.stories.ts

@@ -24,7 +24,18 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const TextWithAction = () => ({
   component: Button,
@@ -35,7 +46,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,

lib/cli/src/frameworks/aurelia/1-Button.stories.ts

@@ -27,6 +27,19 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   component: Button,
   props: {
@@ -36,7 +49,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,

lib/cli/src/frameworks/ember/1-Button.stories.js

@@ -25,6 +25,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   template: hbs`
     <button {{action onClick}}>
@@ -37,7 +50,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   template: hbs`

lib/cli/src/frameworks/html/1-Button.stories.js

@@ -27,6 +27,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => {
   const btn = document.createElement('button');
   btn.type = 'button';
@@ -36,7 +49,6 @@ export const TextWithAction = () => {
 };
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => {
   const btn = document.createElement('button');

lib/cli/src/frameworks/marko/1-Button.stories.js

@@ -18,3 +18,16 @@ Text.args = {
   children: 'Button',
   onClick: action('onClick'),
 };
+
+export const WithCustomBackground = ButtonStory.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};

lib/cli/src/frameworks/mithril/1-Button.stories.js

@@ -26,12 +26,24 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   view: () => m(Button, { onclick: () => action('This was clicked')() }, 'Trigger Action'),
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   view: () => m(Button, { onclick: linkTo('example-introduction--page') }, 'Go to Welcome Story'),

lib/cli/src/frameworks/preact/1-Button.stories.js

@@ -26,12 +26,24 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => (
   <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
 );
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>

lib/cli/src/frameworks/rax/1-Button.stories.js

@@ -28,14 +28,26 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => (
   <button onClick={() => action('This was clicked')()} type="button">
     <RaxText>Trigger Action</RaxText>
   </button>
 );
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <button onClick={linkTo('example-introduction--page')} type="button">

lib/cli/src/frameworks/react/js/1-Button.stories.js

@@ -27,7 +27,19 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>

lib/cli/src/frameworks/react/ts/1-Button.stories.tsx

@@ -22,7 +22,19 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>

lib/cli/src/frameworks/riot/1-Button.stories.js

@@ -26,6 +26,19 @@ Emoji.args = {
   content: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  content: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const WithScenario = () => ({
   tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
   template: '<MyButton>With scenario</MyButton>',

lib/cli/src/frameworks/svelte/1-button.stories.js

@@ -30,6 +30,19 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   Component: Button,
   props: {
@@ -41,7 +54,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   Component: Button,

lib/cli/src/frameworks/vue/1-Button.stories.js

@@ -25,14 +25,26 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Trigger Action</my-button>',
   methods: { action: () => action('This was clicked')() },
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   components: { MyButton },

lib/cli/src/frameworks/web-components/1-Button.stories.js

@@ -26,14 +26,26 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => html`
   <button @click=${() => action('This was clicked')()}>
     Trigger Action
   </button>
 `;
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => html`<button
   @click=${linkTo('example-introduction--page')}