Merge branch 'main' into feat/FSADT1-1079

bcgov · Jan 3, 2024 · 7a6d114 · 7a6d114
2 parents cfd53a4 + 168b37f
commit 7a6d114
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 72 deletions.
diff --git a/cypress/package-lock.json b/cypress/package-lock.json
diff --git a/cypress/package.json b/cypress/package.json
@@ -13,7 +13,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^19.0.0",
+    "@badeball/cypress-cucumber-preprocessor": "^20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
     "@cypress/webpack-preprocessor": "^6.0.0",
     "cypress": "^13.1.0",

diff --git a/frontend/cypress/e2e/FormBCSCPage.cy.ts b/frontend/cypress/e2e/FormBCSCPage.cy.ts
@@ -61,7 +61,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
   });
 
   it("should add a new contact", () => {
@@ -125,7 +125,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
 
   });
 
@@ -196,7 +196,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
   });
 
 

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -415,10 +415,10 @@ div#app {
   color: var(--light-theme-text-text-primary, #131315) !important;
 }
 
-.heading-01,
+.heading-07,
 cds-accordion-item.grouping-05-internal::part(title) {
   color: var(--light-theme-text-text-primary, #131315);
-  /* Fixed heading styles/heading-01 */
+  /* Fixed heading styles/heading-07 */
   font-family: BC Sans;
   font-size: 0.875rem;
   font-style: normal;
@@ -427,29 +427,29 @@ cds-accordion-item.grouping-05-internal::part(title) {
   letter-spacing: 0.01rem;
 }
 
-.heading-02 {
+h6 {
   color: var(--light-theme-text-text-primary, #131315) !important;
 
-  /* Fixed heading styles/heading-02 */
+  /* Fixed heading styles/heading-06 */
 
   font-size: 1rem;
   font-style: normal;
   font-weight: 700;
   line-height: 1.5rem;
 }
 
-.heading-03 {
+h5 {
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fixed heading styles/heading-03 */
+  /* Fixed heading styles/heading-05 */
 
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.75rem;
 }
 
-.heading-04 {
+h4 {
   color: var(--light-theme-text-text-primary, #131315);
 
   /* Fixed heading styles/heading-04 */
@@ -460,22 +460,22 @@ cds-accordion-item.grouping-05-internal::part(title) {
   line-height: 2.25rem;
 }
 
-.heading-05 {
+h3 {
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fixed heading styles/heading-05 */
+  /* Fixed heading styles/heading-03 */
 
   font-size: 2rem;
   font-style: normal;
   font-weight: 400;
   line-height: 2.5rem;
 }
 
-.fluid-heading-05 {
+h4.fluid {
   align-self: stretch;
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fluid styles/MAX/fluid-heading-05 */
+  /* Fluid styles/MAX/fluid-heading-04 */
 
   font-size: 3.75rem;
   font-style: normal;
@@ -596,7 +596,7 @@ cds-actionable-notification * {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 2.5rem;
+  gap: 1rem;
 }
 
 .form-steps-02 {
@@ -1404,8 +1404,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     align-items: flex-start;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/SM/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/SM/fluid-heading-04 */
     font-size: 2rem;
     line-height: 2.5rem;
   }
@@ -1515,8 +1515,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     align-items: flex-start;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/MED/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/MED/fluid-heading-04 */
     font-size: 2.25rem;
     line-height: 2.75rem;
   }
@@ -1606,8 +1606,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     column-gap: 4.0625rem;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/MED/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/MED/fluid-heading-04 */
     font-size: 2.25rem;
     line-height: 2.75rem;
   }
@@ -1673,8 +1673,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     column-gap: 3.3125rem;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/XLG/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/XLG/fluid-heading-04 */
     font-size: 3rem;
     line-height: 56px;
   }

diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -161,7 +161,7 @@ const onClickLogout = () => {
 
     <cds-header-panel :id="myProfilePanelId" v-if="$route.meta.profile" ref="myProfilePanel">
       <div class="grouping-16" id="panel-title">
-        <span class="heading-03">My profile</span>
+        <h5>My profile</h5>
         <cds-button kind="ghost" size="sm" @click.prevent="closePanel" class="close-panel-button">
           <Close16 slot="icon" />
         </cds-button>

diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -274,11 +274,7 @@ const logoutAndRedirect = () => {
       </cds-modal-heading>
     </cds-modal-header>
     <cds-modal-body>
-      <p>
-        Update your personal information at
-        <a href="https://www.bceid.ca/" target="_blank" rel="noopener noreferrer">BCeID</a> and then
-        log back into this application.
-      </p>
+      <p>Update your personal information at BCeID and then log back into this application.</p>
       <br />
       <p>Your data will not be saved.</p>
     </cds-modal-body>

diff --git a/frontend/src/pages/FormBCSCPage.vue b/frontend/src/pages/FormBCSCPage.vue
@@ -335,9 +335,9 @@ watch([error], () => {
 <template>
   <div class="form-header">
     <div class="form-header-title">
-      <span class="heading-05" data-scroll="top">
+      <h3 data-scroll="top">
         New client application
-      </span>
+      </h3>
     </div>
     <div class="hide-when-less-than-two-children"><!--
       This div is necessary to avoid the div.header-offset below from interfering in the flex flow.
@@ -351,11 +351,11 @@ watch([error], () => {
   </div>
 
   <div class="form-steps-section">
-    <span class="heading-04" data-scroll="scroll-0">
+    <h4 data-scroll="scroll-0">
       Personal information
-    </span>
+    </h4>
     <p class="body-compact-01">
-      Review the personal information below. It’s from your BC Services card. We use it to know who we're giving a number to and for communicating with clients. 
+      Review the information below. It’s from your BC Services card. We use it to know who we're giving a number to and for communicating with clients. 
     </p>
 
     <div class="card">
@@ -407,9 +407,9 @@ watch([error], () => {
       </div>
     </div>
 
-    <span class="heading-04" data-scroll="scroll-0">
+    <h4 data-scroll="scroll-0">
       Contact information
-    </span>
+    </h4>
     <p class="body-compact-01">
       We need your phone number to communicate with you.
     </p>
@@ -438,7 +438,7 @@ watch([error], () => {
         <hr />
 
         <div class="grouping-09" :data-scroll="`additional-contact-${index + 1}`">
-          <span class="heading-03">Additional contact</span>
+          <h5>Additional contact</h5>
         </div>
 
         <contact-group-component

diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -366,10 +366,10 @@ const scrollToNewContact = () => {
 <template>
   <div class="form-header">
     <div class="form-header-title">
-      <span class="heading-05">
+      <h3>
         <div data-scroll="top" class="header-offset"></div>
         New client application
-      </span>
+      </h3>
     </div>
     <cds-progress-indicator space-equally :vertical="isSmallScreen">
       <cds-progress-step 
@@ -398,7 +398,7 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 0" class="form-steps-01">
       <div class="form-steps-01-title">
-        <span class="heading-04" data-scroll="scroll-0">Before you begin</span>
+        <h4 data-scroll="scroll-0">Before you begin</h4>
         <ol type="1" class="bulleted-list body-compact-01">
           <li>
             A registered business must be in good standing with BC
@@ -414,10 +414,10 @@ const scrollToNewContact = () => {
       <hr class="divider" />
 
       <div class="form-steps-section">
-        <label class="heading-04" data-scroll="focus-0">
+        <h4 data-scroll="focus-0">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[0].title}}
-        </label>
+        </h4>
         <div class="frame-01">
           <business-information-wizard-step
               v-model:data="formData"
@@ -430,10 +430,10 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 1" class="form-steps-02">
       <div class="form-steps-section">
-        <span class="heading-04" data-scroll="scroll-1">
+        <h4 data-scroll="scroll-1">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[1].title}}
-        </span>
+        </h4>
 
         <div class="form-steps-section-01">
             <p class="body-01 heading-compact-01-dark">
@@ -451,15 +451,13 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 2" class="form-steps-03">
       <div class="form-steps-section">
-        <span class="heading-04" data-scroll="scroll-2">
+        <h4 data-scroll="scroll-2">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[2].title}}
-        </span>
+        </h4>
 
         <div class="form-steps-section-01">
-          <span class="heading-03"
-              >Add authorized people to the account</span
-            >
+          <h5>Add authorized people to the account</h5>
             <p class="body-01 heading-compact-01-dark">
               Review your name and email address. They’re from your BCeID.
             </p>
@@ -477,10 +475,10 @@ const scrollToNewContact = () => {
     <div v-if="currentTab == 3" class="form-steps-04">
 
       <div class="form-steps-section form-steps-section-04">
-        <span class="heading-04" data-scroll="scroll-3">
+        <h4 data-scroll="scroll-3">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[3].title}}
-        </span>
+        </h4>
         <span class="body-02">
           Review the content and make any changes by using the "Edit" buttons in each section below.
         </span>

diff --git a/frontend/src/pages/FormSubmittedPage.vue b/frontend/src/pages/FormSubmittedPage.vue
@@ -19,7 +19,7 @@ const SVG = useSvg(badgePictogram);
   <div class="frame-03">
     <SVG alt="Badge pictogram" class="submission-badge"></SVG>    
     <div class="form-header form-header-application-submitted">
-      <p class="fluid-heading-05">Application submitted!</p>
+      <h4 class="fluid">Application submitted!</h4>
       <p class="fluid-paragraph-01">Your application for a client number has been submitted.</p>
       <p class="fluid-paragraph-01">&nbsp;</p>
       <p class="fluid-paragraph-01">

diff --git a/frontend/src/pages/SubmissionListPage.vue b/frontend/src/pages/SubmissionListPage.vue
@@ -114,7 +114,7 @@ onMounted(() => {
     <div id="title">
       <div>
         <div class="form-header-title mg-sd-25">
-          <p class="heading-05">Submissions</p>
+          <h3>Submissions</h3>
           <p class="body-compact-01">Check and manage client submissions</p>
         </div>        
       </div>