Merge branch 'main' into 1977-icon-fix

department-of-veterans-affairs · Oct 27, 2023 · d90708b · d90708b
2 parents 80619d1 + 685e1fd
commit d90708b
Show file tree

Hide file tree

Showing 36 changed files with 974 additions and 276 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "25.0.0",
+  "version": "30.0.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"
@@ -11,6 +11,7 @@
     "*.js"
   ],
   "main": "dist/app.bundle.js",
+  "types": "dist/components/types/index.d.ts",
   "module": "src/main.js",
   "dependencies": {
     "@department-of-veterans-affairs/react-components": "workspace:*",

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -62,6 +62,11 @@ module.exports = {
           to: './',
           context: path.resolve(__dirname, '../', 'web-components/dist'),
         },
+        {
+          from: '*',
+          to: './components/types',
+          context: path.resolve(__dirname, '../', 'web-components/dist/types'),
+        },
       ],
     }),
   ],

diff --git a/packages/design-system-dashboard-cli/README.md b/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.

diff --git a/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html b/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html
@@ -330,12 +330,13 @@ <h1><a href="index.html">All files</a> write-react-owners-to-csv.js</h1>
 const today = require('./today');
 &nbsp;
 const componentsToKeep = [
+  'AlertBox',
   'ExpandingGroup',
   'IconSearch',
   'TextInput',
 ];
 &nbsp;
