feat: added ul pfe-list styles

Author: heyMP

elements/pfe-sass/extends/_extends.scss

@@ -57,7 +57,29 @@
   }
 }
 
-%ordered-list-primary {
+
+%list--no-bullets {
+  list-style: none;
+  padding-left: 0;
+}
+
+%list--lines {
+  @extend %pfe-list--no-bullets;
+  li {
+      margin-left: 0; // Remove margin-left from WebRH generic lists.
+  }
+  > * {
+      &:not(:last-child) {
+          border-bottom: 1px solid #d2d3d5;   //d2d3d5
+          padding-bottom: pfe-var(content-spacer--body--md);
+      }
+      &:not(:first-child) {
+          padding-top: pfe-var(content-spacer--body--md);
+      }
+  }
+}
+
+%ordered-list--primary {
   // size of the font inside of the circle
   --FontSize: var(--pfe-list-FontSize, 24px);
   // size of the space between the circle and the content

elements/pfe-styles/demo/index.html

@@ -268,6 +268,20 @@ <h2>List styles &amp; paragraphs</h2>
             convallis eget suspendisse consectetur tristique quis in nam parturient. Proin mus a a sem mus nec dapibus elit ac diam facilisi erat lacus scelerisque diam duis a non sapien parturient ad accumsan nunc ridiculus vivamus odio.Ante odio parturient.</li>
           <li>List item: ullamcorper eros odio convallis eget suspendisse </li>
         </ol>
+        <h4>Primary List</h4>
+        <ul class="pfe-list--primary">
+          <li>List item: eu eget <a href="http://foobaz.com">consectetur vestibulum</a> ullamcorper eros odio
+            convallis eget suspendisse consectetur tristique quis in nam parturient. Proin mus a a sem mus nec dapibus elit ac diam facilisi erat lacus scelerisque diam duis a non sapien parturient ad accumsan nunc ridiculus vivamus odio.Ante odio parturient.</li>
+          <li>List item: ullamcorper eros odio convallis eget suspendisse </li>
+        </ul>
+        <pre><code class="lang-markup">&lt;ul class="pfe-list--primary">...&lt;/ul&gt;</code></pre>
+        <h4>Secondary List</h4>
+        <ul class="pfe-list--secondary">
+          <li>List item: eu eget <a href="http://foobaz.com">consectetur vestibulum</a> ullamcorper eros odio
+            convallis eget suspendisse consectetur tristique quis in nam parturient. Proin mus a a sem mus nec dapibus elit ac diam facilisi erat lacus scelerisque diam duis a non sapien parturient ad accumsan nunc ridiculus vivamus odio.Ante odio parturient.</li>
+          <li>List item: ullamcorper eros odio convallis eget suspendisse </li>
+        </ul>
+        <pre><code class="lang-markup">&lt;ul class="pfe-list--secondary">...&lt;/ul&gt;</code></pre>
         <h4>Primary Ordered List</h4>
         <ol class="pfe-list--primary pfe-l-grid pfe-m-gutters pfe-m-all-6-col-on-lg" style="max-width:1000px; margin:auto;">
           <li>

elements/pfe-styles/src/pfe-base.scss

@@ -138,7 +138,14 @@ a {
   cursor: pointer;
 }
 
+.pfe-list--primary {
+  @extend %list--no-bullets;
+}
+
+.pfe-list--secondary {
+  @extend %list--lines;
+}
 
 ol.pfe-list--primary {
-  @extend %ordered-list-primary;
+  @extend %ordered-list--primary;
 }