Merge branch 'main' into add-figma-guidance

.eleventy.js

@@ -106,13 +106,15 @@ module.exports = function (eleventyConfig) {
     });
   });
 
+
+
   eleventyConfig.addShortcode(
     "dateInCurrentMonth",
     (day) => `${day}/${new Date().getMonth() + 1}/${new Date().getFullYear()}`,
   );
 
   eleventyConfig.addShortcode("lastUpdated", function (component) {
-    if (process.env.STAGING) return "";
+    if (process.env.ENV == "staging") return "";
 
     const dirPath = path.join(__dirname, "src/moj/components", component);
     const [commit, lastUpdated] = execSync(
@@ -171,7 +173,6 @@ module.exports = function (eleventyConfig) {
     },
   );
 
-
   eleventyConfig.addFilter("getScriptPath", function (inputPath) {
     return inputPath.split("/").slice(1, -1).join("/") + "/script.js";
   });
@@ -180,6 +181,19 @@ module.exports = function (eleventyConfig) {
     return inputPath.split("/").slice(1, -1).join("/") + "/style.css";
   });
 
+  eleventyConfig.addFilter(
+    "rev",
+    (filepath) => {
+      if (process.env.ENV == "production" || process.env.ENV == "staging") {
+        const manifest = JSON.parse(fs.readFileSync('public/assets/rev-manifest.json', 'utf8'));
+        const revision = manifest[filepath]
+        return `/${revision || filepath}`
+      } else {
+        return `/${filepath}`
+      }
+    }
+  )
+
   // Rebuild when a change is made to a component template file
   eleventyConfig.addWatchTarget("src/moj/components/**/*.njk");
 

.github/workflows/deploy-production.yml

@@ -29,7 +29,7 @@ jobs:
         name: mojds-package
         path: package
     - run: npm run build:dist
-    - run: npm run build:docs
+    - run: ENV="production" npm run build:docs
     - uses: actions/upload-artifact@v4
       with:
         name: mojds-dist

.github/workflows/publish-package.yml

@@ -24,7 +24,7 @@ jobs:
         name: mojds-package
         path: package
     - run: npm run build:dist
-    - run: npm run build:docs
+    - run: ENV="production" npm run build:docs
     - uses: actions/upload-artifact@v4
       with:
         name: mojds-dist

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.1.0](https://github.com/ministryofjustice/moj-frontend/compare/v3.0.3...v3.1.0) (2024-11-26)
+
+
+### Features
+
+* **password reveal:** archiving password reveal component ([#962](https://github.com/ministryofjustice/moj-frontend/issues/962)) ([13c330f](https://github.com/ministryofjustice/moj-frontend/commit/13c330f6e1666215929b93db5ff463a44c54155e))
+
 ## [3.0.3](https://github.com/ministryofjustice/moj-frontend/compare/v3.0.2...v3.0.3) (2024-11-13)
 
 

Dockerfile

@@ -19,7 +19,7 @@ COPY gulpfile.js gulpfile.js
 COPY README.md README.md
 COPY webpack.config.js webpack.config.js
 
-RUN STAGING=1 npm run build:docs
+RUN ENV="staging" npm run build:docs
 
 FROM base AS production-build
 RUN apt-get -y install git
@@ -33,7 +33,7 @@ RUN ssh-keyscan github.com >> /root/.ssh/known_hosts
 RUN git clone git@github.com:ministryofjustice/moj-frontend.git .
 
 run npm install
-RUN npm run build:docs 
+RUN ENV="production" npm run build:docs 
 
 RUN rm /root/.ssh/id_rsa
 

docs/_data/env.js

@@ -1,5 +1,5 @@
 module.exports = function() {
   return {
-    isStaging: process.env.STAGING || false
+    isStaging: process.env.ENV == "staging" || false
   };
 };

docs/_includes/example.njk

@@ -68,7 +68,7 @@
 {% endif %}
 
 {% if figmaLink %}
-  <div class="app-tabs__panel govuk-!-padding-2 app-tabs__panel--hidden" id="figma-default-{{ id }}" role="tabpanel" aria-labelledby="tab_figma-default-{{ id }}">
+  <div class="app-tabs__panel govuk-!-padding-3 app-tabs__panel--hidden" id="figma-default-{{ id }}" role="tabpanel" aria-labelledby="tab_figma-default-{{ id }}">
 
 This component is in the ‘Assets’ tab in the MoJ Figma Kit.
 

docs/_includes/layouts/base.njk

@@ -22,7 +22,7 @@
               content="Design your service using MoJ styles, components and patterns">
         <meta property="og:image"
               content="{{ '/assets/images/moj-opengraph-image-2024.png' | url }}">
-        <link href="{{ '/assets/stylesheets/application-20241113.css' | url }}"
+        <link href="{{ 'assets/stylesheets/application.css' | rev | url }}"
               rel="stylesheet">
         {% block pageStyles %}{% endblock %}
         <title>
@@ -31,8 +31,8 @@
         <script type="module"
                 src="https://www.googletagmanager.com/gtag/js?id=G-VTGX4YLSVL"
                 async></script>
-        <script type="module" src="{{ '/assets/javascript/jquery.js' | url }}"></script>
-        <script type="module" src="{{ '/assets/javascript/all-20241113.js' | url }}"></script>
+        <script type="module" src="{{ 'assets/javascript/jquery.js' | rev | url }}"></script>
+        <script type="module" src="{{ 'assets/javascript/all.js' | rev | url }}"></script>
     </head>
     <body class="govuk-template__body">
         <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>

docs/_includes/layouts/component.njk

@@ -9,10 +9,7 @@
 
         {{ content | safe }}
 
-        {% if isIndex or isArchive %}
-        {% else %}
-          {% include "./partials/get-help-and-contribute.njk" %}
-        {% endif %}
+        {% include "./partials/get-help-and-contribute.njk" %}
 
     </div>
 {% endblock %}

docs/_includes/layouts/home.njk

@@ -19,8 +19,7 @@
   <div class="app-layout__content">
       <div class="app-cards">
         {% call card({title: "What's new" })%}
-          <p class="govuk-body">28 October 2024: We’ve updated the <a href="/components/button-menu">button menu</a>: a versatile component to help users complete tasks.</p>
-          <p class="govuk-body"><a href="https://docs.google.com/forms/d/1i7rinQINSjdQ6w_SChXqxQFTttPMgfcSfPamq8YRnP8/edit" class="govuk-link">Sign up to get emails</a> about the MoJ Design System.</p>
+          <p class="govuk-body">26 November 2024: We’ve archived the <a href="/archive/password-reveal/">password reveal component</a>. We recommend that teams use the <a href="https://design-system.service.gov.uk/components/password-input/">GOV.UK Design System password input</a> instead.</p>
         {% endcall %}
 
         {% call card({title: "Contribute to the MoJ Design System" })%}

docs/_includes/layouts/partials/get-help-and-contribute.njk

@@ -23,7 +23,13 @@
 {% if contributors %}
   <h3 class="govuk-heading-m">Contributors</h3>
   <p class="govuk-body">
-    Thanks to {{ contributors }} for giving feedback on this {{ type }}.</p>
+    Thanks to {{ contributors }} for
+    {% if contribution %}
+      contributing
+    {% else %}
+      giving feedback on
+    {% endif %}
+    this {{ type }}.
   </p>
 {% endif %}
 

docs/archive/password-reveal.md

@@ -0,0 +1,25 @@
+---
+layout: layouts/archive.njk
+title: Password reveal
+type: component
+redirect_from: /components/password-reveal
+githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/709
+eleventyNavigation:
+  key: Password reveal
+  parent: Archive
+  excerpt: "Use the password reveal component to let users check their password safely."
+---
+
+{% banner "This component is archived" %}
+
+This component was archived because the [GOV.UK Design System password input](https://design-system.service.gov.uk/components/password-input/) enables users to check their password safely. There’s also the [GOV.UK Design System ‘Ask users for passwords’ pattern](https://design-system.service.gov.uk/patterns/passwords/).
+{% endbanner %}
+
+
+{% example "/examples/password-reveal", 210 %}
+
+## When to use
+
+Use the password reveal component to let users check their password safely.
+
+This component automatically sets the `spellcheck` attribute to `false` to prevent users' passwords being stored in their browsers.

docs/assets/stylesheets/components/_example.scss

@@ -27,11 +27,12 @@
     @include govuk-font($size: 16);
     border: 1px solid $govuk-border-colour;
     position: absolute; top: -1px; left: -1px;
+    background-color: white;
+
 
     a,
     a:link,
     a:visited {
-      background-color: white;
       color: govuk-colour("blue");
       display: block;
       margin: 8px;

docs/assets/stylesheets/components/_tabs.scss

@@ -102,4 +102,8 @@
   p {
     max-width: 100% !important;
   }
+
+  pre {
+    padding-top: govuk-spacing(9);
+  }
 }

docs/components/date-picker.md

@@ -3,6 +3,7 @@ layout: layouts/component.njk
 title: Date picker
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/703
+contribution: true # ensures contributors section says 'for contributing' not 'giving feedback on'
 contributors: Dom Billington, Eddie Shannon, David Middleton, and the DPS Connect team
 basedon: Scottish Government Design System date picker
 basedonurl: https://designsystem.gov.scot/components/date-picker

docs/examples/password-reveal/index.njk

@@ -1,7 +1,6 @@
 ---
 layout: layouts/example.njk
 title: Password reveal (example)
-figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=66-6026&mode=design
 ---
 
 {%- from "govuk/components/input/macro.njk" import govukInput -%}

gulp/docs.js

@@ -1,12 +1,17 @@
 const gulp = require("gulp");
 const sass = require("gulp-sass")(require("sass"));
-const rename = require("gulp-rename");
+const rev = require("gulp-rev");
 const {createGulpEsbuild} = require("gulp-esbuild");
 const esbuild = createGulpEsbuild({
 	incremental: false, // enables the esbuild"s incremental build
 	piping: true,      // enables piping
 })
-const VERSION = "20241113"
+
+gulp.task("docs:clean", async (done) => {
+  const { deleteSync } = await import("del");
+
+  return deleteSync(['public/**/*'])
+})
 
 // Copy all the govuk-frontend assets across
 gulp.task(
@@ -43,10 +48,7 @@ gulp.task(
     return gulp
       .src("docs/assets/stylesheets/application.scss")
       .pipe(sass())
-      .pipe(rename({
-        suffix: `-${VERSION}`
-      }))
-      .pipe(gulp.dest("public/assets/stylesheets/"));
+      .pipe(gulp.dest("public/assets/stylesheets/"))
   }
 );
 
@@ -56,13 +58,25 @@ gulp.task(
     return gulp
       .src("docs/assets/javascript/all.js")
       .pipe(esbuild({
-          outfile: `all-${VERSION}.js`,
+          outfile: `all.js`,
           target: "es6",
           bundle: true,
       }))
       .pipe(gulp.dest("public/assets/javascript"))
   }
 );
 
+gulp.task(
+  "docs:revision", () => {
+    return gulp
+    .src(["public/assets/**/*.css", "public/assets/**/*js"], {base: "public"})
+    .pipe(rev())
+    .pipe(gulp.dest("public/"))  // Write rev'd assets to build dir
+		.pipe(rev.manifest())
+    .pipe(gulp.dest("public/assets/"))
+  }
+)
+
+
 
 

gulpfile.js

@@ -28,9 +28,11 @@ gulp.task(
 // Initial build of the docs site to ./public
 gulp.task(
   "build:docs", gulp.series(
+    "docs:clean",
     "docs:copy-files",
     "build:package",
     gulp.parallel("docs:styles", "docs:scripts"),
+    "docs:revision"
   )
 );
 

jest.config.js

@@ -1,7 +1,7 @@
 const config = {
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
-    url: "https://design-patterns.service.juice.gov.uk",
+    url: "https://design-patterns.service.juice.gov.uk/",
   },
   setupFilesAfterEnv: ["./jest.setup.js"],
 };