feat: Create modifier class 'no-full-stop' to be applied to 'p-steppe…

…d-list' and it's variants

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;
+      }
+    }
   }
 }
 

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 %}

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.