From 96af0ad8832b9a858bf22eec2f84e28a7de1d58e Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Thu, 6 May 2021 15:39:37 +0200
Subject: [PATCH] Make stepped list work without headings

---
 scss/_patterns_lists.scss                     | 40 +++++++++++++++----
 .../lists/lists-stepped-without-headings.html | 32 +++++++++++++++
 templates/docs/patterns/lists.md              |  8 +++-
 3 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 templates/docs/examples/patterns/lists/lists-stepped-without-headings.html

diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
index dc3f5ef03b..a117566eca 100644
--- a/scss/_patterns_lists.scss
+++ b/scss/_patterns_lists.scss
@@ -244,11 +244,43 @@ $spv-list-item--inner: null;
     display: none;
   }
 
+  // Indent titles
+  $bullet-width: map-get($line-heights, default-text);
+  $bullet-width-mobile: map-get($line-heights, default-text);
+
   .p-stepped-list__title {
     @extend %numbered-step-title;
+
+    padding-left: $bullet-width-mobile + $sph-inner;
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      padding-left: $bullet-width + $sph-inner;
+    }
+
+    &::before {
+      margin-right: $sph-inner;
+      width: $bullet-width-mobile;
+
+      @media (min-width: $breakpoint-heading-threshold) {
+        width: $bullet-width;
+      }
+    }
+  }
+
+  .p-stepped-list__title + .p-stepped-list__content {
+    margin-left: $bullet-width-mobile + $sph-inner;
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      margin-left: $bullet-width + $sph-inner;
+    }
+  }
+
+  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
+    @media (min-width: $threshold-6-12-col) {
+      margin-left: 0;
+    }
   }
 
-  // Indent titles
   @for $i from 6 through 1 {
     // Bullet sizes for each heading level
     $bullet-width: map-get($line-heights, default-text);
@@ -284,12 +316,6 @@ $spv-list-item--inner: null;
       }
     }
   }
-
-  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
-    @media (min-width: $threshold-6-12-col) {
-      margin-left: 0;
-    }
-  }
 }
 
 @mixin vf-p-stepped-list-detailed {
diff --git a/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html b/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html
new file mode 100644
index 0000000000..69ed8ac964
--- /dev/null
+++ b/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped without headings{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+<ol class="p-stepped-list">
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Download the Ubuntu image for your device in your `Downloads` folder
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Insert your SD card or USB flash drive
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Identify its address by opening the “Disks” application and look for the “Device” line. If the line is in the <code>/dev/mmcblk0p1</code> format, then your drive address is: <code>/dev/mmcblk0</code>. If it is in the <code>/dev/sdb1</code> format, then the address is <code>/dev/sdb</code>
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Unmount it by right-clicking its icon in the launcher bar, the eject icon in a file manager or the square icon in the “Disks” application
+    </p>
+  </li>
+</ol>
+{% endblock %}
diff --git a/templates/docs/patterns/lists.md b/templates/docs/patterns/lists.md
index f3181bff03..16b896c156 100644
--- a/templates/docs/patterns/lists.md
+++ b/templates/docs/patterns/lists.md
@@ -102,7 +102,13 @@ If you want to display a list of items that form a set of steps — like a
 tutorial or instructions — you can use the class `.p-stepped-list`.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped/" class="js-example">
-View example of the stepped list pattern
+View example of the stepped list pattern with headings
+</a></div>
+
+When the steps don't have headings use `<p>` paragraph as `.p-stepped-list__title`.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped-without-headings/" class="js-example">
+View example of the stepped list without headings
 </a></div>
 
 ### Horizontal stepped