First release

node_modules/nes.css/story/inputs/checkboxes.template.js

@@ -0,0 +1,22 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const checkBoxClasses = classNames(
+    'nes-checkbox',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="checkbox" class="${checkBoxClasses}" checked />
+        <span>Enable</span>
+      </label>
+    </div>
+  `;
+};

node_modules/nes.css/story/inputs/input.template.js

@@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const inputOptions = select('Input Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const inputClasses = classNames(
+    'nes-input',
+    inputOptions,
+  );
+
+  return `
+    <input type="text" id="name_field" class="${inputClasses}" placeholder="NES.css">
+  `;
+};

node_modules/nes.css/story/inputs/inputs.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Input from './input.template';
+import CheckBox from './checkboxes.template';
+import Radio from './radio.template';
+
+storiesOf('Inputs', module)
+  .addDecorator(withKnobs)
+  .add('Input', () => Input())
+  .add('Checkbox', () => CheckBox())
+  .add('Radio', () => Radio());

node_modules/nes.css/story/inputs/radio.template.js

@@ -0,0 +1,27 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const radioClasses = classNames(
+    'nes-radio',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" checked />
+        <span>Yes</span>
+      </label>
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" />
+        <span>No</span>
+      </label>
+    </div>
+  `;
+};