Merge pull request #380 from nostalgic-css/develop

Release v2.x
2025-04-20 22:22:05 +02:00 · 2019-12-17 21:05:20 +09:00 · 2019-12-17 21:05:20 +09:00 · 68d6d9e924
commit 68d6d9e924
parent deec4b96de d2235f9c04
82 changed files with 900 additions and 436 deletions
--- a/.github/CONTRIBUTING-es.md
+++ b/.github/CONTRIBUTING-es.md
@ -35,7 +35,8 @@ Este proyecto se apega al Código de Conducta convenido para Contribuyentes. Al
    ```sh
    $ npm install
    ```
-3. Ejecuta el servidor de desarrollo:
+3. Ejecuta el servidor de desarrollo:  
+    To view all available components in an interactive interface, use storybook.
    ```sh
    $ npm run storybook
    ```
--- a/.github/CONTRIBUTING-jp.md
+++ b/.github/CONTRIBUTING-jp.md
@ -35,7 +35,8 @@
    ```sh
    $ npm install
    ```
-3. 開発用サーバを起動する:
+3. 開発用サーバを起動する:  
+    インタラクティブインターフェースで使用可能なすべてのコンポーネントを表示するには、storybookを使ってください
    ```sh
    $ npm run storybook
    ```
--- a/.github/CONTRIBUTING-pt-BR.md
+++ b/.github/CONTRIBUTING-pt-BR.md
@ -35,7 +35,8 @@ Nós estamos muito felizes de você querer contribuir para o projeto! Os próxim
    ```sh
    $ npm install
    ```
-3. Inicie o servidor de desenvolvimento:
+3. Inicie o servidor de desenvolvimento:  
+    To view all available components in an interactive interface, use storybook.
    ```sh
    $ npm run storybook
    ```
--- a/.github/CONTRIBUTING-zh-CN.md
+++ b/.github/CONTRIBUTING-zh-CN.md
@ -35,7 +35,8 @@
    ```sh
    $ npm install
    ```
-3. 启动开发服务器:
+3. 启动开发服务器:  
+    To view all available components in an interactive interface, use storybook.
    ```sh
    $ npm run storybook
    ```
--- a/.github/CONTRUBUTING-ru.md
+++ b/.github/CONTRUBUTING-ru.md
@ -35,7 +35,8 @@
    ```sh
    $ npm install
    ```
-3. Запустите сервер:
+3. Запустите сервер:  
+    To view all available components in an interactive interface, use storybook.
    ```sh
    $ npm run storybook
    ```
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1 @@
+github: BcRikko
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,7 @@ node_modules
 css
 storybook-static
 .DS_Store
