Release v0.6.1 (Sprint 39)

.github/workflows/build-and-deploy.yml

@@ -38,7 +38,6 @@ jobs:
           cd ..
       - name: Install Linters and Sniffers
         run: |
-          npm install --prefix ./benefit-finder
           composer global config --no-plugins allow-plugins.dealerdirect/phpcodesniffer-composer-installer false
           composer global require --dev drupal/coder php-parallel-lint/php-parallel-lint squizlabs/php_codesniffer=*
           COMPOSER_DIR=$(composer -n config --global home)
@@ -50,7 +49,7 @@ jobs:
       - name: PHP Lint
         run: |
           COMPOSER_DIR=$(composer -n config --global home)
-          $COMPOSER_DIR/vendor/bin/parallel-lint -e php,module,inc,install,test,profile,theme ./benefit-finder ./benefit-finder # | tee /tmp/results/php-lint.log
+          $COMPOSER_DIR/vendor/bin/parallel-lint -e php,module,inc,install,test,profile,theme ./usagov_benefit_finder # | tee /tmp/results/php-lint.log
       - name: PHP CodeSniff (Ignore warnings)
         run: |
           COMPOSER_DIR=$(composer -n config --global home)

README.md

@@ -1,4 +1,5 @@
 # Benefit Finder v2
+
 [Jump to Getting Started](#getting-started)
 
 ## Synopsis

benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap

@@ -25,7 +25,7 @@ exports[`loads intro 1`] = `
           >
             <h1
               aria-level="1"
-              class="bf-chevron-heading font-family-sans"
+              class="bf-chevron-heading "
               id="skip-to-h1"
               role="heading"
             >
@@ -53,7 +53,7 @@ exports[`loads intro 1`] = `
         >
           <h2
             aria-level="2"
-            class="font-family-sans"
+            class=""
             role="heading"
           >
             Steps
@@ -115,7 +115,7 @@ exports[`loads intro 1`] = `
             >
               <h2
                 aria-level="2"
-                class="bf-intro-process-notices-heading font-family-sans"
+                class="bf-intro-process-notices-heading "
                 role="heading"
               >
                 Before you start:

benefit-finder/src/shared/components/Accordion/_index.scss

@@ -16,13 +16,13 @@
     }
 
     .bf-accordion-heading {
-      @include h6;
+      @include h5($font-family: 'sans');
 
       letter-spacing: 0;
     }
 
     .bf-accordion-sub-heading {
-      @include p1;
+      @include p;
 
       letter-spacing: 0;
     }

benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap

@@ -14,7 +14,7 @@ exports[`Alert > renders a match to the previous snapshot when it has an error 1
     >
       <h2
         aria-level="2"
-        class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        class="bf-usa-alert__heading usa-alert__heading "
         data-testid="bf-alert-heading"
         role="heading"
       >
@@ -45,7 +45,7 @@ exports[`Alert > renders a match to the previous snapshot, default 1`] = `
     >
       <h2
         aria-level="2"
-        class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        class="bf-usa-alert__heading usa-alert__heading "
         data-testid="bf-alert-heading"
         role="heading"
       >
@@ -76,7 +76,7 @@ exports[`Alert > renders a match to the previous snapshot, error type with no er
     >
       <h2
         aria-level="2"
-        class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        class="bf-usa-alert__heading usa-alert__heading "
         data-testid="bf-alert-heading"
         role="heading"
       >

benefit-finder/src/shared/components/Alert/_index.scss

@@ -7,9 +7,9 @@
 }
 
 h2.bf-usa-alert__heading {
-  @include h6;
+  @include h5($font-family: 'sans');
 }
 
