Merge pull request #464 from alphagov/margin-multi-lists

Add spacing for nested lists
alphagov · Jan 25, 2018 · 06f60eb · 06f60eb
2 parents 208889f + 3fd4d5f
commit 06f60eb
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,14 +21,15 @@ Fixes:
 
 - Remove double margin from Date input component
   (PR [#451](https://github.com/alphagov/govuk-frontend/pull/451))
+- Add top margin for nested lists (PR [#464](https://github.com/alphagov/govuk-frontend/pull/464))
+
 
 Internal:
 
 - Replace Mocha/Chai with Jest, re-enable task tests, add back-link component.
   Special thanks to [@htmlandbacon](https://github.com/htmlandbacon) and [@tyom](https://github.com/tyom) for sharing their approaches.
   (PR [#455](https://github.com/alphagov/govuk-frontend/pull/455))
-
-
+- Add example of nested lists to typography and prose scope in review app (PR [#464](https://github.com/alphagov/govuk-frontend/pull/464))
 
 ## 0.0.22-alpha (Breaking release)
 

diff --git a/app/views/examples/prose-scope/index.njk b/app/views/examples/prose-scope/index.njk
@@ -45,6 +45,17 @@
         <li><a href="#">more fruit</a></li>
       </ul>
 
+      <p>Nested lists (ul with ol):</p>
+      <ul>
+        <li>apples
+          <ol>
+            <li>Granny Smith</li>
+            <li>Gala</li>
+          </ol>
+        </li>
+        <li>oranges</li>
+      </ul>
+
       <h3>Another H3 heading after a list</h3>
 
       <h4>An H4 heading</h4>

diff --git a/app/views/examples/typography/index.njk b/app/views/examples/typography/index.njk
@@ -142,6 +142,44 @@
         <li>Payment</li>
         <li>Confirmation</li>
       </ol>
+      <h3 class="govuk-heading-m">Nested govuk-list 1</h3>
+      <ul class="govuk-list govuk-list--number">
+        <li><a class="govuk-link" href="#">Download kit</a></li>
+        <li>
+          <a class="govuk-link" href="#">Simple install guide</a>
+          <ol class="govuk-list govuk-list--number">
+            <li>
+              <a class="govuk-link" href="#">Kit requirements</a>
+              <ul class="govuk-list govuk-list--bullet">
+                <li>Node.js</li>
+                <li>Web browser</li>
+              </ul>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Install the kit</a>
+            </li>
+            <li>
+            <a class="govuk-link" href="#">Run the kit</a>
+            </li>
+          </ol>
+        </li>
+        <li><a class="govuk-link" href="#">Advanced install guide</a></li>
+      </ul>
+      <h3 class="govuk-heading-m">Nested govuk-list 1</h3>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>Fruits
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Apples
+              <ul class="govuk-list govuk-list--bullet">
+                <li>Granny Smith</li>
+                <li>Gala</li>
+              </ul>
+            </li>
+            <li>Oranges</li>
+          </ul>
+        </li>
+        <li>Vegetables</li>
+      </ul>
     </section>
 
     <!-- Body text -->

diff --git a/src/globals/scss/core/_lists.scss b/src/globals/scss/core/_lists.scss
@@ -7,6 +7,10 @@
     @include govuk-responsive-margin($govuk-spacing-responsive-4, "bottom");
     padding-left: 0;
     list-style-type: none;
+
+    .govuk-list { // Margin for nested lists
+      margin-top: $govuk-spacing-scale-2;
+    }
   }
 
   .govuk-list > li {