Merge branch 'develop' into 158-cursor-url

docs/icons.stories.js

@@ -14,6 +14,8 @@ stories.add('icon', () => {
     '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 close': 'nes-icon close',
     'nes-pokeball': 'nes-pokeball',
     'nes-bulbasaur': 'nes-bulbasaur',

docs/lists.stories.js

@@ -0,0 +1,20 @@
+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>`;
+});

index.html

@@ -150,6 +150,27 @@ <h2 class="title">Balloons</h2>
       </div>
     </section>
 
+    <section class="nes-container with-title">
+      <h2 class="title">Lists</h2>
+      <div class="lists">
+        <ul class="nes-list is-disc">
+          <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>
+      </div>
+
+      <div class="lists">
+        <ul class="nes-list is-circle">
+          <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>
+      </div>
+    </section>
+
     <section class="nes-container with-title">
       <h2 class="title">Table</h2>
       <div class="tables">
@@ -280,6 +301,14 @@ <h3 class="title">SNS</h3>
           <i class="nes-icon whatsapp"></i>
           <i class="nes-icon whatsapp is-medium"></i>
           <i class="nes-icon whatsapp is-large"></i>
+
+          <i class="nes-icon gmail"></i>
+          <i class="nes-icon gmail is-medium"></i>
+          <i class="nes-icon gmail is-large"></i>
+
+          <i class="nes-icon linkedin"></i>
+          <i class="nes-icon linkedin is-medium"></i>
+          <i class="nes-icon linkedin is-large"></i>
         </div>
       </section>
 

scss/elements/_index.scss

@@ -4,6 +4,7 @@
 @import "containers.scss";
 @import "radios.scss";
 @import "checkboxes.scss";
+@import "lists.scss";
 @import "balloons.scss";
 @import "tables.scss";
 @import "progress.scss";

scss/elements/lists.scss

@@ -0,0 +1,44 @@
+.nes-list {
+  $disc: (
+    (0, 0, 0, 1, 1, 0, 0, 0),
+    (0, 0, 1, 1, 1, 1, 0, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 0, 1, 1, 1, 1, 0, 0),
+    (0, 0, 0, 1, 1, 0, 0, 0)
+  );
+
+  $circle: (
+    (0, 0, 0, 1, 1, 0, 0, 0),
+    (0, 0, 1, 1, 1, 1, 0, 0),
+    (0, 1, 1, 0, 0, 1, 1, 0),
+    (0, 1, 1, 0, 0, 1, 1, 0),
+    (0, 0, 1, 1, 1, 1, 0, 0),
+    (0, 0, 0, 1, 1, 0, 0, 0)
+  );
+  $colors: ($base-color, map-get($default-colors, "shadow"));
+
+  list-style-type: none;
+
+  & li {
+    position: relative;
+  }
+
+  &.is-disc li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize($disc, $colors, 2px);
+  }
+
+  &.is-circle li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize($circle, $colors, 2px);
+  }
+}

scss/icons/gmail.scss

@@ -0,0 +1,20 @@
+$icon-gmail-colors: (#eeecec, #fd2b2b);
+// prettier-ignore
+$icon-gmail: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,2,1,1,1,1,1,1,1,1,1,1,1,1,2,0),
+  (2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2),
+  (2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2),
+  (2,2,1,2,2,1,1,1,1,1,1,2,2,1,2,2),
+  (2,2,1,1,2,2,1,1,1,1,2,2,1,1,2,2),
+  (2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,2,2,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (0,2,1,1,1,1,1,1,1,1,1,1,1,1,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,0,0,0,0,0,0,0,0,0)
+);

scss/icons/icons.scss

@@ -13,6 +13,8 @@
 @import "twitch.scss";
 @import "reddit.scss";
 @import "whatsapp.scss";
+@import "gmail.scss";
+@import "linkedin.scss";
 
 // others
 @import "close.scss";
@@ -112,6 +114,14 @@
     &.whatsapp::before {
       @include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
     }
+
+    &.gmail::before {
+      @include pixelize($icon-gmail, $icon-gmail-colors, $px);
+    }
+
+    &.linkedin::before {
+      @include pixelize($icon-linkedin, $icon-linkedin-colors, $px);
+    }
   }
 
   // default

scss/icons/linkedin.scss

@@ -0,0 +1,20 @@
+$icon-linkedin-colors: (#fff, #2577b9);
+// prettier-ignore
+$icon-linkedin: (
+  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
+  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
+);