fix: 1485 visual fixes for seedlot registration (#1545)

Co-authored-by: Ricardo Campos <[email protected]>
bcgov · Aug 28, 2024 · cb6bed0 · cb6bed0
1 parent 6ad06e6
commit cb6bed0
Show file tree

Hide file tree

Showing 23 changed files with 275 additions and 181 deletions.
diff --git a/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts b/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts
@@ -485,7 +485,7 @@ describe('A Class Seedlot Registration form, Collection and Interim storage', ()
 
     cy.get('#end-date-input')
       .clear()
-      .type('2024-05-26')
+      .type('2024-05-30')
       .blur();
 
     // Save changes

diff --git a/frontend/cypress/support/index.ts b/frontend/cypress/support/index.ts
@@ -0,0 +1,7 @@
+import '@cypress/code-coverage/support';
+
+Cypress.on('fail', (error, runnable) => {
+  console.error('Test failed:', error);
+
+  throw error;
+});
diff --git a/frontend/src/api-service/favouriteActivitiesAPI.ts b/frontend/src/api-service/favouriteActivitiesAPI.ts
@@ -1,7 +1,7 @@
 import ApiConfig from './ApiConfig';
 import api from './api';
 import { FavActivityType, FavActivityPostType } from '../types/FavActivityTypes';
-import FavouriteActivityMap from '../config/FavouriteActivitiyMap';
+import FavouriteActivityMap from '../config/FavouriteActivityMap';
 
 export const getFavAct = () => {
   const url = ApiConfig.favouriteActivities;

diff --git a/frontend/src/components/BCHeader/constants.ts b/frontend/src/components/BCHeader/constants.ts
@@ -26,87 +26,90 @@ export const navItems = [
         icon: 'SoilMoistureField',
         link: ROUTES.SEEDLOTS,
         disabled: false
-      },
-      {
-        name: 'Seedlings',
-        icon: 'CropGrowth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Nurseries',
-        icon: 'CropHealth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Orchards',
-        icon: 'MapBoundaryVegetation',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Reports',
-        icon: 'Report',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tests',
-        icon: 'Chemistry',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Parent tree',
-        icon: 'Tree',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tree seed centre',
-        icon: 'Enterprise',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Financial',
-        icon: 'Money',
-        link: '#',
-        disabled: true
-      }
-    ]
-  },
-  {
-    name: 'Management',
-    items: [
-      {
-        name: 'Notifications',
-        icon: 'Notification',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Settings',
-        icon: 'Settings',
-        link: '#',
-        disabled: true
       }
+      // Uncomment these as necessary :)
+      // {
+      //   name: 'Seedlings',
+      //   icon: 'CropGrowth',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Nurseries',
+      //   icon: 'CropHealth',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Orchards',
+      //   icon: 'MapBoundaryVegetation',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Reports',
+      //   icon: 'Report',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Tests',
+      //   icon: 'Chemistry',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Parent tree',
+      //   icon: 'Tree',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Tree seed centre',
+      //   icon: 'Enterprise',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Financial',
+      //   icon: 'Money',
+      //   link: '#',
+      //   disabled: true
+      // }
     ]
   }
+  // Uncomment these as necessary :)
+  // {
+  //   name: 'Management',
+  //   items: [
+  //     {
+  //       name: 'Notifications',
+  //       icon: 'Notification',
+  //       link: '#',
+  //       disabled: true
+  //     },
+  //     {
+  //       name: 'Settings',
+  //       icon: 'Settings',
+  //       link: '#',
+  //       disabled: true
+  //     }
+  //   ]
+  // }
 ];
 
-export const supportItems = {
-  name: 'Support',
-  items: [
-    {
-      name: 'Need help?',
-      icon: 'Help',
-      link: '#',
-      disabled: true
-    }
-  ]
-};
+// Uncomment these as necessary :)
+// export const supportItems = {
+//   name: 'Support',
+//   items: [
+//     {
+//       name: 'Need help?',
+//       icon: 'Help',
+//       link: '#',
+//       disabled: true
+//     }
+//   ]
+// };
 
 export const componentTexts = {
   headerTitle: 'SPAR',

diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx
@@ -26,8 +26,7 @@ import {
   VERSION,
   defaultPanelState,
   componentTexts,
-  navItems,
-  supportItems
+  navItems
 } from './constants';
 import { RightPanelType, HearderContainerProps } from './definitions';
 import UserButton from './UserButton';
@@ -198,7 +197,8 @@ const BCHeader = () => {
               }
             </div>
             <div>
-              <SideNavLink className="side-nav-category-name">
+              {/* Uncomment this section when the support pages are implemented. */}
+              {/* <SideNavLink className="side-nav-category-name">
                 {supportItems.name}
               </SideNavLink>
               {
@@ -212,7 +212,7 @@ const BCHeader = () => {
                     {supportItem.name}
                   </SideNavLink>
                 ))
-              }
+              } */}
               <PanelSectionName title={VERSION} />
             </div>
           </SideNav>

diff --git a/frontend/src/components/Card/FavouriteCard/index.tsx b/frontend/src/components/Card/FavouriteCard/index.tsx
@@ -43,17 +43,31 @@ const FavouriteCard = ({
   });
 
   const ActionBtn = (
-    <OverflowMenu className="fav-card-overflow" menuOptionsClass="fav-card-menu-options" aria-label={`${favObject.header} options`} flipped iconDescription="More actions">
+    <OverflowMenu
+      className="fav-card-overflow"
+      menuOptionsClass="fav-card-menu-options"
+      aria-label={`${favObject.header} options`}
+      flipped
+      iconDescription="More actions"
+      // Need to stop bubbling here so it won't trigger the
+      // the tile onKeyDown event
+      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+        e.stopPropagation();
+      }}
+      onClick={(e: React.MouseEvent<HTMLElement>) => {
+        e.stopPropagation();
+      }}
+    >
       <OverflowMenuItem
         itemText={favObject.highlighted ? 'Dehighlight shortcut' : 'Highlight shortcut'}
