[NOREF] QA homepage fixes (#1249)

* qa homepages fixes * updated snapshot * Fixed mobile solution card * Added accessibility for order, style tweak * Qa fixes * Addressed qa doc new findings * Updated datatestid * Cypress test tweak
CMS-Enterprise · Jul 25, 2024 · 5911fef · 5911fef
1 parent f332b7c
commit 5911fef
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 68 deletions.
diff --git a/cypress/e2e/archive.spec.js b/cypress/e2e/archive.spec.js
@@ -15,10 +15,12 @@ describe('The Model Plan Form', () => {
       expect(loc.pathname).to.eq('/');
     });
 
-    cy.get('table').within(() => {
-      cy.get('tbody').within(() => {
-        cy.contains('th', 'Empty Plan').should('not.exist');
+    cy.get('table')
+      .first()
+      .within(() => {
+        cy.get('tbody').within(() => {
+          cy.contains('th', 'Empty Plan').should('not.exist');
+        });
       });
-    });
   });
 });
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
@@ -148,7 +148,7 @@ const NavigationBar = ({
     <nav
       aria-label={t('header:navigation')}
       data-testid="navigation-bar"
-      className={className}
+      className={classNames(className, 'z-400')}
     >
       <GridContainer>
         <PrimaryNav

diff --git a/src/gql/apolloGQL/ITSolutions/GetModelsBySolution.ts b/src/gql/apolloGQL/ITSolutions/GetModelsBySolution.ts
@@ -8,6 +8,7 @@ export default gql(/* GraphQL */ `
       modelPlan {
         id
         modelName
+        abbreviation
         status
         modelBySolutionStatus
         basics {

diff --git a/src/gql/gen/graphql.ts b/src/gql/gen/graphql.ts
diff --git a/src/i18n/en-US/home/customHome.ts b/src/i18n/en-US/home/customHome.ts
@@ -20,7 +20,7 @@ const settings: HomepageSettingsType = {
     noResultsDescription: 'Once a plan is created, it will appear here.'
   },
   [ViewCustomizationType.FOLLOWED_MODELS]: {
-    heading: 'Models I’m following',
+    heading: 'Models you’re following',
     description:
       'You will receive email notifications when models you’re following are updated.',
     noResultsHeading: 'You are not following any models yet.',

diff --git a/src/i18n/en-US/home/settings.ts b/src/i18n/en-US/home/settings.ts
@@ -43,6 +43,8 @@ const homepageSettings = {
     'Arrange the content however you wish. You can update this at any time.',
   selection: 'Select which information to display on your homepage.',
   selectionTwo: 'Set the display order for your homepage.',
+  orderUp: 'Order setting up',
+  orderDown: 'Order setting down',
   settings,
   selectSolutions: 'Select solutions',
   updateSolutions: 'Update solutions',

diff --git a/src/stylesheets/custom.scss b/src/stylesheets/custom.scss
@@ -172,3 +172,11 @@
 .font-body-xs {
   font-size: 14px !important;
 }
+
+.row-reverse {
+  flex-direction: row-reverse;
+}
+
+.z-400 {
+  z-index: 400 !important;
+}
diff --git a/src/views/HomeNew/Settings/__snapshots__/index.test.tsx.snap b/src/views/HomeNew/Settings/__snapshots__/index.test.tsx.snap
@@ -238,7 +238,7 @@ exports[`settings snapshots > matches setting snapshot 1`] = `
                     />
                   </div>
                   <p
-                    class="padding-left-4 padding-right-2 margin-y-0 font-body-xs"
+                    class="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs"
                   >
                     This section displays all of the Model Plans that you’re a team member of. Model links go to the Task List.
                   </p>
@@ -278,7 +278,7 @@ exports[`settings snapshots > matches setting snapshot 1`] = `
                     />
                   </div>
                   <p
-                    class="padding-left-4 padding-right-2 margin-y-0 font-body-xs"
+                    class="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs"
                   >
                     This searchable table displays all Model Plans (like the one on the Models tab).
                   </p>
@@ -318,7 +318,7 @@ exports[`settings snapshots > matches setting snapshot 1`] = `
                     />
                   </div>
                   <p
-                    class="padding-left-4 padding-right-2 margin-y-0 font-body-xs"
+                    class="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs"
                   >
                     This section shows only the models you’re following (like the one on the Models tab).
                   </p>
@@ -358,7 +358,7 @@ exports[`settings snapshots > matches setting snapshot 1`] = `
                     />
                   </div>
                   <p
-                    class="padding-left-4 padding-right-2 margin-y-0 font-body-xs"
+                    class="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs"
                   >
                     This searchable table displays models with Fee-for-Service (FFS) Change Requests (CRs) and Technical Direction Letters (TDLs).
                   </p>
@@ -398,7 +398,7 @@ exports[`settings snapshots > matches setting snapshot 1`] = `
                     />
                   </div>
                   <p
-                    class="padding-left-4 padding-right-2 margin-y-0 font-body-xs"
+                    class="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs"
                   >
                     This tabbed section displays the models using the operational solutions you care about.
                   </p>

diff --git a/src/views/HomeNew/Settings/index.tsx b/src/views/HomeNew/Settings/index.tsx
@@ -177,7 +177,7 @@ const HomePageSettings = () => {
                               className="text-bold"
                             />
 
-                            <p className="padding-left-4 padding-right-2 margin-y-0 font-body-xs">
+                            <p className="padding-left-4 padding-right-2 margin-y-neg-05 font-body-xs">
                               {settingOptions[settionOption].description}
                             </p>
 

diff --git a/src/views/HomeNew/Settings/settingsOrder.tsx b/src/views/HomeNew/Settings/settingsOrder.tsx
@@ -230,13 +230,10 @@ const SettingsOrder = () => {
                             </div>
 
                             <div className="display-flex flex-align-center">
-                              <Icon.ArrowDropUp
-                                className={classNames(
-                                  {
-                                    settings__icon__disabled: index === 0
-                                  },
-                                  'settings__icon margin-right-1 pointer'
-                                )}
+                              <Button
+                                type="button"
+                                className="usa-button--unstyled"
+                                aria-label={homepageSettingsT('orderUp')}
                                 onClick={() =>
                                   setSelectedSettings(
                                     moveItem(
@@ -246,21 +243,23 @@ const SettingsOrder = () => {
                                     )
                                   )
                                 }
-                                data-testid={`move-${index}-up`}
-                                size={5}
-                              />
-
-                              <Icon.ArrowDropDown
-                                className={classNames(
-                                  {
-                                    settings__icon__disabled:
-                                      index ===
-                                      selectedSettings.viewCustomization
-                                        .length -
-                                        1
-                                  },
-                                  'settings__icon pointer'
-                                )}
+                              >
+                                <Icon.ArrowDropUp
+                                  className={classNames(
+                                    {
+                                      settings__icon__disabled: index === 0
+                                    },
+                                    'settings__icon margin-right-1 pointer'
+                                  )}
+                                  data-testid={`move-${index}-up`}
+                                  size={5}
+                                />
+                              </Button>
+
+                              <Button
+                                type="button"
+                                className="usa-button--unstyled"
+                                aria-label={homepageSettingsT('orderDown')}
                                 onClick={() =>
                                   setSelectedSettings(
                                     moveItem(
@@ -270,9 +269,22 @@ const SettingsOrder = () => {
                                     )
                                   )
                                 }
-                                data-testid={`move-${index}-down`}
-                                size={5}
-                              />
+                              >
+                                <Icon.ArrowDropDown
+                                  className={classNames(
+                                    {
+                                      settings__icon__disabled:
+                                        index ===
+                                        selectedSettings.viewCustomization
+                                          .length -
+                                          1
+                                    },
+                                    'settings__icon pointer'
+                                  )}
+                                  data-testid={`move-${index}-down`}
+                                  size={5}
+                                />
+                              </Button>
                             </div>
                           </div>
                         </Card>

diff --git a/src/views/HomeNew/__snapshots__/index.test.tsx.snap b/src/views/HomeNew/__snapshots__/index.test.tsx.snap
@@ -137,9 +137,11 @@ exports[`The home page > matches setting snapshot 1`] = `
                 >
                   Did you know you can customize this page?
                 </p>
-                <div>
+                <div
+                  class="row-reverse"
+                >
                   <a
-                    class="display-flex flex-align-center"
+                    class="display-flex flex-align-center usa-button--unstyled"
                     href="/homepage-settings"
                   >
                     <svg

diff --git a/src/views/HomeNew/components/ModelsBySolutions/__snapshots__/index.test.tsx.snap b/src/views/HomeNew/components/ModelsBySolutions/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
           data-testid="grid"
         >
           <div
-            class="desktop:grid-col-7"
+            class="tablet:grid-col-6 desktop:grid-col-7"
             data-testid="grid"
           >
             <h3
@@ -26,7 +26,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
             </h3>
           </div>
           <div
-            class="desktop:grid-col-5 models-by-solutions__banner-buttons"
+            class="tablet:grid-col-6 desktop:grid-col-5 models-by-solutions__banner-buttons row-reverse"
             data-testid="grid"
           >
             <ul
@@ -280,7 +280,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                     data-testid="grid"
                   >
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p
@@ -295,7 +295,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                       </p>
                     </div>
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p
@@ -421,7 +421,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                     data-testid="grid"
                   >
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p
@@ -440,7 +440,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                       </p>
                     </div>
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p
@@ -570,7 +570,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                     data-testid="grid"
                   >
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p
@@ -589,7 +589,7 @@ exports[`ModelsBySolution Table and Card > renders solution models banner and ca
                       </p>
                     </div>
                     <div
-                      class="desktop:grid-col-6"
+                      class="mobile:grid-col-6 desktop:grid-col-6"
                       data-testid="grid"
                     >
                       <p

diff --git a/src/views/HomeNew/components/ModelsBySolutions/banner.tsx b/src/views/HomeNew/components/ModelsBySolutions/banner.tsx
@@ -4,6 +4,7 @@ import { Button, ButtonGroup, Grid } from '@trussworks/react-uswds';
 import classNames from 'classnames';
 import { ModelBySolutionStatus, OperationalSolutionKey } from 'gql/gen/graphql';
 
+import useCheckResponsiveScreen from 'hooks/useCheckMobile';
 import { helpSolutions } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 import { ModelsBySolutionType } from 'views/HomeNew/components/ModelsBySolutions/table';
 
@@ -28,6 +29,8 @@ const ModelsBySolutionsBanner = ({
 }) => {
   const { t: customHomeT } = useTranslation('customHome');
 
+  const isMobile = useCheckResponsiveScreen('tablet', 'smaller');
+
   const selectedSolution = helpSolutions.find(
     solution => solution.enum === solutionKey
   );
@@ -36,7 +39,7 @@ const ModelsBySolutionsBanner = ({
     <div className="models-by-solutions">
       <div className="bg-primary-lighter radius-md padding-2">
         <Grid row className="flex-align-center">
-          <Grid desktop={{ col: 7 }}>
+          <Grid desktop={{ col: 7 }} tablet={{ col: 6 }}>
             <h3 className="margin-y-1">
               {selectedSolution?.name}{' '}
               {selectedSolution?.acronym
@@ -47,7 +50,10 @@ const ModelsBySolutionsBanner = ({
 
           <Grid
             desktop={{ col: 5 }}
-            className="models-by-solutions__banner-buttons"
+            tablet={{ col: 6 }}
+            className={classNames('models-by-solutions__banner-buttons', {
+              'row-reverse': !isMobile
+            })}
           >
             <ButtonGroup type="segmented">
               <Button

diff --git a/src/views/HomeNew/components/ModelsBySolutions/card.tsx b/src/views/HomeNew/components/ModelsBySolutions/card.tsx
@@ -25,7 +25,7 @@ const ModelSolutionCard = ({
 
   const basicsConfig = usePlanTranslation('basics');
 
-  const { id, basics, modelName, status } = modelPlan;
+  const { id, basics, modelName, abbreviation, status } = modelPlan;
 
   return (
     <Card
@@ -38,6 +38,7 @@ const ModelSolutionCard = ({
             <h3 className="model-solution-card__title margin-top-0">
               <UswdsReactLink to={`/models/${id}/read-view`}>
                 {modelName}
+                {abbreviation ? ` (${abbreviation})` : ''}
               </UswdsReactLink>
             </h3>
           </Grid>
@@ -64,7 +65,7 @@ const ModelSolutionCard = ({
 
           <Grid desktop={{ col: 12 }}>
             <Grid row gap>
-              <Grid desktop={{ col: 6 }}>
+              <Grid desktop={{ col: 6 }} mobile={{ col: 6 }}>
                 <p className="text-bold margin-bottom-0 margin-right-1">
                   {customHomeT('solutionCard.startDate')}
                 </p>
@@ -79,7 +80,7 @@ const ModelSolutionCard = ({
                 </p>
               </Grid>
 
-              <Grid desktop={{ col: 6 }}>
+              <Grid desktop={{ col: 6 }} mobile={{ col: 6 }}>
                 <p className="text-bold margin-bottom-0 margin-right-1">
                   {customHomeT('solutionCard.endDate')}
                 </p>

diff --git a/src/views/HomeNew/components/ModelsBySolutions/index.scss b/src/views/HomeNew/components/ModelsBySolutions/index.scss
@@ -11,7 +11,6 @@
 
     &__banner-buttons {
         display: flex;
-        flex-direction: row-reverse;
     }
 }
 

diff --git a/src/views/HomeNew/index.scss b/src/views/HomeNew/index.scss
@@ -2,8 +2,6 @@
 
 .home {
     &__card {
-        flex-direction: row-reverse;
-
         .usa-card__container {
             padding: 1rem;
             border-radius: .25rem;