refactor(led): migrate story to new format

Author: urish

src/led-element.stories.ts

@@ -1,117 +1,64 @@
-import { storiesOf } from '@storybook/web-components';
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
 import { html } from 'lit';
 import './led-element';
 
-const brightnessOptions = {
-  range: true,
-  min: 0,
-  max: 1.0,
-  step: 0.05,
+export default {
+  title: 'LED',
+  component: 'wokwi-led',
+  argTypes: {
+    value: { control: 'boolean' },
+    brightness: { control: { type: 'range', min: 0, max: 1.0, step: 0.05 } },
+    color: { control: { type: 'color' } },
+    lightColor: { control: { type: 'color' } },
+    label: 'string',
+    flip: { control: 'boolean' },
+  },
+  args: {
+    brightness: 1.0,
+    flip: false,
+    value: false,
+  },
 };
 
-storiesOf('LED', module)
-  .addParameters({ component: 'wokwi-led' })
-  .addDecorator(withKnobs)
-  .add(
-    'Red',
-    () =>
-      html`
-        <wokwi-led
-          color="red"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Red with label',
-    () =>
-      html`
-        <wokwi-led
-          color="red"
-          .value=${boolean('value', false)}
-          label="${text('label', '12')}"
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Flipped',
-    () =>
-      html`
-        <wokwi-led
-          color="red"
-          .value=${boolean('value', false)}
-          .flip=${boolean('flip', true)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Green',
-    () =>
-      html`
-        <wokwi-led
-          color="green"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Yellow',
-    () =>
-      html`
-        <wokwi-led
-          color="yellow"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Blue',
-    () =>
-      html`
-        <wokwi-led
-          color="blue"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Orange',
-    () =>
-      html`
-        <wokwi-led
-          color="orange"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'White',
-    () =>
-      html`
-        <wokwi-led
-          color="white"
-          .value=${boolean('value', false)}
-          .brightness=${number('brightness', 1.0, brightnessOptions)}
-        ></wokwi-led>
-      `
-  )
-  .add(
-    'Brightness Levels',
-    () =>
-      html`
-        <wokwi-led color="red" label="0" .value=${true} brightness="0"></wokwi-led>
-        <wokwi-led color="red" label="1%" .value=${true} brightness="0.01"></wokwi-led>
-        <wokwi-led color="red" label="10%" .value=${true} brightness="0.1"></wokwi-led>
-        <wokwi-led color="red" label="25%" .value=${true} brightness="0.25"></wokwi-led>
-        <wokwi-led color="red" label="50%" .value=${true} brightness="0.5"></wokwi-led>
-        <wokwi-led color="red" label="75%" .value=${true} brightness="0.75"></wokwi-led>
-        <wokwi-led color="red" label="100%" .value=${true}></wokwi-led>
-      `
-  );
+const Template = ({ color, flip, label, lightColor, value }) =>
+  html`<wokwi-led
+    color=${color}
+    .flip=${flip}
+    label=${label}
+    lightColor=${lightColor}
+    .value=${value}
+  ></wokwi-led>`;
+
+export const Red = Template.bind({});
+Red.args = { color: 'red' };
+
+export const RedWithLabel = Template.bind({});
+RedWithLabel.args = { color: 'red', label: '12' };
+
+export const Flipped = Template.bind({});
+Flipped.args = { color: 'red', flip: true };
+
+export const Green = Template.bind({});
+Green.args = { color: 'green' };
+
+export const Yellow = Template.bind({});
+Yellow.args = { color: 'yellow' };
+
+export const Blue = Template.bind({});
+Blue.args = { color: 'blue' };
+
+export const Orange = Template.bind({});
+Orange.args = { color: 'orange' };
+
+export const White = Template.bind({});
+White.args = { color: 'white' };
+
+export const BrightnessLevels = () =>
+  html`
+    <wokwi-led color="red" label="0" .value=${true} brightness="0"></wokwi-led>
+    <wokwi-led color="red" label="1%" .value=${true} brightness="0.01"></wokwi-led>
+    <wokwi-led color="red" label="10%" .value=${true} brightness="0.1"></wokwi-led>
+    <wokwi-led color="red" label="25%" .value=${true} brightness="0.25"></wokwi-led>
+    <wokwi-led color="red" label="50%" .value=${true} brightness="0.5"></wokwi-led>
+    <wokwi-led color="red" label="75%" .value=${true} brightness="0.75"></wokwi-led>
+    <wokwi-led color="red" label="100%" .value=${true}></wokwi-led>
+  `;