Merge pull request #32 from niaid/staging

NDS v1.0.4

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "niaid-design-system"]
+	path = niaid-design-system
+	url = [email protected]:niaid/niaid-design-system.git

Readme.md

@@ -1,6 +1,6 @@
 # NIAID Design System (NDS)
 
-VERSION 1.0.3
+VERSION 1.0.4
 
 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.
 

gulpfile.js

@@ -17,6 +17,9 @@ const babel = require('gulp-babel');
 const replace = require('gulp-replace');
 const htmlreplace = require('gulp-html-replace');
 const del = require('del');
+var fs = require("fs");
+
+let srcPath = "./niaid-design-system/";
 
 // copyFonts - Copy Font Awesome from node_modules into project.
 gulp.task('copyFonts', () => {
@@ -173,6 +176,67 @@ gulp.task('moveAssets', () => {
         .pipe(gulp.dest('./public_html/webfonts'));
 });
 
+// GULP: cleanNDSSource - Cleans out any gitignored directories before fresh copies from Global Assets are added.
+gulp.task('cleanNDSSource', (cb) => {
+    let dirs = [
+        './source/_patterns/00-nds/**/*',
+        './source/css/global/**/*',
+        './source/css/libraries/**/*',
+        './source/images/global/**/*',
+        './source/js/global/**/*',
+        './source/js/libraries/**/*',
+        './source/js/utilities/**/*'
+    ];
+    return del(dirs, {'force': true, dot: true}, cb);
+});
+
+// GULP: initializeGitSubmodule - Checks to see if NDS is installed. If not, it installs the NDS submodule.
+gulp.task('initializeGitSubmodule', (cb) => {
+    if (!fs.existsSync('./niaid-design-system/')) {
+        console.log("Initializing NDS Submodule");
+        return exec('git submodule add [email protected]:niaid/niaid-design-system.git', function(err, stdout, stderr) {
+            console.log(stdout);
+            cb(err);
+        });
+    }
+    console.log("NDS Submodule Already Installed, Skipping...")
+    return gulp.src('.');
+});
+
+// GULP: updateGitSubmodules - Pulls latest code for each submodule dependency.
+gulp.task('updateGitSubmodules', (cb) => {
+    return exec('git submodule update niaid-design-system', function(err, stdout, stderr) {
+        console.log(stdout);
+        cb(err);
+    });
+});
+
+// GULP: copyGlobalSass - Copy CSS into NDS Documentation
+gulp.task('copyGlobalSass', () => {
+    console.log("Transferring Assets from Global SASS...");
+    gulp.src(srcPath + 'source/css/libraries/**/*').pipe(gulp.dest('./source/css/libraries/'));
+    return gulp.src(srcPath + 'source/css/global/**/*').pipe(gulp.dest('./source/css/global/'));
+});
+
+// GULP: copyGlobalJS - Copy JS into NDS Documentation
+gulp.task('copyGlobalJS', () => {
+    console.log("Transferring Assets from Global JS...");
+    return gulp.src(srcPath + 'source/js/**/*').pipe(gulp.dest('./source/js/'));
+});
+
+// GULP: copyGlobalPatterns - Copy Patterns into NDS Documentation
+gulp.task('copyGlobalPatterns', () => {
+    console.log("Transferring Assets from Global Patterns...");
+    console.log("Copying Patterns...");
+    return gulp.src(srcPath + 'source/_patterns/00-nds/**/*').pipe(gulp.dest('./source/_patterns/00-nds/'));
+});
+
+// GULP: copyGlobalImages - Copy Images into NDS Documentation
+gulp.task('copyGlobalImages', () => {
+    console.log("Transferring Assets from Global Images...");
+    return gulp.src(srcPath + 'source/images/**/*').pipe(gulp.dest('./source/images/'));
+});
+
 // GULP: serveProject - Serves project locally and watches files for changes.
 gulp.task('serveProject', function() {
     browserSync.init({
@@ -205,6 +269,9 @@ gulp.task('default', gulp.series('transfer', 'compile', 'serveProject'));
 // GULP: build - Compile your project assets and build public_html folder for deploy.
 gulp.task('build', gulp.series('clean', 'compile', 'computePaths', 'moveAssets'));
 
+// GULP: update - Update to the latest release of NDS. Warning: This will overwrite files in the _patterns/00-nds/ directory, as well as the global/ and libraries/ folders of css/ and js/
+gulp.task('update', gulp.series('cleanNDSSource', 'initializeGitSubmodule', 'updateGitSubmodules', 'copyGlobalImages', 'copyGlobalSass', 'copyGlobalJS', 'copyGlobalPatterns'));
+
 // HELPER FUNCTIONS
 
 // addPage - Helper function for the computePaths() function. Determines the path and destination of the page.

source/_patterns/00-nds/01-atoms/icons/icon-document/demo/icon-document.twig

@@ -4,15 +4,15 @@
             {% include "@nds/01-atoms/icons/icon-document/_icon-document-main.twig" with 
                 {
                     "icon_document_type": "word",
-                    "icon_document_href": "#"
+                    "icon_document_href": "jake.pdf"
                 }
             %}
         </div>
         <div class="col">
             {% include "@nds/01-atoms/icons/icon-document/_icon-document-main.twig" with 
                 {
                     "icon_document_type": "excel",
-                    "icon_document_href": "#"
+                    "icon_document_href": "jake.doc"
                 }
             %}
         </div>

source/_patterns/00-nds/01-atoms/icons/icon-document/icon-document.scss

@@ -4,7 +4,7 @@
     height: $s-4;
     width: $s-4;
     padding: 0;
-    border: 0;
+    border: $s-1px solid $border-light;
     &__wrapper {
         display: flex;
         position: relative;
@@ -43,4 +43,8 @@
             border: 0;
         }
     }
+    & + .ext-link-icon,
+    & + .text--badge--document {
+        display: none;
+    }
 }

source/_patterns/00-nds/01-atoms/input/_input/input-nds.scss

@@ -9,15 +9,19 @@
 
 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     color: $input-placeholder;
+    font-family: $font-stack-public-sans;
 }
 :-moz-placeholder, /* Firefox 4 to 18 */
 ::-moz-placeholder { /* Firefox 19+ */
     color: $input-placeholder;
     opacity: 1;
+    font-family: $font-stack-public-sans;
 }
 :-ms-input-placeholder { /* IE 10+ */
     color: $input-placeholder;
+    font-family: $font-stack-public-sans;
 }
 :-moz-placeholder { /* Firefox 18- */
     color: $input-placeholder;
+    font-family: $font-stack-public-sans;
 }

source/_patterns/00-nds/01-atoms/input/input-date-picker/input-date-picker.scss

@@ -25,6 +25,7 @@
 }
 
 .datepicker {
+    position: absolute;
     border: 0;
     padding: 0;
     background-color: transparent;

source/_patterns/00-nds/01-atoms/input/input-select/input-select.scss

@@ -4,7 +4,7 @@
         width: 100% !important;
         .select2-selection  {
             height: auto;
-            padding: .625rem 4rem .625rem 1rem;
+            padding: $s-0-50 $s-4 $s-0-50 $s-1;
             background: $white;
             border: $s-1px solid $input-border;
             border-radius: 0;
@@ -69,8 +69,8 @@
                         margin: 0 .25rem 0 0;
                         font-style: normal;
                         border-radius: 0;
-                        font-size: 1rem;
-                        padding: .375rem 2.5rem .375rem 1rem;
+                        font-size: $s-1;
+                        padding: $s-0-25 $s-2-50 $s-0-25 $s-1;
                         background-image: none !important;
                         background: $color-theme-1-2-1;
                         color: $white !important;
@@ -94,9 +94,6 @@
                                 color: $white;
                             }
                         }
-                        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-                            padding: .4rem 2.5rem .4rem 1rem;
-                        }
                     }
                 }
             }