-.bf-usa-alert__text {
-  @include p2;
+.bf-errors-list-item a {
+  @include p;
 }

benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap

@@ -62,7 +62,7 @@ exports[`BenefitAccordionGroup > renders a match to the previous snapshot 1`] =
         <div>
           <h4
             aria-level="4"
-            class="bf-usa-detail-title font-family-sans"
+            class="bf-usa-detail-title "
             role="heading"
           >
             By  Federal Emergency Management Agency (FEMA)
@@ -80,7 +80,7 @@ exports[`BenefitAccordionGroup > renders a match to the previous snapshot 1`] =
 
             <h5
               aria-level="5"
-              class="bf-key-eligibility-criteria-heading font-family-sans"
+              class="bf-key-eligibility-criteria-heading "
               role="heading"
             >
               Key eligibility criteria

benefit-finder/src/shared/components/BenefitAccordionGroup/_index.scss

@@ -7,14 +7,20 @@
   .bf-usa-accordion {
     margin-bottom: space.$space-sm-plus;
 
+    .bf-usa-detail-title {
+      margin-bottom: space.$space-sm;
+    }
+
     .bf-usa-detail-summary {
       p {
-        @include p;
-
         margin-bottom: space.$space-md-plus;
       }
     }
 
+    .bf-key-eligibility-criteria-heading {
+      @include h5($font-family: 'sans');
+    }
+
     .bf-usa-accordion-group-cta-wrapper {
       display: flex;
       justify-content: center;
@@ -28,6 +34,5 @@
 
   .bf-expand-all {
     margin-bottom: space.$space-lg;
-    margin-top: space.$space-lg;
   }
 }

benefit-finder/src/shared/components/Button/_index.scss

@@ -1,8 +1,11 @@
 @use '../../styles/space/_index.scss' as space;
 @use '../../styles/functions/_index.scss' as *;
+@use '../../styles/mixins/_index.scss' as *;
 @use '../../styles/colors/_index.scss' as colors;
 
 .bf-usa-button {
+  @include important-bold($font-family: 'sans');
+
   padding: space.$space-md space.$space-md-gap;
   font-size: rem(17.6px);
 }

benefit-finder/src/shared/components/Card/__tests__/__snapshots__/index.spec.jsx.snap

@@ -13,7 +13,7 @@ exports[`Card > renders a match to the previous snapshot 1`] = `
       >
         <h3
           aria-level="3"
-          class="bf-usa-card__heading usa-card__heading font-family-sans"
+          class="bf-usa-card__heading usa-card__heading "
           role="heading"
         />
       </div>

benefit-finder/src/shared/components/Card/_index.scss

@@ -44,19 +44,23 @@
     }
   }
 
+  .bf-usa-card__header {
+    padding-bottom: 0;
+  }
+
   h3.bf-usa-card__heading {
-    @include h6;
+    @include subheadings($font-family: 'sans');
 
+    font-weight: 700;
     text-decoration: underline;
   }
 
   .bf-usa-card__body {
-    @include p;
-
     display: none;
   }
 
-  .bf-usa-card__cta {
+  .bf-usa-card__cta,
+  .bf-usa-card__body {
     padding: space.$padding-bottom-md-plus;
     padding-top: 0;
     margin-top: 0;

benefit-finder/src/shared/components/Chevron/__tests__/__snapshots__/index.spec.jsx.snap

@@ -10,7 +10,7 @@ exports[`Chevron > renders a match to the previous snapshot 1`] = `
     >
       <h1
         aria-level="1"
-        class="bf-chevron-heading font-family-sans"
+        class="bf-chevron-heading "
         id="skip-to-h1"
         role="heading"
       />

benefit-finder/src/shared/components/Chevron/_index.scss

@@ -5,7 +5,7 @@
 @use '../../styles/mixins/_index.scss' as *;
 
 h1.bf-chevron-heading {
-  @include h0;
+  @include h1;
 }
 
 .bf-chevron {
@@ -15,22 +15,10 @@ h1.bf-chevron-heading {
   margin: 0 auto;
   color: color.$white;
   margin-bottom: rem(140px);
-
-  .grid-container {
-    max-width: rem(850px);
-  }
 }
 
 .bf-chevron-description p {
-  @include p;
-
-  line-height: rem(25.92px);
-}
-
-.bf-chevron-description p strong {
-  @include important-x-bold;
-
-  line-height: rem(25.92px);
+  @include intro-text;
 }
 
 // triangle down

benefit-finder/src/shared/components/Date/__tests__/__snapshots__/index.spec.jsx.snap

@@ -34,7 +34,6 @@ exports[`Date > renders a match to the previous snapshot 1`] = `
         name="applicant_date_of_birth_0_month"
       >
         <option
-          disabled=""
           value=""
         >
           -Select-

benefit-finder/src/shared/components/Date/_index.scss

@@ -14,14 +14,9 @@
 }
 
 .bf-usa-input {
-  border-radius: rem(3px);
-
-  @include p;
-
   &.usa-input--error {
     padding: rem(8px);
     height: initial;
-    border-radius: rem(3px);
     border-color: color.$alert-red;
   }
 }

benefit-finder/src/shared/components/Date/index.jsx

@@ -103,7 +103,7 @@ const Date = ({
             aria-errormessage={`month-error-description-${id}`}
             data-datetype="month"
           >
-            <option value="" key="default" disabled>
+            <option value="" key="default">
               {dateDefaultValue}
             </option>
             {monthOptions.map((option, i) => (
@@ -165,7 +165,7 @@ Date.propTypes = {
   value: PropTypes.object,
   ui: PropTypes.object,
   id: PropTypes.string,
-  invalid: PropTypes.array,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
 }
 
 export default Date

benefit-finder/src/shared/components/Fieldset/_index.scss

@@ -1,11 +1,16 @@
 @use '../../styles/space/_index.scss' as space;
 @use '../../styles/colors/_index.scss' as color;
+@use '../../styles/mixins/_index.scss' as *;
 
 .bf-usa-fieldset {
   position: relative;
   padding: 0;
   margin: 0;
 
+  .bf-hint {
+    @include p;
+  }
+
   .bf-error-detail {
     margin: 0 0 space.$space-sm;
     color: color.$alert-red;

benefit-finder/src/shared/components/Heading/__tests__/__snapshots__/index.spec.jsx.snap

@@ -4,7 +4,7 @@ exports[`Heading > renders a match to the previous snapshot 1`] = `
 <DocumentFragment>
   <h1
     aria-level="1"
-    class="font-family-sans"
+    class=""
     id="skip-to-h1"
     role="heading"
   />

benefit-finder/src/shared/components/Heading/index.jsx

@@ -12,7 +12,7 @@ import './_index.scss'
  */
 const Heading = ({ children, className, headingLevel, ...props }) => {
   // pass our default classes
-  const defaultClasses = ['font-family-sans']
+  const defaultClasses = ['']
 
   // return html as a tring for heading element values
   const Tag = `h${headingLevel}`

benefit-finder/src/shared/components/Hint/_index.scss

@@ -3,19 +3,11 @@
 @use '../../styles/mixins/_index.scss' as *;
 
 .bf-usa-hint--required {
-  @include p;
-
   color: color.$dark-medium-grey;
 }
 
 .bf-required {
-  @include p;
-
   color: color.$dark-medium-grey;
   font-weight: 400;
   margin-left: space.$space-sm;
 }
-
-.bf-usa-hint {
-  @include p;
-}

benefit-finder/src/shared/components/Icon/index.jsx

@@ -14,6 +14,9 @@ const Icon = ({ type, color, ...props }) => {
   let icon
 
   switch (type) {
+    case 'all_benefits':
+      icon = <Icons.AllBenefits />
+      break
     case 'carrot-solid':
       icon = <Icons.CarrotSolid color={color} />
       break