Merge branch 'main' into dst1957-replace-deprecated-color

department-of-veterans-affairs · Aug 28, 2023 · 944797b · 944797b
2 parents 26fc0f2 + 912bf23
commit 944797b
Show file tree

Hide file tree

Showing 71 changed files with 1,014 additions and 868 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -112,6 +112,12 @@ module.exports = {
     'jsx-a11y/no-static-element-interactions': 1, // 20
   },
   overrides: [
+    {
+      files: ['*'],
+      rules: {
+        'cypress/unsafe-to-chain-command': 'warn',
+      },
+    },
     {
       files: [
         '**/*.spec.jsx',
@@ -120,6 +126,7 @@ module.exports = {
         'src/platform/testing/**/*.jsx',
       ],
       rules: {
+        'cypress/unsafe-to-chain-command': 'warn',
         'no-restricted-imports': ['error', 'raven'],
         'no-unused-expressions': 0,
         'react/no-find-dom-node': 0,
@@ -130,9 +137,9 @@ module.exports = {
     {
       files: ['**/*.cypress.spec.js'],
       rules: {
+        'cypress/unsafe-to-chain-command': 'warn',
         '@department-of-veterans-affairs/axe-check-required': 1,
         '@department-of-veterans-affairs/cypress-viewport-deprecated': 1,
-        'cypress/unsafe-to-chain-command': 0,
       },
     },
   ],

diff --git a/package.json b/package.json
@@ -244,6 +244,7 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "@department-of-veterans-affairs/css-library": "^0.1.0-rc4",
     "@department-of-veterans-affairs/component-library": "^19.1.0",
     "@department-of-veterans-affairs/formation": "^7.0.8",
     "@department-of-veterans-affairs/react-jsonschema-form": "^1.2.5",

diff --git a/src/applications/claims-status/components/ClosedClaimMessage.jsx b/src/applications/claims-status/components/ClosedClaimMessage.jsx
@@ -1,7 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router';
+import {
+  format,
+  getUnixTime,
+  isAfter,
+  isValid,
+  parseISO,
+  startOfDay,
+  subDays,
+} from 'date-fns';
 import { orderBy } from 'lodash';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 
 import recordEvent from 'platform/monitoring/record-event';
@@ -25,22 +33,16 @@ const getRecentlyClosedClaims = claims => {
       // Check if this is an appeal, if so we want to filter it out
       // if it was closed more than 60 days ago
       if (isAppeal(claim)) {
-        const sixtyDaysAgo = moment()
-          .add(-60, 'days')
-          .startOf('day');
+        const sixtyDaysAgo = startOfDay(subDays(new Date(), 60));
         const events = orderBy(
           claim.attributes.events,
-          [e => moment(e.date).unix()],
+          [e => getUnixTime(parseISO(e.date))],
           ['desc'],
         );
         const lastEvent = events[0];
+        const lastEventDate = startOfDay(parseISO(lastEvent.date));
 
-        return (
-          !claim.attributes.active &&
-          moment(lastEvent.date)
-            .startOf('day')
-            .isAfter(sixtyDaysAgo)
-        );
+        return !claim.attributes.active && isAfter(lastEventDate, sixtyDaysAgo);
       }
 
       // START lighthouse_migration
@@ -52,22 +54,16 @@ const getRecentlyClosedClaims = claims => {
 
       // If the claim is not an appeal, we want to filter it out
       // if it was closed more than 30 days ago
-      return (
-        isClosed &&
-        moment(dateClosed || null)
-          .startOf('day')
-          .isAfter(
-            moment()
-              .add(-30, 'days')
-              .startOf('day'),
-          )
-      );
+      const thirtyDaysAgo = startOfDay(subDays(new Date(), 30));
+      const startOfCloseDate = startOfDay(parseISO(dateClosed));
+
+      return isClosed && isAfter(startOfCloseDate, thirtyDaysAgo);
     })
     .map(c => {
       if (isAppeal(c)) {
         const events = orderBy(
           c.attributes.events,
-          [e => moment(e.date).unix()],
+          [e => getUnixTime(parseISO(e.date))],
           ['desc'],
         );
         return {
@@ -98,7 +94,13 @@ const getClaimDate = claim => {
 };
 // END lighthouse_migration
 
-const formatDate = date => moment(date || null).format('MMMM D, YYYY');
+const formatDate = date => {
+  const parsedDate = parseISO(date);
+
+  return isValid(parsedDate)
+    ? format(parsedDate, 'MMMM d, yyyy')
+    : 'Invalid date';
+};
 
 const getLinkText = claim => {
   const claimType = isAppeal(claim)

diff --git a/src/applications/disability-benefits/all-claims/content/itfWrapper.jsx b/src/applications/disability-benefits/all-claims/content/itfWrapper.jsx
@@ -7,9 +7,13 @@ import { recordEventOnce } from 'platform/monitoring/record-event';
 
 // EVSS returns dates like '2014-07-28T19:53:45.810+0000'
 const evssDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
-const outputDateFormat = 'MMMM DD, YYYY';
+const outputDateFormat = 'dddd MMMM Do[,] Y [at] h[:]ma';
+// Adding 1 hour to the displayDate output will display the time in the ET timezone as the returned time and date
+// is in the central timezone
 const displayDate = dateString =>
-  moment(dateString, evssDateFormat).format(outputDateFormat);
+  moment(dateString, evssDateFormat)
+    .add(1, 'hours')
+    .format(outputDateFormat);
 
 export const itfMessage = (headline, content, status) => (
   // Inline style to match .full-page-alert bottom margin because usa-grid > :last-child has a
@@ -80,15 +84,15 @@ export const itfSuccess = (
     <p className="vads-u-font-size--base">
       Thank you for submitting your Intent to File request for disability
       compensation. Your Intent to File will expire on{' '}
-      {displayDate(expirationDate)}.
+      <strong>{displayDate(expirationDate)} ET</strong>.
     </p>
     {hasPreviousItf && (
       <p className="vads-u-font-size--base">
         <strong>Please note:</strong> We found a previous Intent to File request
-        in our records that expired on {displayDate(prevExpirationDate)}. This
-        ITF might have been from an application you started, but didn’t finish
-        before the ITF expired. Or, it could have been from a claim you already
-        submitted.
+        in our records that expired on{' '}
+        <strong>{displayDate(prevExpirationDate)} ET</strong>. This ITF might
+        have been from an application you started, but didn’t finish before the
+        ITF expired. Or, it could have been from a claim you already submitted.
       </p>
     )}
     {expander}
@@ -100,7 +104,7 @@ export const itfActive = expirationDate => (
     <p className="vads-u-font-size--base">
       Our records show that you already have an Intent to File for disability
       compensation. Your Intent to File will expire on{' '}
-      {displayDate(expirationDate)}. You’ll need to submit your claim by this
+      {displayDate(expirationDate)} ET. You’ll need to submit your claim by this
       date in order to receive payments starting from your effective date.
     </p>
     {expander}

diff --git a/src/applications/ds-v3-playground/pages/V3BasePage.jsx b/src/applications/ds-v3-playground/pages/V3BasePage.jsx
@@ -113,15 +113,15 @@ export default function V3BasePage() {
 
   return (
     <>
-      <div className="grid-container">
-        <div className="grid-row">
+      <div className="vads-grid-container vads-font-sans">
+        <div className="vads-grid-row">
           <h1>V3 Without Formation Demo</h1>
         </div>
 
         {/* Text Input */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Text input component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Text input component</h2>
+          <div className="vads-grid-col">
             <VaTextInput
               uswds
               name="v3Input"
@@ -134,9 +134,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Number Input */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Number input component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Number input component</h2>
+          <div className="vads-grid-col">
             <VaNumberInput
               uswds
               name="v3NumberInput"
@@ -150,9 +150,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Select */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Select component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Select component</h2>
+          <div className="vads-grid-col">
             <VaSelect
               uswds
               name="v3Select"
@@ -168,9 +168,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Radio */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Radio component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Radio component</h2>
+          <div className="vads-grid-col">
             <VaRadio
               uswds
               label="V3 Radio"
@@ -201,9 +201,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Checkbox */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Checkbox component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Checkbox component</h2>
+          <div className="vads-grid-col">
             <VaCheckboxGroup
               uswds
               label="V3 Checkbox Group"
@@ -218,9 +218,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Memorable Date */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Memorable date component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Memorable date component</h2>
+          <div className="vads-grid-col">
             <VaMemorableDate
               name="v3MemorableDate"
               label="V3 Memorable date"
@@ -234,9 +234,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Textarea */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Textarea component</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Textarea component</h2>
+          <div className="vads-grid-col">
             <VaTextarea
               name="v3TextArea"
               label="V3 Textarea"
@@ -249,9 +249,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Button pair */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Button pair</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Button pair</h2>
+          <div className="vads-grid-col">
             <VaButtonPair
               continue
               onPrimaryClick={() =>
@@ -267,9 +267,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Button */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Button</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Button</h2>
+          <div className="vads-grid-col">
             <VaButton
               onClick={() => handleClick('v3ButtonValue', 'V3 edit')}
               text="Edit"
@@ -280,9 +280,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Modal */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Modal</h2>
-          <div className="grid-col padding-bottom-2">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Modal</h2>
+          <div className="vads-grid-col padding-bottom-2">
             <VaButton
               onClick={openModalV3}
               text="Click here to open V3 modal"
@@ -304,9 +304,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Privacy Agreement */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Privacy Agreement</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Privacy Agreement</h2>
+          <div className="vads-grid-col">
             <VaPrivacyAgreement
               id="v3PrivacyAgreement"
               onVaChange={e =>
@@ -326,9 +326,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Alert */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Alert</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Alert</h2>
+          <div className="vads-grid-col">
             <h3>Statuses</h3>
             <VaAlert
               status="info"
@@ -439,9 +439,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Progress bar - segmented */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Progress bar - segmented</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Progress bar - segmented</h2>
+          <div className="vads-grid-col">
             <VaSegmentedProgressBar
               centered-labels
               counters="small"
@@ -456,9 +456,9 @@ export default function V3BasePage() {
         </div>
 
         {/* Additional Info */}
-        <div className="grid-row flex-column border-bottom">
-          <h2 className="grid-col font-ui-md">Additional Info</h2>
-          <div className="grid-col">
+        <div className="vads-grid-row vads-flex-direction-column border-bottom">
+          <h2 className="vads-grid-col font-ui-md">Additional Info</h2>
+          <div className="vads-grid-col">
             <VaAdditionalInfo trigger="Expand Additional Information" uswds>
               <div>Here are some items</div>
               <ul>

diff --git a/src/applications/ds-v3-playground/sass/ds-v3-playground.scss b/src/applications/ds-v3-playground/sass/ds-v3-playground.scss
@@ -1,4 +1,4 @@
-
+@import "~@department-of-veterans-affairs/css-library/dist/utilities.css";
 
 @font-face {
   font-family: "Font Awesome 5 Free";
@@ -10,8 +10,20 @@
   font-display: swap;
 }
 
-.grid-container {
-  font-family: var(--font-source-sans);
+@font-face {
+  font-family: "Source Sans Pro Web";
+  src: url("/generated/sourcesanspro-regular-webfont.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Source Sans Pro Web";
+  src: url("/generated/sourcesanspro-bold-webfont.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 .border-bottom {