@@ -109,18 +106,13 @@
                     .select2-selection__rendered {
                         font-style: normal;
                         font-size: $s-1;
-                        padding: .375rem 2.5rem .375rem 1rem;
+                        padding: $s-0-25 $s-2-50 $s-0-25 $s-1;
                         background-image: none !important;
                         background: $color-theme-1-2-1;
                         color: $white !important;
                         border: 0 !important;
                         white-space: normal;
                     }
-                    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-                        .select2-selection__rendered {
-                            padding: .4rem 2.5rem .4rem 1rem;
-                        }
-                    }
                 }
             }
             .single-clear {
@@ -149,7 +141,7 @@
         }
         &.selection-made-multi {
             .select2-selection  {
-                padding: .25rem 4rem .25rem .25rem;
+                padding: $s-0-25 $s-4 $s-0-25 $s-0-25;
             }
         }
         &.select2-container--open {

source/_patterns/00-nds/01-atoms/input/input-validation/_input-validation-main.twig

@@ -0,0 +1,21 @@
+{#
+    ---
+    title: Input Validation
+    ---
+
+    Type: Atoms -> Input
+
+    Description:
+        A pattern to display validation errors on form inputs.
+
+    Parameters:
+        input_validation_classes: Additional input validation classes.
+        input_validation_text: The validation error text.
+
+    Last Updated: April 30, 2021
+#}
+
+{% set input_validation_classes = input_validation_classes|default() %}
+{% set input_validation_text = input_validation_text|default("Error with Entry.") %}
+
+<div class="input-nds input--validation {{ input_validation_classes }}">{{ input_validation_text }}</div>

source/_patterns/00-nds/01-atoms/input/input-validation/input-validation.scss

@@ -0,0 +1,7 @@
+.input--validation {
+    display: none;
+    color: $error;
+    font-size: $s-0-75;
+    padding: $s-0-25 0;
+    float: right;
+}

source/_patterns/00-nds/01-atoms/links/link-external/demo/link-external.twig

@@ -3,4 +3,11 @@
         "link_default_text": "National Institute of Allergy and Infectious Diseases",
         "link_default_href": "https://www.niaid.nih.gov",
     }
+%}
+<br>
+{% include "@nds/01-atoms/links/link-default/_link-default-main.twig" with
+    {
+        "link_default_text": "Example PDF",
+        "link_default_href": "https://nds.niaid.nih.gov/example.pdf",
+    }
 %}

