LG-4791: Add Process List component styles

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### New Features
 
 - Field validation success is added to form validation ([#265](https://github.com/18F/identity-style-guide/pull/265))
+- Added custom styling for the Process List component. ([#279](https://github.com/18F/identity-style-guide/pull/279))
 
 ### Improvements
 

docs/_components/process-list.md

@@ -0,0 +1,186 @@
+---
+title: Process List
+lead: A process list displays the steps or stages of important instructions or processes.
+---
+
+{% include helpers/base-component.html component="process-list" stylesheet="process-list" %}
+
+## Default
+
+{% capture example %}
+<ol class="usa-process-list">
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Start a process</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque.
+    </p>
+    <ul>
+      <li>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+        lorem non turpis.
+      </li>
+      <li>
+        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+        condimentum.
+      </li>
+      <li>Aliquam erat volutpat. Sed quis velit.</li>
+    </ul>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
+    <p>
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+</ol>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## Connected
+
+{% capture example %}
+<ol class="usa-process-list usa-process-list--connected">
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Start a process</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque.
+    </p>
+    <ul>
+      <li>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+        lorem non turpis.
+      </li>
+      <li>
+        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+        condimentum.
+      </li>
+      <li>Aliquam erat volutpat. Sed quis velit.</li>
+    </ul>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
+    <p>
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+</ol>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## Big
+
+{% capture example %}
+<ol class="usa-process-list usa-process-list--big">
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Start a process</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque.
+    </p>
+    <ul>
+      <li>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+        lorem non turpis.
+      </li>
+      <li>
+        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+        condimentum.
+      </li>
+      <li>Aliquam erat volutpat. Sed quis velit.</li>
+    </ul>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
+    <p>
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+</ol>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## Big, Connected
+
+{% capture example %}
+<ol class="usa-process-list usa-process-list--big usa-process-list--connected">
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Start a process</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque.
+    </p>
+    <ul>
+      <li>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+        lorem non turpis.
+      </li>
+      <li>
+        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+        condimentum.
+      </li>
+      <li>Aliquam erat volutpat. Sed quis velit.</li>
+    </ul>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+  <li class="usa-process-list__item">
+    <h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
+    <p>
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+  </li>
+</ol>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}

docs/_includes/helpers/base-component.html

@@ -2,6 +2,6 @@
 {% assign uswds_url = include.component | append: '/' | prepend: 'https://designsystem.digital.gov/components/' %}
 {% assign sass_url = stylesheet | append: '.scss' | prepend: 'https://github.com/18F/identity-style-guide/blob/main/src/scss/components/_' %}
 
-[View USWDS component]({{ uswds_url }}){: .usa-link--external}
+[View USWDS component for guidance]({{ uswds_url }}){: .usa-link--external}
 
 [View Login.gov SCSS on GitHub]({{ sass_url }}){: .usa-link--external}

scripts/pa11y.sh

@@ -2,8 +2,6 @@
 
 set -o xtrace
 
-JEKYLL_PORT=$(grep '^port:' ./_config.yml | cut -d ' ' -f2)
-JEKYLL_PORT=${JEKYLL_PORT:-4000}
 PA11Y_PORT=$(./node_modules/.bin/get-port)
 RESULTS_DIRECTORY=./tmp/results/pa11y
 
@@ -17,7 +15,7 @@ mkdir -p $RESULTS_DIRECTORY
 
 ./node_modules/.bin/pa11y-ci \
   --sitemap http://0.0.0.0:$PA11Y_PORT/sitemap.xml \
-  --sitemap-find http://localhost:$JEKYLL_PORT \
+  --sitemap-find https://design.login.gov \
   --sitemap-replace http://0.0.0.0:$PA11Y_PORT \
   --json > ${RESULTS_DIRECTORY}/results.json
 

src/scss/components/_process-list.scss

@@ -0,0 +1,43 @@
+.usa-process-list,
+.usa-prose .usa-process-list {
+  padding-left: (units($theme-process-list-counter-size) * 0.5) - (0.3125rem * 0.5);
+}
+
+.usa-process-list:not(.usa-process-list--connected) .usa-process-list__item,
+.usa-prose .usa-process-list:not(.usa-process-list--connected) .usa-process-list__item {
+  border-left-width: 0;
+}
+
+.usa-process-list__item,
+.usa-prose .usa-process-list__item {
+  padding-left: units(2) + (units($theme-process-list-counter-size) * 0.5) - (0.3125rem * 0.5);
+  border-left-width: 0.3125rem;
+
+  &::before {
+    margin-top: #{(units($theme-process-list-counter-size) - (1.125rem * lh('heading', 2))) * -0.5};
+  }
+}
+
+.usa-process-list__heading {
+  font-size: 1.125rem;
+
+  & + * {
+    margin-top: units(1);
+  }
+}
+
+.usa-process-list.usa-process-list--big {
+  padding-left: units(2.5);
+
+  .usa-process-list__item {
+    padding-left: units(6);
+    border-left-width: units(1);
+
+    &::before {
+      margin-top: #{(3.125rem - (1.125rem * lh('heading', 2))) * -0.5};
+      width: 3.125rem;
+      height: 3.125rem;
+      font-size: units(3);
+    }
+  }
+}

src/scss/packages/_components.scss

@@ -20,6 +20,7 @@
 @import '../components/inputs';
 @import '../components/links';
 @import '../components/navbar';
+@import '../components/process-list';
 @import '../components/sidenav';
 @import '../components/spinner';
 @import '../components/typography';

src/scss/uswds-theme/_components.scss

@@ -42,6 +42,14 @@ $theme-footer-font-family: 'body' !default;
 // Form and input
 $theme-checkbox-border-radius: 1.5px !default;
 $theme-input-line-height: 3 !default;
-$theme-input-state-border-width: 2px;
+$theme-input-state-border-width: 2px !default;
 $theme-input-tile-border-radius: 'lg' !default;
 $theme-input-tile-border-width: 1px !default;
+
+// Process List
+$theme-process-list-connector-color: 'base-lighter' !default;
+$theme-process-list-counter-background-color: 'primary-dark' !default;
+$theme-process-list-counter-border-width: 0 !default;
+$theme-process-list-counter-font-size: 'sm' !default;
+$theme-process-list-counter-size: 3 !default;
+$theme-process-list-counter-text-color: 'white' !default;