From 0878f32ec059f92a6372761e9c5b357d40152743 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 12 Jul 2020 17:10:55 +0200
Subject: [PATCH 1/2] fix(cli): remove addon notes usage in examples

- Addon notes is deprecated and should not be used anymore.
---
 lib/cli/src/frameworks/angular/1-Button.stories.ts        | 3 ---
 lib/cli/src/frameworks/aurelia/1-Button.stories.ts        | 1 -
 lib/cli/src/frameworks/ember/1-Button.stories.js          | 1 -
 lib/cli/src/frameworks/html/1-Button.stories.js           | 1 -
 lib/cli/src/frameworks/mithril/1-Button.stories.js        | 1 -
 lib/cli/src/frameworks/preact/1-Button.stories.js         | 1 -
 lib/cli/src/frameworks/rax/1-Button.stories.js            | 1 -
 lib/cli/src/frameworks/react/js/1-Button.stories.js       | 1 -
 lib/cli/src/frameworks/react/ts/1-Button.stories.tsx      | 1 -
 lib/cli/src/frameworks/svelte/1-button.stories.js         | 1 -
 lib/cli/src/frameworks/vue/1-Button.stories.js            | 1 -
 lib/cli/src/frameworks/web-components/1-Button.stories.js | 1 -
 12 files changed, 14 deletions(-)

