DP-6907 change default ordered list type styling in rich text fields (#…

…849)

* DP-6907: Add thrid level to ol pattern with lower roman list style

* DP-6907: Add another level to the ol pattern and classes to add custom list styles

* DP-6907: Add changelog, update markdown file and backstop images

* DP-6907: remove jQuery loop and nest styles manually

changelogs/DP-6907.txt

@@ -0,0 +1,28 @@
+___DESCRIPTION___
+Changed
+Patch
+- DP-6907: Change default ordered list type styling in rich text fields
+
+___SEMANTIC VERSION (see below)___
+
+
+___POST DEPLOY STEPS___
+1. Do this
+2. Then do this
+
+___CHANGE TYPES___
+- Added for new features.
+- Changed for changes in existing functionality.
+- Deprecated for soon-to-be removed features.
+- Removed for now removed features.
+- Fixed for any bug fixes.
+- Security in case of vulnerabilities.
+
+Note: See http://keepachangelog.com/ for more info about changelogs.
+
+___CHANGE IMPACT___
+- Minor
+- Major
+- Patch
+
+Note: Refer to `docs/versioning.md` for more info about change impact according to semantic versioning.

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.json

@@ -1,16 +1,40 @@
 {
-  "orderedList": [{ 
-    "text": "This is a list item in an ordered list" 
-  },{
-    "text": "An ordered list is a list in which the sequence of items is important." 
-  },{
-    "text": "Lists can be nested inside of each other",
-    "sublist" : [{
-      "text":"This is a nested list item"
-    },{
-      "text":"This is another nested list item in an ordered list"
-    }]
-  },{
-    "text":"This is the last list item"
-  }]
-}
+  "orderedList": [
+    {
+      "text": "This is a list item in an ordered list"
+    },
+    {
+      "text": "An ordered list is a list in which the sequence of items is important. Top level item counters are digits"
+    },
+    {
+      "text": "Lists can be nested inside of each other",
+      "sublist": [
+        {
+          "text": "This is a nested list item. After digits list items counters are lower-alpha."
+        },
+        {
+          "text": "This is another nested list item in an ordered list",
+           "sublist": [
+            {
+              "text": "This is a nested list item. After lower-alpha counters, lower-roman counters are used.",
+              "sublist": [
+                {
+                  "text": "This is a nested list item. After lower-roman counters, the counters loop back to digits."
+                },
+                {
+                  "text": "This is another nested list item in an ordered list"
+                }
+              ]
+            },
+            {
+              "text": "This is another nested list item in an ordered list"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "text": "This is the last list item"
+    }
+  ]
+}

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.md

@@ -1,15 +1,22 @@
 ### Description
 An `<ol>`  element with its child `<li>` elements and optional nested child `<ol>` and `<li>` elements.
 
+### List Style Types
+The list style type loop through 3 different counters:
+
+* digits
+* lower-alpha
+* lower-roman
+
 ### Status
 * Stable as of 5.0.0
 
 ### Variables:
 ~~~
-orderedList [{ 
+orderedList [{
   text:
     type: string / required
-  sublist (optional) [{ 
+  sublist (optional) [{
     text:
       type: string / required
   }]

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.twig

@@ -1,12 +1,31 @@
 <ol>
-	{% for list in orderedList %}
-		<li>{{ list.text|raw }}</li>
-		{% if list.sublist %}
-			<ol>
-				{% for sublist in list.sublist %}
-					<li>{{ sublist.text|raw }}</li>
-				{% endfor %}
-			</ol>
-		{% endif %}
-	{% endfor %}
+  {% for list in orderedList %}
+    <li>{{ list.text|raw }}
+    {% if list.sublist %}
+      <ol>
+        {% for sublist in list.sublist %}
+          <li>{{ sublist.text|raw }}
+          {% if sublist.sublist %}
+            <ol>
+              {% for sublist in sublist.sublist %}
+                <li>{{ sublist.text|raw }}
+                {% if sublist.sublist %}
+				            <ol>
+				              {% for sublist in sublist.sublist %}
+				                <li>{{ sublist.text|raw }}</li>
+				              {% endfor %}
+				            </ol>
+				          {% endif %}
+				        </li>
+              {% endfor %}
+            </ol>
+          {% endif %}
+          </li>
+        {% endfor %}
+      </ol>
+      </li>
+    {% endif %}
+  {% endfor %}
 </ol>
+
+

styleguide/source/assets/scss/01-atoms/global/_elements.scss

@@ -47,15 +47,53 @@ ul, ol {
 }
 
 ul ul,
-ol ol,
 ol ul {
   list-style-type: circle;
   padding-left: 30px;
   margin-bottom: 1em;
 }
 
-ol ol {
-  list-style-type: lower-alpha;
+// Custom ol list style types out to 9 levels
+// All decimals after that
+
+ol {
+  list-style-type: decimal;
+
+  ol {
+    list-style-type: lower-alpha;
+
+    ol {
+      list-style-type: lower-roman;
+
+        ol {
+          list-style-type: decimal;
+
+          ol {
+            list-style-type: lower-alpha;
+
+            ol {
+              list-style-type: lower-roman;
+
+              ol {
+                list-style-type: decimal;
+
+                ol {
+                  list-style-type: lower-alpha;
+
+                  ol {
+                    list-style-type: lower-roman;
+
+                    ol {
+                      list-style-type: decimal;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+    }
+  }
 }