Merge pull request #11 from globalfund/feat/filters-expandable-views

Feat/filters expandable views

Author: stephanoshadjipetrou

src/app/components/Charts/common/backbtn/index.tsx

@@ -40,6 +40,8 @@ export function VizBackBtn(props: Props) {
       ) {
         history.push(prevActiveStep.path);
       }
+    } else {
+      props.setVizLevel(props.vizLevel - 1);
     }
   }
 

src/app/components/Charts/common/breadcrumbs/index.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+import { useHistory } from "react-router-dom";
+import RightIcon from "@material-ui/icons/ChevronRight";
+import { breadCrumbItems } from "app/state/recoil/atoms";
+
+export default function BreadCrumbs() {
+  const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
+  const history = useHistory();
+  return (
+    <div
+      css={`
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        justify-content: flex-start;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
+        overflow-x: scroll;
+        &::-webkit-scrollbar {
+          width: 0.1em;
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: white;
+          border-radius: 0px;
+          border: 1px solid white;
+        }
+        width: 100vw;
+        /* padding-left: 16px;
+        padding-right: 16px; */
+        @media (min-width: 1280px) {
+          max-width: 1280px;
+        }
+        @media (min-width: 600px) {
+          padding-left: 24px;
+          padding-right: 24px;
+        }
+      `}
+    >
+      {breadCrumbList.map((item, index) => (
+        <div
+          css={`
+            display: flex;
+            gap: 12px;
+            align-items: center;
+          `}
+        >
+          <button
+            css={`
+              background: ${index === breadCrumbList.length - 1
+                ? "#495057"
+                : "#868e96"};
+              height: 32px;
+              border-radius: 20px;
+              font-size: 14px;
+              font-weight: 700;
+              color: #fff;
+              text-align: center;
+              border: none;
+              outline: none;
+              width: max-content;
+              padding: 0 2rem;
+              cursor: pointer;
+              :hover,
+              :active,
+              :focus {
+                background: #495057;
+              }
+            `}
+            type="button"
+            onClick={() => {
+              history.push(item.path);
+              setBreadCrumbList([...breadCrumbList.slice(0, index + 1)]);
+            }}
+          >
+            <b>{item.name}</b>
+          </button>
+          {index === breadCrumbList.length - 1 ? null : (
+            <div
+              css={`
+                color: #495057;
+                display: flex;
+                align-items: center;
+              `}
+            >
+              <RightIcon color="inherit" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/app/components/Mobile/BottomNavigation/index.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles({
   },
 });
 
-export function createActionButtons() {
+export function useCreateActionButtons() {
   const cmsData = useCMSData({ returnData: true });
 
   return [
@@ -47,7 +47,7 @@ export function MobileBottomNavigation() {
   const history = useHistory();
   const classes = useStyles();
   const [value, setValue] = React.useState(0);
-  const actionButtons = createActionButtons();
+  const actionButtons = useCreateActionButtons();
 
   function getIsActive(path: string) {
     switch (path) {