feat: CE-1028 - Add Close Button to Desktop Filters (#615)

Co-authored-by: afwilcox <[email protected]>
bcgov · Sep 10, 2024 · ccbb38c · ccbb38c
1 parent 2c562aa
commit ccbb38c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/frontend/src/app/components/containers/complaints/complaints.tsx b/frontend/src/app/components/containers/complaints/complaints.tsx
@@ -1,6 +1,6 @@
 import { FC, useState, useContext, useCallback, useEffect } from "react";
 import { shallowEqual } from "react-redux";
-import { Button, Collapse, Offcanvas } from "react-bootstrap";
+import { Button, CloseButton, Collapse, Offcanvas } from "react-bootstrap";
 
 import { useAppSelector, useAppDispatch } from "../../../hooks/hooks";
 import { ComplaintFilter } from "./complaint-filter";
@@ -112,7 +112,14 @@ export const Complaints: FC<Props> = ({ defaultComplaintType }) => {
         >
           <div className="comp-data-filters">
             <div className="comp-data-filters-inner">
-              <div className="comp-data-filters-header">Filter by</div>
+              <div className="comp-data-filters-header">
+                Filter by{" "}
+                <CloseButton
+                  onClick={() => setOpen(!open)}
+                  aria-expanded={open}
+                  aria-label="Close filters"
+                />
+              </div>
               <div className="comp-data-filters-body">
                 <ComplaintFilter type={complaintType} />
               </div>

diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
@@ -78,12 +78,21 @@
   &-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     flex: 0 0 auto;
     padding: 0 16px;
     height: 44px;
     font-size: 0.875rem;
     font-weight: 700;
     border-bottom: 1px solid $gray-300;
+
+    & .btn-close {
+      width: 24px;
+      height: 24px;
+      margin-top: 0;
+      margin-right: -4px;
+      padding: 0;
+    }
   }
 
   &-body {