+
+# Ignoring built up css and map files
+scss/*.css
+scss/*.css.map
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -35,7 +35,8 @@ We're really happy you want to contribute to the project! ❤️ The following s
    ```sh
    $ npm install
    ```
-3. Start up the dev server:
+3. Start up the dev server:  
+    To view all available components in an interactive interface, use storybook.
    ```sh
    $ npm run storybook
    ```
--- a/docs/script.js
+++ b/docs/script.js
@ -17,7 +17,12 @@ const sampleCollection = [
 <button type="button" class="nes-btn is-success">Success</button>
 <button type="button" class="nes-btn is-warning">Warning</button>
 <button type="button" class="nes-btn is-error">Error</button>
-<button type="button" class="nes-btn is-disabled">Disabled</button>`,
+<button type="button" class="nes-btn is-disabled">Disabled</button>
+
+<label class="nes-btn">
+  <span>Select your file</span>
+  <input type="file">
+</label>`,
  },
  {
    title: 'radios',
@ -339,21 +344,45 @@ const sampleCollection = [
  {
    title: 'balloons',
    showCode: false,
-    code: `<section class="message-list">
-  <section class="message -left">
-    <i class="nes-bcrikko"></i>
-    <!-- Balloon -->
-    <div class="nes-balloon from-left">
-      <p>Hello NES.css</p>
-    </div>
-  </section>
+    code: `<section class="nes-container">
+  <section class="message-list">
+    <section class="message -left">
+      <i class="nes-bcrikko"></i>
+      <!-- Balloon -->
+      <div class="nes-balloon from-left">
+        <p>Hello NES.css</p>
+      </div>
+    </section>

-  <section class="message -right">
-    <!-- Balloon -->
-    <div class="nes-balloon from-right">
-      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-    </div>
-    <i class="nes-bcrikko"></i>
+    <section class="message -right">
+      <!-- Balloon -->
+      <div class="nes-balloon from-right">
+        <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+      </div>
+      <i class="nes-bcrikko"></i>
+    </section>
+  </section>
+</section>
+
+<!-- Balloon 'is-dark'  -->
+<section class="nes-container is-dark">
+  <section class="message-list">
+      <section class="message -left">
+        <i class="nes-bcrikko"></i>
+        <!-- Balloon -->
+        <div class="nes-balloon from-left is-dark">
+          <p>Hello NES.css</p>
+        </div>
+      </section>
+
+      <section class="message -right">
+        <!-- Balloon -->
+        <div class="nes-balloon from-right is-dark">
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+        </div>
+        <i class="nes-bcrikko"></i>
+      </section>
+    </section>
  </section>
 </section>`,
  },
@ -362,7 +391,7 @@ const sampleCollection = [
    showCode: false,
    code: `<p class="nes-balloon from-left nes-pointer">
  This is not a clickable element, but it's an area of the pointer.
-</p>`
+</p>`,
  },
  {
    title: 'badges',
@ -415,6 +444,8 @@ const sampleCollection = [
    code: `<section class="icon-list">
  <!-- heart -->
  <i class="nes-icon is-large heart"></i>
+  <i class="nes-icon is-large is-half heart"></i>
+  <i class="nes-icon is-large is-transparent heart"></i>
  <i class="nes-icon is-large heart is-empty"></i>

  <!-- star -->
@ -580,11 +611,15 @@ const contributors = [
  'alexd99',
  'alexgleason',
  'agarzola',
+  'AlphaWong',
+  'brendansparrow',
  'Ermakoy',
  'fleeting',
  'JamesIves',
  'jsoref',
  'KOREAN139',
+  'KalobTaulien',
+  'HiKaylum',
  'LukBukkit',
  'otaviopace',
  'Pedro-Souza',
@ -594,6 +629,7 @@ const contributors = [
  'lucasjs',
  'musavvirahmed',
  'sinofp',
+  'thisisabhinay',
  'tnantoka',
 ];

--- a/package-lock.json
+++ b/package-lock.json
@ -6362,6 +6362,12 @@
        }
      }
    },
+    "file-type": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-11.1.0.tgz",
+      "integrity": "sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g==",
+      "dev": true
+    },
    "filesize": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@ -6651,7 +6657,8 @@
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@ -6675,13 +6682,15 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@ -6698,19 +6707,22 @@
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@ -6841,7 +6853,8 @@
          "version": "2.0.3",
          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@ -6855,6 +6868,7 @@
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@ -6871,6 +6885,7 @@
          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@ -6879,13 +6894,15 @@
          "version": "0.0.8",
          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@ -6906,6 +6923,7 @@
          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@ -6994,7 +7012,8 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@ -7008,6 +7027,7 @@
          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@ -7103,7 +7123,8 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@ -7145,6 +7166,7 @@
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@ -7166,6 +7188,7 @@
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@ -7214,13 +7237,15 @@
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.3",
          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
--- a/package.json
+++ b/package.json
@ -39,6 +39,9 @@
    "nes",
    "framework"
  ],
+  "engines": {
+    "node": "10.x"
+  },
  "author": "BcRikko (https://github.com/Bcrikko)",
  "license": "MIT",
  "bugs": {
@ -54,6 +57,7 @@
    "@storybook/html": "^5.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
+    "classnames": "^2.2.6",
    "clean-css-cli": "^4.2.1",
    "commitizen": "^3.1.1",
    "css-loader": "^2.0.0",
@ -109,7 +113,9 @@
  },
  "lint-staged": {
    "scss/**/*.scss": [
