Upgrade to Design System v3.x (#551)

* - Migrated from Less to Sass
- Added postcss builder for icons
- Upgraded to latest version of design system
- Moved from Less to Sass variables
- Move from @import to @use

* Fixed issues with imported scss files

* Removed old dependencies and theme overrides

* Completed initial fixes for build errors

* Completed initial fixes for build errors2

* stylelint less remove

* Fixed config with linting

* Fixed all linting errors

* Various updates

* Updated col classes to use mixins  in new design system

* incorporated design system updates into App.scss

* updated tbd components with BEM notation and new design system classes
Padding update in SearchPanel

* Added licensed-font() mixin to add in fonts

* Fixed media query syntax to work with Sass

* fixed  media queries pt 2

* fixed width of filter panel by adding a new class

* Changed date range label

* swapped out division to  math.div()  Sass  function

* final  cleanup

* production built files

* took out IE 11 fixes for TileChartMap styles

* update dist

* Addressed PR feedback

* Addressed PR feedback #2

* PR feedback updates  #3

* Removed `from` syntax

* Fixed background colors  for modals

---------

Co-authored-by: cdhenley219 <[email protected]>
Co-authored-by: Richard Dinh <[email protected]>

Author: 3 people

.eslintrc.js .eslintrc.cjs

@@ -5,7 +5,7 @@ This application allows consumers to search complaints submitted to the CFPB by
 
 #### Technology Stack
 
-This application is written in JavaScript and [Less](http://lesscss.org) within
+This application is written in JavaScript and [Sass](https://sass-lang.com/) within
 the [React](https://facebook.github.io/react/) + [Redux](http://redux.js.org/)
 framework. It uses [Webpack](http://webpack.github.io/docs/) at runtime to
 manage module loading.

README.md

@@ -1,5 +1,4 @@
 const CracoEsbuildPlugin = require('craco-esbuild');
-const CracoLessPlugin = require('craco-less');
 const path = require('path');
 const {
   addAfterLoader,
@@ -82,24 +81,5 @@ module.exports = {
         skipEsbuildJest: true, // Optional. Set to true if you want to use babel for jest tests,
       },
     },
-    {
-      plugin: CracoLessPlugin,
-      options: {
-        lessLoaderOptions: {
-          lessOptions: {
-            modifyVars: {
-              hack: `true;@import (reference) "${require.resolve(
-                './src/css/base.less',
-              )}";`,
-            },
-            javascriptEnabled: true,
-            math: 'always',
-            paths: [
-              path.resolve(__dirname, 'node_modules/@cfpb/cfpb-core/src'),
-            ],
-          },
-        },
-      },
-    },
   ],
 };

craco.config.js

@@ -23,7 +23,7 @@
     "analyze": "craco build; source-map-explorer '../static/js/*.js'",
     "build": "NODE_ENV=production ./scripts/build.sh",
     "eject": "react-scripts eject",
-    "lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,less}\" --fix && yarn lint:cypress",
+    "lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,scss}\" --fix && yarn lint:cypress",
     "lint:cypress": "yarn eslint ./cypress --fix",
     "prepare": "husky",
     "release": "yarn run build && release-it --npm.skipChecks",
@@ -38,20 +38,10 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/runtime": "^7.24.7",
     "@cfpb/browserslist-config": "0.0.2",
-    "@cfpb/cfpb-atomic-component": "1.2.0",
-    "@cfpb/cfpb-buttons": "1.3.0",
-    "@cfpb/cfpb-core": "1.2.0",
-    "@cfpb/cfpb-design-system": "^1.3.2",
-    "@cfpb/cfpb-expandables": "^1.2.0",
-    "@cfpb/cfpb-forms": "1.3.0",
-    "@cfpb/cfpb-grid": "1.2.0",
-    "@cfpb/cfpb-icons": "^1.2.0",
-    "@cfpb/cfpb-layout": "1.3.0",
-    "@cfpb/cfpb-notifications": "1.3.0",
-    "@cfpb/cfpb-pagination": "1.3.0",
-    "@cfpb/cfpb-tables": "1.2.0",
-    "@cfpb/cfpb-typography": "1.3.2",
+    "@cfpb/cfpb-design-system": "^3.2.2",
     "@craco/craco": "^7.1.0",
+    "@csstools/postcss-sass": "^5.1.1",
+    "@csstools/sass-import-resolve": "^1.0.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^10.4.0",
@@ -62,7 +52,6 @@
     "britecharts": "git+https://github.com/cfpb/britecharts.git#v2.4.2",
     "coveralls": "^3.0.9",
     "craco-esbuild": "^0.6.1",
-    "craco-less": "^3.0.1",
     "cypress": "^13.11.0",
     "d3": "^7.9.0",
     "dayjs": "^1.11.10",
@@ -79,17 +68,14 @@
     "intro.js": "^7.2.0",
     "intro.js-react": "1.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "less": "^4.2.0",
-    "less-loader": "^12.2.0",
-    "less-plugin-clean-css": "^1.5.1",
     "lint-staged": "^15.2.7",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.9.0",
     "mockdate": "^3.0.5",
     "postcss": "^8.4.38",
-    "postcss-less": "^6.0.0",
     "postcss-preset-env": "^9.5.13",
     "postcss-safe-parser": "^7.0.0",
+    "postcss-scss": "^4.0.9",
     "prettier": "^3.3.1",
     "prop-types": "^15.5.10",
     "query-string": "^9.0.0",
@@ -103,13 +89,14 @@
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "release-it": "^17.3.0",
+    "sass": "^1.79.4",
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.5.0",
     "stylelint-config-standard": "^36.0.0",
-    "stylelint-less": "^3.0.1"
+    "stylelint-config-standard-scss": "^13.1.0"
   },
   "lint-staged": {
-    "src/**/*.{css,less}": [
+    "src/**/*.{css,scss}": [
       "stylelint --fix"
     ],
     "{cypress,src}/**/*.{js,jsx,ts,tsx,json,md}": [
@@ -144,10 +131,10 @@
       "text-summary"
     ],
     "moduleNameMapper": {
-      "\\.(css|less)$": "identity-obj-proxy"
+      "\\.(css|scss)$": "identity-obj-proxy"
     },
     "transformIgnorePatterns": [
-      "^.+\\.module\\.(css|less)$"
+      "^.+\\.module\\.(css|scss)$"
     ]
   },
   "publishConfig": {

dist/ccdb5.css

@@ -0,0 +1,4 @@
+const { pluginProcessIcons } = require('./postcss/postcss-process-icons');
+module.exports = {
+  plugins: [require('autoprefixer'), pluginProcessIcons],
+};

dist/ccdb5.css.map

@@ -0,0 +1,48 @@
+// modified from
+// https://github.com/cfpb/design-system/blob/main/esbuild/plugins/postcss-process-icons.js
+
+const { readFileSync } = require('fs');
+const path = require('path');
+
+const currentDir = path.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 =
+          currentDir +
+          '/../node_modules/@cfpb/cfpb-design-system/src/components/cfpb-icons/icons/' +
+          iconName +
+          '.svg';
+        const rawSVG = await readFileSync(pathToSVG, 'utf8', (err, data) => {
+          // eslint-disable-next-line no-console
+          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;
+
+module.exports = { pluginProcessIcons };

dist/ccdb5.js

@@ -1,4 +1,4 @@
-import './css/App.less';
+import './css/App.scss';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
 import { SearchComponents } from './components/Search/SearchComponents';

dist/ccdb5.js.map

@@ -1,4 +1,4 @@
-import './ActionBar.less';
+import './ActionBar.scss';
 import { useDispatch, useSelector } from 'react-redux';
 import getIcon from '../iconMap';
 import { sendAnalyticsEvent } from '../../utils';

package.json

@@ -1,27 +1,31 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+@import '../../css/base';
+
 .action-bar {
   border: 1px solid var(--gray-40);
   border-left: 0; // Don't double the border with the filters
   background-color: var(--green-20);
-  padding: @gutter-normal @grid_gutter-width;
+  padding: $gutter-normal $grid-gutter-width;
 
   h2 {
     margin: 0;
 
-    @media @phone {
-      padding: @gutter-normal;
+    @media screen and (max-width: $layout-breakpoint-phone-max) {
+      padding: $gutter-normal;
     }
   }
 
   .export-results {
-    padding-top: @gutter-minimum;
+    padding-top: $gutter-minimum;
     margin: 0;
-    margin-bottom: @gutter-minimum;
+    margin-bottom: $gutter-minimum;
     .a-btn {
-      margin-right: @gutter-normal;
-      font-size: @size-v;
+      margin-right: $gutter-normal;
+      font-size: $size-v;
 
       svg {
-        margin-right: @gutter-minimum;
+        margin-right: $gutter-minimum;
       }
     }
   }
@@ -44,15 +48,15 @@
     }
   }
 
-  @media @phone {
+  @media screen and (max-width: $layout-breakpoint-phone-max) {
     padding-left: 0;
     border: 1px solid var(--gray-40);
     .export-results {
       margin-left: 15px;
     }
   }
 
-  @media @superwide {
+  @media screen and (min-width: $layout-breakpoint-superwide-min){
     padding-left: 40px;
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-import './ChartWrapper.less';
+import './ChartWrapper.scss';
 import { ErrorBlock } from '../../Warnings/Error';
 import PropTypes from 'prop-types';
 

postcss/postcss-process-icons.js

@@ -1,4 +1,4 @@
-import './LineChart.less';
+import './LineChart.scss';
 import * as d3 from 'd3';
 import line from 'britecharts/dist/umd/line.min';
 import tooltip from 'britecharts/dist/umd/tooltip.min';

src/App.js

@@ -44,7 +44,8 @@
       display: none;
     }
   }
-  //line on hover for the tooltip.
+
+  // line on hover for the tooltip.
   .vertical-marker {
     stroke: var(--gray-20);
     stroke-width: 2px;

src/components/ActionBar/ActionBar.js

@@ -1,4 +1,4 @@
-import './RowChart.less';
+import './RowChart.scss';
 import * as d3 from 'd3';
 import { max } from 'd3-array';
 import { miniTooltip, row } from 'britecharts';

src/components/ActionBar/ActionBar.less src/components/ActionBar/ActionBar.scss

@@ -1,13 +1,18 @@
+@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
+@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
+@import '../../../css/base';
+
 .row-chart-section {
-  margin-top: @grid_gutter-width;
-  margin-left: @grid_gutter-width;
+  margin-top: $grid-gutter-width;
+  margin-left: $grid-gutter-width;
 
   p {
     max-width: none;
   }
 }
 
-@media @phone {
+@media screen and (max-width: $layout-breakpoint-phone-max) {
   .row-chart-section {
     margin-left: 0;
   }

src/components/Charts/ChartWrapper/ChartWrapper.js

@@ -1,4 +1,4 @@
-import './StackedAreaChart.less';
+import './StackedAreaChart.scss';
 import * as d3 from 'd3';
 import { stackedArea } from 'britecharts';
 import { useEffect, useMemo } from 'react';

src/components/Charts/ChartWrapper/ChartWrapper.less src/components/Charts/ChartWrapper/ChartWrapper.scss

@@ -1,4 +1,4 @@
-import './TooltipWrapper.less';
+import './TooltipWrapper.scss';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import PropTypes from 'prop-types';
 import Tooltip from 'react-bootstrap/Tooltip';

src/components/Charts/LineChart/LineChart.js

@@ -119,7 +119,7 @@
   --bs-popover-border-color: var(--bs-border-color-translucent);
   --bs-popover-border-radius: 0.5rem;
   --bs-popover-inner-border-radius: calc(0.5rem - 1px);
-  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 15%);
+  --bs-popover-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;

src/components/Charts/LineChart/LineChart.less src/components/Charts/LineChart/LineChart.scss

@@ -1,4 +1,4 @@
-import './ComplaintDetail.less';
+import './ComplaintDetail.scss';
 import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {