Merge pull request #26 from niaid/staging

Release v1.0.1
niaid · Mar 31, 2021 · fc35bf1 · fc35bf1
2 parents aaf0f8d + 59b0a7d
commit fc35bf1
Show file tree

Hide file tree

Showing 190 changed files with 5,682 additions and 2,759 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,8 @@
 .DS_Store
 package-lock.json
-node_modules/**/*
-global-assets/node_modules/**/*
-global-assets/vendor/**/*
+global-assets/public_html/
+global-assets/node_modules/
+global-assets/vendor/
+global-assets/public/
 global-assets/dist/**/*
 !global-assets/dist/.gitignore
diff --git a/global-assets/LICENSE b/global-assets/LICENSE
@@ -1,3 +1,5 @@
+PATTERN LAB
+
 The MIT License (MIT)
 
 Copyright (c) 2015 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com

diff --git a/global-assets/Readme.md → global-assets/README.md b/global-assets/Readme.md → global-assets/README.md
diff --git a/global-assets/dist/.gitignore b/global-assets/dist/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 package-lock.json
-node_modules/**/*
-vendor/**/*
-public/**/*
+node_modules/
+vendor/
+public/
+public_html/
diff --git a/global-assets/gulpfile.js b/global-assets/gulpfile.js
@@ -1,6 +1,6 @@
 /* Gulp File
     Last Modified by: Jacob Caccamo
-    October 9, 2020
+    March 15, 2020
 */
 
 const gulp = require('gulp');
@@ -15,6 +15,8 @@ const browserSync = require('browser-sync').create();
 const exec = require('child_process').exec;
 const babel = require('gulp-babel');
 const replace = require('gulp-replace');
+const htmlreplace = require('gulp-html-replace');
+const del = require('del');
 
 // copyFonts - Copy Font Awesome from node_modules into project.
 function copyFonts() {
@@ -94,6 +96,14 @@ function compilePatternLab(cb) {
     });
 }
 