source/_patterns/00-nds/01-atoms/links/link-external/link-external.js

@@ -1,21 +1,26 @@
 // Part of NDS Lite
 (function($) {
+
+    const documentTypes = ['pdf', 'PDF', 'doc', 'docx', 'DOC', 'DOCX', 'ppt', 'PPT', 'pptx', 'PPTX', 'xls', 'XLS', 'xlsx', 'XLSX', 'zip', 'ZIP'];
+
     // initLinkExternal - Adds external link icons to links that qualify as external.
     function initLinkExternal(context = document) {
         let externalLinks = document.querySelectorAll('a');
         for (var i = 0; i < externalLinks.length; i++) {
             if (externalLinks[i].innerHTML != "") {
-                let url = externalLinks[i].getAttribute('href');
-                let hostname = externalLinks[i].hostname;
-                if (url && hostname !== location.hostname) {
-                    url = url.toLowerCase();
-                    if (((url.indexOf('http://') > -1) || (url.indexOf('https://')) > -1) && (url.indexOf('localhost:3002') <= 0)) {
-                        externalLinks[i].setAttribute('target', '_blank');
-                        var linkIcon = document.createElement('a');
-                        linkIcon.setAttribute('href', url);
-                        linkIcon.setAttribute('class', "ext-link-icon");
-                        linkIcon.setAttribute('aria-label', "External Link");
-                        externalLinks[i].insertAdjacentElement('afterend', linkIcon);
+                if (!initDocumentLink(externalLinks[i])) {
+                    let url = externalLinks[i].getAttribute('href');
+                    let hostname = externalLinks[i].hostname;
+                    if (url && hostname !== location.hostname) {
+                        url = url.toLowerCase();
+                        if (((url.indexOf('http://') > -1) || (url.indexOf('https://')) > -1) && (url.indexOf('localhost:3002') <= 0)) {
+                            externalLinks[i].setAttribute('target', '_blank');
+                            var linkIcon = document.createElement('a');
+                            linkIcon.setAttribute('href', url);
+                            linkIcon.setAttribute('class', "ext-link-icon");
+                            linkIcon.setAttribute('aria-label', "External Link");
+                            externalLinks[i].insertAdjacentElement('afterend', linkIcon);
+                        }
                     }
                 }
             }
@@ -30,6 +35,28 @@
         }
     }
 
+    // initDocumentLink - Helper function that determines if a document badge should be added to a link.
+    function initDocumentLink(link) {
+        let href = link.getAttribute('href');
+        if (href !== null && href !== "/" && href !== "#") {
+            for (let i = 0; i < documentTypes.length; i++) {
+                if (href.includes('.' + documentTypes[i])) {
+                    addDocumentBadge(link, documentTypes[i]);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    // addDocumentBadge - Helper function that adds document badges to document links.
+    function addDocumentBadge(link, type) {
+        var badge = document.createElement('span');
+        badge.setAttribute('class', "text-nds text--badge text--badge--document");
+        badge.textContent = type.toUpperCase();
+        link.insertAdjacentElement('afterend', badge);
+    }
+
     if (typeof Drupal !== 'undefined') {
         // Define Drupal behavior.
         (function($, Drupal) {

source/_patterns/00-nds/01-atoms/text/text-badge/text-badge.scss

@@ -3,4 +3,17 @@
     padding: $s-0-50 $s-0-75;
     background: $type-heading;
     color: $white;
+}
+
+.text--badge--document {
+    font-size: $s-0-75;
+    margin: 0 $s-0-25;
+    padding: $s-0-25;
+    line-height: $line-height-single;
+}
+
+.button-nds {
+    & + .text--badge--document {
+        display: none;
+    }
 }

source/_patterns/00-nds/01-atoms/text/text-image-credit-caption/text-image-credit-caption.scss

@@ -5,7 +5,7 @@
     border-left: $s-2px solid $color-theme-1-accent;
     &__caption {
         padding-top: $s-0-25;
-        font-size: $s-0-75;
+        font-size: $s-1 - $s-2px - $s-1px;
         span,
         p,
         a {

source/_patterns/00-nds/02-molecules/analytics/analytics-google/analytics-google.js

@@ -101,6 +101,7 @@
         }
     }
 
+    // computeDataAttribute - Helper function to determine the value of the data attribute.
     function computeDataAttribute(el, dataAttributeName, dataAttributeValuePrefix) {
         var linkText = el.textContent.trim();
         if (linkText !== "") {
@@ -129,6 +130,7 @@
         }
     }
 
+    // tagChildren - Helper function to tag child elements of the target.
     function tagChildren(el, dataAttributeName) {
         let dataAttributeValue = el.getAttribute(dataAttributeName);
         let childElements = el.querySelectorAll('i, span, div, img, strong');

source/_patterns/00-nds/02-molecules/blocks/_block/block-nds.scss

@@ -4,4 +4,7 @@
     @include media-breakpoint-down(sm) {
         padding: $s-1-50;
     }
+    h2, h3 {
+        font-weight: $font-weight-light;
+    }
 }