feat(component): add a select component

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>
+  `;
+});

scss/form/_index.scss

@@ -1,3 +1,4 @@
 @charset "utf-8";
 
 @import "inputs.scss";
+@import "select.scss";

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);
+  }
+}