Merge pull request #85 from niaid/staging

NDS 1.1.10 Release
niaid · Mar 2, 2023 · a852e31 · a852e31
2 parents e78b75c + 81b4407
commit a852e31
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # NIAID Design System (NDS)
 
-VERSION 1.1.9
+VERSION 1.1.10
 
 The [NIAID Design System](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/) was developed within the Office of Communications and Government Relations (OCGR) at the National Institute of Allergy and Infectious Diseases (NIAID) by Booz Allen Hamilton. The design system is designed to aid users with the process of creating policy-compliant websites that conform to design standards and guidance set by NIAID, NIH, HHS, and USWDS.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "niaid-design-system",
-    "version": "1.1.9",
+    "version": "1.1.10",
     "description": "NIAID Design System",
     "main": "public/index.html",
     "dependencies": {

diff --git a/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss b/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss
@@ -1,32 +1,50 @@
 table {
-    width: 100%;
-    margin: $s-1 0;
-    border: $border-block;
-    border-collapse: collapse;
-    border-radius: 0;
-    border-spacing: 0px;
     background: $white;
+    border-collapse: separate;
+    border-spacing: 0;
+    border: $border-block;
+    margin: $s-1 0;
     overflow: hidden;
+    width: 100%;
+
+    // Apply a border to the right of all but the last column
+    th:not(:last-child),
+    td:not(:last-child) {
+        border-right: $border-block;
+    }
+
+    // Apply a border to the bottom of all but the last row
+    >thead>tr:not(:last-child)>th,
+    >thead>tr:not(:last-child)>td,
+    >tbody>tr:not(:last-child)>th,
+    >tbody>tr:not(:last-child)>td,
+    >tfoot>tr:not(:last-child)>th,
+    >tfoot>tr:not(:last-child)>td,
+    >tr:not(:last-child)>td,
+    >tr:not(:last-child)>th,
+    >thead:not(:last-child),
+    >tbody:not(:last-child),
+    >tfoot:not(:last-child) {
+        border-bottom: $border-block;
+    }
     caption {
-        @include font-size($font-size-heading-3);
-        color: $type-heading;
-        font-style: $font-style-heading-3;
-        font-weight: $font-weight-medium;
-        line-height: $line-height-heading;
-        margin-bottom: $s-1;
+        caption-side: bottom;
+        font-size: $s-1 - $s-2px;
+        line-height: $line-height-medium;
+        margin-top: $s-0-50;
+        font-style: italic;
         text-align: left;
     }
-    tr {
-        display: table-row;
-        vertical-align: inherit;
-        border-color: inherit;
+    thead {
+        background-color: $color-theme-1-1-1;
+        color: $white;
+        display: table-header-group;
+        font-weight: $font-weight-semibold;
+        vertical-align: middle;
         th, td {
-            padding: $s-1;
-            text-align: left;
-            vertical-align: top;
-        }
-        th {
-            line-height: normal;
+            border: $s-1px solid $color-theme-1-1-1 !important;
+            color: $white;
+            font-weight: $font-weight-bold;
             a {
                 border-bottom-color: $white;
                 color: $white;
@@ -74,41 +92,27 @@ table {
                 }
             }
         }
-        td {
-            color: $type-body;
-            border: $border-block;
-            &.is-active {
-                background-color: $grey-100;
-            }
-        }
-        &:last-child {
-            td {
-                border-bottom: 0;
-            }
-        }
     }
-    thead {
-        background-color: $color-theme-1-1-1;
-        border-collapse: separate;
-        border-color: inherit;
-        border-radius: 0 0 0 0;
-        color: $white;
-        display: table-header-group;
-        font-weight: $font-weight-semibold;
-        vertical-align: middle;
+    tr {
+        display: table-row;
+        vertical-align: inherit;
+    }
+    th, td {
+        color: $type-body;
+        padding: $s-1;
+        text-align: left;
+        vertical-align: top;
+    }
+    td {
+        &.is-active {
+            background-color: $grey-100;
+        }
     }
     tbody {
         th {
-            border-bottom: $border-block;
-            vertical-align: middle;
+            font-weight: $font-weight-bold;
         }
     }
-    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
-        border-radius: 0 0 0 0;
-    }
-    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
-        border-radius: 0 0 0 0;
-    }
     &.collapsed {
         tbody {
             tr {
@@ -139,7 +143,6 @@ table {
                             transform: translateY(-50%);
                             height: $before-size;
                             width: $before-size;
-                            border-radius: 100%;
                             background: $type-heading;
                             color: $white;
                             @extend %fa-icon;

diff --git a/...s/00-nds/02-molecules/components/component-process-list/_component-process-list-main.twig b/...s/00-nds/02-molecules/components/component-process-list/_component-process-list-main.twig
@@ -0,0 +1,25 @@
+{#
+    ---
+    title: Process List Component
+    ---
+
+    Type: Molecules -> Components
+
+    Description:
+        A process list displays the steps or stages of important instructions or processes.
+
+        Use process lists to create a clear hierarchy and help users easily differentiate between individual steps or stages in a process.
+
+    Parameters:
+        component_process_list_classes: Additional process classes.
+        component_process_list_id: Process ID.
+
+    Last Updated: February 28, 2023
+#}
+
+{% set component_process_list_classes = component_process_list_classes|default() %}
+{% set component_process_list_id = component_process_list_id|default() %}
+
+<div class="component-nds component--process-list {{ component_process_list_classes }}" id="{{ component_process_list_id }}">
+    {% block component_process_list_content %}{% endblock %}
+</div>
diff --git a/...atterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss b/...atterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss
@@ -0,0 +1,77 @@
+// PROCESS LIST
+.component--process-list {
+    margin: $s-1-50 0 $s-2;
+}
+
+.component--process-list__wrapper {
+    list-style-type: none;
+    margin: 0;
+    padding-left: $s-1;
+    position: relative;
+
+    > li {
+        margin: 0;
+        max-width: unset;
+    }
+}
+
+.component--process-list__numbered {
+    counter-reset: process-list;
+
+    .component--process-list__item::before {
+        color: $niaid-blue;
+        content: counter(process-list, decimal);
+        counter-increment: process-list;
+    }
+}
+
+.component--process-list__item {
+    border-left: $s-0-50 solid transparentize($color-theme-1-1-1, 0.8);
+    padding-bottom: $s-1-75;
+    padding-left: $s-2;
+
+    > * {
+        margin-bottom: 0;
+    }
+
+    ul {
+        list-style-type: disc;
+
+        li {
+            margin-bottom: units(0.5);
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &::before {
+        @include flex;
+        background-color: #fff;
+        border-radius: 50%;
+        border: $s-0-50 - $s-3px solid $color-theme-1-1-1;
+        box-shadow: 0 0 0 $s-0-75 - $s-4px $grey-light;
+        content: '';
+        font-size: $s-1;
+        font-weight: $font-weight-black;
+        height: $s-2-50;
+        left: 0;
+        line-height: normal;
+        margin-top: - $s-0-25;
+        position: absolute;
+        width: $s-2-50;
+    }
+
+    &:last-child {
+        border-left-color: transparent;
+        padding-bottom: 0;
+    }
+}
+
+.component--process-list__heading {
+    @include font-size($font-size-heading-5);
+    font-style: $font-style-heading-5;
+    font-weight: $font-weight-medium;
+    margin-top: 0;
+}
diff --git a/...ns/00-nds/02-molecules/components/component-process-list/demo/component-process-list.twig b/...ns/00-nds/02-molecules/components/component-process-list/demo/component-process-list.twig
@@ -0,0 +1,28 @@
+{% embed "@nds/02-molecules/components/component-process-list/_component-process-list-main.twig" with
+    {
+        "component_process_list_id": "process-list-example",
+        "component_process_list_classes": "component--process-list__numbered"
+    }
+%}
+    {% block component_process_list_content %}
+        <ul class="component--process-list__wrapper">
+            <li class="component--process-list__item">
+                <h2 class="component--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="component--process-list__item">
+                <h3 class="component--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="component--process-list__item">
+                <h4 class="component--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>
+        </ul>
+    {% endblock %}
+{% endembed %}
diff --git a/src/css/global/_mixins.scss b/src/css/global/_mixins.scss
@@ -80,4 +80,12 @@
 @mixin vertical-center {
     top: 50%;
     transform: translateY(-50%);
-}
+}
+
+@mixin flex($justify-content: center, $align-items: center, $flex-direction: row, $flex-wrap: wrap) {
+    display: flex;
+    justify-content: $justify-content;
+    align-items: $align-items;
+    flex-direction: $flex-direction;
+    flex-wrap: $flex-wrap;
+}
diff --git a/src/css/global/_variables.scss b/src/css/global/_variables.scss
@@ -164,6 +164,9 @@ $base-spacer: 1rem;
 
 $s-1px: $base-spacer / $base-size-pixels;
 $s-2px: ($base-spacer * 2) / $base-size-pixels;
+$s-3px: ($base-spacer * 3) / $base-size-pixels;
+$s-4px: ($base-spacer * 4) / $base-size-pixels;
+$s-5px: ($base-spacer * 5) / $base-size-pixels;
 $s-0: 0;
 $s-0-25: $base-spacer * .25;
 $s-0-50: $base-spacer * .5;

diff --git a/src/css/global/theme-styles/_corners.scss b/src/css/global/theme-styles/_corners.scss
@@ -108,15 +108,6 @@
     }
     table {
         border-radius: $corner-radius;
-        thead {
-            border-radius: $corner-radius $corner-radius 0 0;
-        }
-        thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
-            border-radius: $corner-radius 0 0 0;
-        }
-        thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
-            border-radius: 0 0 0 $corner-radius;
-        }
     }
     .text-nds {
         &.text--badge,