sfbrigade · mantuok · Dec 19, 2024 · Dec 7, 2024 · Dec 7, 2024 · Dec 10, 2024
diff --git a/app/components-test-lib/page.tsx b/app/components-test-lib/page.tsx
@@ -6,6 +6,7 @@ import CardHazard from "../components/card-hazard";
 import { Hazards } from "../data/data";
 import { Info } from "../data/data";
 import CardInfo from "../components/card-info";
+import Share from "../components/share";
 
 const ComponentsTestLib = () => {
   return (
@@ -51,6 +52,13 @@ const ComponentsTestLib = () => {
         </HStack>
         <Divider mb={2} />
       </VStack>
+      <Text mb={4}>This section demonstrates Share menu component</Text>
+      <VStack spacing={4} align="start">
+        <HStack w="100%">
+          <Share />
+        </HStack>
+        <Divider mb={2} />
+      </VStack>
     </Box>
   );
 };

diff --git a/app/components/__tests__/share.test.tsx b/app/components/__tests__/share.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Share from "../share";
+import "@testing-library/jest-dom";
+
+describe("Share Component", () => {
+  it("renders the Share button", () => {
+    render(<Share />);
+    const button = screen.getByText(/share report/i);
+    expect(button).toBeInTheDocument();
+  });
+
+  it("renders the menu options when the Share button is clicked", async () => {
+    render(<Share />);
+    const user = userEvent.setup();
+    const button = screen.getByText(/share report/i);
+
+    button.style.pointerEvents = "auto";
+
+    await user.click(button);
+
+    const emailOption = screen.getByText(/email/i);
+    const facebookOption = screen.getByText(/facebook/i);
+    const xOption = screen.getByText(/x/i);
+    expect(emailOption).toBeInTheDocument();
+    expect(facebookOption).toBeInTheDocument();
+    expect(xOption).toBeInTheDocument();
+  });
+
+  it("triggers a click on a menu item", async () => {
+    render(<Share />);
+    const user = userEvent.setup();
+
+    const button = screen.getByText(/share report/i);
+    button.style.pointerEvents = "auto";
+    await user.click(button);
+
+    const emailOption = await screen.getByText(/email/i);
+    await waitFor(() => expect(emailOption).toBeVisible());
+
+    await userEvent.click(emailOption);
+    expect(emailOption).toBeDefined();
+  });
+});
diff --git a/app/components/report.tsx b/app/components/report.tsx
@@ -2,6 +2,7 @@ import { Box, HStack, IconButton, Text } from "@chakra-ui/react";
 import CardHazard from "./card-hazard";
 import { AddressData } from "./__mocks__/address-data";
 import { Hazards } from "../data/data";
+import Share from "./share";
 
 const Report = () => {
   return (
@@ -16,39 +17,7 @@ const Report = () => {
         {AddressData.address && (
           <Text textStyle="headerMedium">{AddressData.address}</Text>
         )}
-        <HStack>
-          <Text textStyle="textMedium" color="blue">
-            Share report
-          </Text>
-          <IconButton aria-label="Share report" variant="ghost">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M4 11C4.55228 11 5 11.4477 5 12V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7956 3 20V12C3 11.4477 3.44772 11 4 11Z"
-                fill="#2C5282"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L12 3.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
-                fill="#2C5282"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12 1C12.5523 1 13 1.44772 13 2V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V2C11 1.44772 11.4477 1 12 1Z"
-                fill="#2C5282"
-              />
-            </svg>
-          </IconButton>
-        </HStack>
+        <Share />
       </HStack>
       <HStack
         justifyContent="space-between"

diff --git a/app/components/share.tsx b/app/components/share.tsx
@@ -0,0 +1,130 @@
+import {
+  Text,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+} from "@chakra-ui/react";
+
+const Share = () => {
+  return (
+    <Menu>
+      <MenuButton
+        as={Button}
+        aria-label="Share report"
+        variant="ghost"
+        rightIcon={
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M4 11C4.55228 11 5 11.4477 5 12V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7956 3 20V12C3 11.4477 3.44772 11 4 11Z"
+              fill="#2C5282"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L12 3.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
+              fill="#2C5282"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M12 1C12.5523 1 13 1.44772 13 2V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V2C11 1.44772 11.4477 1 12 1Z"
+              fill="#2C5282"
+            />
+          </svg>
+        }
+      >
+        <Text textStyle="textMedium">Share report</Text>
+      </MenuButton>
+      <MenuList p={"6px 16px 6px 16px"}>
+        <MenuItem gap="10px">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M4 5C3.45228 5 3 5.45228 3 6V18C3 18.5477 3.45228 19 4 19H20C20.5477 19 21 18.5477 21 18V6C21 5.45228 20.5477 5 20 5H4ZM1 6C1 4.34772 2.34772 3 4 3H20C21.6523 3 23 4.34772 23 6V18C23 19.6523 21.6523 21 20 21H4C2.34772 21 1 19.6523 1 18V6Z"
+              fill="#171923"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M1.18076 5.42653C1.49748 4.97408 2.12101 4.86405 2.57346 5.18076L12 11.7793L21.4265 5.18076C21.879 4.86405 22.5025 4.97408 22.8192 5.42653C23.1359 5.87898 23.0259 6.50251 22.5735 6.81923L12.5735 13.8192C12.2291 14.0603 11.7709 14.0603 11.4265 13.8192L1.42653 6.81923C0.974083 6.50251 0.864048 5.87898 1.18076 5.42653Z"
+              fill="#171923"
+            />
+          </svg>
+          <Text>Email</Text>
+        </MenuItem>
+        <MenuItem gap="10px">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M22.5 12.0633C22.5 6.26486 17.7984 1.56329 12 1.56329C6.20156 1.56329 1.5 6.26486 1.5 12.0633C1.5 17.3039 5.33906 21.6478 10.3594 22.4363V15.0994H7.69266V12.0633H10.3594V9.75001C10.3594 7.11892 11.9273 5.66439 14.3255 5.66439C15.4744 5.66439 16.6763 5.8697 16.6763 5.8697V8.45392H15.3516C14.048 8.45392 13.6402 9.26298 13.6402 10.0945V12.0633H16.552L16.087 15.0994H13.6406V22.4372C18.6609 21.6492 22.5 17.3053 22.5 12.0633Z"
+              fill="#316FF6"
+            />
+          </svg>
+          <Text>Facebook</Text>
+        </MenuItem>
+        <MenuItem gap="10px">
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 22 22"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.30765 5.869L13.9843 16.131H15.7226L8.04598 5.869H6.30765Z"
+              fill="black"
+            />
+            <path
+              d="M11 0.5C5.20097 0.5 0.5 5.20097 0.5 11C0.5 16.799 5.20097 21.5 11 21.5C16.799 21.5 21.5 16.799 21.5 11C21.5 5.20097 16.799 0.5 11 0.5ZM13.5741 16.9509L10.0793 12.278L5.75373 16.9509H4.6419L9.5825 11.6137L4.67293 5.04907H8.4569L11.6755 9.35267L15.659 5.04907H16.7708L12.1723 10.0172L17.3581 16.9509H13.5741Z"
+              fill="black"
+            />
+          </svg>
+          <Text>X</Text>
+        </MenuItem>
+        <MenuItem gap="10px">
+          <svg
+            width="21"
+            height="21"
+            viewBox="0 0 21 21"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M12.4773 1.45272C13.4203 0.541933 14.6833 0.0379607 15.9943 0.0493528C17.3053 0.0607449 18.5593 0.58659 19.4864 1.51363C20.4134 2.44067 20.9393 3.69473 20.9507 5.00572C20.9621 6.3167 20.4581 7.57971 19.5473 8.52272L19.5351 8.53512L15.5351 12.5351C14.5975 13.4725 13.3258 13.9992 12 13.9992C10.6742 13.9992 9.40264 13.4726 8.465 12.5352C8.07442 12.1448 8.07433 11.5116 8.46479 11.121C8.85526 10.7304 9.48842 10.7303 9.879 11.1208C10.4416 11.6832 11.2045 11.9992 12 11.9992C12.7954 11.9992 13.5583 11.6833 14.1209 11.1209C14.1209 11.1209 14.1209 11.1209 14.1209 11.1209L18.1143 7.12746C18.6573 6.56229 18.9576 5.80698 18.9507 5.0231C18.9439 4.23651 18.6284 3.48407 18.0722 2.92784C17.5159 2.37162 16.7635 2.05611 15.9769 2.04928C15.193 2.04247 14.4377 2.34276 13.8725 2.8857L12.7791 3.97912C12.3886 4.36964 11.7554 4.36964 11.3649 3.97912C10.9744 3.58859 10.9744 2.95543 11.3649 2.5649L12.4649 1.4649L12.4773 1.45272ZM6.465 7.4648C7.40264 6.52744 8.67418 6.00087 10 6.00087C11.3258 6.00087 12.5974 6.52744 13.535 7.4648C13.9256 7.85526 13.9257 8.48843 13.5352 8.87901C13.1448 9.26959 12.5116 9.26969 12.121 8.87922C11.5584 8.31681 10.7955 8.00087 10 8.00087C9.20456 8.00087 8.44168 8.31677 7.87911 8.87912C7.87908 8.87915 7.87915 8.87908 7.87911 8.87912L3.87911 12.8791L3.86672 12.8913C3.58019 13.168 3.35164 13.4991 3.19441 13.8651C3.03718 14.2311 2.95443 14.6248 2.95096 15.0231C2.9475 15.4214 3.02341 15.8165 3.17425 16.1852C3.32509 16.5539 3.54785 16.8888 3.82953 17.1705C4.11121 17.4522 4.44616 17.6749 4.81485 17.8258C5.18354 17.9766 5.57858 18.0525 5.97692 18.0491C6.37526 18.0456 6.76892 17.9628 7.13493 17.8056C7.50094 17.6484 7.83197 17.4198 8.10872 17.1333L8.12122 17.1206L9.22322 16.0196C9.61392 15.6292 10.2471 15.6295 10.6374 16.0202C11.0278 16.4109 11.0275 17.0441 10.6368 17.4344L9.54074 18.5295C9.08084 19.0039 8.53145 19.3824 7.92432 19.6432C7.3143 19.9053 6.6582 20.0432 5.9943 20.049C5.3304 20.0547 4.672 19.9282 4.05752 19.6768C3.44304 19.4254 2.88478 19.0542 2.41532 18.5847C1.94585 18.1152 1.57459 17.557 1.32318 16.9425C1.07178 16.328 0.945271 15.6696 0.95104 15.0057C0.956809 14.3418 1.09474 13.6857 1.35679 13.0757C1.61762 12.4685 1.99623 11.919 2.4707 11.4591L6.465 7.4648Z"
+              fill="#171923"
+            />
+          </svg>
+          <Text>Copy Link</Text>
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default Share;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,9 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "29.5.13",
+    "@types/testing-library__user-event": "^4.1.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "jest": "29.7.0",

diff --git a/tsconfig.json b/tsconfig.json
@@ -21,7 +21,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "types": ["@testing-library/jest-dom", "@testing-library/user-event"]
   },
   "include": [
     "next-env.d.ts",