Add Filter Button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudangada/design-system",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "Gada Design System",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

src/assets/icons/FilterIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { iIconProps } from "./types";
+import useIconStyles from "./useIconStyles";
+
+const FilterIcon: React.VFC<iIconProps> = ({
+  width = "24",
+  height = "24",
+  color,
+}) => {
+  const { iconColor } = useIconStyles({ color });
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.3333 0H0.666667C0.489856 0 0.320287 0.0760476 0.195262 0.211413C0.070238 0.346779 0 0.530374 0 0.72181V2.5913C0 2.96881 0.142 3.33982 0.388667 3.60689L4 7.51693V12.9926C4.00013 13.1156 4.02925 13.2365 4.0846 13.3439C4.13995 13.4512 4.2197 13.5416 4.3163 13.6062C4.41289 13.6709 4.52314 13.7079 4.6366 13.7135C4.75006 13.7192 4.86298 13.6934 4.96467 13.6386L7.63133 12.195C7.85733 12.0723 8 11.8225 8 11.549V7.51693L11.6113 3.60689C11.858 3.33982 12 2.96881 12 2.5913V0.72181C12 0.530374 11.9298 0.346779 11.8047 0.211413C11.6797 0.0760476 11.5101 0 11.3333 0ZM6.862 6.70778C6.79997 6.7747 6.75078 6.85424 6.71726 6.94182C6.68373 7.0294 6.66654 7.1233 6.66667 7.2181V11.1029L5.33333 11.8247V7.2181C5.33346 7.1233 5.31627 7.0294 5.28274 6.94182C5.24922 6.85424 5.20003 6.7747 5.138 6.70778L1.33333 2.5913V1.44362H10.6673L10.6687 2.58625L6.862 6.70778Z"
+        fill={iconColor}
+      />
+    </svg>
+  );
+};
+
+export default FilterIcon;

src/assets/icons/index.ts

@@ -18,5 +18,6 @@ export { default as LogoutIcon } from "./LogoutIcon";
 export { default as CampaignIcon } from "./CampaignIcon";
 export { default as RedemptionIcon } from "./RedemptionIcon";
 export { default as SettingsIcon } from "./SettingsIcon";
+export { default as FilterIcon } from "./FilterIcon";
 export * from "./ExpandIcon";
 export * from "./types";

src/components/core/FilterButton/FilterButton.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Meta, Story } from "@storybook/react";
+import FilterButtonUI from "./FilterButton";
+import { iFilterButtonProps } from "./types";
+import { Col } from "../../core";
+import { iMenuItemProps } from "../../navigation";
+
+export default {
+  title: "Components/Core",
+  component: FilterButtonUI,
+  args: {
+    activeFilters: 2,
+  },
+} as Meta<iFilterButtonProps>;
+
+const navItems: iMenuItemProps[] = [
+  {
+    label: "Menu Item 1",
+    onClick: () => alert("Menu Item 1"),
+  },
+  {
+    label: "Menu Item 2",
+    onClick: () => alert("Menu Item 2"),
+  },
+];
+
+//👇 We create a “template” of how args map to rendering
+const Template: Story<iFilterButtonProps> = (props) => {
+  return (
+    <Col fullHeight>
+      <FilterButtonUI
+        {...props}
+        buttonProps={{ className: "self-start" }}
+        menuProps={{ menuItems: navItems }}
+      />
+    </Col>
+  );
+};
+
+//👇 Each story then reuses that template
+export const FilterButton = Template.bind({});

src/components/core/FilterButton/FilterButton.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { FilterIcon } from "../../../assets";
+import { Menu } from "../../navigation";
+import { StyledFilterButton } from "./styles";
+import { iFilterButtonProps } from "./types";
+
+const FilterButton: React.FC<iFilterButtonProps> = ({
+  activeFilters,
+  menuProps,
+  buttonProps,
+  children,
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const menuItems = React.useMemo(() => {
+    return menuProps?.menuItems?.map((menuItem) => ({
+      ...menuItem,
+      onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
+        menuItem.onClick?.(e);
+        handleClose();
+      },
+    }));
+  }, [menuProps?.menuItems]);
+
+  const isFilterActive = activeFilters > 0;
+
+  return (
+    <>
+      <StyledFilterButton
+        variant="fab"
+        color="primary"
+        onClick={handleClick}
+        startIcon={<FilterIcon color={isFilterActive ? "white" : "primary"} />}
+        isActive={isFilterActive}
+        {...buttonProps}
+      >
+        Filter {activeFilters ? `(${activeFilters})` : ""}
+      </StyledFilterButton>
+
+      <Menu
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        handleClose={handleClose}
+        {...menuProps}
+        menuItems={menuItems}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};
+
+export default FilterButton;

src/components/core/FilterButton/index.ts

@@ -0,0 +1 @@
+export { default as FilterButton } from "./FilterButton";

src/components/core/FilterButton/styles.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { buttonClasses } from "@mui/material";
+import { Button } from "../Button";
+
+export const StyledFilterButton = styled(Button)<{ isActive: boolean }>(
+  ({ isActive, theme: { palette } }) => ({
+    [`&.${buttonClasses.root}>*`]: {
+      color: `${palette.interface.teal[700]} !important`,
+    },
+    [`&.${buttonClasses.root}`]: {
+      backgroundColor: isActive
+        ? palette.interface.teal[100]
+        : palette.interface.white,
+      border: `1px solid ${palette.interface.teal[700]}`,
+    },
+  })
+);

src/components/core/FilterButton/types.ts

@@ -0,0 +1,8 @@
+import { iMenuProps } from "../../navigation/Menu";
+import { iButtonProps } from "../Button";
+
+export interface iFilterButtonProps {
+  activeFilters: number;
+  buttonProps?: Partial<iButtonProps>;
+  menuProps?: Partial<iMenuProps>;
+}

src/components/core/index.ts

@@ -8,3 +8,4 @@ export * from "./Col";
 export * from "./Row";
 export * from "./Divider";
 export * from "./Chip";
+export * from "./FilterButton";

src/components/navigation/Menu/Menu.tsx

@@ -19,7 +19,7 @@ const Menu: React.FC<iMenuProps> = ({
         vertical: "top",
         horizontal: "center",
       }}
-      BackdropProps={{ style: { backgroundColor: "rgba(0,0,0,0.001)" } }}
+      BackdropProps={{ style: { opacity: 0.01 } }}
       PaperProps={{ elevation: 1 }}
       {...menuProps}
       onClose={handleClose}