@newjersey/njwds 2.6.0 → 2.7.0

package/gulpfile.js

@@ -49,6 +49,10 @@ const JS_DEST = "./dist/js";
 // Compiled CSS destination
 const CSS_DEST = "./dist/css";
 
+const DIST_DIR = "./dist"
+
+const FRACTAL_STATIC_ASSETS_DIR = "./public"
+
 // Site CSS destination
 // Like the _site/assets/css directory in Jekyll, if necessary.
 // If using, uncomment line 106
@@ -78,7 +82,6 @@ gulp.task("copy-src-images", () => {
   return gulp.src(`${PROJECT_SASS_SRC}/../img/**/**`).pipe(gulp.dest(`${IMG_DEST}`));
 });
 
-
 gulp.task("copy-uswds-js", () => {
   return gulp.src(`${uswds}/dist/js/**/**`).pipe(gulp.dest(`${JS_DEST}`));
 });
@@ -127,7 +130,7 @@ gulp.task(
 );
 
 gulp.task(
-  "build",
+  "build-njwds",
   gulp.series(
     "copy-uswds-fonts",
     "copy-uswds-images",
@@ -137,11 +140,18 @@ gulp.task(
   )
 );
 
+gulp.task("copy-dist-to-fractal-assets", () => {
+  return gulp.src(`${DIST_DIR}/**/**`).pipe(gulp.dest(`${FRACTAL_STATIC_ASSETS_DIR}/dist`));
+});
 
 gulp.task("watch-sass", function() {
-  gulp.watch(`${PROJECT_SASS_SRC}/**/*.scss`, gulp.series("copy-src-images", "build-sass"));
+  gulp.watch(`${PROJECT_SASS_SRC}/**/*.scss`, gulp.series("copy-src-images", "build-sass", "copy-dist-to-fractal-assets",));
 });
 
-gulp.task("watch", gulp.series("copy-src-images", "build-sass", "watch-sass"));
 
-gulp.task("default", gulp.series("watch"));
+gulp.task("watch-fractal", gulp.series(
+  "copy-src-images",
+  "build-sass",
+  "copy-dist-to-fractal-assets",
+  "watch-sass",
+));

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@newjersey/njwds",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "NJ Web Design Standards",
   "main": "index.js",
   "scripts": {
-    "prepare": "npm run build-uswds",
-    "build-uswds": "gulp build",
+    "prepare": "npm run build-njwds",
+    "build-njwds": "gulp build-njwds",
     "import-components": "cp -nr node_modules/uswds/src/components ./src/",
-    "build-docs": "fractal build",
-    "start": "fractal start --sync & gulp watch",
-    "deploy": "npm install && npm run build-docs && gh-pages -d build"
+    "build-docs": "gulp copy-dist-to-fractal-assets && fractal build",
+    "start": "fractal start --sync & gulp watch-fractal",
+    "deploy": "npm ci && npm run build-docs && gh-pages -d build"
   },
   "repository": {
     "type": "git",

package/src/components/07-form/controls/date-picker.config.yml

@@ -18,12 +18,6 @@ variants:
       datePicker:
         defaultValue: "2020-05-22"
 
-  - name: disabled
-    label: Disabled
-    context:
-      datePicker:
-        disabled: true
-
   - name: restricted-date
     label: Restricted Date
     context:

package/src/components/07-form/controls/date-picker.njk

@@ -15,7 +15,6 @@
         name="appointment-date" 
         type="text" 
         aria-describedby="appointment-date-label appointment-date-hint"
-        {% if datePicker.disabled %} disabled{% endif %}
       >
     </div>
   </div>

package/src/components/banner/banner.config.yml

@@ -2,4 +2,17 @@ label: Banner
 
 context:
   banner:
-    text: "Official Site of the State of New Jersey"
+    # IMPORTANT: when updating banner text, please also update the min-width of
+    # the media query for the '.nj-banner__header li' selector in the custom
+    # styles SCSS.
+    # 
+    # This media query controls the breakpoint for hiding the gov and lt. gov's
+    # names. The intended behavior here is to hide the names before the
+    # stateOfNjText wraps to 3 lines.
+    #
+    # Since the media query's min-width is set based on text length, it has to
+    # be updated when the banner text changes in order to keep the same
+    # wrapping behavior.
+    stateOfNjText: "Official Site of the State of New Jersey"
+    governorName: "Governor Phil Murphy"
+    ltGovernorName: "Lt. Governor Tahesha Way"

package/src/components/banner/banner.njk

@@ -1,24 +1,34 @@
 <section class="nj-banner" aria-label="Official government website">
-  <header class="nj-banner__header">
+  <div class="nj-banner__header">
     <div class="grid-container">
       <div class="nj-banner__inner">
         <div class="grid-col-auto">
-          <img class="nj-banner__header-seal" src="{{ uswds.path }}/img/nj_state_seal.png" alt="NJ flag">
+          <img class="nj-banner__header-seal" src="{{ uswds.path }}/img/nj_state_seal.png" alt="NJ flag" />
         </div>
-        <div class="grid-col-fill"><a href="https://nj.gov">{{ banner.text }}</a></div>
-        <div class="grid-col-auto">
-          <div class="text-white">
-            <ul>
-              <li>Governor Phil Murphy &bull; Lt. Governor Tahesha Way</li><li><a
-                href="https://nj.gov/subscribe/" target="_blank"><svg 
-                  class="usa-icon bottom-neg-2px margin-right-05"
-                  aria-hidden="true" focusable="false" role="img">
-                  <use xlink:href="{{ uswds.path }}/img/sprite.svg#mail"></use>
-              </svg>Get Updates</a></li>
-            </ul>
-          </div>
+        <div class="grid-col-fill">
+          <a href="https://nj.gov">{{ banner.stateOfNjText }}</a>
         </div>
+        <ul class="grid-col-auto display-flex flex-align-center">
+          <li>{{ banner.governorName }} &bull; {{ banner.ltGovernorName }}</li>
+          <li class="grid-col-auto">
+            <a 
+              class="display-flex flex-align-center"
+              href="https://nj.gov/subscribe/" 
+              target="_blank"
+            >
+              <svg 
+                class="usa-icon usa-icon--size-3 nj-banner__mail-icon margin-right-05"
+                role="img"
+                aria-hidden="true" 
+                focusable="false" 
+              >
+                <use xlink:href="{{ uswds.path }}/img/sprite.svg#mail" />
+              </svg>
+              Get Updates
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
-  </header>
+  </div>
 </section>

package/src/components/feedback-widget/feedback-widget--500-server-error.njk

@@ -0,0 +1,23 @@
+<script
+  src="{{ mockFetchScriptSrc }}"
+></script>
+<script>
+  const feedbackApiUrl = "{{ feedbackApiUrl }}"
+  const mockErrorResponse = { 
+    status: 500, 
+    body: { message: "example server error" }
+  };
+  initMockFetch({
+    [`${feedbackApiUrl}/rating`]: mockErrorResponse,
+    [`${feedbackApiUrl}/comment`]: mockErrorResponse
+  }, {{ mockResponseDelayInMs }})
+</script>
+
+<script
+  src="https://unpkg.com/@newjersey/feedback-widget@{{ widgetVersion }}/feedback-widget.min.js"
+  defer
+></script>
+<feedback-widget
+  skip-email-step="true"
+  contact-link="https://www.example.com/contact"
+></feedback-widget>

package/src/components/feedback-widget/feedback-widget--hide-comment-disclaimer.njk

@@ -0,0 +1,20 @@
+<script
+  src="{{ mockFetchScriptSrc }}"
+></script>
+<script>
+  const feedbackApiUrl = "{{ feedbackApiUrl }}"
+  const mockSuccessResponse = {{ mockSuccessResponse | dump | safe }}
+  initMockFetch({
+    [`${feedbackApiUrl}/rating`]: mockSuccessResponse,
+    [`${feedbackApiUrl}/comment`]: mockSuccessResponse,
+    [`${feedbackApiUrl}/email`]: mockSuccessResponse
+  }, {{ mockResponseDelayInMs }})
+</script>
+
+<script
+  src="https://unpkg.com/@newjersey/feedback-widget@{{ widgetVersion }}/feedback-widget.min.js"
+  defer
+></script>
+<feedback-widget
+  show-comment-disclaimer="false"
+></feedback-widget>

package/src/components/feedback-widget/feedback-widget--skip-email-step.njk

@@ -0,0 +1,20 @@
+<script
+  src="{{ mockFetchScriptSrc }}"
+></script>
+<script>
+  const feedbackApiUrl = "{{ feedbackApiUrl }}"
+  const mockSuccessResponse = {{ mockSuccessResponse | dump | safe }}
+  initMockFetch({
+    [`${feedbackApiUrl}/rating`]: mockSuccessResponse,
+    [`${feedbackApiUrl}/comment`]: mockSuccessResponse
+  }, {{ mockResponseDelayInMs }})
+</script>
+
+<script
+  src="https://unpkg.com/@newjersey/feedback-widget@{{ widgetVersion }}/feedback-widget.min.js"
+  defer
+></script>
+<feedback-widget
+  skip-email-step="true"
+  contact-link="https://www.example.com/contact"
+></feedback-widget>

package/src/components/feedback-widget/feedback-widget.config.yml

@@ -0,0 +1,15 @@
+label: Feedback widget
+default: success
+
+context:
+  mockFetchScriptSrc: "/public/js/mockFetch.js"
+  widgetVersion: "latest"
+  feedbackApiUrl: "https://innovation.nj.gov/app/feedback/dev"
+  mockSuccessResponse: { status: 200, body: { message: "Success", feedbackId: 1 } }
+  mockResponseDelayInMs: 1000
+  
+variants:
+  - name: success
+    label: Success
+  - name: 500-server-error
+    label: API Error (500 status)

package/src/components/feedback-widget/feedback-widget.njk

@@ -0,0 +1,20 @@
+<script
+  src="{{ mockFetchScriptSrc }}"
+></script>
+<script>
+  const feedbackApiUrl = "{{ feedbackApiUrl }}"
+  const mockSuccessResponse = {{ mockSuccessResponse | dump | safe }}
+  initMockFetch({
+    [`${feedbackApiUrl}/rating`]: mockSuccessResponse,
+    [`${feedbackApiUrl}/comment`]: mockSuccessResponse,
+    [`${feedbackApiUrl}/email`]: mockSuccessResponse
+  }, {{ mockResponseDelayInMs }})
+</script>
+
+<script
+  src="https://unpkg.com/@newjersey/feedback-widget@{{ widgetVersion }}/feedback-widget.min.js"
+  defer
+></script>
+<feedback-widget
+  contact-link="https://www.example.com/contact"
+></feedback-widget>

package/src/sass/_uswds-theme-custom-styles.scss

@@ -43,7 +43,10 @@ i.e.
 }
 .nj-banner__header li {
   display: none;
-  @include at-media("tablet") {
+
+  // Set min-width so the names are hidden before the stateOfNjText wraps to
+  // 3 lines
+  @media (min-width: 43rem) {
     display: inline;
   }
   @include u-margin-right(1);