Skip to content

feat: Create modifier class to 'no-full-stop' be applied to 'p-stepped-list' and it's variants #5465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

feat: Create modifier class to 'no-full-stop' be applied to 'p-stepped-list' and it's variants #5465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions scss/_patterns_lists.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
}

Expand Down
36 changes: 36 additions & 0 deletions templates/docs/examples/patterns/lists/lists-stepped-no-full-stop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
8 changes: 8 additions & 0 deletions templates/docs/patterns/lists/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down