feat(): Add additional styles of ordered lists (#479)

* feat(): Add additional styles of ordered lists

* Add more lists examples to the styleguide

* fix(markdown): Introduce additional styles to ordered lists

Co-authored-by: LRubin <[email protected]>
Co-authored-by: Klaudia <[email protected]>

Author: 3 people

src/_sass/components/_markdown.scss

@@ -158,28 +158,64 @@
       & > ul, ol {
         margin-top: 0;
       }
+    }
+  }
 
+  @for $i from 1 through 10 {
+    ol[start="#{$i}"] {
+      @if $i > 1 {
+        counter-reset: section #{$i - 1};
+      } @else {
+        counter-reset: section #{$i};
+      }
     }
   }
 
   ol {
     list-style-type: none;
-    counter-reset: list-items;
+    counter-reset: section;
     padding-left: 25px;
 
-    & > li {
-      counter-increment: list-items;
+    &.lower-roman {
+      li {
+        &::before {
+          content: counters(section, ".", lower-roman) ". ";
+        }
+      }
+    }
+
+    &.upper-roman {
+      li {
+        &::before {
+          content: counters(section, ".", upper-roman) ". ";
+        }
+      }
+    }
+
+    &.lower-alpha {
+      li {
+        &::before {
+          content: counters(section, ".", lower-alpha) ". ";
+        }
+      }
+    }
+
+    &.upper-alpha {
+      li {
+        &::before {
+          content: counters(section, ".", upper-alpha) ". ";
+        }
+      }
+    }
+    
+    li {
       line-height: 30px;
-      position: relative;
 
       &::before {
-        content: counter(list-items) ". ";
-        display: block;
-        top: 0;
+        counter-increment: section;
+        content: counters(section, ".") ". ";
         color: color(primary-dark);
         font-weight: 500;
-        position: absolute;
-        left: -20px;
       }
 
       & > ul, ol {
@@ -188,6 +224,10 @@
     }
   }
 
+  & > ol {
+    padding-left: 0;
+  }
+
   table {
     border-collapse: collapse;
     text-align: left;

src/styleguide.md

@@ -31,20 +31,100 @@ related:
 
 ## Lists
 
-1. one
-    1. nested
-2. two
-    1. nested
-3. three
-    1. nested
+#### unordered
 
 * Item
     * First Subitem
     * Second Subitem
 * Item
     - Subitem
     - Subitem
-* Item
+
+#### ordered
+
+1. one
+2. two
+3. three
+
+
+#### nested ordered
+
+1. one
+    1. nested
+    2. nested
+2. two
+    1. nested
+    2. nested
+3. three
+    1. nested
+    2. nested
+        3. more nested
+        4. more nested
+
+
+#### ordered with start number = 6
+
+{: start="6"}
+1. lorem
+    2. ipsum
+    3. ipsum
+
+#### lower roman
+
+{:.lower-roman}
+1. lorem
+2. ipsum
+    3. nested
+    4. nested
+
+#### upper roman
+
+{:.upper-roman}
+1. lorem
+2. ipsum
+
+#### lower alpha
+
+{:.lower-alpha}
+1. lorem
+    2. lorem nested
+    3. lorem nested
+2. ipsum
+    3. ipsum nested
+    4. ipsum nested
+    5. ipsum nested
+5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
+
+#### upper alpha
+
+{:.upper-alpha}
+1. lorem
+2. ipsum
+    3. nested
+    4. nested
+
+### 2.  Definitions
+
+For purposes of this Addendum, the terms below have the meanings set
+forth below. Capitalized terms that are used but not defined in this
+Addendum have the meanings given in the Agreement.
+
+{: start="2"}
+1. "**Affiliate**" means any entity that directly or indirectly controls, is controlled by or is under common control with the subject entity, where "control" refers to the power to direct or cause the direction of the subject entity, whether through ownership of voting securities, by contract or otherwise.
+2. "**CCPA**" means the California Consumer Privacy Act of 2018, as amended from time to time.
+3. "**Customer Personal Data**" means any Customer Data (as defined in theAgreement) that is Personal Data. For purposes of this Addendum, Customer Personal Data does not include personal information of employees or other representatives of Customer with whom Segment has a direct business relationship.
+4. "**Data Protection Laws**" means, with respect to a party, all privacy,data protection and information security-related laws and regulations applicable to such party's Processing of Personal Data, including, where applicable, EU Data Protection Law and the CCPA.
+    5. Lorem
+    6. ipsum
+
+### 3. General Termination
+
+{:.lower-alpha}
+1. This Addendum forms part of the Agreement and except as expressly set forth in this Addendum, the Agreement remains unchanged and in full force and effect. If there is any conflict between this Addendum and the Agreement, this Addendum shall govern.
+2. Any liabilities arising under this Addendum are subject to the limitations of liability in the Agreement.
+3. This Addendum will be governed by and construed in accordance with governing law and jurisdiction provisions in the Agreement, unless required otherwise by applicable Data Protection Laws.
+4. This Addendum will automatically terminate upon expiration or termination of the Agreement.
 
 {% include components/list-steps.html number="1" heading="Totally new here?" content="Not sure what to track or why? Check out Segment's Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}
 {% include components/list-steps.html number="2" heading="Totally new here?" content="Not sure what to track or why? Check out Segment's Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}