Merge pull request #378 from vtfk/adding-icons

Added more icons and simplified how icons are used in stories

Author: runely

src/ui/Button/IconButton.stories.js

@@ -2,6 +2,9 @@ import React, { useState } from 'react'
 import { withKnobs, select, text } from '@storybook/addon-knobs'
 import { getConfig } from '../../../scripts/storybook/storyConfig'
 import { IconButton } from '.'
+import { icons } from '../Icon'
+
+const iconList = Object.keys(icons)
 
 export default getConfig({
   title: 'IconButton',
@@ -10,8 +13,6 @@ export default getConfig({
   argTypes: { onClick: { action: 'clicked' } }
 })
 
-const icons = ['activity', 'add', 'arrowLeft', 'arrowRight', 'check', 'chevronDown', 'chevronUp', 'classes', 'close', 'help', 'home', 'menu', 'pause', 'retry', 'search', 'statistics', 'students']
-
 export function Basic () {
   const [loading, setLoading] = useState(false)
 
@@ -21,23 +22,23 @@ export function Basic () {
   }
 
   return (
-    <IconButton icon={select('Icon', icons, 'add')} onClick={clickHandler} spinner={loading}>
+    <IconButton icon={select('Icon', iconList, 'add')} onClick={clickHandler} spinner={loading}>
       {text('Icon Button text', 'Legg til element')}
     </IconButton>
   )
 }
 
 export function Disabled () {
   return (
-    <IconButton icon={select('Icon', icons, 'add')} disabled>
+    <IconButton icon={select('Icon', iconList, 'add')} disabled>
       {text('Icon Button text', 'Legg til element')}
     </IconButton>
   )
 }
 
 export function ShowSpinner () {
   return (
-    <IconButton icon={select('Icon', icons, 'add')} spinner>
+    <IconButton icon={select('Icon', iconList, 'add')} spinner>
       {text('Icon Button text', 'Legg til element')}
     </IconButton>
   )
@@ -52,7 +53,7 @@ export function Bordered () {
   }
 
   return (
-    <IconButton icon={select('Icon', icons, 'add')} bordered onClick={() => clickHandler()} spinner={loading}>
+    <IconButton icon={select('Icon', iconList, 'add')} bordered onClick={() => clickHandler()} spinner={loading}>
       {text('Icon Button text', 'Legg til element')}
     </IconButton>
   )
@@ -67,6 +68,6 @@ export function WithoutText () {
   }
 
   return (
-    <IconButton icon={select('Icon', icons, 'add')} onClick={() => clickHandler()} spinner={loading} />
+    <IconButton icon={select('Icon', iconList, 'add')} onClick={() => clickHandler()} spinner={loading} />
   )
 }

src/ui/Icon/Icon.stories.js

@@ -1,84 +1,32 @@
 import React from 'react'
 import { getConfig } from '../../../scripts/storybook/storyConfig'
-
-import { Icon } from '.'
+import { withKnobs, select } from '@storybook/addon-knobs'
+import { Icon, icons } from '.'
 
 export default getConfig(
-  { title: 'Icon', component: Icon }
+  {
+    title: 'Icon',
+    component: Icon,
+    decorators: [withKnobs]
+  }
 )
 
+const sizes = ['none', 'xsmall', 'small', 'medium', 'auto']
+
 export function Variants () {
   return (
     <table>
       <tbody>
-        <tr>
-          <td>activity</td>
-          <td><Icon name='activity' /></td>
-        </tr>
-        <tr>
-          <td>add</td>
-          <td><Icon name='add' /></td>
-        </tr>
-        <tr>
-          <td>arrow-left</td>
-          <td><Icon name='arrowLeft' /></td>
-        </tr>
-        <tr>
-          <td>arrow-right</td>
-          <td><Icon name='arrowRight' /></td>
-        </tr>
-        <tr>
-          <td>check</td>
-          <td><Icon name='check' /></td>
-        </tr>
-        <tr>
-          <td>chevron-down</td>
-          <td><Icon name='chevronDown' /></td>
-        </tr>
-        <tr>
-          <td>chevron-up</td>
-          <td><Icon name='chevronUp' /></td>
-        </tr>
-        <tr>
-          <td>classes</td>
-          <td><Icon name='classes' /></td>
-        </tr>
-        <tr>
-          <td>close</td>
-          <td><Icon name='close' /></td>
-        </tr>
-        <tr>
-          <td>help</td>
-          <td><Icon name='help' /></td>
-        </tr>
-        <tr>
-          <td>home</td>
-          <td><Icon name='home' /></td>
-        </tr>
-        <tr>
-          <td>menu</td>
-          <td><Icon name='menu' /></td>
-        </tr>
-        <tr>
-          <td>pause</td>
-          <td><Icon name='pause' /></td>
-        </tr>
-        <tr>
-          <td>retry</td>
-          <td><Icon name='retry' /></td>
-        </tr>
-        <tr>
-          <td>search</td>
-          <td><Icon name='search' /></td>
-        </tr>
-        <tr>
-          <td>statistics</td>
-          <td><Icon name='statistics' /></td>
-        </tr>
-        <tr>
-          <td>students</td>
-          <td><Icon name='students' /></td>
-        </tr>
+        {
+          Object.keys(icons).map((i) => {
+            return (
+              <tr key={i}>
+                <td>{i}</td>
+                <td><Icon name={i} size={select('size', sizes, 'none')} /></td>
+              </tr>
+            )
+          })
+        }
       </tbody>
     </table>
   )