diff --git a/lib/cli/src/frameworks/angular/1-Button.stories.ts b/lib/cli/src/frameworks/angular/1-Button.stories.ts
index 2b929b42a140..ab4583a2e62c 100644
--- a/lib/cli/src/frameworks/angular/1-Button.stories.ts
+++ b/lib/cli/src/frameworks/angular/1-Button.stories.ts
@@ -24,8 +24,6 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
-
 export const TextWithAction = () => ({
   component: Button,
   props: {
@@ -35,7 +33,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
diff --git a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
index 34b329040d65..24b57aa40903 100644
--- a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
+++ b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
@@ -36,7 +36,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
diff --git a/lib/cli/src/frameworks/ember/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js
index 4ed1d267badb..e6665222c264 100644
--- a/lib/cli/src/frameworks/ember/1-Button.stories.js
+++ b/lib/cli/src/frameworks/ember/1-Button.stories.js
@@ -37,7 +37,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   template: hbs`
diff --git a/lib/cli/src/frameworks/html/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js
index a0b83f19d786..b0eb12b5b65f 100644
--- a/lib/cli/src/frameworks/html/1-Button.stories.js
+++ b/lib/cli/src/frameworks/html/1-Button.stories.js
@@ -36,7 +36,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');
diff --git a/lib/cli/src/frameworks/mithril/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js
index d6f1849a8d49..a8147e2a3f89 100644
--- a/lib/cli/src/frameworks/mithril/1-Button.stories.js
+++ b/lib/cli/src/frameworks/mithril/1-Button.stories.js
@@ -31,7 +31,6 @@ export const TextWithAction = () => ({
 });
 
 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'),
diff --git a/lib/cli/src/frameworks/preact/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js
index ab35ae4c5dc3..55c929fd0cb6 100644
--- a/lib/cli/src/frameworks/preact/1-Button.stories.js
+++ b/lib/cli/src/frameworks/preact/1-Button.stories.js
@@ -31,7 +31,6 @@ export const TextWithAction = () => (
 );
 
 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>
diff --git a/lib/cli/src/frameworks/rax/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js
index 2a59dc7a753b..e57f38af03dc 100644
--- a/lib/cli/src/frameworks/rax/1-Button.stories.js
+++ b/lib/cli/src/frameworks/rax/1-Button.stories.js
@@ -35,7 +35,6 @@ export const TextWithAction = () => (
 );
 
 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">
diff --git a/lib/cli/src/frameworks/react/js/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js
index 61d052333c6e..0c809e11ceb0 100644
--- a/lib/cli/src/frameworks/react/js/1-Button.stories.js
+++ b/lib/cli/src/frameworks/react/js/1-Button.stories.js
@@ -27,7 +27,6 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>
diff --git a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
index dbeb802afe6b..1c6f85fd6b5b 100644
--- a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
@@ -22,7 +22,6 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>
diff --git a/lib/cli/src/frameworks/svelte/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js
index c219003c1e38..574f496425df 100644
--- a/lib/cli/src/frameworks/svelte/1-button.stories.js
+++ b/lib/cli/src/frameworks/svelte/1-button.stories.js
@@ -41,7 +41,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   Component: Button,
diff --git a/lib/cli/src/frameworks/vue/1-Button.stories.js b/lib/cli/src/frameworks/vue/1-Button.stories.js
index 7e9d0b58a409..a1ab323dba33 100644
--- a/lib/cli/src/frameworks/vue/1-Button.stories.js
+++ b/lib/cli/src/frameworks/vue/1-Button.stories.js
@@ -32,7 +32,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   components: { MyButton },
diff --git a/lib/cli/src/frameworks/web-components/1-Button.stories.js b/lib/cli/src/frameworks/web-components/1-Button.stories.js
index 133bd4f98806..dab901f9920c 100644
--- a/lib/cli/src/frameworks/web-components/1-Button.stories.js
+++ b/lib/cli/src/frameworks/web-components/1-Button.stories.js
@@ -33,7 +33,6 @@ export const TextWithAction = () => html`
 `;
 
 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')}

From c62c2ba65efad42c07ed5247a6edac9110bbdbaf Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 12 Jul 2020 19:07:55 +0200
Subject: [PATCH 2/2] feat(cli): add backgrounds usage example

---
 cypress/generated/addon-backgrounds.spec.ts         | 12 ++++++++++++
 cypress/support/commands.js                         |  7 +++++++
 cypress/support/index.d.ts                          |  6 ++++++
 lib/cli/src/frameworks/angular/1-Button.stories.ts  | 13 +++++++++++++
 lib/cli/src/frameworks/aurelia/1-Button.stories.ts  | 13 +++++++++++++
 lib/cli/src/frameworks/ember/1-Button.stories.js    | 13 +++++++++++++
 lib/cli/src/frameworks/html/1-Button.stories.js     | 13 +++++++++++++
 lib/cli/src/frameworks/marko/1-Button.stories.js    | 13 +++++++++++++
 lib/cli/src/frameworks/mithril/1-Button.stories.js  | 13 +++++++++++++
 lib/cli/src/frameworks/preact/1-Button.stories.js   | 13 +++++++++++++
 lib/cli/src/frameworks/rax/1-Button.stories.js      | 13 +++++++++++++
 lib/cli/src/frameworks/react/js/1-Button.stories.js | 13 +++++++++++++
 .../src/frameworks/react/ts/1-Button.stories.tsx    | 13 +++++++++++++
 lib/cli/src/frameworks/riot/1-Button.stories.js     | 13 +++++++++++++
 lib/cli/src/frameworks/svelte/1-button.stories.js   | 13 +++++++++++++
 lib/cli/src/frameworks/vue/1-Button.stories.js      | 13 +++++++++++++
 .../frameworks/web-components/1-Button.stories.js   | 13 +++++++++++++
 17 files changed, 207 insertions(+)
 create mode 100644 cypress/generated/addon-backgrounds.spec.ts

diff --git a/cypress/generated/addon-backgrounds.spec.ts b/cypress/generated/addon-backgrounds.spec.ts
new file mode 100644
index 000000000000..1f0831f2496a
--- /dev/null
+++ b/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)');
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 38ae46e7a797..f93bb8f3494b 100644
--- a/cypress/support/commands.js
+++ b/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
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
index 2c303f0eb2ac..3f07aa462b7d 100644
--- a/cypress/support/index.d.ts
+++ b/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.
      */
diff --git a/lib/cli/src/frameworks/angular/1-Button.stories.ts b/lib/cli/src/frameworks/angular/1-Button.stories.ts
index ab4583a2e62c..8e55fe0adf4b 100644
--- a/lib/cli/src/frameworks/angular/1-Button.stories.ts
+++ b/lib/cli/src/frameworks/angular/1-Button.stories.ts
@@ -24,6 +24,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: {
diff --git a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
index 24b57aa40903..f24018ce9258 100644
--- a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
+++ b/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: {
diff --git a/lib/cli/src/frameworks/ember/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js
index e6665222c264..33e147bfd78c 100644
--- a/lib/cli/src/frameworks/ember/1-Button.stories.js
+++ b/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}}>
diff --git a/lib/cli/src/frameworks/html/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js
index b0eb12b5b65f..a4e346212a31 100644
--- a/lib/cli/src/frameworks/html/1-Button.stories.js
+++ b/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';
diff --git a/lib/cli/src/frameworks/marko/1-Button.stories.js b/lib/cli/src/frameworks/marko/1-Button.stories.js
index e82bebc4555a..f8680c7e0a9a 100644
--- a/lib/cli/src/frameworks/marko/1-Button.stories.js
+++ b/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',
+  },
+};
diff --git a/lib/cli/src/frameworks/mithril/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js
index a8147e2a3f89..b82facb09345 100644
--- a/lib/cli/src/frameworks/mithril/1-Button.stories.js
+++ b/lib/cli/src/frameworks/mithril/1-Button.stories.js
@@ -26,6 +26,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 = () => ({
   view: () => m(Button, { onclick: () => action('This was clicked')() }, 'Trigger Action'),
 });
diff --git a/lib/cli/src/frameworks/preact/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js
index 55c929fd0cb6..9d71d591fe8c 100644
--- a/lib/cli/src/frameworks/preact/1-Button.stories.js
+++ b/lib/cli/src/frameworks/preact/1-Button.stories.js
@@ -26,6 +26,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 = () => (
   <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
 );
diff --git a/lib/cli/src/frameworks/rax/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js
index e57f38af03dc..93cdfd660970 100644
--- a/lib/cli/src/frameworks/rax/1-Button.stories.js
+++ b/lib/cli/src/frameworks/rax/1-Button.stories.js
@@ -28,6 +28,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 = () => (
   <button onClick={() => action('This was clicked')()} type="button">
     <RaxText>Trigger Action</RaxText>
diff --git a/lib/cli/src/frameworks/react/js/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js
index 0c809e11ceb0..c5e028f4cc87 100644
--- a/lib/cli/src/frameworks/react/js/1-Button.stories.js
+++ b/lib/cli/src/frameworks/react/js/1-Button.stories.js
@@ -28,6 +28,19 @@ Emoji.args = {
   ),
 };
 
+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>
 );
diff --git a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
index 1c6f85fd6b5b..ddd046b47064 100644
--- a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
@@ -23,6 +23,19 @@ Emoji.args = {
   ),
 };
 
+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>
 );
diff --git a/lib/cli/src/frameworks/riot/1-Button.stories.js b/lib/cli/src/frameworks/riot/1-Button.stories.js
index c89dbee3d0a3..a1ca6f8c458c 100644
--- a/lib/cli/src/frameworks/riot/1-Button.stories.js
+++ b/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>',
diff --git a/lib/cli/src/frameworks/svelte/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js
index 574f496425df..3f4fea8fc5b5 100644
--- a/lib/cli/src/frameworks/svelte/1-button.stories.js
+++ b/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: {
diff --git a/lib/cli/src/frameworks/vue/1-Button.stories.js b/lib/cli/src/frameworks/vue/1-Button.stories.js
index a1ab323dba33..fd3dba225e3f 100644
--- a/lib/cli/src/frameworks/vue/1-Button.stories.js
+++ b/lib/cli/src/frameworks/vue/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 = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Trigger Action</my-button>',
diff --git a/lib/cli/src/frameworks/web-components/1-Button.stories.js b/lib/cli/src/frameworks/web-components/1-Button.stories.js
index dab901f9920c..5620616d7a13 100644
--- a/lib/cli/src/frameworks/web-components/1-Button.stories.js
+++ b/lib/cli/src/frameworks/web-components/1-Button.stories.js
@@ -26,6 +26,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 = () => html`
   <button @click=${() => action('This was clicked')()}>
     Trigger Action