Merge branch 'feature/redesign-explore-btn' into feature/design-veget…

…ation-data-box
Plant-for-the-Planet-org · Apr 12, 2024 · d886f9f · d886f9f
2 parents ce5b9cc + 532a574
commit d886f9f
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 67 deletions.
diff --git a/src/temp/ProjectMapTabs/ProjectMapTabs.module.scss b/src/temp/ProjectMapTabs/ProjectMapTabs.module.scss
@@ -17,7 +17,7 @@ top: 100px;;
 z-index: 10;
 color: $dark;
 }
-.option { 
+.singleTabOption { 
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -30,10 +30,10 @@ color: $dark;
     gap:6px;
   }
 
-  .option svg {
+  .singleTabOption svg {
     height: 18px;
   }
-  .option p {
+  .singleTabOption p {
     display: none;
   }
 
@@ -49,7 +49,7 @@ color: $dark;
     height: 30px;
     position: absolute;
     top: 20%;
-    background: #0000004d;
+    opacity: 0.3;
   }
 
   .showSeparator1{
@@ -90,7 +90,7 @@ color: $dark;
     .tabsContainer {
       right: auto;
     }
-    .option {
+    .singleTabOption {
      width: 150px;
       p {
         display: block;

diff --git a/src/temp/ProjectMapTabs/SingleTab.tsx b/src/temp/ProjectMapTabs/SingleTab.tsx
@@ -5,18 +5,25 @@ interface SingleTabProps {
   icon: React.JSX.Element;
   title: string;
   isSelected: boolean;
+  onClickHandler: () => void;
 }
 
-const SingleTab = ({ icon, title, isSelected }: SingleTabProps) => {
+const SingleTab = ({
+  icon,
+  title,
+  isSelected,
+  onClickHandler,
+}: SingleTabProps) => {
   return (
-    <>
-      <button
-        className={`${styles.option} ${isSelected ? styles.selected : ''}`}
-      >
-        {icon}
-        <p>{title}</p>
-      </button>
-    </>
+    <button
+      className={`${styles.singleTabOption} ${
+        isSelected ? styles.selected : ''
+      }`}
+      onClick={onClickHandler}
+    >
+      {icon}
+      <p>{title}</p>
+    </button>
   );
 };
 

diff --git a/src/temp/ProjectMapTabs/Tabs.tsx b/src/temp/ProjectMapTabs/Tabs.tsx
@@ -7,7 +7,7 @@ import FieldDataIcon from '../icons/FieldDataIcon';
 import SatelliteIcon from '../../../public/assets/images/icons/SatelliteIcon';
 
 interface TabsProps {
-  selected: string;
+  selected: 'satellite' | 'field' | 'timeTravel';
 }
 
 const Tabs = ({ selected }: TabsProps) => {
@@ -26,65 +26,62 @@ const Tabs = ({ selected }: TabsProps) => {
   const { t } = useTranslation(['maps', 'projectDetails']);
   return (
     <div className={styles.tabsContainer}>
-      <div onClick={() => setSelectedMode('satellite')}>
-        <SingleTab
-          icon={
-            <SatelliteAnalysisIcon
-              color={
-                selectedMode === 'satellite'
-                  ? `${'var(--light)'}`
-                  : `${'var(--dark)'}`
-              }
-            />
-          }
-          title={t('projectDetails:satelliteAnalysis')}
-          isSelected={selectedMode === 'satellite'}
-        />
-        <div
-          className={
-            setSeparatorVisibility(selectedMode, 0)
-              ? styles.showSeparator1
-              : styles.hideSeparator
-          }
-        ></div>
-      </div>
-      <div onClick={() => setSelectedMode('field')}>
-        <SingleTab
-          icon={
-            <FieldDataIcon
-              color={
-                selectedMode === 'field'
-                  ? `${'var(--light)'}`
-                  : `${'var(--dark)'}`
-              }
-            />
-          }
-          title={t('maps:fieldData')}
-          isSelected={selectedMode === 'field'}
-        />
-      </div>
+      <SingleTab
+        icon={
+          <SatelliteAnalysisIcon
+            color={
+              selectedMode === 'satellite'
+                ? `${'var(--light)'}`
+                : `${'var(--dark)'}`
+            }
+          />
+        }
+        title={t('projectDetails:satelliteAnalysis')}
+        isSelected={selectedMode === 'satellite'}
+        onClickHandler={() => setSelectedMode('satellite')}
+      />
+      <div
+        className={
+          setSeparatorVisibility(selectedMode, 0)
+            ? styles.showSeparator1
+            : styles.hideSeparator
+        }
+      ></div>
+      <SingleTab
+        icon={
+          <FieldDataIcon
+            color={
+              selectedMode === 'field'
+                ? `${'var(--light)'}`
+                : `${'var(--dark)'}`
+            }
+          />
+        }
+        title={t('maps:fieldData')}
+        isSelected={selectedMode === 'field'}
+        onClickHandler={() => setSelectedMode('field')}
+      />
       <div
         className={
           setSeparatorVisibility(selectedMode, 1)
             ? styles.showSeparator2
             : styles.hideSeparator
         }
       ></div>
-      <div onClick={() => setSelectedMode('timeTravel')}>
-        <SingleTab
-          icon={
-            <SatelliteIcon
-              color={
-                selectedMode === 'timeTravel'
-                  ? `${'var(--light)'}`
-                  : `${'var(--dark)'}`
-              }
-            />
-          }
-          title={t('maps:timeTravel')}
-          isSelected={selectedMode === 'timeTravel'}
-        />
-      </div>
+      <SingleTab
+        icon={
+          <SatelliteIcon
+            color={
+              selectedMode === 'timeTravel'
+                ? `${'var(--light)'}`
+                : `${'var(--dark)'}`
+            }
+          />
+        }
+        title={t('maps:timeTravel')}
+        isSelected={selectedMode === 'timeTravel'}
+        onClickHandler={() => setSelectedMode('timeTravel')}
+      />
     </div>
   );
 };

diff --git a/src/temp/components/InfoIconPopup.tsx b/src/temp/components/InfoIconPopup.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import NewInfoIcon from '../icons/NewInfoIcon';
+import { bindHover, bindPopover } from 'material-ui-popup-state';
+import HoverPopover from 'material-ui-popup-state/HoverPopover';
+import { usePopupState } from 'material-ui-popup-state/hooks';
+
+interface Props {
+  height: number;
+  width: number;
+  color: string;
+  children: React.ReactNode;
+}
+
+const InfoIconPopup = ({ height, width, color, children }: Props) => {
+  const abandonmentInfoPopupState = usePopupState({
+    variant: 'popover',
+    popupId: 'abandonmentInfoPopover',
+  });
+  return (
+    <div
+      {...bindHover(abandonmentInfoPopupState)}
+      style={{ cursor: 'pointer' }}
+    >
+      <NewInfoIcon height={height} width={width} color={color} />
+      <HoverPopover
+        {...bindPopover(abandonmentInfoPopupState)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {children}
+      </HoverPopover>
+    </div>
+  );
+};
+
+export default InfoIconPopup;
diff --git a/src/temp/icons/RightArrowIcon.tsx b/src/temp/icons/RightArrowIcon.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconProps } from '../../features/common/types/common';
+
+const RightArrowIcon = ({ width, color }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      viewBox="0 0 5 10"
+      fill="none"
+    >
+      <path
+        d="M2.68057 5.12199L0.240571 2.27199C-0.119429 1.85199 -0.0694288 1.22199 0.350571 0.861987C0.770571 0.501987 1.40057 0.551988 1.76057 0.971988L4.76057 4.47199C5.08057 4.84199 5.08057 5.40199 4.76057 5.77199L1.76057 9.27199C1.40057 9.69199 0.770572 9.74199 0.350572 9.38199C-0.0694285 9.02199 -0.119429 8.39199 0.240571 7.97199L2.68057 5.12199Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default RightArrowIcon;
diff --git a/src/temp/stories/InfoIconPopup.stories.tsx b/src/temp/stories/InfoIconPopup.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InfoIconPopup from '../components/InfoIconPopup';
+
+const meta: Meta<typeof InfoIconPopup> = {
+  component: InfoIconPopup,
+};
+
+export default meta;
+type Story = StoryObj<typeof InfoIconPopup>;
+
+export const TabsView: Story = {
+  args: {
+    height: 15,
+    width: 15,
+    color: '#BDBDBD',
+    children: (
+      <>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio,
+        repellendus!
+      </>
+    ),
+  },
+};
diff --git a/src/temp/stories/SingleMapTab.stories.tsx b/src/temp/stories/SingleMapTab.stories.tsx
@@ -14,6 +14,7 @@ export const Selected: Story = {
     icon: <SatelliteIcon color={'#fff'} />,
     title: 'Time Travel',
     isSelected: true,
+    onClickHandler: () => {},
   },
 };
 
@@ -22,5 +23,6 @@ export const Unselected: Story = {
     icon: <SatelliteIcon color={'#000'} />,
     title: 'Time Travel',
     isSelected: false,
+    onClickHandler: () => {},
   },
 };