@newjersey/njwds 2.6.1 → 2.8.0

package/README.md

@@ -39,23 +39,27 @@ The NJWDS package also includes pre-compiled files in the `src/` directory. Spec
 
 ## Build the design system assets
 
-- Run `npm run build-uswds` to build the assets into the `dist/` directory
+- Run `npm run build-njwds` to build the assets into the `dist/` directory
 
 ### Build the component library
 
-- Run `npm run build-docs` to build the [Fractal](https://fractal.build/) component gallery for reviewing the component documentation
+- Run `npm run build-docs` to build the [Fractal](https://fractal.build/) component gallery for reviewing the component documentation. (This command also copies the `dist` directory to `/public` to be served as static assets for the Fractal site.)
 
 ### View component library locally or development
 
+#### Start the local development server
 - Run `npm start` to build the component library, launch a web server to host it, and live reload on development changes.
 
+#### Preview the static site
+- To view the static site, start a local server within the `/build` directory (e.g. using VSCode's Live Server extension). The server won't live reload on development changes. However, **it's crucial to preview the static site before deployment in order to ensure the Fractal docs site works as expected**, as `npm start` might not catch issues with static asset paths, etc.
+
 ### Deploy the component library
 
 - Run `npm run deploy`
 
-This builds USWDS styles, builds the Fractal docs, and then deploys them to the `gh-pages` branch. The deployed docs can be found [here](https://newjersey.github.io/njwds).
+This builds NJWDS styles, builds the Fractal docs, and then deploys them to the `gh-pages` branch. The deployed docs can be found [here](https://newjersey.github.io/njwds).
 
-Note: Do not push directly to the `gh-pages` branch. This is done automatically through the ["Deploy to GitHub Pages" GitHub Action](https://github.com/newjersey/njwds/actions/workflows/deploy-to-gh-pages.yml) when a new release is published.
+Note: **Do not run `npm run deploy` locally** or push directly to the `gh-pages` branch. This is done automatically through the ["Deploy to GitHub Pages" GitHub Action](https://github.com/newjersey/njwds/actions/workflows/deploy-to-gh-pages.yml) when a new release is published.
 
 ## Releasing a new version to NPM
 

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.1",
+  "version": "2.8.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.njk

@@ -9,7 +9,14 @@
           <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>
+            <a
+              href="https://nj.gov/governor/" 
+              target="_blank"
+            >
+              {{ banner.governorName }} &bull; {{ banner.ltGovernorName }}
+            </a>
+          </li>
           <li class="grid-col-auto">
             <a 
               class="display-flex flex-align-center"

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>