updated JS removed the dependecy of uswds

config.json

@@ -13,6 +13,12 @@
     "pattern_lab_destination": "pattern-lab/public/css",
     "dist_folder": "dist/css"
   },
+  "js": {
+    "src": [
+      "pattern-lab/source/js/*.js",
+      "pattern-lab/source/js/**/*.js"
+    ]
+  },
   "pattern_lab": {
     "src": [
       "pattern-lab/source/_patterns/**/*.twig",

dist/pl/js/components.js

@@ -1,3 +0,0 @@
-// console.log("hello from 01-fonts");
-"use strict";
-//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjAyLXR5cG9ncmFwaHkvMDEtZm9udHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiY29tcG9uZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIGNvbnNvbGUubG9nKFwiaGVsbG8gZnJvbSAwMS1mb250c1wiKTsiXX0=

gulpfile.babel.js

@@ -11,16 +11,10 @@ import plumber from 'gulp-plumber';
 import notify from 'gulp-notify';
 import autoprefix from 'gulp-autoprefixer';
 import glob from 'gulp-sass-glob';
-import rename from 'gulp-rename';
 import sourcemaps from 'gulp-sourcemaps';
 import shell from 'gulp-shell';
 import concat from 'gulp-concat';
-import uglify from 'gulp-uglify';
 import babel from 'gulp-babel';
-import fancylog from 'fancy-log';
-import browserify from 'browserify';
-import source from 'vinyl-source-stream';
-import buffer from 'vinyl-buffer';
 
 // Require a copy of the JS compiler for uswds.
 // the gulptask is called "javascript"
@@ -83,42 +77,11 @@ gulp.task('pl:css', () => {
         .pipe(browserSync.reload({stream: true, match: '**/*.css'}));
 });
 
-// Pattern lab CSS.
-// ----------------------------------------------------------------- //
-// Search for changes inside the pattern-lab/source/_patterns folders
-// the scss processor is going to compile scss files inside the components folders.
-// ----------------------------------------------------------------- //
-//
-// gulp.task('pl:scss', () => {
-//     return gulp.src(config.css.src, {base: './'})
-//         .pipe(glob())
-//         .pipe(plumber({
-//             errorHandler: function (error) {
-//                 notify.onError({
-//                     title: "Gulp",
-//                     subtitle: "Failure!",
-//                     message: "Error: <%= error.message %>",
-//                     sound: "Beep"
-//                 })(error);
-//                 this.emit('end');
-//             }
-//         }))
-//         .pipe(sourcemaps.init())
-//         .pipe(sass(config.sass))
-//         .pipe(autoprefix(config.autoprefixer))
-//         .pipe(rename(function (path) {
-//             path.dirname = path.dirname.replace(/src/i, 'dist');
-//             return path;
-//         }))
-//         .pipe(sourcemaps.write('.'))
-//         .pipe(gulp.dest('.'))
-//         .pipe(browserSync.reload({stream: true, match: '**/*.css'}));
-// });
-
 // Watch task.
 // ------------------------------------------------------------------- //
 
 gulp.task('watch', function () {
+    gulp.watch(config.js.src, ['legacy:js']);
     gulp.watch(config.css.src, ['pl:css']);
     gulp.watch(config.pattern_lab.src, ['generate:pl']);
     gulp.watch(config.pattern_lab.javascript.src, ['generate:pl']);
@@ -134,7 +97,7 @@ gulp.task('serve', ['watch', 'generate:pl'], () => {
 });
 
 // generate Pattern library.
-gulp.task('generate:pl', ['pl:php', 'uswds:js', 'pl:css', 'pl:js' ]);
+gulp.task('generate:pl', ['pl:php', 'legacy:js', 'pl:css', 'pl:js' ]);
 
 // Generate pl with PHP.
 // -------------------------------------------------------------------- //

gulptasks/javascript.js

@@ -8,14 +8,15 @@ var sourcemaps = require('gulp-sourcemaps');
 var rename = require('gulp-rename');
 var eslint = require('gulp-eslint');
 var fancylog = require('fancy-log');
-var task = 'uswds:js';
+var task = 'legacy:js';
 
 gulp.task(task, function (done) {
 
   fancylog('Compiling JavaScript');
 
   var defaultStream = browserify({
-    entries: './node_modules/uswds/src/js/start.js',
+    // entries: './node_modules/uswds/src/js/start.js',
+    entries: './pattern-lab/source/js/start.js',
     debug: true,
   })
   .transform('babelify', {
@@ -37,7 +38,8 @@ gulp.task(task, function (done) {
       suffix: '.min',
     }))
     .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('dist/uswds/js'));
+    .pipe(gulp.dest('dist/uswds/js'))
+    .pipe(gulp.dest('pattern-lab/public/js/dist'));
 
   return stream;
 

package.json

@@ -25,6 +25,7 @@
     "bourbon": "^5.0.0",
     "bourbon-neat": "^1.9.0",
     "browser-sync": "^2.24.4",
+    "font-awesome": "^4.7.0",
     "normalize.scss": "^0.1.0",
     "susy": "^3.0.5",
     "uswds": "https://github.com/SFDigitalServices/uswds/archive/v1.6.2.tar.gz"

pattern-lab/source/_meta/_00-head.twig

@@ -12,7 +12,7 @@
     <link rel="stylesheet"
           href="//fonts.googleapis.com/css?family=Merriweather:400,700|Montserrat|Open+Sans|Source+Sans+Pro:400,700"
           media="all"/>
-    <script src="../../js/components.js"></script>
+    <script src="../../js/dist/uswds.min.js"></script>
 
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{ patternLabHead | raw }}

pattern-lab/source/_patterns/00-protons/_02-mixins.scss

@@ -0,0 +1,17 @@
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}
+
+@mixin outer-container($local-max-width: $max-width) {
+  @include clearfix;
+  max-width: $local-max-width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+

pattern-lab/source/_patterns/01-atoms/03-buttons/01-buttons.scss

@@ -29,7 +29,6 @@ $font-normal: 400 !default;
   }
 }
 
-
 // Buttons
 
 // This mixin is only needed until we fully remove the

pattern-lab/source/_patterns/02-molecules/01-blocks/01-branding.scss

@@ -1,14 +1,24 @@
 @import "../../01-atoms/02-typography/01-fonts.scss";
+@import "../../00-protons/00-breakpoints";
 
 .sfgov-logo {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   align-items: stretch;
+  @media all and (max-width: $narrow-screen) {
+    padding-left: 14px;
+  }
   .sfgov-logo__image {
     min-width: 55px;
     display: flex;
     align-content: center;
+    @media all and (max-width: $narrow-screen) {
+      min-width: 40px;
+      img {
+        max-width: 40px;
+      }
+    }
   }
   .sfgov-logo__text {
     display: flex;