Adds a separate pane for the filter CTAs, adds an apply button on mob…

…ile (#1144)
mitodl · Jun 25, 2024 · 525230b · 525230b
1 parent 871c040
commit 525230b
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -408,10 +408,13 @@ const StyledDrawer = styled(Drawer)`
   }
 `
 
-const MobileClearAllButton = styled(Button)`
-  background-color: white;
-  padding: 12px;
-  border-radius: 4px;
+const MobileFacetSearchButtons = styled.div`
+  display: flex;
+  gap: 12px;
+
+  & > button {
+    flex: 1;
+  }
 `
 
 const MobileDrawerCloseButton = styled(Button)`
@@ -659,15 +662,6 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                       <div>
                         <Typography variant="subtitle3">Filter</Typography>
                       </div>
-                      {hasFacets ? (
-                        <MobileClearAllButton
-                          variant="text"
-                          size="small"
-                          onClick={clearAllFacets}
-                        >
-                          Clear all
-                        </MobileClearAllButton>
-                      ) : null}
                     </div>
                     <MobileDrawerCloseButton
                       size="large"
@@ -678,6 +672,24 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                       <RiCloseLine fontSize="inherit" />
                     </MobileDrawerCloseButton>
                   </MobileFacetsTitleContainer>
+                  {hasFacets ? (
+                    <MobileFacetSearchButtons>
+                      <Button
+                        variant="primary"
+                        size="small"
+                        onClick={toggleMobileDrawer(false)}
+                      >
+                        Apply Filters
+                      </Button>
+                      <Button
+                        variant="noBorder"
+                        size="small"
+                        onClick={clearAllFacets}
+                      >
+                        Clear All
+                      </Button>
+                    </MobileFacetSearchButtons>
+                  ) : null}
                   {filterContents}
                 </StyledDrawer>
                 <MobileSortContainer>{sortDropdown}</MobileSortContainer>

diff --git a/frontends/ol-components/src/components/Button/Button.stories.tsx b/frontends/ol-components/src/components/Button/Button.stories.tsx
@@ -27,7 +27,14 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {
     variant: {
-      options: ["primary", "secondary", "tertiary", "text"],
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "text",
+        "inverted",
+        "text-secondary",
+      ],
       control: { type: "select" },
     },
     size: {
@@ -82,6 +89,12 @@ export const VariantStory: Story = {
       <Button {...args} variant="text">
         Text
       </Button>
+      <Button {...args} variant="noBorder">
+        Text Secondary
+      </Button>
+      <Button {...args} variant="inverted">
+        Inverted
+      </Button>
     </Stack>
   ),
 }

diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx
@@ -5,7 +5,13 @@ import tinycolor from "tinycolor2"
 import { Link } from "react-router-dom"
 import type { Theme } from "@mui/material/styles"
 
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "inverted"
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "text"
+  | "noBorder"
+  | "inverted"
 type ButtonSize = "small" | "medium" | "large"
 type ButtonEdge = "circular" | "rounded" | "none"
 
@@ -133,6 +139,17 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
         color: colors.silverGray,
       },
     },
+    variant === "noBorder" && {
+      backgroundColor: colors.white,
+      color: colors.darkGray2,
+      border: "none",
+      ":hover:not(:disabled)": {
+        backgroundColor: tinycolor(colors.darkGray1).setAlpha(0.06).toString(),
+      },
+      ":disabled": {
+        color: colors.silverGray,
+      },
+    },
     variant === "tertiary" && {
       color: colors.darkGray2,
       border: "none",