Improve vertical spacing in heading of Process List item spanning mul…

…tiple lines (#288)

* Improve vertical spacing in heading of Process List item spanning multiple lines

**Why**: So that headings do not appear excessively tight when spanning multiple lines.

* Prepare 6.3.1 release

CHANGELOG.md

@@ -1,7 +1,8 @@
-## Unreleased
+## 6.3.1
 
 ### Bug Fixes
 
+- Improve vertical spacing in heading of Process List item spanning multiple lines. ([#288](https://github.com/18F/identity-style-guide/pull/288))
 - Fix external link icon margin when followed by additional text content. ([#289](https://github.com/18F/identity-style-guide/pull/289))
 
 ## 6.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "identity-style-guide",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "The global style of Login.gov",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",

src/scss/components/_process-list.scss

@@ -14,11 +14,15 @@
   border-left-width: 0.3125rem;
 
   &::before {
-    margin-top: #{(units($theme-process-list-counter-size) - (1.125rem * lh('heading', 2))) * -0.5};
+    margin-top: #{(
+        units($theme-process-list-counter-size) -
+          (1.125rem * lh('heading', $theme-heading-line-height))
+      ) * -0.5};
   }
 }
 
 .usa-process-list__heading {
+  @include u-line-height('heading', $theme-heading-line-height);
   font-size: 1.125rem;
 
   & + * {
@@ -34,7 +38,7 @@
     border-left-width: units(1);
 
     &::before {
-      margin-top: #{(3.125rem - (1.125rem * lh('heading', 2))) * -0.5};
+      margin-top: #{(3.125rem - (1.125rem * lh('heading', $theme-heading-line-height))) * -0.5};
       width: 3.125rem;
       height: 3.125rem;
       font-size: units(3);