Update to latest DS

.dockerignore

@@ -2,7 +2,8 @@
 **
 
 # ...except for all of this
-!esbuild.mjs
+!esbuild/**/*.js
+
 !manage.py
 !package.json
 !settings.py

esbuild/build.js

@@ -0,0 +1,33 @@
+import esbuild from "esbuild";
+
+import { scripts } from "./scripts.js";
+
+const baseConfig = {
+  logLevel: "info",
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  external: ["*.png", "*.woff2", "*.gif"],
+  loader: {
+    ".svg": "text",
+  },
+  outdir: "./viewer/static",
+  outbase: "./viewer/static_src",
+  plugins: [],
+};
+
+const arg = process.argv.slice(2)[0];
+
+(async function () {
+  const scriptsConfig = scripts(baseConfig);
+
+  if (arg === "watch") {
+    const ctx = await esbuild.context(scriptsConfig);
+    await ctx.watch();
+    // Not disposing context here as the user will ctrl+c to end watching.
+  } else {
+    const ctx = await esbuild.context(scriptsConfig);
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+})();

esbuild/plugins/plugin-postcss-sass.js

@@ -0,0 +1,34 @@
+import { readdirSync } from "node:fs";
+import postcss from "postcss";
+import * as sass from "sass";
+import { pluginProcessIcons } from "./postcss-process-icons.js";
+
+const pluginPostCssSass = ({ plugins = [] }) => ({
+  name: "postcss-sass",
+  setup(build) {
+    build.onLoad({ filter: /.\.scss$/ }, async (args) => {
+      const sassResult = await sass.compile(args.path, {
+        loadPaths: [
+          ...readdirSync("./node_modules/@cfpb").map(
+            (v) => `./node_modules/@cfpb/${v}/src`,
+          ),
+          "./node_modules/",
+        ],
+      });
+
+      const result = await postcss([...plugins, pluginProcessIcons]).process(
+        sassResult.css,
+        {
+          from: args.path,
+        },
+      );
+
+      return {
+        contents: result.css,
+        loader: "css",
+      };
+    });
+  },
+});
+
+export { pluginPostCssSass };

esbuild/plugins/postcss-process-icons.js

@@ -0,0 +1,46 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const pluginProcessIcons = () => {
+  const stripQuotes = (str) => str.replace(/['"]+/g, "");
+
+  return {
+    postcssPlugin: "process-icons",
+    Declaration: {
+      "--cfpb-background-icon-svg": async (decl) => {
+        const props = decl.value.split(" ");
+        const iconName = stripQuotes(props[0]);
+        const iconColor = props.length > 1 ? stripQuotes(props[1]) : "";
+
+        const pathToSVG =
+          __dirname +
+          "/../../node_modules/@cfpb/cfpb-design-system/src/components/cfpb-icons/icons/" +
+          iconName +
+          ".svg";
+        const rawSVG = await readFileSync(pathToSVG, "utf8", (err, data) => {
+          if (err) console.log(err);
+
+          return data;
+        });
+
+        let cleanSVG = rawSVG;
+        if (iconColor !== "") {
+          cleanSVG = rawSVG.replace(
+            /class="cf-icon-svg .+" /,
+            `fill="${iconColor}" `,
+          );
+        }
+
+        decl.prop = "background-image";
+        decl.value = `url('data:image/svg+xml;charset=UTF-8,${cleanSVG}')`;
+      },
+    },
+  };
+};
+pluginProcessIcons.postcss = true;
+
+export { pluginProcessIcons };

esbuild/scripts.js

@@ -0,0 +1,55 @@
+import { pluginPostCssSass } from "./plugins/plugin-postcss-sass.js";
+import { copy } from "esbuild-plugin-copy";
+import autoprefixer from "autoprefixer";
+
+const jsPaths = [];
+
+const entryFileList = ["./viewer/static_src/js/main.js"];
+entryFileList.forEach((file) => {
+  jsPaths.push(file);
+});
+
+/**
+ * @param {object} baseConfig - The base esbuild configuration.
+ * @returns {object} The modified configuration object.
+ */
+function scripts(baseConfig) {
+  return {
+    ...baseConfig,
+    entryPoints: jsPaths,
+    target: "es6",
+    plugins: baseConfig.plugins.concat([
+      copy({
+        assets: [
+          {
+            from: ["./viewer/static_src/query-string-filtering.docx"],
+            to: ["."],
+          },
+          {
+            from: [
+              "./node_modules/@cfpb/cfpb-design-system/src/components/cfp-icons/icons/*",
+            ],
+            to: ["./icons"],
+          },
+        ],
+      }),
+      pluginPostCssSass({
+        plugins: [autoprefixer],
+      }),
+      copy({
+        assets: [
+          {
+            from: ["./viewer/static/js/main.css"],
+            to: ["./css/main.css"],
+          },
+          {
+            from: ["./viewer/static/js/main.css.map"],
+            to: ["./css/main.css.map"],
+          },
+        ],
+      }),
+    ]),
+  };
+}
+
+export { scripts };

package.json

@@ -3,37 +3,28 @@
   "version": "1.1.0",
   "license": "CC0-1.0",
   "engines": {
-    "node": ">=16.x"
+    "node": ">=20.x"
   },
   "scripts": {
-    "build": "node ./esbuild.mjs",
+    "build": "node ./esbuild/build.js",
     "clean": "rm -rf ./viewer/static/",
     "prettier": "prettier . --check",
     "prettier:fix": "prettier . --write",
-    "watch": "yarn build --watch"
+    "watch": "yarn build watch"
   },
   "dependencies": {
-    "@cfpb/cfpb-atomic-component": "^2.0.1",
-    "@cfpb/cfpb-buttons": "^2.0.0",
-    "@cfpb/cfpb-core": "^2.0.0",
-    "@cfpb/cfpb-expandables": "^2.0.1",
-    "@cfpb/cfpb-forms": "^2.0.0",
-    "@cfpb/cfpb-grid": "^2.0.0",
-    "@cfpb/cfpb-icons": "^2.0.0",
-    "@cfpb/cfpb-layout": "^2.0.0",
-    "@cfpb/cfpb-notifications": "^2.0.1",
-    "@cfpb/cfpb-pagination": "^2.0.0",
-    "@cfpb/cfpb-typography": "^2.0.1",
-    "autoprefixer": "^10.4.19",
-    "esbuild": "^0.23.0",
+    "@cfpb/cfpb-design-system": "^3.4.9",
+    "@csstools/postcss-sass": "5.1.1",
+    "@csstools/sass-import-resolve": "1.0.0",
+    "autoprefixer": "^10.4.20",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-copy": "^2.1.1",
-    "less": "^4.2.0",
-    "postcss": "^8.4.39",
-    "postcss-less": "^6.0.0"
+    "postcss": "^8.4.49",
+    "postcss-scss": "4.0.9"
   },
   "devDependencies": {
     "prettier": "^3.3.3",
-    "prettier-plugin-jinja-template": "^1.4.1"
+    "prettier-plugin-jinja-template": "^2.0.0"
   },
   "prettier": {
     "plugins": [
@@ -49,5 +40,6 @@
         }
       }
     ]
-  }
+  },
+  "type": "module"
 }

