feat: CE-1231 add * for required fields

bcgov · Nov 18, 2024 · e5cdf59 · e5cdf59
1 parent 6c9707a
commit e5cdf59
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/...nents/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx b/...nents/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx
@@ -70,7 +70,12 @@ export const AuthoizationOutcome: FC = () => {
       id="ceeb-authorization"
     >
       <div className="comp-details-section-header">
-        <h3>Authorization</h3>
+        <div id="ceeb-authorization-header">
+          <h3>
+            Authorization<span className="required-ind">*</span>
+          </h3>
+          <div className="legend">One of these is required</div>
+        </div>
         {!editable && (
           <div className="comp-details-section-header-actions">
             <Button

diff --git a/...nd/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx b/...nd/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx
@@ -319,7 +319,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-schedule-sector-type"
         >
-          <label htmlFor="outcome-decision-schedule-secto">WDR schedule/IPM sector type</label>
+          <label htmlFor="outcome-decision-schedule-secto">
+            WDR schedule/IPM sector type<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-schedule-sector"
@@ -342,7 +344,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-sector-category"
         >
-          <label htmlFor="outcome-decision-sector-category">Sector/Category</label>
+          <label htmlFor="outcome-decision-sector-category">
+            Sector/Category<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-sector-category"
@@ -363,7 +367,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-discharge-type"
         >
-          <label htmlFor="outcome-decision-discharge">Discharge type</label>
+          <label htmlFor="outcome-decision-discharge">
+            Discharge type<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-discharge"

diff --git a/...end/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx b/...end/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx
@@ -376,7 +376,9 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
             </legend>
 
             <div className="comp-details-form-row">
-              <label htmlFor="select-species">Species</label>
+              <label htmlFor="select-species">
+                Species<span className="required-ind">*</span>
+              </label>
               <div className="comp-details-input full-width">
                 <CompSelect
                   id="select-species"

diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx
@@ -369,7 +369,9 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
                 Animal Information
               </legend>
               <div className="comp-details-form-row">
-                <label htmlFor="select-species">Species</label>
+                <label htmlFor="select-species">
+                  Species<span className="required-ind">*</span>
+                </label>
 
                 <CompSelect
                   id="select-species"

diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
@@ -666,6 +666,17 @@
   .btn {
     font-size: 0.875rem;
   }
+
+  #ceeb-authorization-header {
+    h3 {
+      margin-bottom: 3px;
+    }
+    .legend {
+      color: $gray-500;
+      margin-bottom: 16px;
+      font-size: 14px;
+    }
+  }
 }
 
 .comp-details-section-header-actions {