Merge pull request #341 from nostalgic-css/develop

Release v2.x 🚀

.storybook/webpack.config.js

@@ -1,11 +1,21 @@
 const path = require('path');
+const scssFunctions = require('../scripts/scssFunctions');
 
 module.exports = {
   module: {
     rules: [
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              functions: scssFunctions,
+            },
+          },
+        ],
         include: path.resolve(__dirname, '../'),
       },
       {

docs/script.js

@@ -80,6 +80,11 @@ const sampleCollection = [
 <div class="nes-field is-inline">
   <label for="error_field">.input.is-error</label>
   <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
+</div>
+
+<div style="background-color:#212529; padding: 1rem;" class="nes-field is-inline">
+  <label for="dark_field" style="color:#fff;">.input.is-dark</label>
+  <input type="text" id="dark_field" class="nes-input is-dark" placeholder="dark.css">
 </div>`,
   },
   {
@@ -125,6 +130,17 @@ const sampleCollection = [
     <option value="0">To be</option>
     <option value="1">Not to be</option>
   </select>
+</div>
+
+<div style="background-color:#212529; padding: 1rem 1.2rem 1rem 1rem;width:calc(100% + 8px)">
+  <label for="dark_select" style="color:#fff">nes-select.is-dark</label>
+  <div class="nes-select is-dark">
+    <select required id="dark_select">
+      <option value="" disabled selected hidden>Select...</option>
+      <option value="0">To be</option>
+      <option value="1">Not to be</option>
+    </select>
+  </div>
 </div>`,
   },
   {

package.json

@@ -49,28 +49,29 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
     "@semantic-release/exec": "^3.3.0",
-    "@storybook/addon-backgrounds": "^5.0.0",
+    "@storybook/addon-backgrounds": "^5.0.11",
-    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/addon-knobs": "^5.0.11",
     "@storybook/html": "^5.0.0",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.4",
     "clean-css-cli": "^4.2.1",
-    "commitizen": "^3.0.5",
+    "commitizen": "^3.1.1",
     "css-loader": "^2.0.0",
     "cz-conventional-changelog": "^2.1.0",
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
+    "file-type": "^11.0.0",
     "git-rev-sync": "^1.12.0",
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.0.0",
     "prettier": "^1.15.2",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.1.0",
-    "semantic-release": "^15.12.3",
+    "semantic-release": "^15.13.14",
     "style-loader": "^0.23.1",
     "stylelint": "^9.5.0",
     "stylelint-config-prettier": "^4.0.0",

scripts/getFileAsDataURI.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const filetype = require('file-type');
+const fs = require('fs');
+const path = require('path');
+/* eslint-enable */
+
+module.exports = (fileString) => {
+  const filepath = path.resolve(__dirname, fileString.getValue());
+  const fileBuffer = fs.readFileSync(filepath);
+
+  const fileDataURI = fileBuffer.toString('base64');
+  const { mime } = filetype(fileBuffer);
+
+  return `data:${mime};base64,${fileDataURI}`;
+};

scripts/scssFunctions.js

@@ -1,7 +1,9 @@
 const { types } = require('node-sass'); /* eslint-disable-line import/no-extraneous-dependencies */
 
 const getBuildData = require('./getBuildData');
+const getFileAsDataURI = require('./getFileAsDataURI');
 
 module.exports = {
   'build-data()': () => types.String(getBuildData(true)),
+  'get-file-as-data-uri($filepath)': filepath => types.String(getFileAsDataURI(filepath)),
 };

scss/base/variables.scss

@@ -5,8 +5,8 @@ $font-size: 16px !default;
 $base-color: $color-black !default;
 $background-color: $color-white !default;
 
-$cursor-url: url(../assets/cursor.png) !default;
+$cursor-url: url(get-file-as-data-uri("../assets/cursor.png")) !default;
-$cursor-click-url: url(../assets/cursor-click.png) 14 0 !default;
+$cursor-click-url: url(get-file-as-data-uri("../assets/cursor-click.png")) 14 0 !default;
 
 $border-size: 4px !default;
 

scss/elements/buttons.scss

@@ -14,6 +14,8 @@
 
   &:hover,
   &:focus {
+    color: inherit;
+    text-decoration: none;
     background-color: $hover-background;
 
     &::after {

scss/form/inputs.scss

@@ -11,6 +11,7 @@
   width: 100%;
   padding: 0.5rem 1rem;
   margin: 4px;
+  background-clip: padding-box;
 
   &.is-dark {
     @include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));

scss/form/selects.scss

@@ -30,6 +30,11 @@
     }
   }
 
+  &.is-dark select {
+    color: $background-color;
+    background-color: $base-color;
+  }
+
   &::after {
     @include pixelize(3px, $dropdown, $colors);
 
@@ -44,7 +49,8 @@
   $types:
     "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
     "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
-    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
+    "dark" map-get($default-colors, "normal") map-get($default-colors, "hover");
 
   @each $type in $types {
     &.is-#{nth($type, 1)} {

scss/helpers/_index.scss

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+@import "pointer.scss";

scss/helpers/pointer.scss

@@ -0,0 +1,3 @@
+.nes-pointer {
+  cursor: $cursor-click-url, pointer;
+}

scss/nes-core.scss

@@ -8,5 +8,6 @@
 
 @import "base/_index.scss";
 @import "utilities/_index.scss";
+@import "helpers/_index.scss";
 @import "elements/_index.scss";
 @import "form/_index.scss";

story/select.stories.js

@@ -12,6 +12,7 @@ stories.add('select', () => {
     'is-success': 'is-success',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
+    'is-dark': 'is-dark',
   }, '');
 
   return `