From 2c47a6e29aebdaf229c00577db6625b12c0b60a5 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 8 Jul 2021 19:34:58 +0300
Subject: [PATCH] docs(web-components): set attributes in example story

---
 .../src/components/sb-button.stories.ts                    | 7 ++++---
 .../src/components/sb-button.ts                            | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
index 487ab8f23c74..7b8797a0d714 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { SbButton } from './sb-button';
 
@@ -20,9 +21,9 @@ export default {
 const Template: Story<SbButton> = ({ primary, backgroundColor, size, label }) =>
   html`<sb-button
     ?primary="${primary}"
-    .size="${size}"
-    .label="${label}"
-    .backgroundColor="${backgroundColor}"
+    size="${ifDefined(size)}"
+    label="${ifDefined(label)}"
+    background-color="${ifDefined(backgroundColor)}"
   ></sb-button>`;
 
 export const Primary: Story<SbButton> = Template.bind({});
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.ts b/examples/web-components-kitchen-sink/src/components/sb-button.ts
index 1a81bf443132..0c4dd313d22e 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.ts
@@ -61,7 +61,7 @@ export class SbButton extends LitElement {
       label: { type: String, reflect: true },
       primary: { type: Boolean },
       size: { type: String },
-      backgroundColor: { type: String },
+      backgroundColor: { type: String, attribute: 'background-color' },
     };
   }