Merge branch 'develop' of https://github.com/nostalgic-css/NES.css into dialog

docs/avatars.stories.js

@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios, boolean,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Avatars', module);
+stories.addDecorator(withKnobs);
+
+stories.add('avatars', () => {
+  const options = radios('class', {
+    'is-small': 'is-small',
+    default: '',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [isRounded, options].join(' ');
+
+  return `<img src="http://www.gravatar.com/avatar" class="nes-avatar ${selectedClasses}">`;
+});

docs/balloons.stories.js

@@ -12,5 +12,5 @@ stories.add('balloon', () => {
     'from-left': 'from-left',
     'from-right': 'from-right',
   }, '');
-  return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
+  return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
 });

docs/buttons.stories.js

@@ -13,6 +13,7 @@ stories.add('button', () => {
     'is-success': 'is-success',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
+    'is-disabled': 'is-disabled',
   }, '');
-  return `<button type="button" class="btn ${extraClass}">Normal</button>`;
+  return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
 });

docs/containers.stories.js

@@ -17,7 +17,7 @@ stories.add('container', () => {
   }, '');
   const selectedClasses = [withTitle, isDark, isRounded, alignment];
 
-  return `<div class="container ${selectedClasses.join(' ')}">
+  return `<div class="nes-container ${selectedClasses.join(' ')}">
       <p class="title">Container</p>
       <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
   </div>`;

docs/icons.stories.js

@@ -8,20 +8,32 @@ stories.addDecorator(withKnobs);
 
 stories.add('icon', () => {
   const selectedClass = select('class', {
-    'icon twitter': 'icon twitter',
-    'icon facebook': 'icon facebook',
-    'icon github': 'icon github',
-    'icon youtube': 'icon youtube',
-    'icon close': 'icon close',
-    'octocat animate': 'octocat animate',
-    'icon trophy': 'icon trophy',
+    'nes-icon twitter': 'nes-icon twitter',
+    'nes-icon facebook': 'nes-icon facebook',
+    'nes-icon github': 'nes-icon github',
+    'nes-icon google': 'nes-icon google',
+    'nes-icon youtube': 'nes-icon youtube',
+    'nes-icon whatsapp': 'nes-icon whatsapp',
+    'nes-icon close': 'nes-icon close',
+    'nes-pokeball': 'nes-pokeball',
+    'nes-bulbasaur': 'nes-bulbasaur',
+    'nes-charmander': 'nes-charmander',
+    'nes-squirtle': 'nes-squirtle',
+    'nes-smartphone': 'nes-smartphone',
+    'nes-kirby': 'nes-kirby',
+    'nes-phone': 'nes-phone',
+    'nes-octocat animate': 'nes-octocat animate',
+    'nes-ash': 'nes-ash',
+    'nes-icon trophy': 'nes-icon trophy',
+    'nes-mario': 'nes-mario',
     'nes-logo': 'nes-logo',
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
-  }, 'icon twitter');
+  }, 'nes-icon twitter');
   const selectedSize = radios('size', {
     default: '',
+    'is-small': 'is-small',
     'is-medium': 'is-medium',
     'is-large': 'is-large',
   }, '');

docs/inputs.stories.js

@@ -8,15 +8,15 @@ stories.addDecorator(withKnobs);
 
 stories.add('input.radio', () => `
       <label>
-        <input type="radio" class="radio" name="answer" checked />
+        <input type="radio" class="nes-radio" name="answer" checked />
         <span>Yes</span>
       </label> <label>
-        <input type="radio" class="radio" name="answer" />
+        <input type="radio" class="nes-radio" name="answer" />
         <span>No</span>
       </label>`)
   .add('input.checkbox', () => `
       <label>
-        <input type="checkbox" class="checkbox" checked />
+        <input type="checkbox" class="nes-checkbox" checked />
         <span>Enable</span>
       </label>`)
   .add('input', () => {
@@ -27,5 +27,5 @@ stories.add('input.radio', () => `
       'is-error': 'is-error',
     }, '');
 
-    return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
+    return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
   });

docs/progress.stories.js

@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, number, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Progress', module);
+stories.addDecorator(withKnobs);
+
+// prettier-ignore
+stories.add('progress', () => {
+  const percentage = number('percentage', 30, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+  const extraClass = radios('class', {
+    default: '',
+    'is-primary': 'is-primary',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+    'is-pattern': 'is-pattern',
+  }, '');
+  return `<progress class="nes-progress ${extraClass}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
+});

docs/table.stories.js

@@ -9,13 +9,14 @@ stories.addDecorator(withKnobs);
 stories.add('table', () => {
   const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
   const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
 
-  const selectedClasses = [isBordered, isCentered];
+  const selectedClasses = [isBordered, isCentered, isDark];
 
-  return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
+  return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
-            <th>Table</th>
+            <th>Table.is-dark</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>

docs/textarea.stories.js

@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Textareas', module);
+stories.addDecorator(withKnobs);
+
+stories.add('textarea', () => {
+  const selectedClass = radios('class', {
+    default: '',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
+
+  return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
+});