From 94f40512f4dcb7e08fdb106ab10fac0a7e7b3d26 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Mon, 23 Dec 2019 08:29:41 +0100
Subject: [PATCH] chore: update umbrella form story

---
 packages/form-system/package.json             |  1 +
 packages/form-system/stories/index.stories.js | 30 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/form-system/package.json b/packages/form-system/package.json
index c1cd9d2c1..3823a8d6b 100644
--- a/packages/form-system/package.json
+++ b/packages/form-system/package.json
@@ -43,6 +43,7 @@
     "@lion/input-date": "0.4.1",
     "@lion/input-email": "0.4.1",
     "@lion/input-iban": "0.4.1",
+    "@lion/input-range": "0.1.0",
     "@lion/localize": "0.7.1",
     "@lion/radio": "0.2.12",
     "@lion/radio-group": "0.4.4",
diff --git a/packages/form-system/stories/index.stories.js b/packages/form-system/stories/index.stories.js
index d934a9538..dfbee0137 100644
--- a/packages/form-system/stories/index.stories.js
+++ b/packages/form-system/stories/index.stories.js
@@ -13,6 +13,7 @@ import '@lion/input-iban/lion-input-iban.js';
 import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
 import '@lion/input-email/lion-input-email.js';
+import '@lion/input-range/lion-input-range.js';
 import { Required, MinLength } from '@lion/validate';
 
 storiesOf('Forms|Form', module).add(
@@ -62,15 +63,25 @@ storiesOf('Forms|Form', module).add(
         </lion-checkbox-group>
 
         <lion-radio-group
-          class="vertical"
           name="dinosaurs"
           label="Favorite dinosaur"
           .validators="${[new Required()]}"
-          error-message="Dinosaurs error message"
         >
-          <lion-radio name="dinosaurs[]" value="allosaurus" label="allosaurus"></lion-radio>
-          <lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio>
-          <lion-radio name="dinosaurs[]" value="diplodocus" label="diplodocus"></lion-radio>
+          <lion-radio
+            name="dinosaurs[]"
+            .choiceValue="${'allosaurus'}"
+            label="allosaurus"
+          ></lion-radio>
+          <lion-radio
+            name="dinosaurs[]"
+            .choiceValue="${'brontosaurus'}"
+            label="brontosaurus"
+          ></lion-radio>
+          <lion-radio
+            name="dinosaurs[]"
+            .choiceValue="${'diplodocus'}"
+            label="diplodocus"
+          ></lion-radio>
         </lion-radio-group>
 
         <!-- TODO: rich select -->
@@ -94,7 +105,14 @@ storiesOf('Forms|Form', module).add(
           ></lion-checkbox>
         </lion-checkbox-group>
 
-        <!-- TODO: slider -->
+        <lion-input-range
+          name="interest"
+          label="Interest"
+          min="0"
+          max="5"
+          step="0.1"
+          unit="%"
+        ></lion-input-range>
 
         <lion-textarea name="comments" label="Comments"></lion-textarea>