-        onClick={(e: Event) => {
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
           e.stopPropagation();
           highlightFavAct.mutate();
         }}
       />
       <OverflowMenuItem
         itemText="Delete shortcut"
-        onClick={(e: Event) => {
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
           e.stopPropagation();
           removeFavAct.mutate();
         }}
@@ -78,6 +92,13 @@ const FavouriteCard = ({
     <Tile
       className={favObject.highlighted ? 'fav-card-main-highlighted' : 'fav-card-main'}
       onClick={() => navigate(favObject.link)}
+      tabIndex={0}
+      aria-label={`Go to ${favObject.header}`}
+      onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          navigate(favObject.link);
+        }
+      }}
     >
       <div className="fav-card-header">
         <Icon className="fav-card-icon" />

diff --git a/frontend/src/components/Card/FavouriteCard/styles.scss b/frontend/src/components/Card/FavouriteCard/styles.scss
@@ -87,11 +87,11 @@ p.fav-card-title-large {
   color: var(--#{vars.$bcgov-prefix}-text-on-color)
 }
 
-.fav-card-main-highlighted .fav-card-overflow > svg{
+.fav-card-main-highlighted .fav-card-overflow > svg {
   fill: var(--#{vars.$bcgov-prefix}-icon-on-color);
 }
 
-.#{vars.$bcgov-prefix}--overflow-menu.#{vars.$bcgov-prefix}--overflow-menu--open >svg{
+.#{vars.$bcgov-prefix}--overflow-menu.#{vars.$bcgov-prefix}--overflow-menu--open >svg {
   fill: var(--#{vars.$bcgov-prefix}-icon-primary);
 }
 
@@ -109,6 +109,10 @@ p.fav-card-title-large {
   outline: 2px solid colors.$white;
 }
 
+.fav-card-main-highlighted .#{vars.$bcgov-prefix}--overflow-menu:hover {
+  background-color: transparent;
+}
+
 @media only screen and (max-width: 672px) {
   .fav-card-main,
   .fav-card-main-highlighted {
@@ -131,7 +135,7 @@ p.fav-card-title-large {
     justify-content: flex-start;
     align-items: center;
   }
-  
+
 }
 
 .fav-card-menu-options{

diff --git a/frontend/src/components/Card/SmallCard/index.tsx b/frontend/src/components/Card/SmallCard/index.tsx
@@ -8,7 +8,7 @@ import './styles.scss';
 
 type SmallCardProps = {
   header: string,
-  actionBtn: JSX.Element
+  actionBtn: JSX.Element,
   path: string,
   image: string,
   isIcon: boolean,

diff --git a/frontend/src/components/Card/StandardCard/index.tsx b/frontend/src/components/Card/StandardCard/index.tsx
@@ -63,7 +63,14 @@ const StandardCard = ({
           isEmpty
             ? null
             : (
-              <IconButton className="std-card-button" kind="ghost" label="Go" align="bottom" onClick={() => { navigate(`${url}`); }}>
+              <IconButton
+                className="std-card-button"
+                kind="ghost"
+                label="Go"
+                align="bottom"
+                onClick={() => { navigate(`${url}`); }}
+                aria-label={`Go to ${header} page`}
+              >
                 <Icons.ArrowRight />
               </IconButton>
             )

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -425,7 +425,7 @@ const OrchardStep = ({
       {
         renderOrchardButtons()
       }
-      <Row className="seedlot-orchard-title-row">
+      <Row className="seedlot-gamete-title-row">
         <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{orchardStepText.gameteSection.title}</h2>
           {
@@ -562,7 +562,7 @@ const OrchardStep = ({
           }
         </Column>
       </Row>
-      <Row>
+      <Row className="orchard-row">
         <Column sm={4} md={8} lg={16}>
           <RadioButtonGroup
             id={state.hasPollenContamination.id}

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
@@ -4,7 +4,6 @@
 .seedlot-orchard-step-form {
   padding: 0;
 
-
   h2 {
     @include type.type-style('heading-03');
     margin-bottom: 0.2rem;
@@ -36,9 +35,14 @@
     margin-bottom: 2.5rem;
   }
 
+  .seedlot-gamete-title-row {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
   .seedlot-orchard-add-orchard,
   .pollen-methodology-checkbox {
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
   }
 
   .orchard-fields-review-only {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
@@ -103,6 +103,7 @@
 
   .owner-mod-btn {
     margin-left: 1rem;
+    margin-top: 1.5rem;
   }
 
   .owner-code-text-input {