make link required for breadcrumbs, use shared const for text and ari…

…a label
Enterprise-CMCS · Nov 14, 2023 · 073aedf · 073aedf
1 parent 0a1f9cc
commit 073aedf
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 33 deletions.
diff --git a/services/app-web/src/components/Breadcrumbs/Breadcrumb.test.tsx b/services/app-web/src/components/Breadcrumbs/Breadcrumb.test.tsx
@@ -17,11 +17,11 @@ describe('Breadcrumbs', () => {
         const items = [
             { text: 'First link', link: '/firstlink' },
             { text: 'Second link', link: '/secondlink' },
-            { text: 'Active link, no href needed' },
+            { text: 'Active link', link: '/thirdlink' },
         ]
         renderWithProviders(<Breadcrumbs items={items} />)
         expect(screen.getAllByRole('listitem')).toHaveLength(items.length)
-        expect(screen.getAllByRole('link')).toHaveLength(items.length - 1)
+        expect(screen.getAllByRole('link')).toHaveLength(items.length)
     })
 
     it('renders nothing if no items passed in', () => {

diff --git a/services/app-web/src/components/Breadcrumbs/Breadcrumbs.module.scss b/services/app-web/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -1,5 +1,14 @@
+@import '../../styles/uswdsImports.scss';
+
 .crumbContainer {
     margin-top: 1em;
     margin-bottom: 1em;
     background: none;
+
+    [class^='usa-breadcrumb'] {
+        li:last-child a {
+            text-decoration: none;
+            color: $theme-color-base-ink;
+        }
+    }
 }
diff --git a/services/app-web/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/services/app-web/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -20,6 +20,6 @@ Default.args = {
     items: [
         { text: 'First link', link: '/firstlink' },
         { text: 'Second link', link: '/secondlink' },
-        { text: 'Active link, no href needed' },
+        { text: 'Active link', link: '/thirdlink' },
     ],
 }
diff --git a/services/app-web/src/components/Breadcrumbs/Breadcrumbs.tsx b/services/app-web/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -4,29 +4,21 @@ import styles from './Breadcrumbs.module.scss'
 
 type BreadcrumbItem = {
     text: string
-    link?: string
+    link: string
 }
 export type BreadcrumbsProps = {
     items: BreadcrumbItem[]
 }
 
 const Crumb = (crumb: BreadcrumbItem) => {
     const { link, text } = crumb
-    if (link) {
-        return (
-            <Breadcrumb>
-                <Link asCustom={NavLink} to={link} end>
-                    <span>{text}</span>
-                </Link>
-            </Breadcrumb>
-        )
-    } else {
-        return (
-            <Breadcrumb>
+    return (
+        <Breadcrumb>
+            <Link asCustom={NavLink} to={link} end>
                 <span>{text}</span>
-            </Breadcrumb>
-        )
-    }
+            </Link>
+        </Breadcrumb>
+    )
 }
 
 const Breadcrumbs = ({ items }: BreadcrumbsProps) => {

diff --git a/services/app-web/src/pages/MccrsId/MccrsId.module.scss b/services/app-web/src/pages/MccrsId/MccrsId.module.scss
@@ -10,11 +10,6 @@
         min-width: 40rem;
         max-width: 20rem;
         margin: 0 auto;
-
-        li:last-child a {
-            text-decoration: none;
-            color: $theme-color-base-ink;
-        }
     }
 
 

diff --git a/services/app-web/src/pages/QuestionResponse/UploadQuestions/UploadQuestions.tsx b/services/app-web/src/pages/QuestionResponse/UploadQuestions/UploadQuestions.tsx
@@ -102,7 +102,10 @@ export const UploadQuestions = () => {
                         text: 'Dashboard',
                     },
                     { link: `/submissions/${id}`, text: packageName },
-                    { text: 'Add questions' },
+                    {
+                        text: 'Add questions',
+                        link: RoutesRecord.SUBMISSIONS_UPLOAD_QUESTION,
+                    },
                 ]}
             />
 

diff --git a/services/app-web/src/pages/QuestionResponse/UploadResponse/UploadResponse.tsx b/services/app-web/src/pages/QuestionResponse/UploadResponse/UploadResponse.tsx
@@ -114,7 +114,10 @@ export const UploadResponse = () => {
                         text: 'Dashboard',
                     },
                     { link: `/submissions/${id}`, text: packageName },
-                    { text: 'Add response' },
+                    {
+                        text: 'Add response',
+                        link: RoutesRecord.SUBMISSIONS_UPLOAD_RESPONSE,
+                    },
                 ]}
             />
 

diff --git a/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx b/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx
@@ -104,6 +104,10 @@ export const SubmissionSummary = (): React.ReactElement => {
     const handleDocumentDownloadError = (error: boolean) =>
         setDocumentError(error)
 
+    const editOrAddMCCRSID = pkg.mccrsID
+        ? 'Edit MC-CRS number'
+        : 'Add MC-CRS record number'
+
     return (
         <div className={styles.background}>
             <GridContainer
@@ -180,15 +184,9 @@ export const SubmissionSummary = (): React.ReactElement => {
                                     className={
                                         pkg.mccrsID ? styles.editLink : ''
                                     }
-                                    aria-label={
-                                        pkg.mccrsID
-                                            ? 'Edit MC-CRS number'
-                                            : 'Add MC-CRS record number'
-                                    }
+                                    aria-label={editOrAddMCCRSID}
                                 >
-                                    {pkg.mccrsID
-                                        ? 'Edit MC-CRS number'
-                                        : 'Add MC-CRS record number'}
+                                    {editOrAddMCCRSID}
                                 </Link>
                             </div>
                         ) : undefined