From 7b4c325716dce63e86786ce8961fae6adb2df597 Mon Sep 17 00:00:00 2001
From: Peter French <peterfrench94@gmail.com>
Date: Tue, 4 Feb 2025 09:36:37 +0100
Subject: [PATCH] feat: Create modifier class 'no-full-stop' to be applied to
 'p-stepped-list'  and it's variants

---
 scss/_patterns_lists.scss                     | 14 ++++++++
 .../lists/lists-stepped-no-full-stop.html     | 36 +++++++++++++++++++
 templates/docs/patterns/lists/index.md        |  8 +++++
 3 files changed, 58 insertions(+)
 create mode 100644 templates/docs/examples/patterns/lists/lists-stepped-no-full-stop.html

diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
index 2fda8db7a..ef44f1681 100644
--- a/scss/_patterns_lists.scss
+++ b/scss/_patterns_lists.scss
@@ -426,6 +426,13 @@ $list-step-bullet-margin: $sph--x-large;
 
     margin-bottom: 0; // spacing has been moved onto __item; this ensures that the heading / paragraph spacing matches that of regular headings / paragraphs
     margin-left: 0;
+
+    &.no-full-stop {
+      .p-stepped-list__title::before {
+        content: counter(p-stepped-list-counter);
+        text-align: left;
+      }
+    }
   }
 
   .p-stepped-list__item {
@@ -545,6 +552,13 @@ $list-step-bullet-margin: $sph--x-large;
         }
       }
     }
+
+    &.no-full-stop {
+      .p-stepped-list__title::before {
+        content: counter(p-stepped-list-counter);
+        text-align: left;
+      }
+    }
   }
 }
 
diff --git a/templates/docs/examples/patterns/lists/lists-stepped-no-full-stop.html b/templates/docs/examples/patterns/lists/lists-stepped-no-full-stop.html
new file mode 100644
index 000000000..18b536c76
--- /dev/null
+++ b/templates/docs/examples/patterns/lists/lists-stepped-no-full-stop.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+<ol class="p-stepped-list no-full-stop">
+  <li class="p-stepped-list__item">
+    <h2 class="p-stepped-list__title">
+      Log in to JAAS
+    </h2>
+    <p class="p-stepped-list__content">Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.</p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <h2 class="p-stepped-list__title">
+      Configure a model
+    </h2>
+    <p class="p-stepped-list__content">Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.</p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <h2 class="p-stepped-list__title">
+      Credentials and SSH keys
+    </h2>
+    <p class="p-stepped-list__content">After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.</p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <h2 class="p-stepped-list__title">
+      Design and&nbsp;<strong>build</strong>
+    </h2>
+    <p class="p-stepped-list__content">Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.</p>
+  </li>
+</ol>
+{% endblock %}
diff --git a/templates/docs/patterns/lists/index.md b/templates/docs/patterns/lists/index.md
index 48cbf1269..e61bae4a2 100644
--- a/templates/docs/patterns/lists/index.md
+++ b/templates/docs/patterns/lists/index.md
@@ -133,6 +133,14 @@ When the steps don't have headings use `<p>` paragraph as `.p-stepped-list__titl
 View example of the stepped list without headings
 </a></div>
 
+## Vertical stepped no full stop
+
+The a vatient on the stepped list without the full stop and the counter left aligned
+
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped-no-full-stop/" class="js-example">
+View example of the stepped list pattern with no full stop
+</a></div>
+
 ## Horizontal stepped
 
 The stepped list should be used for step-by-step instructions.