refactor(storybook): storybook enhancement and cleanup

refactored the storybook codebase for all components

re #381

story/avatars/avatars.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Avatars from './avatars.template';
+
+storiesOf('Avatars', module)
+  .addDecorator(withKnobs)
+  .add('Avatar', () => Avatars());

story/avatars/avatars.template.js

@@ -0,0 +1,26 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const avatarSize = select('Avatar Classes', {
+    default: '',
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  const avatarClasses = classNames(
+    'nes-avatar',
+    avatarSize,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
+      alt="Gravatar Image Example"
+      style="image-rendering: pixelated;">
+  `;
+};