-      "npm run postbuild"
+      "npm run prebuild:stylelint",
+      "npm run postbuild",
+      "git add"
    ],
    "*.js": [
      "eslint '.storybook/**/*.js' 'story/**/*.js'"
@ -153,7 +159,18 @@
    ]
  },
  "eslintConfig": {
-    "extends": "airbnb-base"
+    "extends": "airbnb-base",
+    "rules": {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          "devDependencies": [
+            "**/*.stories.js",
+            "**/*.template.js"
+          ]
+        }
+      ]
+    }
  },
  "eslintIgnore": [
    "docs/*"
--- a/scss/elements/balloons.scss
+++ b/scss/elements/balloons.scss
@ -1,3 +1,27 @@
+@mixin box-shadow($color, $fromLeft: true) {
+  @if $fromLeft {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      -4px 4px $color,
+      0 4px,
+      -8px 4px,
+      -4px 8px,
+      -8px 8px;
+  } @else {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      4px 4px $color,
+      0 4px,
+      8px 4px,
+      4px 8px,
+      8px 8px;
+  }
+}
+
 .nes-balloon {
  @include rounded-corners();

@ -18,6 +42,46 @@
    content: "";
  }

+  &.is-dark {
+    @include rounded-corners(true);
+
+    color: $background-color;
+    background: $base-color;
+    border-image-outset: 2;
+    box-shadow: 0 0 0 8px $base-color;
+
+    &.from-left,
+    &.from-right {
+      &::before {
+        background-color: $base-color;
+        border-color: $background-color;
+      }
+
+      &::after {
+        color: $background-color;
+        background-color: $base-color;
+      }
+    }
+
+    &.from-left {
+      &::before {
+        box-shadow: -5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color);
+      }
+    }
+
+    &.from-right {
+      &::before {
+        box-shadow: 5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color, false);
+      }
+    }
+  }
+
  &.from-left {
    &::before,
    &::after {
@ -40,15 +104,7 @@
      margin-right: 8px;
      color: $base-color;
      background-color: $background-color;
-      // prettier-ignore
-      box-shadow:
-        -4px 0,
-        4px 0,
-        -4px 4px $background-color,
-        0 4px,
-        -8px 4px,
-        -4px 8px,
-        -8px 8px;
+      @include box-shadow($background-color);
    }
  }

@ -73,15 +129,7 @@
      height: 4px;
      margin-left: 8px;
      background-color: $background-color;
-      // prettier-ignore
-      box-shadow:
-        -4px 0,
-        4px 0,
-        4px 4px $background-color,
-        0 4px,
-        8px 4px,
-        4px 8px,
-        8px 8px;
+      @include box-shadow($background-color, false);
    }
  }
 }
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@ -78,4 +78,10 @@
      @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
    }
  }
+
+  input[type="file"] {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
 }
--- a/scss/form/inputs.scss
+++ b/scss/form/inputs.scss
@ -8,7 +8,7 @@

  @include compact-rounded-corners();

