Merge branch 'main' into remove-loadingindicator-react

packages/design-system-dashboard-cli/README.md

@@ -75,6 +75,8 @@ If you supply search terms, it'll filter the result.
 
 ![filtered result](./img/filtered-result.png)
 
+If you supply the string `uswds` as a search term, it'll return all web component and react binding usages where the uswds prop is being used.
+
 **Note:** Search terms are case sensitive!
 
 Search terms may be regex.

packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html

@@ -331,7 +331,6 @@ <h1><a href="index.html">All files</a> write-react-owners-to-csv.js</h1>
 &nbsp;
 const componentsToKeep = [
   'AlertBox',
-  'Checkbox',
   'ExpandingGroup',
   'IconSearch',
   'LoadingIndicator',

packages/design-system-dashboard-cli/src/find-ds-components.js

@@ -143,6 +143,9 @@ function findUsedReactComponents(vwModules, regexPattern) {
  * Search vets-website and the content build for design system components.
  *
  * @param searchStrings {string[]} - The components to display usage for
+ *
+ * Passing in the string 'uswds' will output a list of all web components and
+ * web component react bindings where the uswds prop is used
  */
 function findComponents(searchStrings) {
   const vwModules = readAllModules(`${repos['vets-website']}/src`);
@@ -163,18 +166,30 @@ function findComponents(searchStrings) {
   );
 
   const wcTagRegex = /<(va-[^\s>]+)/gms;
-  const vwWebComponents = search(vwModules, wcTagRegex);
-  const contentBuildWC = search(contentTemplates, wcTagRegex);
+  const wcUswds3Regex = /<(Va[^\s]+|va-[^\s]+)(\s|\n)[^>]*?uswds/gms;
 
-  const vwComponents = [
-    ...usedReactComponents,
-    ...vwWebComponents,
-    ...usedReactBindings,
-  ];
+  let vwWebComponents;
+  let contentBuildWC;
+  let vwComponents;
 
-  const data = tallyResults(vwComponents, contentBuildWC);
+  if (searchStrings?.includes('uswds')) {
+    vwWebComponents = search(vwModules, wcUswds3Regex);
+    contentBuildWC = search(contentTemplates, wcUswds3Regex);
+    vwComponents = [...vwWebComponents];
+  } else {
+    vwWebComponents = search(vwModules, wcTagRegex);
+    contentBuildWC = search(contentTemplates, wcTagRegex);
+    vwComponents = [
+      ...usedReactComponents,
+      ...vwWebComponents,
+      ...usedReactBindings,
+    ];
+  }
 
-  return filterSearchedComponents(data, searchStrings);
+  const data = tallyResults(vwComponents, contentBuildWC);
+  return searchStrings?.includes('uswds')
+    ? data
+    : filterSearchedComponents(data, searchStrings);
 }
 
 if (require.main === module) {

packages/design-system-dashboard-cli/src/search-files.js

@@ -26,6 +26,8 @@ function readAllModules(rootDir) {
       `${rootDir}/**/_mock-form/**`,
       `${rootDir}/**/*.unit.@(js|jsx)`,
       `${rootDir}/**/*.spec.@(js|jsx)`,
+      `${rootDir}/**/ds-playground/**`,
+      `${rootDir}/**/ds-v3-playground/**`,
     ],
   });
 

packages/design-system-dashboard-cli/src/write-react-owners-to-csv.js

@@ -7,7 +7,6 @@ const today = require('./today');
 const componentsToKeep = [
   'AlertBox',
   'Breadcrumbs',
-  'Checkbox',
   'ExpandingGroup',
   'IconSearch',
   'Modal',

packages/react-components/index.js

@@ -1,6 +1,5 @@
 import AlertBox, { ALERT_TYPE } from './AlertBox';
 import Breadcrumbs from './Breadcrumbs';
-import Checkbox from './Checkbox';
 import ExpandingGroup from './ExpandingGroup';
 import IconBase from './IconBase';
 import IconSearch from './IconSearch';
@@ -14,7 +13,6 @@ export {
   AlertBox,
   ALERT_TYPE,
   Breadcrumbs,
-  Checkbox,
   ExpandingGroup,
   IconBase,
   IconSearch,