4 files changed, 33 insertions, 1 deletions

diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx
index 6de2034bf..d7b4d55b5 100644
--- a/uidev/src/stories/badge.stories.tsx
+++ b/uidev/src/stories/badge.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Badge } from '@meetfranz/ui';
+import { Badge, ProBadge } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
 storiesOf('Badge')
@@ -18,4 +18,14 @@ storiesOf('Badge')
       <Badge type="danger">danger</Badge>
       <Badge type="inverted">inverted</Badge>
     </>
+  ))
+  .add('Pro Badge', () => (
+    <>
+      <ProBadge />
+    </>
+  ))
+  .add('Pro Badge inverted', () => (
+    <>
+      <ProBadge inverted />
+    </>
   ));
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index d81808530..c8e9bcbf3 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -76,6 +76,11 @@ storiesOf('Button')
       busy: true,
     })} />
   ))
+  .add('With icon', () => (
+    <WithStoreButton store={createStore({
+      icon: 'mdiInformation',
+    })} />
+  ))
   .add('As link', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 2a5e8b0d5..144855376 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -10,6 +10,7 @@ interface IStoreArgs {
   ctaLabel?: string;
   type?: string;
   dismissable?: boolean;
+  className?: string;
 }
 
 const createStore = (args?: IStoreArgs) => {
@@ -29,6 +30,7 @@ const WithStoreInfobox = observer(({ store, children }: { store: any, children:
       type={store.type}
       ctaOnClick={store.ctaOnClick}
       dismissable={store.dismissable}
+      className={store.className}
     >
       {children}
     </Infobox>
@@ -123,4 +125,11 @@ storiesOf('Infobox')
     >
       Welcome to the world of tomorrow
     </WithStoreInfobox>
+  ))
+  .add('With className', () => (
+    <WithStoreInfobox store={createStore({
+      className: 'franz-is-awesome',
+    })}>
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
   ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index c522a10c7..af5e791d0 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -66,6 +66,14 @@ storiesOf('Input')
       value="faulty input"
       error="This is a generic error message."
     />
+  ))
+  .add('Type number with min & max', () => (
+    <Input
+      {...defaultProps()}
+      type="number"
+      min={1}
+      max={10}
+    />
   ));
 
 storiesOf('Password')