Stories had misleading details

examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js

@@ -1,14 +1,14 @@
 import { storiesOf } from '@storybook/svelte';
 import Centered from '@storybook/addon-centered/svelte';
 
-import ButtonView from './views/ButtonView.svelte';
+import Button from '../components/Button.svelte';
 
 storiesOf('Addon|Centered', module)
   .addDecorator(Centered)
   .add('rounded', () => ({
-    Component: ButtonView,
+    Component: Button,
     data: {
       rounded: true,
-      text: 'You should see this',
+      text: "Look, I'm centered!",
     },
   }));

examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js

@@ -9,7 +9,14 @@ storiesOf('Addon|Knobs', module)
     const backgroundColor = text('Background', 'green');
     const width = number('Width', 200, {
       range: true,
-      min: 0,
+      min: 100,
+      max: 1000,
+      step: 100,
+    });
+
+    const height = number('Height', 200, {
+      range: true,
+      min: 100,
       max: 1000,
       step: 100,
     });
@@ -19,6 +26,7 @@ storiesOf('Addon|Knobs', module)
       data: {
         backgroundColor,
         width,
+        height,
       },
     };
   });

examples/svelte-kitchen-sink/src/stories/views/ActionKnobView.svelte

@@ -1,4 +1,4 @@
-<div style="width: {width}px; background-color: {backgroundColor}">
+<div style="width: {width}px; height: {height}px; background-color: {backgroundColor}">
     <p>I am interactive</p>
 </div>
 
@@ -7,6 +7,7 @@
         data() {
             return {
                 width: 200,
+                height: 100,
                 backgroundColor: 'yellow'
             };
         }

examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte

@@ -3,8 +3,8 @@
 <p>A little text to show this is a view.</p>
 <p>If we need to test components in a Svelte
 environment, for instance to test slot behaviour,</p>
-<p>then wrapping the component up in a view made</p>
-<p>just for the story is the simplest way to achieve this.</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>
 
 <script>
   import Button from '../../components/Button.svelte';

examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte

@@ -81,13 +81,3 @@
     opacity: 0.5;
   }
 </style>
-
-<script>
-  export default {
-    methods: {
-      onClick(event) {
-        this.fire('click', event);
-      },
-    }
-  };
-</script>