viewer/static_src/css/breadcrumbs.less → viewer/static_src/css/breadcrumbs.scss

@@ -1,29 +1,32 @@
+@use "sass:math";
+@use "@cfpb/cfpb-design-system/src/abstracts" as *;
+
 // Copied from https://github.com/cfpb/consumerfinance.gov/blob/f19227f9d13d90f19c06dd1dbd78e9233d1d3432/cfgov/unprocessed/css/breadcrumbs.less
 .m-breadcrumbs {
   // Mobile size.
   position: relative;
   display: flex;
-  gap: unit(10px / @base-font-size-px, rem);
+  gap: math.div(10px, $base-font-size-px) + rem;
   align-items: center;
   flex-wrap: wrap;
 
-  font-size: unit(14px / @base-font-size-px, rem);
-  padding-top: unit(15px / @base-font-size-px, rem);
-  padding-bottom: unit(15px / @base-font-size-px, rem);
+  font-size: math.div(14px, $base-font-size-px) + rem;
+  padding-top: math.div(15px, $base-font-size-px) + rem;
+  padding-bottom: math.div(15px, $base-font-size-px) + rem;
   min-height: 33px;
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    padding-top: unit(30px / @base-font-size-px, rem);
+  @include respond-to-min($bp-med-min) {
+    padding-top: math.div(30px, $base-font-size-px) + rem;
     // Bottom is zero because main content area may or may not have a breadcrumb,
     // so the main content needs to set it s own spacing.
     padding-bottom: 0;
-  });
+  }
 }
 
 // Hide on print.
-.respond-to-print({
+@include respond-to-print() {
   .m-breadcrumbs {
     display: none;
   }
-});
+}

viewer/static_src/css/footer.less → viewer/static_src/css/footer.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "@cfpb/cfpb-design-system/src/abstracts" as *;
+
 // Copied from https://github.com/cfpb/consumerfinance.gov/blob/9fd820092b80fe7272454e6a93cef2c81f351877/cfgov/unprocessed/css/organisms/footer.less
 .u-upper-hover-line {
   position: absolute;
@@ -13,10 +16,10 @@
   font-weight: 500;
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
-  padding-top: unit(50px / @base-font-size-px, em);
+  padding-top: math.div(50px, $base-font-size-px) + rem;
   // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
-  padding-bottom: unit(50px / @base-font-size-px, em);
+  padding-bottom: math.div(50px, $base-font-size-px) + rem;
   border-top: 5px solid var(--green);
   background: var(--gray-5);
 }