From 671334437927356a186cc716a3c7628249d5ff95 Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Thu, 20 Dec 2018 19:36:05 +0100
Subject: [PATCH 1/5] feat(component): add a select component

---
 docs/select.stories.js | 26 +++++++++++++++++++++++++
 scss/form/_index.scss  |  1 +
 scss/form/select.scss  | 43 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 docs/select.stories.js
 create mode 100644 scss/form/select.scss

diff --git a/docs/select.stories.js b/docs/select.stories.js
new file mode 100644
index 0000000..7ed10b6
--- /dev/null
+++ b/docs/select.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, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Select', module);
+stories.addDecorator(withKnobs);
+
+stories.add('select', () => {
+  const selectedClass = radios('class', {
+    default: '',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
+
+  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>
+  `;
+});
diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index b38295f..70c4e1f 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,3 +1,4 @@
 @charset "utf-8";
 
 @import "inputs.scss";
+@import "select.scss";
diff --git a/scss/form/select.scss b/scss/form/select.scss
new file mode 100644
index 0000000..ab2ca2e
--- /dev/null
+++ b/scss/form/select.scss
@@ -0,0 +1,43 @@
+.nes-select {
+  // prettier-ignore
+  $dropdown: (
+    (1,1,1,1,1,1,1),
+    (1,1,1,1,1,1,1),
+    (0,1,1,1,1,1,0),
+    (0,1,1,1,1,1,0),
+    (0,0,1,1,1,0,0),
+    (0,0,0,1,0,0,0),
+  );
+  $colors: ($base-color, map-get($default-colors, "shadow"));
+
+  position: relative;
+  width: 100%;
+
+  select {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: $cursor-click-url, pointer;
+    border: none;
+    border-radius: 0;
+    box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
+
+    &:invalid {
+      color: $color-00;
+    }
+  }
+
+  &::after {
+    @include pixelize($dropdown, $colors);
+
+    position: absolute;
+    top: calc(50% - 11px);
+    right: 36px;
+    width: 2px;
+    height: 2px;
+    font-size: 2px;
+    content: "";
+    transform: scale(1.5);
+  }
+}

From 13d4d7ec9ba361f39e3bacc711789b9a500894cc Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Thu, 20 Dec 2018 20:41:24 +0100
Subject: [PATCH 2/5] feat(component): implement select states, add examples to
 the demo page

re #152
---
 index.html            | 35 ++++++++++++++++++++++++++++++-
 scss/form/select.scss | 49 ++++++++++++++++++++++++++++++++++++++++---
 style.css             | 14 +++++++++++++
 3 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 894c363..70e3882 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+    <link href="./css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
@@ -132,6 +132,39 @@
         <label for="textarea_field">Textarea</label>
         <textarea id="textarea_field" class="nes-textarea"></textarea>
       </div>
+      <div class="field">
+        <label for="selects">Select</label>
+        <div id="selects" class="selects">
+          <div class="nes-select">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-success">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-warning">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-error">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </section>
 
     <section class="balloon nes-container with-title">
diff --git a/scss/form/select.scss b/scss/form/select.scss
index ab2ca2e..d5d6a3e 100644
--- a/scss/form/select.scss
+++ b/scss/form/select.scss
@@ -8,20 +8,19 @@
     (0,0,1,1,1,0,0),
     (0,0,0,1,0,0,0),
   );
-  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   position: relative;
   width: 100%;
 
   select {
     width: 100%;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
     -webkit-appearance: none;
     appearance: none;
     cursor: $cursor-click-url, pointer;
     border: none;
     border-radius: 0;
-    box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
+    box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
 
     &:invalid {
       color: $color-00;
@@ -29,6 +28,8 @@
   }
 
   &::after {
+    $colors: ($base-color, map-get($default-colors, "shadow"));
+
     @include pixelize($dropdown, $colors);
 
     position: absolute;
@@ -40,4 +41,46 @@
     content: "";
     transform: scale(1.5);
   }
+
+  &.is-success {
+    $color: map-get($success-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
+
+  &.is-warning {
+    $color: map-get($warning-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
+
+  &.is-error {
+    $color: map-get($error-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
 }
diff --git a/style.css b/style.css
index 498e264..11d97d1 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,20 @@ div.containers > .nes-container {
   max-width: 400px;
 }
 
+.selects {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 4px;
+}
+
+.selects .nes-select {
+  display: inline-flex;
+}
+
+.nes-select + .nes-select {
+  margin: 0 0 0 24px;
+}
+
 .balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;

From 981307363064a00b702cc364a8a96b688328091e Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Thu, 20 Dec 2018 21:52:06 +0100
Subject: [PATCH 3/5] refactor(select): Refactor #pixelize usage, fix link in
 index.html

Use remove width, height and transform properties and use font-size to adjust #pixelize output.

#152
---
 index.html            |  2 +-
 scss/form/select.scss | 20 +++++---------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 70e3882..3d4e519 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="./css/nes.min.css" rel="stylesheet" />
+    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
diff --git a/scss/form/select.scss b/scss/form/select.scss
index d5d6a3e..1a630dd 100644
--- a/scss/form/select.scss
+++ b/scss/form/select.scss
@@ -8,6 +8,7 @@
     (0,0,1,1,1,0,0),
     (0,0,0,1,0,0,0),
   );
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   position: relative;
   width: 100%;
@@ -28,27 +29,20 @@
   }
 
   &::after {
-    $colors: ($base-color, map-get($default-colors, "shadow"));
-
     @include pixelize($dropdown, $colors);
 
     position: absolute;
     top: calc(50% - 11px);
     right: 36px;
-    width: 2px;
-    height: 2px;
-    font-size: 2px;
+    font-size: 3px;
     content: "";
-    transform: scale(1.5);
   }
 
   &.is-success {
     $color: map-get($success-colors, "normal");
 
     &::after {
-      $colors: ($color, map-get($default-colors, "shadow"));
-
-      @include pixelize($dropdown, $colors);
+      color: $color;
     }
 
     select {
@@ -60,9 +54,7 @@
     $color: map-get($warning-colors, "normal");
 
     &::after {
-      $colors: ($color, map-get($default-colors, "shadow"));
-
-      @include pixelize($dropdown, $colors);
+      color: $color;
     }
 
     select {
@@ -74,9 +66,7 @@
     $color: map-get($error-colors, "normal");
 
     &::after {
-      $colors: ($color, map-get($default-colors, "shadow"));
-
-      @include pixelize($dropdown, $colors);
+      color: $color;
     }
 
     select {

From 607828fd93f11c211438cac747dcf40c0d408f98 Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Thu, 20 Dec 2018 22:38:58 +0100
Subject: [PATCH 4/5] fix(select): change outline-color to match state of the
 component

---
 scss/form/select.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/form/select.scss b/scss/form/select.scss
index 1a630dd..a0a241f 100644
--- a/scss/form/select.scss
+++ b/scss/form/select.scss
@@ -21,6 +21,7 @@
     cursor: $cursor-click-url, pointer;
     border: none;
     border-radius: 0;
+    outline-color: map-get($default-colors, "hover");
     box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
 
     &:invalid {
@@ -46,6 +47,7 @@
     }
 
     select {
+      outline-color: map-get($success-colors, "hover");
       box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
     }
   }
@@ -58,6 +60,7 @@
     }
 
     select {
+      outline-color: map-get($warning-colors, "hover");
       box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
     }
   }
@@ -70,6 +73,7 @@
     }
 
     select {
+      outline-color: map-get($error-colors, "hover");
       box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
     }
   }

From b8686b6af5890a477d16cf6862e45e8550cf13bc Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Sat, 22 Dec 2018 20:31:29 +0100
Subject: [PATCH 5/5] refactor(select): add @BcRikko's suggestions for the
 select component

Change select.scss to selects.scss, add margin to .nes-select, use different color variables,
refactor handling of different select states
---
 scss/form/_index.scss                   |  2 +-
 scss/form/{select.scss => selects.scss} | 52 +++++++++----------------
 style.css                               |  2 +-
 3 files changed, 20 insertions(+), 36 deletions(-)
 rename scss/form/{select.scss => selects.scss} (51%)

diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index 70c4e1f..0d50df3 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,4 +1,4 @@
 @charset "utf-8";
 
 @import "inputs.scss";
-@import "select.scss";
+@import "selects.scss";
diff --git a/scss/form/select.scss b/scss/form/selects.scss
similarity index 51%
rename from scss/form/select.scss
rename to scss/form/selects.scss
index a0a241f..69dd0dc 100644
--- a/scss/form/select.scss
+++ b/scss/form/selects.scss
@@ -12,6 +12,7 @@
 
   position: relative;
   width: 100%;
+  margin: 4px;
 
   select {
     width: 100%;
@@ -25,7 +26,7 @@
     box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
 
     &:invalid {
-      color: $color-00;
+      color: map-get($disabled-colors, shadow);
     }
   }
 
@@ -36,45 +37,28 @@
     top: calc(50% - 11px);
     right: 36px;
     font-size: 3px;
+    pointer-events: none;
     content: "";
   }
 
-  &.is-success {
-    $color: map-get($success-colors, "normal");
+  // prettier-ignore
+  $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");
 
-    &::after {
-      color: $color;
-    }
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      $color: nth($type, 2);
 
-    select {
-      outline-color: map-get($success-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
-    }
-  }
+      &::after {
+        color: $color;
+      }
 
-  &.is-warning {
-    $color: map-get($warning-colors, "normal");
-
-    &::after {
-      color: $color;
-    }
-
-    select {
-      outline-color: map-get($warning-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
-    }
-  }
-
-  &.is-error {
-    $color: map-get($error-colors, "normal");
-
-    &::after {
-      color: $color;
-    }
-
-    select {
-      outline-color: map-get($error-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      select {
+        outline-color: nth($type, 3);
+        box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      }
     }
   }
 }
diff --git a/style.css b/style.css
index 11d97d1..0d4f80b 100644
--- a/style.css
+++ b/style.css
@@ -27,7 +27,7 @@ div.containers > .nes-container {
 }
 
 .nes-select + .nes-select {
-  margin: 0 0 0 24px;
+  margin-left: 24px;
 }
 
 .balloon.nes-container .nes-balloon {