+// cleanDistributionDirectories - Cleans out any distribution items before a fresh build is created.
+gulp.task('cleanDistributionDirectories', (cb) => {
+    let dirs = [
+        './public_html/**/*'
+    ];
+    return del(dirs, {'force': true}, cb);
+});
+
 // GULP: serveProject - Serves project locally and watches files for changes.
 gulp.task('serveProject', function() {
     browserSync.init({
@@ -110,52 +120,83 @@ gulp.task('serveProject', function() {
 // GULP: default - Running gulp compiles the your static site and serves it locally.
 gulp.task('default', gulp.series(copyFonts, compileSass, 'computeIncludedJSFiles', compileJS, compilePatternLab, 'serveProject'));
 
-// GULP: buildProd - Compile your project assets and build public_html folder for deploy.
-gulp.task('buildProd', gulp.series(compileSass, compileJS, compilePatternLab, buildDist));
+// GULP: build - Compile your project assets and build public_html folder for deploy.
+gulp.task('build', gulp.series('cleanDistributionDirectories', compileSass, compileJS, compilePatternLab, computePaths, moveAssets));
 
-// buildDist - Build public_html folder for deploy.
-function buildDist() {
-    // Define Names of Pages to Build for Production (Use the name of the Twig file in the 06-dist folder) to Compiled Pages & Desired Distribution Paths.
-    var buildPaths = [
-        {
-            "page_name": "PAGE_NAME_IN_06_DIST",
-            "target_dest": "./public_html/TARGET_PATH/"
+// computePaths - Creates distribution paths based on page name and location.
+var pages = [];
+function computePaths() {
+    return gulp.src('./source/_patterns/05-pages/**/*.twig').pipe(tap(function(file, t) {
+        if (file.path.split('source/').length > 1) {
+            addPage(file.path);
         }
-    ];
+        else {
+            let escaped = file.path.replace(/\\/g, "/");
+            addPage(escaped);
+        }
+    }));
+}
+
+// addPage - Helper function for the computePaths() function. Determines the path and destination of the page.
+function addPage(file) {
+    let distPath = file.split('source/_patterns/05-pages/')[1];
+    let fileName = distPath.split('/'), targetPath;
+    fileName = fileName[fileName.length - 1];
+    if (distPath === fileName) { targetPath = "/"; } else { targetPath = distPath.split('/' + fileName)[0]; }
+    pages.push({ "depth": distPath.split("/").length - 1, "pageName": fileName.split('.twig')[0], "patternLabPath": targetPath.replace('/', '-'), "targetPath": targetPath });
+    return;
+}
 
+// moveAssets - Move all distribution assets to the public_html/ folder.
+function moveAssets() {
     // Move HTML to Proper Positions
-    for (var i = 0; i < buildPaths.length; i++) {
-        var path = "./public/patterns/06-dist-" + buildPaths[i].page_name + "-" + buildPaths[i].page_name + "/06-dist-" + buildPaths[i].page_name + "-" + buildPaths[i].page_name + ".html";
-        gulp.src(path)
-            .pipe(rename({
-                basename: 'index',
-                extname: '.html'
-            }))
-            .pipe(gulp.dest(buildPaths[i].target_dest));
+    for (let i = 0; i < pages.length; i++) {
+        // Build Relative Path
+        let relativePath = ""; if (pages[i].depth === 0) { relativePath = "./"; } else { for (let j = 0; j < pages[i].depth; j++) { relativePath += "../"; }}
+
+        if (pages[i].targetPath === "/") {
+            var path = "./public/patterns/05-pages-index/05-pages-index.html";
+            gulp.src(path)
+                .pipe(rename({ basename: 'index', extname: '.html' }))
+                .pipe(replace('../../css', relativePath + 'css'))
+                .pipe(replace('../../js', relativePath + 'js'))
+                .pipe(replace('../../images', relativePath + 'assets'))
+                .pipe(replace('../../assets', relativePath + 'assets'))
+                .pipe(htmlreplace({ remove : '' }))
+                .pipe(gulp.dest('./public_html/'));
+        }
+        else {
+            var path = "./public/patterns/05-pages-" + pages[i].patternLabPath + "-" + pages[i].pageName + "/05-pages-" + pages[i].patternLabPath + "-" + pages[i].pageName + ".html";
+            gulp.src(path)
+                .pipe(rename({ basename: 'index', extname: '.html' }))
+                .pipe(replace('../../css', relativePath + 'css'))
+                .pipe(replace('../../js', relativePath + 'js'))
+                .pipe(replace('../../images', relativePath + 'assets'))
+                .pipe(replace('../../assets', relativePath + 'assets'))
+                .pipe(htmlreplace({ remove : '' }))
+                .pipe(gulp.dest('./public_html/' + pages[i].targetPath));
+        }
     }
 
     // Copy CSS
-    console.log("Starting Copy of CSS");
+    console.log("Copy CSS");
     gulp.src('./source/css/nds-min.css')
         .pipe(gulp.dest('./public_html/css'));
     gulp.src('./source/css/libraries/*.css')
         .pipe(gulp.dest('./public_html/css/libraries'));
-    console.log("Finished Copying CSS");
 
     // Copy JS
-    console.log("Starting Copy of JS");
+    console.log("Copy JS");
     gulp.src('./source/js/**/*')
         .pipe(gulp.dest('./public_html/js'));
-    console.log("Finished Copying JS");
 
     // Copy Images
-    console.log("Starting Copy of Images");
+    console.log("Copy Images");
     gulp.src('./source/images/**/*')
         .pipe(gulp.dest('./public_html/assets'));
-    console.log("Finished Copying Images");
 
     // Copy Fonts
-    console.log("Starting Copy of Fonts");
+    console.log("Copy Fonts");
     return gulp.src('./source/webfonts/**/*')
         .pipe(gulp.dest('./public_html/webfonts'));
 }
diff --git a/global-assets/package.json b/global-assets/package.json
@@ -1,17 +1,14 @@
 {
-  "name": "niaid-theme-builder",
-  "version": "1.0.0",
+  "name": "niaid-design-system",
+  "version": "1.0.1",
   "description": "NIAID Design System",
   "main": "public/index.html",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
     "bootstrap": "^4.5.2",
     "bootstrap-datepicker": "^1.9.0",
-    "browser-sync": "^2.26.3",
     "datatables.net": "^1.10.20",
     "datatables.net-responsive-dt": "^2.2.3",
-    "gulp-minify": "^3.1.0",
-    "gulp-rename": "^1.4.0",
     "install": "^0.10.2",
     "jquery": "^3.5.1",
     "match-media": "^0.2.0",
@@ -22,14 +19,19 @@
   "devDependencies": {
     "@babel/core": "^7.7.5",
     "@babel/preset-env": "^7.7.6",
+    "browser-sync": "^2.26.3",
+    "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-concat": "^2.6.1",
+    "gulp-html-replace": "^1.6.2",
+    "gulp-minify": "^3.1.0",
     "gulp-postcss": "^7.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.0.1",
     "gulp-sass-glob": "^1.0.9",
     "gulp-sourcemaps": "^2.6.1",
-    "gulp-replace": "^1.0.0",
     "gulp-tap": "^2.0.0",
     "jshint": "^2.11.1"
   },
@@ -38,7 +40,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git-codecommit.us-east-1.amazonaws.com/v1/repos/covid-prevention-network"
+    "url": "https://github.com/niaid/niaid-design-system"
   },
   "author": "Jacob Caccamo",
   "license": "ISC"

diff --git a/global-assets/source/_data/data.json b/global-assets/source/_data/data.json
@@ -1,11 +1,10 @@
 {
     "language": "en",
-    "prodBuild": "false",
     "cssPath": "../../css/",
     "jsPath": "../../js/",
     "imagePath": "../../images/",
     "assetsPath": "../../assets/",
-    "bodyClass": "style--colors--theme-1 style--corners--semirounded style--headings--public-sans style--body--public-sans",
+    "bodyClass": "style--corners--semirounded style--shadows",
     "cssIncludes": {
         "select2": true,
         "bootstrapDatepicker": true

diff --git a/global-assets/source/_meta/_00-head.twig b/global-assets/source/_meta/_00-head.twig
@@ -10,14 +10,12 @@
 
     <link rel="icon" href="{{ imagePath }}global/favicons/favicon.ico" type="image/x-icon"/>
 
-    {% if prodBuild != "true" %}<link rel="stylesheet" href="{{ cssPath }}nds-min.css?{{ cacheBuster }}" media="all" />{% else %}<link rel="stylesheet" href="{{ cssPath }}nds-min.css" media="all" />{% endif %}
-    {% if prodBuild != "true" %}<link rel="stylesheet" href="{{ cssPath }}libraries/pattern-lab/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />{% endif %}
+    <link rel="stylesheet" href="{{ cssPath }}nds-min.css" media="all" />
 
-    {% if prodBuild != "true" %}
-      <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
-        {{ patternLabHead | raw }}
-      <!-- End Pattern Lab -->
-    {% endif %}
+    <!-- build:remove -->
+    <link rel="stylesheet" href="{{ cssPath }}libraries/pattern-lab/pattern-scaffolding.css" media="all" />
+    {{ patternLabHead | raw }}
+    <!-- endbuild -->
 
   </head>
   <body class="{{ bodyClass }}">
diff --git a/global-assets/source/_meta/_01-foot.twig b/global-assets/source/_meta/_01-foot.twig
@@ -1,7 +1,6 @@
-        {% if prodBuild != "true" %}
-            <!-- Pattern Lab Footer -->
-            {{ patternLabFoot | raw }}
-        {% endif %}
+        <!-- build:remove -->
+        {{ patternLabFoot | raw }}
+        <!-- endbuild -->
 
         {% if jsIncludes.jquery %}<script src="{{ jsPath }}libraries/jquery/jquery.min.js"></script>{% endif %}
         {% if jsIncludes.select2 %}<script src="{{ jsPath }}libraries/select2/select2.full.min.js"></script>{% endif %}

diff --git a/global-assets/source/_patterns/00-nds/01-atoms/buttons/_button/button-nds.scss b/global-assets/source/_patterns/00-nds/01-atoms/buttons/_button/button-nds.scss
@@ -7,7 +7,11 @@ button {
     padding: $s-1 $s-2;
     line-height: normal;
     border-radius: 0;
-    white-space: nowrap;
+    white-space: normal;
+    text-align: center;
+    @include media-breakpoint-up(sm) {
+        white-space: nowrap;
+    }
     &:visited {
         color: $white;
         &:hover,

diff --git a/...assets/source/_patterns/00-nds/01-atoms/buttons/button-external/demo/button-external.twig b/...assets/source/_patterns/00-nds/01-atoms/buttons/button-external/demo/button-external.twig
@@ -1,6 +1,30 @@
-{% include "@nds/01-atoms/buttons/button-external/_button-external-main.twig" with
-    {
-        "button_external_text": "Open Application",
-        "button_external_href": "#"
-    }
-%}
+<div class="container-fluid demo">
+    <div class="row">
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-external/_button-external-main.twig" with
+                {
+                    "button_external_text": "Button",
+                    "button_external_href": "#"
+                }
+            %}
+        </div>
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-external/_button-external-main.twig" with
+                {
+                    "button_external_classes": "button--secondary",
+                    "button_external_text": "Button",
+                    "button_external_href": "#"
+                }
+            %}
+        </div>
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-external/_button-external-main.twig" with
+                {
+                    "button_external_classes": "button--tertiary",
+                    "button_external_text": "Button",
+                    "button_external_href": "#"
+                }
+            %}
+        </div>
+    </div>
+</div>
diff --git a/global-assets/source/_patterns/00-nds/01-atoms/buttons/button-floating/button-floating.scss b/global-assets/source/_patterns/00-nds/01-atoms/buttons/button-floating/button-floating.scss
@@ -5,7 +5,7 @@
     right: $s-2;
     height: $s-4;
     width: 3.95rem;
-    z-index: 999;
+    z-index: $z-index-button-floating;
     padding: 0;
     overflow: hidden;
     transition: .3s ease-in-out !important;

diff --git a/global-assets/source/_patterns/00-nds/01-atoms/buttons/button-icon/demo/button-icon.twig b/global-assets/source/_patterns/00-nds/01-atoms/buttons/button-icon/demo/button-icon.twig
@@ -1,6 +1,30 @@
-{% include "@nds/01-atoms/buttons/button-icon/_button-icon-main.twig" with
-    {
-        "button_icon_icon": "question-circle",
-        "button_icon_text": "Button"
-    }
-%}
+<div class="container-fluid demo">
+    <div class="row">
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-icon/_button-icon-main.twig" with
+                {
+                    "button_icon_icon": "question-circle",
+                    "button_icon_text": "Button"
+                }
+            %}
+        </div>
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-icon/_button-icon-main.twig" with
+                {
+                    "button_icon_classes": "button--secondary",
+                    "button_icon_icon": "question-circle",
+                    "button_icon_text": "Button"
+                }
+            %}
+        </div>
+        <div class="col">
+            {% include "@nds/01-atoms/buttons/button-icon/_button-icon-main.twig" with
+                {
+                    "button_icon_classes": "button--tertiary",
+                    "button_icon_icon": "question-circle",
+                    "button_icon_text": "Button"
+                }
+            %}
+        </div>
+    </div>
+</div>