-const hasMigrationScript = [];
+const hasMigrationScript = ['AlertBox'];
 &nbsp;
 function cleanPath(pathToClean) {
   const cwd = process.cwd();

diff --git a/packages/design-system-dashboard-cli/src/find-ds-components.js b/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) {

diff --git a/packages/design-system-dashboard-cli/src/search-files.js b/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/**`,
     ],
   });
 

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/react-components",
-  "version": "21.0.0",
+  "version": "25.0.0",
   "description": "VA.gov component library in React",
   "keywords": [
     "react",

diff --git a/packages/storybook/stories/additional-docs.js b/packages/storybook/stories/additional-docs.js
@@ -46,22 +46,10 @@ export const additionalDocs = {
     maturityCategory: USE,
     maturityLevel: DEPLOYED,
   },
-  'Banner - Maintenance': {
-    maturityCategory: USE,
-    maturityLevel: DEPLOYED,
-    guidanceHref: 'banner/maintenance',
-    guidanceName: 'Banner - maintenance',
-  },
   'Modal - React': {
     maturityCategory: DONT_USE,
     maturityLevel: DEPRECATED,
   },
-  'OMB info - React': {
-    guidanceHref: 'omb-info',
-    guidanceName: 'OMB info',
-    maturityCategory: DONT_USE,
-    maturityLevel: DEPRECATED,
-  },
   'Privacy agreement - React': {
     maturityCategory: CAUTION,
     maturityLevel: AVAILABLE,

diff --git a/packages/storybook/stories/va-crisis-line-modal.stories.jsx b/packages/storybook/stories/va-crisis-line-modal.stories.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+
+const crisisLineModalDocs = getWebComponentDocs('va-crisis-line-modal');
+
+export default {
+  title: `Components/Crisis Line Modal`,
+  id: 'components/va-crisis-line-modal',
+  parameters: {
+    componentSubtitle: 'va-crisis-line-modal web component',
+    docs: {
+      page: () => <StoryDocs data={crisisLineModalDocs} />,
+    },
+  },
+};
+
+const Template = ({}) => {
+  return <va-crisis-line-modal />;
+};
+
+export const Default = Template.bind(null);
+Default.argTypes = propStructure(crisisLineModalDocs);
diff --git a/packages/storybook/stories/va-minimal-header.stories.jsx b/packages/storybook/stories/va-minimal-header.stories.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs, componentStructure } from './wc-helpers';
+
+const minimalHeaderDocs = getWebComponentDocs('va-minimal-header');
+
+export default {
+  title: 'Components/Minimal Header',
+  id: 'components/va-minimal-header',
+  parameters: {
+    componentSubtitle: `va-minimal-header web component`,
+    docs: {
+      page: () => <StoryDocs data={minimalHeaderDocs} />,
+    },
+  },
+};
+
+const defaultArgs = {
+  header: "Authorization To Disclose Personal Information To A Third Party",
+  subheader: ""
+};
+const Template = ({ header, subheader }) => {
+  return (
+    <va-minimal-header
+      header={header}
+      subheader={subheader}
+    />
+  );
+};
+
+export const Default = Template.bind(null);
+Default.args = {
+  ...defaultArgs,
+};
+Default.argTypes = propStructure(minimalHeaderDocs);
+
+export const withSubheader = Template.bind(null);
+withSubheader.args = {
+  ...defaultArgs,
+  subheader: "(VA Form 21-0845)",
+};
diff --git a/packages/storybook/stories/va-modal-uswds.stories.jsx b/packages/storybook/stories/va-modal-uswds.stories.jsx
@@ -229,98 +229,3 @@ export const WithNestedWebComponents = ({
 };
 WithNestedWebComponents.args = defaultArgs;
 
-const CrisisTemplate = ({
-  'click-to-close': clickToClose,
-  'disable-analytics': disableAnalytics,
-  large,
-  'modal-title': modalTitle,
-  'initial-focus-selector': initialFocusSelector,
-  primaryButtonClick,
-  'primary-button-text': primaryButtonText,
-  secondaryButtonClick,
-  'secondary-button-text': secondaryButtonText,
-  status,
-  visible,
-  uswds,
-  forcedModal,
-}) => {
-  const [isVisible, setIsVisible] = useState(visible);
-  const onCloseEvent = () => setIsVisible(!isVisible);
-  const openModal = () => setIsVisible(true);
-  return (
-    <div>
-      <div
-        className="va-crisis-line"
-        style={{ position: 'static', height: '600px', maxWidth: 'none' }}
-      >
-        <div className="va-flex">
-          <button
-            data-show="#modal-crisisline"
-            className="va-crisis-line-button va-overlay-trigger"
-            onClick={openModal}
-          >
-            <span className="va-flex">
-              <span className="vcl"></span>
-              Get help from Veterans Crisis Line
-            </span>
-          </button>
-        </div>
-      </div>
-      <VaModal
-        forcedModal={forcedModal}
-        uswds={uswds}
-        clickToClose={clickToClose}
-        disableAnalytics={disableAnalytics}
-        large={large}
-        modalTitle={modalTitle}
-        initialFocusSelector={initialFocusSelector}
-        onCloseEvent={onCloseEvent}
-        onPrimaryButtonClick={primaryButtonClick}
-        primaryButtonText={primaryButtonText}
-        onSecondaryButtonClick={secondaryButtonClick}
-        secondaryButtonText={secondaryButtonText}
-        status={status}
-        visible={isVisible}
-      >
-        <div className="va-crisis-panel" style={{ transform: 'none' }}>
-          <div className="va-overlay-body va-crisis-panel-body">
-            <ul>
-              <li>
-                <a href="tel:18002738255">
-                  Call <strong>1-800-273-8255<br/>(Press 1)</strong>
-                </a>
-              </li>
-              <li>
-                <a href="sms:838255">
-                  Text to <b>838255</b>
-                </a>
-              </li>
-              <li>
-                <a href="https://www.veteranscrisisline.net/ChatTermsOfService.aspx?account=Veterans%20Chat">
-                  Chat <b>confidentially now</b>
-                </a>
-              </li>
-            </ul>
-            <p>
-              If you are in crisis or having thoughts of suicide, visit{' '}
-              <a href="https://www.veteranscrisisline.net/">
-                VeteransCrisisLine.net
-              </a>{' '}
-              for more resources.
-            </p>
-          </div>
-        </div>
-      </VaModal>
-    </div>
-  );
-};
-
-export const CrisisLineModal = CrisisTemplate.bind(null);
-CrisisLineModal.args = {
-  ...defaultArgs,
-  'primaryButtonClick': undefined,
-  'primary-button-text': undefined,
-  'secondaryButtonClick': undefined,
-  'secondary-button-text': undefined,
-  'modal-title': 'Get help from Veterans Crisis Line',
-};