-  width: 100%;
+  width: calc(100% - #{2 * $border-size});
  padding: 0.5rem 1rem;
  margin: 4px;
  background-clip: padding-box;
--- a/scss/form/selects.scss
+++ b/scss/form/selects.scss
@ -11,7 +11,7 @@
  $colors: ($base-color, map-get($default-colors, "shadow"));

  position: relative;
-  width: 100%;
+  width: calc(100% - #{2 * $border-size});
  margin: 4px;

  select {
--- a/scss/icons/heart.scss
+++ b/scss/icons/heart.scss
@ -19,6 +19,46 @@ $icon-heart: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
 );

+// prettier-ignore
+$icon-heart-half: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,3,3,3,2,0,0,0,2,0,0,0,2,0,0),
+  (2,3,1,1,3,3,2,0,2,0,0,0,0,0,2,0),
+  (2,3,1,3,3,3,3,2,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (0,2,3,3,3,3,3,3,0,0,0,0,0,2,0,0),
+  (0,0,2,3,3,3,3,3,0,0,0,0,2,0,0,0),
+  (0,0,0,2,3,3,3,3,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,3,3,3,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,3,3,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,4,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
+// prettier-ignore
+$icon-heart-transparent: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0),
+  (2,0,0,0,0,0,2,0,2,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,2,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (0,2,0,0,0,0,0,0,0,0,0,0,0,2,0,0),
+  (0,0,2,0,0,0,0,0,0,0,0,0,2,0,0,0),
+  (0,0,0,2,0,0,0,0,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,0,0,0,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
 $icon-heart-empty-colors: (#adafbb);
 // prettier-ignore
 $icon-heart-empty: (
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@ -70,6 +70,12 @@
  &.heart::before {
    @include pixelize($default-size, $icon-heart, $icon-heart-colors);
  }
+  &.heart.is-half::before {
+    @include pixelize($default-size, $icon-heart-half, $icon-heart-colors);
+  }
+  &.heart.is-transparent::before {
+    @include pixelize($default-size, $icon-heart-transparent, $icon-heart-colors);
+  }
  &.heart.is-empty::before {
    @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
  }
--- a/scss/pixel-arts/ash.scss
+++ b/scss/pixel-arts/ash.scss
@ -33,5 +33,6 @@
    background: transparent;

    @include pixelize($size, $ash, $ash-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@ -35,5 +35,6 @@
    background: transparent;

    @include pixelize($size, $bcrikko, $bcrikko-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/bulbasaur.scss
+++ b/scss/pixel-arts/bulbasaur.scss
@ -35,5 +35,6 @@
    background: transparent;

    @include pixelize($size, $bulbasaur, $bulbasaur-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/charmander.scss
+++ b/scss/pixel-arts/charmander.scss
@ -36,5 +36,6 @@
    background: transparent;

    @include pixelize($size, $charmander, $charmander-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/kirby.scss
+++ b/scss/pixel-arts/kirby.scss
@ -34,5 +34,6 @@
    background: transparent;

    @include pixelize($size, $kirby, $kirby-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/mario.scss
+++ b/scss/pixel-arts/mario.scss
@ -34,5 +34,6 @@
    background: transparent;

    @include pixelize($size, $mario, $mario-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/nes-icon.scss
+++ b/scss/pixel-arts/nes-icon.scss
@ -29,5 +29,6 @@
    background: transparent;

    @include pixelize($size, $logo, $logo-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@ -29,5 +29,6 @@
    background: transparent;

    @include pixelize($size, $logo, $logo-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/octocat.scss
+++ b/scss/pixel-arts/octocat.scss
@ -51,6 +51,7 @@
    background: transparent;

    @include pixelize($size, $octocat-1, $octocat-colors);
+    @include fill-gaps();
  }

  &.animate::before {
--- a/scss/pixel-arts/phone.scss
+++ b/scss/pixel-arts/phone.scss
@ -39,5 +39,6 @@
    background: transparent;

    @include pixelize($size, $phone, $phone-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/pokeball.scss
+++ b/scss/pixel-arts/pokeball.scss
@ -32,5 +32,6 @@
    background: transparent;

    @include pixelize($size, $pokeball, $pokeball-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/smartphone.scss
+++ b/scss/pixel-arts/smartphone.scss
@ -45,5 +45,6 @@
    background: transparent;

    @include pixelize($size, $smartphone, $smartphone-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@ -29,5 +29,6 @@
    background: transparent;

    @include pixelize($size, $logo, $logo-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@ -30,5 +30,6 @@
    background: transparent;

    @include pixelize($size, $logo, $logo-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/pixel-arts/squirtle.scss
+++ b/scss/pixel-arts/squirtle.scss
@ -35,5 +35,6 @@
    background: transparent;

    @include pixelize($size, $squirtle, $squirtle-colors);
+    @include fill-gaps();
  }
 }
--- a/scss/utilities/_index.scss
+++ b/scss/utilities/_index.scss
@ -1,6 +1,7 @@
@charset "utf-8";

@import "animations.scss";
+@import "fill-gaps.scss";
@import "icon-mixin.scss";
@import "rounded-corners-mixin.scss";
@import "visually-hidden.scss";
--- a/scss/utilities/fill-gaps.scss
+++ b/scss/utilities/fill-gaps.scss
@ -0,0 +1,5 @@
+// Fill gaps in pixel art dots
+// `transform` property conflict when used for nes-icon
+@mixin fill-gaps() {
+  transform: rotate(0);
+}
--- a/story/_helpers/icons.js
+++ b/story/_helpers/icons.js
@ -0,0 +1,44 @@
+export const Icons = {
+  twitter: 'twitter',
+  facebook: 'facebook',
+  github: 'github',
+  google: 'google',
+  youtube: 'youtube',
+  whatsapp: 'whatsapp',
+  gmail: 'gmail',
+  linkedin: 'linkedin',
+  instagram: 'instagram',
+  close: 'close',
+  coin: 'coin',
+  trophy: 'trophy',
+};
+
+export const Sprites = {
+  '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-mario': 'nes-mario',
+  'nes-logo': 'nes-logo',
+  'nes-jp-logo': 'nes-jp-logo',
+  'snes-logo': 'snes-logo',
+  'snes-jp-logo': 'snes-jp-logo',
+};
+
+export const Reactions = {
+  heart: 'heart',
+  star: 'star',
+  like: 'like',
+};
+
+export const Size = {
+  default: '',
+  'is-small': 'is-small',
+  'is-medium': 'is-medium',
+  'is-large': 'is-large',
+};
--- a/story/_helpers/shared.js
+++ b/story/_helpers/shared.js
@ -0,0 +1,5 @@
+export default {
+  'is-success': 'is-success',
+  'is-warning': 'is-warning',
+  'is-error': 'is-error',
+};
--- a/story/avatars.stories.js
+++ b/story/avatars.stories.js
@ -1,22 +0,0 @@
-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?s=15" class="nes-avatar ${selectedClasses}"
-    alt="Gravatar Image Example"
-    style="image-rendering: pixelated;">`;
-});
--- a/story/avatars/avatars.stories.js
+++ b/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());
--- a/story/avatars/avatars.template.js
+++ b/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;">
+  `;
+};
--- a/story/badge.stories.js
+++ b/story/badge.stories.js
@ -1,43 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios, number,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Badges', module);
-stories.addDecorator(withKnobs);
-
-stories.add('badges', () => {
-  const optionsLeft = radios('left/only', {
-    'is-dark': 'is-dark',
-    'is-success': 'is-success',
-    'is-primary': 'is-primary',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-  }, 'is-dark');
-
-  const optionsRight = radios('right', {
-    'is-dark': 'is-dark',
-    'is-success': 'is-success',
-    'is-primary': 'is-primary',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-  }, 'is-success');
-
-  const isSplitedIsIconOrDefault = radios('default/splited/icon', {
-    default: '',
-    'is-splited': 'is-splited',
-    'is-icon': 'is-icon',
-  }, 'is-splited');
-
-  const fontSize = number('font-size', 1, {
-    range: true,
-    min: 0,
-    max: 100,
-    step: 0.01,
-  });
-
-  return `<a href="#" class="nes-badge ${isSplitedIsIconOrDefault}" style="font-size:${fontSize}em">
-              <span class="${optionsLeft}">npm</span>
-              <span class="${optionsRight}">1.0.0</span>
-          </a>`;
-});
--- a/story/badge/badge.stories.js
+++ b/story/badge/badge.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Badge from './badge.template';
+
+storiesOf('Badges', module)
+  .addDecorator(withKnobs)
+  .add('Badge', () => Badge());
--- a/story/badge/badge.template.js
+++ b/story/badge/badge.template.js
@ -0,0 +1,38 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const sharedComponentOptions = {
+    'is-dark': 'is-dark',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+  };
+
+  const iconStyle = select('Badge Display', {
+    default: '',
+    'is-splited': 'is-splited',
+    'is-icon': 'is-icon',
+  }, 'is-splited');
+
+  const leftOptions = select('Left Style', {
+    ...sharedComponentOptions,
+  }, 'is-dark');
+
+  const rightOptions = select('Right Style', {
+    ...sharedComponentOptions,
+  }, 'is-success');
+
+  const badgeClasses = classNames(
+    'nes-badge',
+    iconStyle,
+  );
+
+  return `
+    <a href="#" class="${badgeClasses}">
+      <span class="${leftOptions}">npm</span>
+      <span class="${rightOptions}">1.0.0</span>
+    </a>
+  `;
+};
--- a/story/balloons.stories.js
+++ b/story/balloons.stories.js
@ -1,16 +0,0 @@
-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('Ballons', module);
-stories.addDecorator(withKnobs);
-
-stories.add('balloon', () => {
-  const selectedClass = radios('direction', {
-    default: '',
-    'from-left': 'from-left',
-    'from-right': 'from-right',
-  }, '');
-  return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
-});
--- a/story/balloons/balloons.stories.js
+++ b/story/balloons/balloons.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Ballons from './balloons.template';
+
+storiesOf('Balloons', module)
+  .addDecorator(withKnobs)
+  .add('Balloon', () => Ballons());
--- a/story/balloons/balloons.template.js
+++ b/story/balloons/balloons.template.js
@ -0,0 +1,25 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const balloonDirection = select('Direction', {
+    default: '',
+    'from-left': 'from-left',
+    'from-right': 'from-right',
+  }, '');
+
+  const balloonClasses = classNames(
+    'nes-balloon',
+    balloonDirection,
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div class="${balloonClasses}">
+      <p>Hello NES.css</p>
+    </div>
+  `;
+};
--- a/story/buttons.stories.js
+++ b/story/buttons.stories.js
@ -1,19 +0,0 @@
-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('Buttons', module);
-stories.addDecorator(withKnobs);
-
-stories.add('button', () => {
-  const extraClass = radios('class', {
-    default: '',
-    'is-primary': 'is-primary',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-disabled': 'is-disabled',
-  }, '');
-  return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
-});
--- a/story/buttons/buttons.stories.js
+++ b/story/buttons/buttons.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Buttons from './buttons.template';
+
+storiesOf('Buttons', module)
+  .addDecorator(withKnobs)
+  .add('Buttons', () => Buttons());
--- a/story/buttons/buttons.template.js
+++ b/story/buttons/buttons.template.js
@ -0,0 +1,26 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const buttonType = select('Button Type', {
+    button: 'button',
+    file: 'file',
+  }, 'button');
+
+  const buttonClasses = select('Button Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOption,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  return buttonType === 'button' ? `
+    <button type="button" class="nes-btn ${buttonClasses}">Normal</button>
+  ` : `
+    <label class="nes-btn ${buttonClasses}">
+      <span>Select your file</span>
+      <input type="file">
+    </label>
+  `;
+};
--- a/story/containers.stories.js
+++ b/story/containers.stories.js
@ -1,24 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Containers', module);
-stories.addDecorator(withKnobs);
-
-stories.add('container', () => {
-  const withTitle = boolean('with-title', false) ? 'with-title' : '';
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const alignment = radios('alignment', {
-    default: '',
-    'is-centered': 'is-centered',
-    'is-right': 'is-right',
-  }, '');
-  const selectedClasses = [withTitle, isDark, isRounded, alignment];
-
-  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>`;
-});
--- a/story/containers/containers.stories.js
+++ b/story/containers/containers.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Containers from './containers.template';
+
+storiesOf('Containers', module)
+  .addDecorator(withKnobs)
+  .add('Container', () => Containers());
--- a/story/containers/containers.template.js
+++ b/story/containers/containers.template.js
@ -0,0 +1,31 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const isRounded = boolean('is-rounded', false);
+  const withTitle = boolean('with-title', false);
+
+  const containerAlignment = select('Alignment', {
+    default: '',
+    'is-centered': 'is-centered',
+    'is-right': 'is-right',
+  }, '');
+
+  const containerClasses = classNames(
+    'nes-container',
+    containerAlignment,
+    {
+      'is-dark': isDark,
+      'is-rounded': isRounded,
+      'with-title': withTitle,
+    },
+  );
+
+  return `
+    <div class="${containerClasses}">
+      ${withTitle ? '<p class="title">Container</p>' : ''}
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+    </div>
+  `;
+};
--- a/story/dialogs.stories.js
+++ b/story/dialogs.stories.js
@ -1,19 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Dialogs', module);
-stories.addDecorator(withKnobs);
-
-stories.add('dialog', () => {
-  const open = boolean('open', true) ? 'open' : '';
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-  const selectedClasses = [isRounded, isDark];
-
-  return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
-      <p class="title">Dialog</p>
-      <p>Alert: this is a dialog.</p>
-  </div>`;
-});
--- a/story/dialogs/dialogs.stories.js
+++ b/story/dialogs/dialogs.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Dialogs from './dialogs.template';
+
+storiesOf('Dialogs', module)
+  .addDecorator(withKnobs)
+  .add('Dialog', () => Dialogs());
--- a/story/dialogs/dialogs.template.js
+++ b/story/dialogs/dialogs.template.js
@ -0,0 +1,23 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isOpen = boolean('Open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false);
+  const isDark = boolean('is-dark', false);
+
+  const dialogClasses = classNames(
+    'nes-dialog',
+    {
+      'is-rounded': isRounded,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <dialog class="${dialogClasses}" ${isOpen}>
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+    </dialog>
+  `;
+};
--- a/story/icons.stories.js
+++ b/story/icons.stories.js
@ -1,46 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Icons', module);
-stories.addDecorator(withKnobs);
-
-stories.add('icon', () => {
-  const selectedClass = select('class', {
-    '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 gmail': 'nes-icon gmail',
-    'nes-icon linkedin': 'nes-icon linkedin',
-    'nes-icon instagram': 'nes-icon instagram',
-    'nes-icon close': 'nes-icon close',
-    'nes-icon coin': 'nes-icon coin',
-    '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',
-  }, 'nes-icon twitter');
-  const selectedSize = radios('size', {
-    default: '',
-    'is-small': 'is-small',
-    'is-medium': 'is-medium',
-    'is-large': 'is-large',
-  }, '');
-
-  return `<i class="${selectedClass} ${selectedSize}"></i>`;
-});
--- a/story/icons/icons.stories.js
+++ b/story/icons/icons.stories.js
@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Icons from './icons.template';
+import Sprites from './sprites.template';
+import Reactions from './reactions.template';
+
+storiesOf('Icons', module)
+  .addDecorator(withKnobs)
+  .add('Icons', () => Icons())
+  .add('Sprites', () => Sprites())
+  .add('Reactions', () => Reactions());
--- a/story/icons/icons.template.js
+++ b/story/icons/icons.template.js
@ -0,0 +1,23 @@
+import { radios, select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Icons, Size } from '../_helpers/icons';
+
+export default () => {
+  const selectedIcon = select('class', {
+    ...Icons,
+  }, 'twitter');
+
+  const iconSize = radios('Icon Size', {
+    ...Size,
+  }, '');
+
+  const iconClasses = classNames(
+    'nes-icon',
+    selectedIcon,
+    iconSize,
+  );
+  return `
+    <i class="${iconClasses}"></i>
+  `;
+};
--- a/story/icons/reactions.template.js
+++ b/story/icons/reactions.template.js
@ -0,0 +1,33 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Reactions } from '../_helpers/icons';
+
+export default () => {
+  const reactionIcon = select('Reaction Icon', {
+    ...Reactions,
+  }, 'heart');
+
+  const reactionSize = select('Size Class', {
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, 'is-large');
+
+  const reactionFill = select('Fill Class', {
+    default: '',
+    'is-half': 'is-half',
+    'is-transparent': 'is-transparent',
+    'is-empty': 'is-empty',
+  });
+
+  const reactionClasses = classNames(
+    'nes-icon',
+    reactionIcon,
+    reactionSize,
+    reactionFill,
+  );
+  return `
+    <i class="${reactionClasses}"></i>
+  `;
+};
--- a/story/icons/sprites.template.js
+++ b/story/icons/sprites.template.js
@ -0,0 +1,13 @@
+import { select } from '@storybook/addon-knobs';
+
+import { Sprites } from '../_helpers/icons';
+
+export default () => {
+  const selectedSprite = select('class', {
+    ...Sprites,
+  }, 'nes-pokeball');
+
+  return `
+    <i class="${selectedSprite}"></i>
+  `;
+};
--- a/story/inputs.stories.js
+++ b/story/inputs.stories.js
@ -1,43 +0,0 @@
-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('Inputs', module);
-stories.addDecorator(withKnobs);
-
-stories.add('input.radio', () => {
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-
-  return (
-    `<label>
-      <input type="radio" class="nes-radio ${isDark}" name="answer" checked />
-      <span>Yes</span>
-    </label>
-    <label>
-      <input type="radio" class="nes-radio ${isDark}" name="answer" />
-      <span>No</span>
-    </label>`
-  );
-})
-  .add('input.checkbox', () => {
-    const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-
-    return (
-      `<label>
-        <input type="checkbox" class="nes-checkbox ${isDark}" checked />
-        <span>Enable</span>
-      </label>`
-    );
-  })
-  .add('input', () => {
-    const selectedClass = radios('class', {
-      default: '',
-      'is-success': 'is-success',
-      'is-warning': 'is-warning',
-      'is-error': 'is-error',
-      'is-dark': 'is-dark',
-    }, '');
-
-    return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
-  });
--- a/story/inputs/checkboxes.template.js
+++ b/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>
+  `;
+};
--- a/story/inputs/input.template.js
+++ b/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">
+  `;
+};
--- a/story/inputs/inputs.stories.js
+++ b/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());
--- a/story/inputs/radio.template.js
+++ b/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>
+  `;
+};
--- a/story/lists.stories.js
+++ b/story/lists.stories.js
@ -1,20 +0,0 @@
-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('Lists', module);
-stories.addDecorator(withKnobs);
-
-stories.add('list', () => {
-  const selectedClass = radios('type', {
-    default: 'is-disc',
-    'is-circle': 'is-circle',
-  }, 'is-disc');
-  return `<ul class="nes-list ${selectedClass}">
-            <li>Good morning.</li>
-            <li>Thou hast had a good night's sleep, I hope.</li>
-            <li>Thou hast had a good afternoon</li>
-            <li>Good night.</li>
-          </ul>`;
-});
--- a/story/lists/lists.stories.js
+++ b/story/lists/lists.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Lists from './lists.template';
+
+storiesOf('Lists', module)
+  .addDecorator(withKnobs)
+  .add('List', () => Lists());
--- a/story/lists/lists.template.js
+++ b/story/lists/lists.template.js
@ -0,0 +1,23 @@
+import { radios } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const listOptions = radios('List Type', {
+    'is-disc': 'is-disc',
+    'is-circle': 'is-circle',
+  }, 'is-disc');
+
+  const listClasses = classNames(
+    'nes-list',
+    listOptions,
+  );
+
+  return `
+    <ul class="${listClasses}">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  `;
+};
--- a/story/progress.stories.js
+++ b/story/progress.stories.js
@ -1,28 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, number, radios, boolean,
-} 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',
-  }, '');
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const selectedClasses = [extraClass, isRounded];
-  return `<progress class="nes-progress ${selectedClasses.join(' ')}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
-});
--- a/story/progress/progress.stories.js
+++ b/story/progress/progress.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Progress from './progress.template';
+
+storiesOf('Progress', module)
+  .addDecorator(withKnobs)
+  .add('Progress', () => Progress());
--- a/story/progress/progress.template.js
+++ b/story/progress/progress.template.js
@ -0,0 +1,32 @@
+import { select, boolean, number } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const progressTypes = select('Progress Style', {
+    default: '',
+    'is-dark': 'is-dark',
+    ...sharedOption,
+  }, '');
+
+  const percentage = number('Percentage', 30, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+
+  const progessClasses = classNames(
+    'nes-progress',
+    progressTypes,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <progress class="nes-progress ${progessClasses}" value="${percentage}" max="100" style="width: 100%;"></progress>
+  `;
+};
--- a/story/select.stories.js
+++ b/story/select.stories.js
@ -1,27 +0,0 @@
-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('Selects', module);
-stories.addDecorator(withKnobs);
-
-stories.add('select', () => {
-  const selectedClass = radios('class', {
-    default: '',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-dark': 'is-dark',
-  }, '');
-
-  return `
-    <div class="nes-select ${selectedClass}">
-      <select required>
-        <option value="" disabled selected hidden>Select...</option>
-        <option value="0">To be</option>
-        <option value="1">Not to be</option>
-      </select>
-    </div>
-  `;
-});
--- a/story/select/select.stories.js
+++ b/story/select/select.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Select from './select.template';
+
+storiesOf('Selects', module)
+  .addDecorator(withKnobs)
+  .add('Select', () => Select());
--- a/story/select/select.template.js
+++ b/story/select/select.template.js
@ -0,0 +1,21 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const selectedClass = select('class', {
+    default: '',
+    ...sharedOptions,
+    'is-dark': 'is-dark',
+  }, '');
+
+  return `
+    <div class="nes-select ${selectedClass}">
+      <select required>
+        <option value="" disabled selected hidden>Select...</option>
+        <option value="0">To be</option>
+        <option value="1">Not to be</option>
+      </select>
+    </div>
+  `;
+};
--- a/story/table.stories.js
+++ b/story/table.stories.js
@ -1,37 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Tables', module);
-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, isDark];
-
-  return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table.is-dark</th>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-        </tbody>
-      </table>`;
-});
--- a/story/table/table.stories.js
+++ b/story/table/table.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Table from './table.template';
+
+storiesOf('Tables', module)
+  .addDecorator(withKnobs)
+  .add('Table', () => Table());
--- a/story/table/table.template.js
+++ b/story/table/table.template.js
@ -0,0 +1,41 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isBorderd = boolean('is-bordered', true);
+  const isCentered = boolean('is-centered', false);
+  const isDark = boolean('is-dark', false);
+
+  const tableClasses = classNames(
+    'nes-table',
+    {
+      'is-bordered': isBorderd,
+      'is-centered': isCentered,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <table class="nes-table ${tableClasses}" style="margin:15px 4px 5px 4px">
+      <thead>
+        <tr>
+          <th>Table.is-dark</th>
+          <th>Table.is-bordered</th>
+          <th>Table.is-centered</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Thou hast had a good morning</td>
+          <td>Thou hast had a good afternoon</td>
+          <td>Thou hast had a good night</td>
+        </tr>
+        <tr>
+          <td>Thou hast had a good morning</td>
+          <td>Thou hast had a good afternoon</td>
+          <td>Thou hast had a good night</td>
+        </tr>
+      </tbody>
+    </table>
+  `;
+};
--- a/story/text.stories.js
+++ b/story/text.stories.js
@ -1,19 +0,0 @@
-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('Texts', module);
-stories.addDecorator(withKnobs);
-
-stories.add('text', () => {
-  const extraClass = radios('class', {
-    default: '',
-    'is-primary': 'is-primary',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-disabled': 'is-disabled',
-  }, '');
-  return `<span class="nes-text ${extraClass}">NES.css</span>`;
-});
--- a/story/text/text.stories.js
+++ b/story/text/text.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Text from './text.template';
+
+storiesOf('Text', module)
+  .addDecorator(withKnobs)
+  .add('Text', () => Text());
--- a/story/text/text.template.js
+++ b/story/text/text.template.js
@ -0,0 +1,22 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textOptions = select('Radio Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  const textClasses = classNames(
+    'nes-text',
+    textOptions,
+  );
+
+  return `
+    <span class="nes-text ${textClasses}">NES.css</span>
+  `;
+};
--- a/story/textarea.stories.js
+++ b/story/textarea.stories.js
@ -1,18 +0,0 @@
-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>`;
-});
--- a/story/textarea/textarea.stories.js
+++ b/story/textarea/textarea.stories.js
@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Textarea from './textarea.template';
+
+storiesOf('Textareas', module)
+  .addDecorator(withKnobs)
+  .add('Textarea', () => Textarea());
--- a/story/textarea/textarea.template.js
+++ b/story/textarea/textarea.template.js
@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textareaOption = select('Textarea Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const textareaClasses = classNames(
+    'nes-textarea',
+    textareaOption,
+  );
+
+  return `
+    <textarea id="textarea_field" class="${textareaClasses}" placeholder="NES.css"></textarea>
+  `;
+};