From 2e4ff795a5394b098588c128624cea950f59bc3c Mon Sep 17 00:00:00 2001
From: "lucas.reis" <lucas.reis@radixeng.com.br>
Date: Wed, 12 Dec 2018 20:26:00 -0200
Subject: [PATCH] feat(component): Inserting lists with examples

Inserting tag <ul> to implment list, with two examples

#179
---
 index.html                | 21 +++++++++++++++++
 package-lock.json         | 40 ++++++++++++++++-----------------
 scss/elements/_index.scss |  1 +
 scss/elements/lists.scss  | 47 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 20 deletions(-)
 create mode 100644 scss/elements/lists.scss

diff --git a/index.html b/index.html
index 9d65434..724db92 100644
--- a/index.html
+++ b/index.html
@@ -150,6 +150,27 @@
       </div>
     </section>
 
+    <section class="nes-container with-title">
+      <h2 class="title">Lists</h2>
+      <div class="lists">
+        <ul class="nes-list is-circle">
+          <li>Test1</li>
+          <li>Test2</li>
+          <li>Test3</li>
+          <li>Test4</li>
+        </ul>
+      </div>
+
+      <div class="lists">
+        <ul class="nes-list is-arrow">
+          <li>Test1</li>
+          <li>Test2</li>
+          <li>Test3</li>
+          <li>Test4</li>
+        </ul>
+      </div>
+    </section>
+
     <section class="nes-container with-title">
       <h2 class="title">Table</h2>
       <div class="tables">
diff --git a/package-lock.json b/package-lock.json
index e4ab1d1..1371fb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4332,7 +4332,7 @@
       "dependencies": {
         "domelementtype": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
           "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
           "dev": true
         }
@@ -5092,7 +5092,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -6456,7 +6456,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -6660,7 +6660,7 @@
     },
     "globby": {
       "version": "8.0.1",
-      "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
       "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
       "dev": true,
       "requires": {
@@ -7930,7 +7930,7 @@
     },
     "jest-get-type": {
       "version": "22.4.3",
-      "resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
       "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
       "dev": true
     },
@@ -9092,7 +9092,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         }
@@ -12809,7 +12809,7 @@
     },
     "os-homedir": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
@@ -12834,7 +12834,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
@@ -12871,7 +12871,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -13056,7 +13056,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
@@ -13873,7 +13873,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },
@@ -14496,7 +14496,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
@@ -15038,7 +15038,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {
@@ -15110,7 +15110,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
           "requires": {
@@ -16313,7 +16313,7 @@
     },
     "staged-git-files": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
       "integrity": "sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A==",
       "dev": true
     },
@@ -16462,7 +16462,7 @@
     },
     "string_decoder": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "requires": {
@@ -16494,7 +16494,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
@@ -16509,7 +16509,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
@@ -16709,7 +16709,7 @@
     },
     "stylelint-order": {
       "version": "0.8.1",
-      "resolved": "http://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz",
       "integrity": "sha512-8mp1P2wnI9XShYXVXDsxVigE2eXnc0C2O4ktbwUvTBwjCP4xZskIbUVxp1evSG3OK4R7hXVNl/2BnJCZkrcc/w==",
       "dev": true,
       "requires": {
@@ -16913,7 +16913,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
       "requires": {
diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
index 28d7130..32059dc 100644
--- a/scss/elements/_index.scss
+++ b/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";
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
new file mode 100644
index 0000000..1234ad6
--- /dev/null
+++ b/scss/elements/lists.scss
@@ -0,0 +1,47 @@
+.nes-list {
+  $ball: (
+    (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)
+  );
+
+  $arrow: (
+    (0, 0, 0, 1, 1, 0, 0, 0),
+    (0, 0, 0, 1, 1, 1, 0, 0),
+    (0, 0, 0, 1, 1, 1, 1, 0),
+    (0, 0, 0, 1, 1, 1, 1, 0),
+    (0, 0, 0, 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;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  & li {
+    position: relative;
+  }
+
+  &.is-circle li::before {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: -20px;
+    content: "";
+
+    @include pixelize($ball, $colors, 2px);
+  }
+
+  &.is-arrow li::before {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: -20px;
+    content: "";
+
+    @include pixelize($arrow, $colors, 2px);
+  }
+}