From f98f337dee9a14fcf561a6ee78b06f492ea5f8b5 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 12:45:05 +0300
Subject: [PATCH 01/22] Share button

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/Action.js          |  20 +-
 .../HURUmap/IndicatorTitle/Share.js           |  22 +-
 .../HURUmap/IndicatorTitle/Action.js          |  20 +-
 .../HURUmap/IndicatorTitle/Share.js           |  28 ++-
 packages/hurumap-core/package.json            |   4 +-
 .../src/ShareButton/ShareButton.js            |  57 ++++++
 .../hurumap-core/src/ShareButton/index.js     |   3 +
 packages/hurumap-core/src/index.js            |   1 +
 pnpm-lock.yaml                                | 193 ++++--------------
 9 files changed, 167 insertions(+), 181 deletions(-)
 create mode 100644 packages/hurumap-core/src/ShareButton/ShareButton.js
 create mode 100644 packages/hurumap-core/src/ShareButton/index.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
index d804ee2dc..a1263936e 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
@@ -79,15 +79,17 @@ function Action({ children, header, icon, title, id, ...props }) {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
-            <ClickAwayListener onClickAway={handleClose}>
-              <Paper className={classes.paper}>
-                <ButtonBase onClick={handleClose} className={classes.header}>
-                  <Typography className={classes.title}>{header}</Typography>
-                  <CloseIcon />
-                </ButtonBase>
-                {children}
-              </Paper>
-            </ClickAwayListener>
+            <div>
+              <ClickAwayListener onClickAway={handleClose}>
+                <Paper className={classes.paper}>
+                  <ButtonBase onClick={handleClose} className={classes.header}>
+                    <Typography className={classes.title}>{header}</Typography>
+                    <CloseIcon />
+                  </ButtonBase>
+                  {children}
+                </Paper>
+              </ClickAwayListener>
+            </div>
           </Fade>
         )}
       </Popper>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
index 6b8c965cf..469f82f99 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
@@ -1,10 +1,10 @@
-import { Grid, TextField, Typography, SvgIcon } from "@mui/material";
+import { ShareButton } from "@hurumap/core";
+import { Grid, TextField, Typography, SvgIcon, useTheme } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 
-import ShareButton from "./ShareButton";
 import useStyles from "./useStyles";
 
 import { ReactComponent as CopyIcon } from "@/climatemappedafrica/assets/icons/Group 5062.svg";
@@ -20,6 +20,7 @@ function Share({
 }) {
   const classes = useStyles(props);
   const [copied, setCopied] = useState(false);
+  const theme = useTheme();
 
   const handleOnCopy = () => {
     setCopied((prev) => !prev);
@@ -128,7 +129,22 @@ function Share({
               </CopyToClipboard>
             </div>
           ) : (
-            <ShareButton name={social.name} url={url} {...social.props} />
+            <ShareButton
+              name={social.name}
+              url={url}
+              {...social.props}
+              sx={{
+                backgroundColor: `${theme.palette.background.default} !important`,
+                filter: "opacity(0.6)",
+                width: "100%",
+                border: `solid 1px ${theme.palette.background.paper} !important`,
+                paddingTop: `${theme.typography.pxToRem(5)} !important`,
+                "&:hover": {
+                  border: "solid 1px #666666 !important",
+                  backgroundColor: `${theme.palette.grey.light} !important`,
+                },
+              }}
+            />
           )}
         </Grid>
       ))}
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
index a29226bd0..ba77c59f0 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
@@ -79,15 +79,17 @@ function Action({ children, header, icon, title, id, ...props }) {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
-            <ClickAwayListener onClickAway={handleClose}>
-              <Paper className={classes.paper}>
-                <ButtonBase onClick={handleClose} className={classes.header}>
-                  <Typography className={classes.title}>{header}</Typography>
-                  <CloseIcon />
-                </ButtonBase>
-                {children}
-              </Paper>
-            </ClickAwayListener>
+            <div>
+              <ClickAwayListener onClickAway={handleClose}>
+                <Paper className={classes.paper}>
+                  <ButtonBase onClick={handleClose} className={classes.header}>
+                    <Typography className={classes.title}>{header}</Typography>
+                    <CloseIcon />
+                  </ButtonBase>
+                  {children}
+                </Paper>
+              </ClickAwayListener>
+            </div>
           </Fade>
         )}
       </Popper>
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
index 4b7b549e6..d564616cc 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
@@ -1,10 +1,10 @@
-import { Grid, TextField, Typography, SvgIcon } from "@mui/material";
+import { ShareButton } from "@hurumap/core";
+import { Grid, TextField, Typography, SvgIcon, useTheme } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 
-import ShareButton from "./ShareButton";
 import useStyles from "./useStyles";
 
 import { ReactComponent as CopyIcon } from "@/pesayetu/assets/icons/Group 5062.svg";
@@ -20,6 +20,7 @@ function Share({
 }) {
   const classes = useStyles(props);
   const [copied, setCopied] = useState(false);
+  const theme = useTheme();
 
   const handleOnCopy = () => {
     setCopied((prev) => !prev);
@@ -82,7 +83,7 @@ function Share({
         ? `@media (max-width: 1280px) {
       .${className} {
         padding-top: 160%;
-      } 
+      }
       @media (max-width: 620px) {
         .${className}  {
           padding-top: 200%;
@@ -103,8 +104,8 @@ function Share({
         }
       }`
     }
-</style> 
-<div class="${className}"><iframe class="frame" 
+</style>
+<div class="${className}"><iframe class="frame"
   src="${
     process.env.NEXT_PUBLIC_APP_URL
   }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
@@ -125,7 +126,22 @@ function Share({
               </CopyToClipboard>
             </div>
           ) : (
-            <ShareButton name={social.name} url={url} {...social.props} />
+            <ShareButton
+              name={social.name}
+              url={url}
+              {...social.props}
+              sx={{
+                backgroundColor: `${theme.palette.background.default} !important`,
+                filter: "opacity(0.6)",
+                width: "100%",
+                border: `solid 1px ${theme.palette.background.paper} !important`,
+                paddingTop: `${theme.typography.pxToRem(5)} !important`,
+                "&:hover": {
+                  border: "solid 1px #666666 !important",
+                  backgroundColor: `${theme.palette.grey.light} !important`,
+                },
+              }}
+            />
           )}
         </Grid>
       ))}
diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
index 2ff1cc6db..6356041f5 100644
--- a/packages/hurumap-core/package.json
+++ b/packages/hurumap-core/package.json
@@ -67,6 +67,8 @@
     "react-leaflet": "^4.2.1"
   },
   "dependencies": {
-    "prop-types": "^15.8.1"
+    "@mui/icons-material": "^5.16.1",
+    "prop-types": "^15.8.1",
+    "react-share": "^5.1.0"
   }
 }
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
new file mode 100644
index 000000000..02c279d85
--- /dev/null
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -0,0 +1,57 @@
+import EmailIcon from "@mui/icons-material/Email";
+import FacebookIcon from "@mui/icons-material/Facebook";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import PinterestIcon from "@mui/icons-material/Pinterest";
+import TelegramIcon from "@mui/icons-material/Telegram";
+import WhatsAppIcon from "@mui/icons-material/WhatsApp";
+import XIcon from "@mui/icons-material/X";
+import { Box } from "@mui/material";
+import React from "react";
+import {
+  TwitterShareButton,
+  LinkedinShareButton,
+  FacebookShareButton,
+  EmailShareButton,
+  WhatsappShareButton,
+  TelegramShareButton,
+  PinterestShareButton,
+} from "react-share";
+
+const componentMap = {
+  Facebook: { icon: FacebookIcon, button: FacebookShareButton },
+  Twitter: { icon: XIcon, button: TwitterShareButton },
+  LinkedIn: { icon: LinkedInIcon, button: LinkedinShareButton },
+  WhatsApp: { icon: WhatsAppIcon, button: WhatsappShareButton },
+  Email: { icon: EmailIcon, button: EmailShareButton },
+  Telegram: { icon: TelegramIcon, button: TelegramShareButton },
+  Pinterest: { icon: PinterestIcon, button: PinterestShareButton },
+};
+
+const ShareButton = React.forwardRef(function ShareButton({
+  name,
+  url,
+  IconProps,
+  ButtonProps,
+  ...props
+}) {
+  const SocialButtonComponent = componentMap[name].button;
+  const SocialIcon = componentMap[name].icon;
+
+  return (
+    <Box
+      {...props}
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        ...props.sx,
+      }}
+    >
+      <SocialButtonComponent url={url} {...ButtonProps}>
+        <SocialIcon {...IconProps} />
+      </SocialButtonComponent>
+    </Box>
+  );
+});
+
+export default ShareButton;
diff --git a/packages/hurumap-core/src/ShareButton/index.js b/packages/hurumap-core/src/ShareButton/index.js
new file mode 100644
index 000000000..0b9ed88f1
--- /dev/null
+++ b/packages/hurumap-core/src/ShareButton/index.js
@@ -0,0 +1,3 @@
+import ShareButton from "./ShareButton";
+
+export default ShareButton;
diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js
index 3149c42c1..13776ea81 100644
--- a/packages/hurumap-core/src/index.js
+++ b/packages/hurumap-core/src/index.js
@@ -2,3 +2,4 @@
 export { default as LocationTag } from "./LocationTag";
 export { default as LocationHighlight } from "./LocationHighlight";
 export { default as Location } from "./Location";
+export { default as ShareButton } from "./ShareButton";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44abde036..06ba4cf9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -854,7 +854,7 @@ importers:
         version: 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@storybook/addon-interactions':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@storybook/addon-links':
         specifier: ^8.2.2
         version: 8.2.2(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
@@ -866,13 +866,13 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.5.3)
@@ -1010,7 +1010,7 @@ importers:
         version: 5.0.0-alpha.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
       formik-mui-lab:
         specifier: ^1.0.0
-        version: 1.0.0(uwokqjev6b7ignvfnuri4yvwiy)
+        version: 1.0.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/lab@5.0.0-alpha.155(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1457,7 +1457,7 @@ importers:
         version: 133.0.0(encoding@0.1.13)
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
@@ -1574,6 +1574,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      react-share:
+        specifier: ^5.1.0
+        version: 5.1.0(react@18.3.1)
     devDependencies:
       '@babel/core':
         specifier: ^7.24.8
@@ -1587,6 +1590,15 @@ importers:
       '@commons-ui/testing-library':
         specifier: workspace:*
         version: link:../commons-ui-testing-library
+      '@emotion/react':
+        specifier: ^11.11.4
+        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled':
+        specifier: ^11.11.5
+        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/icons-material':
+        specifier: ^5.16.1
+        version: 5.16.1(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/material':
         specifier: ^5.16.1
         version: 5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1631,7 +1643,7 @@ importers:
     dependencies:
       '@testing-library/jest-dom':
         specifier: ^6.4.6
-        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0))
+        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))
       '@testing-library/react':
         specifier: ^14.3.1
         version: 14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1769,9 +1781,15 @@ importers:
 
   packages/hurumap-core:
     dependencies:
+      '@mui/icons-material':
+        specifier: ^5.16.1
+        version: 5.16.1(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
+      react-share:
+        specifier: ^5.1.0
+        version: 5.1.0(react@18.3.1)
     devDependencies:
       '@babel/core':
         specifier: ^7.24.8
@@ -16194,41 +16212,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 20.14.10
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.7
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   '@jest/environment@29.7.0':
     dependencies:
       '@jest/fake-timers': 29.7.0
@@ -18560,11 +18543,11 @@ snapshots:
       '@storybook/global': 5.0.0
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
 
-  '@storybook/addon-interactions@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
+  '@storybook/addon-interactions@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/instrumenter': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
-      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       polished: 4.3.1
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       ts-dedent: 2.2.0
@@ -19030,7 +19013,7 @@ snapshots:
 
   '@storybook/mdx2-csf@1.1.0': {}
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19049,7 +19032,7 @@ snapshots:
       '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
@@ -19375,12 +19358,12 @@ snapshots:
       memoizerific: 1.11.3
       qs: 6.12.3
 
-  '@storybook/test@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
+  '@storybook/test@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/instrumenter': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@testing-library/dom': 10.1.0
-      '@testing-library/jest-dom': 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))
+      '@testing-library/jest-dom': 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.1.0)
       '@vitest/expect': 1.6.0
       '@vitest/spy': 1.6.0
@@ -19670,7 +19653,7 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))':
+  '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.8
@@ -19700,7 +19683,7 @@ snapshots:
       '@types/jest': 29.5.12
       jest: 29.7.0(@types/node@20.14.10)
 
-  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0))':
+  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.8
@@ -21407,21 +21390,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   create-require@1.1.1: {}
 
   cross-spawn@5.1.0:
@@ -22345,7 +22313,7 @@ snapshots:
       '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
@@ -22403,12 +22371,12 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
     dependencies:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -22504,14 +22472,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -22562,7 +22530,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -23204,8 +23172,8 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
-  formik-mui-lab@1.0.0(uwokqjev6b7ignvfnuri4yvwiy):
-    dependencies:
+  ? formik-mui-lab@1.0.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/lab@5.0.0-alpha.155(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
+  : dependencies:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/lab': 5.0.0-alpha.155(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -24335,25 +24303,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-cli@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      exit: 0.1.2
-      import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest-config@29.7.0(@types/node@20.14.10):
     dependencies:
       '@babel/core': 7.24.8
@@ -24416,37 +24365,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-config@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@babel/core': 7.24.8
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.24.8)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0(babel-plugin-macros@3.1.0)
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.7
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 20.14.10
-      ts-node: 10.9.2(@types/node@20.14.10)(typescript@5.5.3)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
   jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
@@ -24708,18 +24626,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      '@jest/types': 29.6.3
-      import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jiti@1.21.6: {}
 
   jmespath@0.16.0: {}
@@ -28523,25 +28429,6 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.6.13(@swc/helpers@0.5.5)
 
-  ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.10
-      acorn: 8.12.1
-      acorn-walk: 8.3.3
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.5.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
   ts-pnp@1.2.0(typescript@5.5.3):
     optionalDependencies:
       typescript: 5.5.3

From 8c7ce19e497b6bb34847fc8b281bdc91155d4571 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 13:01:33 +0300
Subject: [PATCH 02/22] Add storybook

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/core/ShareButton.stories.js       |  33 ++
 .../src/ShareButton/ShareButton.js            |   4 +
 pnpm-lock.yaml                                | 318 +++++++++++++++---
 3 files changed, 303 insertions(+), 52 deletions(-)
 create mode 100644 apps/uibook/stories/HURUmap/core/ShareButton.stories.js

diff --git a/apps/uibook/stories/HURUmap/core/ShareButton.stories.js b/apps/uibook/stories/HURUmap/core/ShareButton.stories.js
new file mode 100644
index 000000000..a399ce39d
--- /dev/null
+++ b/apps/uibook/stories/HURUmap/core/ShareButton.stories.js
@@ -0,0 +1,33 @@
+import { ShareButton } from "@hurumap/core";
+import React from "react";
+
+export default {
+  title: "@hurumap/core/ShareButton",
+  argTypes: {
+    name: {
+      control: {
+        type: "select",
+      },
+      options: [
+        "Facebook",
+        "Twitter",
+        "LinkedIn",
+        "WhatsApp",
+        "Email",
+        "Telegram",
+        "Pinterest",
+      ],
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <ShareButton {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  url: "https://codeforafrica.org",
+  name: "Facebook",
+};
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index 02c279d85..f2d9b6d34 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -37,6 +37,10 @@ const ShareButton = React.forwardRef(function ShareButton({
   const SocialButtonComponent = componentMap[name].button;
   const SocialIcon = componentMap[name].icon;
 
+  if (!SocialButtonComponent) {
+    return null;
+  }
+
   return (
     <Box
       {...props}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06ba4cf9f..4a545830d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,31 +94,31 @@ importers:
         version: 0.84.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@payloadcms/bundler-webpack':
         specifier: ^1.0.7
-        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(sass@1.69.4)
+        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(sass@1.69.4)
       '@payloadcms/db-mongodb':
         specifier: ^1.5.2
-        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-cloud-storage':
         specifier: ^1.1.3
-        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-nested-docs':
         specifier: ^1.0.12
-        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-sentry':
         specifier: ^0.0.6
-        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
+        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
       '@payloadcms/plugin-seo':
         specifier: ^2.3.2
-        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
+        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
       '@payloadcms/richtext-slate':
         specifier: ^1.5.2
-        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@react-spring/web':
         specifier: ^9.7.3
         version: 9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^8.17.0
-        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       airtable:
         specifier: ^0.12.2
         version: 0.12.2(encoding@0.1.13)
@@ -148,7 +148,7 @@ importers:
         version: 1.0.3
       payload:
         specifier: ^2.23.1
-        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -233,7 +233,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -263,7 +263,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)
+        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))
 
   apps/climatemappedafrica:
     dependencies:
@@ -486,7 +486,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -552,28 +552,28 @@ importers:
         version: 14.2.5
       '@payloadcms/bundler-webpack':
         specifier: ^1.0.7
-        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(sass@1.69.4)
+        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(sass@1.69.4)
       '@payloadcms/db-mongodb':
         specifier: ^1.5.2
-        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-cloud-storage':
         specifier: ^1.1.3
-        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-nested-docs':
         specifier: ^1.0.12
-        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-sentry':
         specifier: ^0.0.6
-        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
+        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
       '@payloadcms/plugin-seo':
         specifier: ^2.3.2
-        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
+        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
       '@payloadcms/richtext-slate':
         specifier: ^1.5.2
-        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^8.17.0
-        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       camelcase-keys:
         specifier: ^9.1.3
         version: 9.1.3
@@ -606,7 +606,7 @@ importers:
         version: 1.0.3
       payload:
         specifier: ^2.23.1
-        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -670,7 +670,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -700,7 +700,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))
+        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)
 
   apps/pesayetu:
     dependencies:
@@ -929,7 +929,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -1101,7 +1101,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -1457,7 +1457,7 @@ importers:
         version: 133.0.0(encoding@0.1.13)
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
@@ -1543,7 +1543,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1574,9 +1574,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      react-share:
-        specifier: ^5.1.0
-        version: 5.1.0(react@18.3.1)
     devDependencies:
       '@babel/core':
         specifier: ^7.24.8
@@ -1590,15 +1587,6 @@ importers:
       '@commons-ui/testing-library':
         specifier: workspace:*
         version: link:../commons-ui-testing-library
-      '@emotion/react':
-        specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.11.5
-        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@mui/icons-material':
-        specifier: ^5.16.1
-        version: 5.16.1(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/material':
         specifier: ^5.16.1
         version: 5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1613,7 +1601,7 @@ importers:
         version: link:../eslint-config-commons-ui
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1643,7 +1631,7 @@ importers:
     dependencies:
       '@testing-library/jest-dom':
         specifier: ^6.4.6
-        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))
+        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)))
       '@testing-library/react':
         specifier: ^14.3.1
         version: 14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1683,7 +1671,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1829,7 +1817,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1893,7 +1881,7 @@ importers:
         version: link:../eslint-config-commons-ui
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1945,7 +1933,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
       prettier:
         specifier: ^3.3.2
         version: 3.3.2
@@ -16212,6 +16200,76 @@ snapshots:
       - supports-color
       - ts-node
 
+  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))':
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.14.10
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.7
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))':
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.14.10
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.7
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   '@jest/environment@29.7.0':
     dependencies:
       '@jest/fake-timers': 29.7.0
@@ -19666,7 +19724,7 @@ snapshots:
     optionalDependencies:
       '@jest/globals': 29.7.0
       '@types/jest': 29.5.12
-      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
 
   '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))':
     dependencies:
@@ -19683,7 +19741,7 @@ snapshots:
       '@types/jest': 29.5.12
       jest: 29.7.0(@types/node@20.14.10)
 
-  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))':
+  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.8
@@ -19696,7 +19754,7 @@ snapshots:
     optionalDependencies:
       '@jest/globals': 29.7.0
       '@types/jest': 29.5.12
-      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+      jest: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
 
   '@testing-library/react@14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -21390,6 +21448,36 @@ snapshots:
       - supports-color
       - ts-node
 
+  create-jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  create-jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   create-require@1.1.1: {}
 
   cross-spawn@5.1.0:
@@ -22483,13 +22571,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
     transitivePeerDependencies:
       - supports-color
 
@@ -22557,7 +22645,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -22585,7 +22673,7 @@ snapshots:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.3)
       eslint: 8.57.0
     optionalDependencies:
-      jest: 29.7.0(@types/node@20.14.10)
+      jest: 29.7.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -24264,6 +24352,26 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
+  jest-cli@29.7.0:
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@20.14.10)
+      exit: 0.1.2
+      import-local: 3.1.0
+      jest-config: 29.7.0(@types/node@20.14.10)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    optional: true
+
   jest-cli@29.7.0(@types/node@20.14.10):
     dependencies:
       '@jest/core': 29.7.0
@@ -24303,6 +24411,44 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest-cli@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+      exit: 0.1.2
+      import-local: 3.1.0
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  jest-cli@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      exit: 0.1.2
+      import-local: 3.1.0
+      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jest-config@29.7.0(@types/node@20.14.10):
     dependencies:
       '@babel/core': 7.24.8
@@ -24365,6 +24511,37 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
+  jest-config@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
+    dependencies:
+      '@babel/core': 7.24.8
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.24.8)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0(babel-plugin-macros@3.1.0)
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.7
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.14.10
+      ts-node: 10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
   jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
@@ -24601,6 +24778,19 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
+  jest@29.7.0:
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/types': 29.6.3
+      import-local: 3.1.0
+      jest-cli: 29.7.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    optional: true
+
   jest@29.7.0(@types/node@20.14.10):
     dependencies:
       '@jest/core': 29.7.0
@@ -24626,6 +24816,30 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+      '@jest/types': 29.6.3
+      import-local: 3.1.0
+      jest-cli: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      '@jest/types': 29.6.3
+      import-local: 3.1.0
+      jest-cli: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jiti@1.21.6: {}
 
   jmespath@0.16.0: {}

From b2bc2ab98d9c9a3e0c41054f2fe52f443e16a66f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 13:04:01 +0300
Subject: [PATCH 03/22] Add tests

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/ShareButton/ShareButton.snap.js       | 26 +++++++++++++++++++
 .../src/ShareButton/ShareButton.test.js       | 13 ++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/hurumap-core/src/ShareButton/ShareButton.snap.js
 create mode 100644 packages/hurumap-core/src/ShareButton/ShareButton.test.js

diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.snap.js b/packages/hurumap-core/src/ShareButton/ShareButton.snap.js
new file mode 100644
index 000000000..7a576bc5e
--- /dev/null
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.snap.js
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShareButton renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1n2mv2k"
+  >
+    <button
+      class="react-share__ShareButton"
+      style="background-color: transparent; padding: 0px; cursor: pointer;"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="FacebookIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.test.js b/packages/hurumap-core/src/ShareButton/ShareButton.test.js
new file mode 100644
index 000000000..28cd96432
--- /dev/null
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.test.js
@@ -0,0 +1,13 @@
+import { render } from "@commons-ui/testing-library";
+import * as React from "react";
+
+import ShareButton from "./ShareButton";
+
+describe("ShareButton", () => {
+  it("renders unchanged", () => {
+    const { container } = render(
+      <ShareButton name="Facebook" url="https://codeforafrica.org" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

From c588a1278c7bf569265489b67d24100098d5393e Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:08:35 +0300
Subject: [PATCH 04/22] Allow custom icons

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/Share.js           | 18 ++++++-
 .../HURUmap/IndicatorTitle/ShareButton.js     | 51 -------------------
 .../HURUmap/IndicatorTitle/Share.js           | 33 +++++++++---
 .../HURUmap/IndicatorTitle/ShareButton.js     | 51 -------------------
 .../src/ShareButton/ShareButton.js            | 35 ++++++-------
 5 files changed, 57 insertions(+), 131 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/ShareButton.js
 delete mode 100644 apps/pesayetu/src/components/HURUmap/IndicatorTitle/ShareButton.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
index 469f82f99..5cbbf2425 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
@@ -7,7 +7,12 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import useStyles from "./useStyles";
 
+import { ReactComponent as EmailIcon } from "@/climatemappedafrica/assets/icons/Email.svg";
+import { ReactComponent as FacebookIcon } from "@/climatemappedafrica/assets/icons/Facebook.svg";
 import { ReactComponent as CopyIcon } from "@/climatemappedafrica/assets/icons/Group 5062.svg";
+import { ReactComponent as LinkedInIcon } from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
+import { ReactComponent as TwitterIcon } from "@/climatemappedafrica/assets/icons/Twitter.svg";
+import { ReactComponent as WhatsAppIcon } from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
 import site from "@/climatemappedafrica/utils/site";
 
 function Share({
@@ -45,21 +50,24 @@ function Share({
   const shareData = [
     {
       name: "Facebook",
+      icon: FacebookIcon,
       props: { quote: title, hashtag: "#ClimateMapped.Africa" },
     },
     {
       name: "Twitter",
+      icon: TwitterIcon,
       props: { title, via: "Code4Africa", related: ["Code4Africa"] },
     },
     {
       name: "LinkedIn",
+      icon: LinkedInIcon,
       props: {
         summary: title,
         source: process.env.NEXT_PUBLIC_APP_URL,
       },
     },
-    { name: "WhatsApp", props: { quote: title } },
-    { name: "Email", props: { subject: title } },
+    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
+    { name: "Email", icon: EmailIcon, props: { subject: title } },
     { name: "CopyUrl" },
   ];
 
@@ -131,6 +139,7 @@ function Share({
           ) : (
             <ShareButton
               name={social.name}
+              icon={social.icon}
               url={url}
               {...social.props}
               sx={{
@@ -144,6 +153,11 @@ function Share({
                   backgroundColor: `${theme.palette.grey.light} !important`,
                 },
               }}
+              ButtonProps={{
+                style: {
+                  width: "100%",
+                },
+              }}
             />
           )}
         </Grid>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/ShareButton.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/ShareButton.js
deleted file mode 100644
index 28caf8d26..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/ShareButton.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import {
-  TwitterShareButton,
-  LinkedinShareButton,
-  FacebookShareButton,
-  EmailShareButton,
-  WhatsappShareButton,
-} from "react-share";
-
-import useStyles from "./useStyles";
-
-import { ReactComponent as EmailIcon } from "@/climatemappedafrica/assets/icons/Email.svg";
-import { ReactComponent as FacebookIcon } from "@/climatemappedafrica/assets/icons/Facebook.svg";
-import { ReactComponent as LinkedInIcon } from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
-import { ReactComponent as TwitterIcon } from "@/climatemappedafrica/assets/icons/Twitter.svg";
-import { ReactComponent as WhatsAppIcon } from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
-
-const componentMap = {
-  Facebook: { icon: FacebookIcon, button: FacebookShareButton },
-  Twitter: { icon: TwitterIcon, button: TwitterShareButton },
-  LinkedIn: { icon: LinkedInIcon, button: LinkedinShareButton },
-  WhatsApp: { icon: WhatsAppIcon, button: WhatsappShareButton },
-  Email: { icon: EmailIcon, button: EmailShareButton },
-};
-
-function ShareButton({ name, url, ...props }) {
-  const classes = useStyles(props);
-  const SocialButtonComponent = componentMap[name].button;
-  const SocialIcon = componentMap[name].icon;
-
-  return (
-    <SocialButtonComponent url={url} {...props} className={classes.shareButton}>
-      <SocialIcon className={classes.icon} />
-    </SocialButtonComponent>
-  );
-}
-
-ShareButton.propTypes = {
-  name: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-};
-
-ShareButton.defaultProps = {
-  name: undefined,
-  title: undefined,
-  url: undefined,
-};
-
-export default ShareButton;
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
index d564616cc..92a30ba30 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
@@ -7,7 +7,12 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import useStyles from "./useStyles";
 
+import { ReactComponent as EmailIcon } from "@/pesayetu/assets/icons/Email.svg";
+import { ReactComponent as FacebookIcon } from "@/pesayetu/assets/icons/Facebook.svg";
 import { ReactComponent as CopyIcon } from "@/pesayetu/assets/icons/Group 5062.svg";
+import { ReactComponent as LinkedInIcon } from "@/pesayetu/assets/icons/LinkedIn.svg";
+import { ReactComponent as TwitterIcon } from "@/pesayetu/assets/icons/Twitter.svg";
+import { ReactComponent as WhatsAppIcon } from "@/pesayetu/assets/icons/WhatsApp.svg";
 import site from "@/pesayetu/utils/site";
 
 function Share({
@@ -43,20 +48,26 @@ function Share({
   ).toString();
 
   const shareData = [
-    { name: "Facebook", props: { quote: title, hashtag: "#PesaYetu" } },
+    {
+      name: "Facebook",
+      icon: FacebookIcon,
+      props: { quote: title, hashtag: "#ClimateMapped.Africa" },
+    },
     {
       name: "Twitter",
+      icon: TwitterIcon,
       props: { title, via: "Code4Africa", related: ["Code4Africa"] },
     },
     {
       name: "LinkedIn",
+      icon: LinkedInIcon,
       props: {
         summary: title,
         source: process.env.NEXT_PUBLIC_APP_URL,
       },
     },
-    { name: "WhatsApp", props: { quote: title } },
-    { name: "Email", props: { subject: title } },
+    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
+    { name: "Email", icon: EmailIcon, props: { subject: title } },
     { name: "CopyUrl" },
   ];
 
@@ -129,16 +140,22 @@ function Share({
             <ShareButton
               name={social.name}
               url={url}
+              icon={social.icon}
               {...social.props}
               sx={{
-                backgroundColor: `${theme.palette.background.default} !important`,
+                backgroundColor: `${theme.palette.background.default} `,
                 filter: "opacity(0.6)",
                 width: "100%",
-                border: `solid 1px ${theme.palette.background.paper} !important`,
-                paddingTop: `${theme.typography.pxToRem(5)} !important`,
+                border: `solid 1px ${theme.palette.background.paper} `,
+                paddingTop: `${theme.typography.pxToRem(5)} `,
                 "&:hover": {
-                  border: "solid 1px #666666 !important",
-                  backgroundColor: `${theme.palette.grey.light} !important`,
+                  border: "solid 1px #666666 ",
+                  backgroundColor: `${theme.palette.grey.light} `,
+                },
+              }}
+              ButtonProps={{
+                style: {
+                  width: "100%",
                 },
               }}
             />
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/ShareButton.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/ShareButton.js
deleted file mode 100644
index 56a484695..000000000
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/ShareButton.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import {
-  TwitterShareButton,
-  LinkedinShareButton,
-  FacebookShareButton,
-  EmailShareButton,
-  WhatsappShareButton,
-} from "react-share";
-
-import useStyles from "./useStyles";
-
-import { ReactComponent as EmailIcon } from "@/pesayetu/assets/icons/Email.svg";
-import { ReactComponent as FacebookIcon } from "@/pesayetu/assets/icons/Facebook.svg";
-import { ReactComponent as LinkedInIcon } from "@/pesayetu/assets/icons/LinkedIn.svg";
-import { ReactComponent as TwitterIcon } from "@/pesayetu/assets/icons/Twitter.svg";
-import { ReactComponent as WhatsAppIcon } from "@/pesayetu/assets/icons/WhatsApp.svg";
-
-const componentMap = {
-  Facebook: { icon: FacebookIcon, button: FacebookShareButton },
-  Twitter: { icon: TwitterIcon, button: TwitterShareButton },
-  LinkedIn: { icon: LinkedInIcon, button: LinkedinShareButton },
-  WhatsApp: { icon: WhatsAppIcon, button: WhatsappShareButton },
-  Email: { icon: EmailIcon, button: EmailShareButton },
-};
-
-function ShareButton({ name, url, ...props }) {
-  const classes = useStyles(props);
-  const SocialButtonComponent = componentMap[name].button;
-  const SocialIcon = componentMap[name].icon;
-
-  return (
-    <SocialButtonComponent url={url} {...props} className={classes.shareButton}>
-      <SocialIcon className={classes.icon} />
-    </SocialButtonComponent>
-  );
-}
-
-ShareButton.propTypes = {
-  name: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-};
-
-ShareButton.defaultProps = {
-  name: undefined,
-  title: undefined,
-  url: undefined,
-};
-
-export default ShareButton;
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index f2d9b6d34..2f42dff1e 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -1,11 +1,4 @@
-import EmailIcon from "@mui/icons-material/Email";
-import FacebookIcon from "@mui/icons-material/Facebook";
-import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import PinterestIcon from "@mui/icons-material/Pinterest";
-import TelegramIcon from "@mui/icons-material/Telegram";
-import WhatsAppIcon from "@mui/icons-material/WhatsApp";
-import XIcon from "@mui/icons-material/X";
-import { Box } from "@mui/material";
+import { Box, SvgIcon } from "@mui/material";
 import React from "react";
 import {
   TwitterShareButton,
@@ -18,24 +11,23 @@ import {
 } from "react-share";
 
 const componentMap = {
-  Facebook: { icon: FacebookIcon, button: FacebookShareButton },
-  Twitter: { icon: XIcon, button: TwitterShareButton },
-  LinkedIn: { icon: LinkedInIcon, button: LinkedinShareButton },
-  WhatsApp: { icon: WhatsAppIcon, button: WhatsappShareButton },
-  Email: { icon: EmailIcon, button: EmailShareButton },
-  Telegram: { icon: TelegramIcon, button: TelegramShareButton },
-  Pinterest: { icon: PinterestIcon, button: PinterestShareButton },
+  Facebook: FacebookShareButton,
+  Twitter: TwitterShareButton,
+  LinkedIn: LinkedinShareButton,
+  WhatsApp: WhatsappShareButton,
+  Email: EmailShareButton,
+  Telegram: TelegramShareButton,
+  Pinterest: PinterestShareButton,
 };
 
 const ShareButton = React.forwardRef(function ShareButton({
   name,
   url,
-  IconProps,
   ButtonProps,
+  icon,
   ...props
 }) {
-  const SocialButtonComponent = componentMap[name].button;
-  const SocialIcon = componentMap[name].icon;
+  const SocialButtonComponent = componentMap[name];
 
   if (!SocialButtonComponent) {
     return null;
@@ -52,7 +44,12 @@ const ShareButton = React.forwardRef(function ShareButton({
       }}
     >
       <SocialButtonComponent url={url} {...ButtonProps}>
-        <SocialIcon {...IconProps} />
+        <SvgIcon
+          component={icon}
+          sx={{
+            width: "100%",
+          }}
+        />
       </SocialButtonComponent>
     </Box>
   );

From 045e407cb4d1fb28cc31f45df5b80e1d228caf40 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:12:01 +0300
Subject: [PATCH 05/22] Add fix comment

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/HURUmap/IndicatorTitle/Action.js              | 1 +
 apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
index a1263936e..27a67425d 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
@@ -79,6 +79,7 @@ function Action({ children, header, icon, title, id, ...props }) {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
+            {/* Fix: https://github.com/mui/material-ui/issues/27154#issuecomment-1117386458  */}
             <div>
               <ClickAwayListener onClickAway={handleClose}>
                 <Paper className={classes.paper}>
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
index ba77c59f0..f3b969aeb 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
@@ -79,6 +79,7 @@ function Action({ children, header, icon, title, id, ...props }) {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
+            {/* Fix: https://github.com/mui/material-ui/issues/27154#issuecomment-1117386458  */}
             <div>
               <ClickAwayListener onClickAway={handleClose}>
                 <Paper className={classes.paper}>

From 0bf4c5d7f6431212ba45476b6ef898cca0453ae0 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:16:29 +0300
Subject: [PATCH 06/22] update packages

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 packages/hurumap-core/package.json |   1 -
 pnpm-lock.yaml                     | 329 +++++------------------------
 2 files changed, 50 insertions(+), 280 deletions(-)

diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
index 6356041f5..7512eb425 100644
--- a/packages/hurumap-core/package.json
+++ b/packages/hurumap-core/package.json
@@ -67,7 +67,6 @@
     "react-leaflet": "^4.2.1"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.16.1",
     "prop-types": "^15.8.1",
     "react-share": "^5.1.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a545830d..2b33c44b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,31 +94,31 @@ importers:
         version: 0.84.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@payloadcms/bundler-webpack':
         specifier: ^1.0.7
-        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(sass@1.69.4)
+        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(sass@1.69.4)
       '@payloadcms/db-mongodb':
         specifier: ^1.5.2
-        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-cloud-storage':
         specifier: ^1.1.3
-        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-nested-docs':
         specifier: ^1.0.12
-        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
+        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
       '@payloadcms/plugin-sentry':
         specifier: ^0.0.6
-        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
+        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
       '@payloadcms/plugin-seo':
         specifier: ^2.3.2
-        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
+        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
       '@payloadcms/richtext-slate':
         specifier: ^1.5.2
-        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@react-spring/web':
         specifier: ^9.7.3
         version: 9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^8.17.0
-        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       airtable:
         specifier: ^0.12.2
         version: 0.12.2(encoding@0.1.13)
@@ -148,7 +148,7 @@ importers:
         version: 1.0.3
       payload:
         specifier: ^2.23.1
-        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -233,7 +233,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -263,7 +263,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))
+        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)
 
   apps/climatemappedafrica:
     dependencies:
@@ -486,7 +486,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -552,28 +552,28 @@ importers:
         version: 14.2.5
       '@payloadcms/bundler-webpack':
         specifier: ^1.0.7
-        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(sass@1.69.4)
+        version: 1.0.7(@swc/core@1.6.13(@swc/helpers@0.5.5))(ajv@8.16.0)(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(sass@1.69.4)
       '@payloadcms/db-mongodb':
         specifier: ^1.5.2
-        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-cloud-storage':
         specifier: ^1.1.3
-        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-nested-docs':
         specifier: ^1.0.12
-        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))
+        version: 1.0.12(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))
       '@payloadcms/plugin-sentry':
         specifier: ^0.0.6
-        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
+        version: 0.0.6(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
       '@payloadcms/plugin-seo':
         specifier: ^2.3.2
-        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react@18.3.1)
+        version: 2.3.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react@18.3.1)
       '@payloadcms/richtext-slate':
         specifier: ^1.5.2
-        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.5.2(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^8.17.0
-        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 8.17.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       camelcase-keys:
         specifier: ^9.1.3
         version: 9.1.3
@@ -606,7 +606,7 @@ importers:
         version: 1.0.3
       payload:
         specifier: ^2.23.1
-        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -670,7 +670,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -700,7 +700,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)
+        version: 5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))
 
   apps/pesayetu:
     dependencies:
@@ -854,7 +854,7 @@ importers:
         version: 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@storybook/addon-interactions':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@storybook/addon-links':
         specifier: ^8.2.2
         version: 8.2.2(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
@@ -866,13 +866,13 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.5.3)
@@ -929,7 +929,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -1101,7 +1101,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../../packages/jest-config-commons-ui
@@ -1457,7 +1457,7 @@ importers:
         version: 133.0.0(encoding@0.1.13)
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
@@ -1543,7 +1543,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1601,7 +1601,7 @@ importers:
         version: link:../eslint-config-commons-ui
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1631,7 +1631,7 @@ importers:
     dependencies:
       '@testing-library/jest-dom':
         specifier: ^6.4.6
-        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)))
+        version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0))
       '@testing-library/react':
         specifier: ^14.3.1
         version: 14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1671,7 +1671,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1769,9 +1769,6 @@ importers:
 
   packages/hurumap-core:
     dependencies:
-      '@mui/icons-material':
-        specifier: ^5.16.1
-        version: 5.16.1(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -1817,7 +1814,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1881,7 +1878,7 @@ importers:
         version: link:../eslint-config-commons-ui
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       jest-config-commons-ui:
         specifier: workspace:*
         version: link:../jest-config-commons-ui
@@ -1933,7 +1930,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+        version: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
       prettier:
         specifier: ^3.3.2
         version: 3.3.2
@@ -16200,76 +16197,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 20.14.10
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.7
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 20.14.10
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.7
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   '@jest/environment@29.7.0':
     dependencies:
       '@jest/fake-timers': 29.7.0
@@ -18601,11 +18528,11 @@ snapshots:
       '@storybook/global': 5.0.0
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
 
-  '@storybook/addon-interactions@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
+  '@storybook/addon-interactions@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/instrumenter': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
-      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       polished: 4.3.1
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       ts-dedent: 2.2.0
@@ -19071,7 +18998,7 @@ snapshots:
 
   '@storybook/mdx2-csf@1.1.0': {}
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19090,7 +19017,7 @@ snapshots:
       '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
+      '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
@@ -19416,12 +19343,12 @@ snapshots:
       memoizerific: 1.11.3
       qs: 6.12.3
 
-  '@storybook/test@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
+  '@storybook/test@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/instrumenter': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@testing-library/dom': 10.1.0
-      '@testing-library/jest-dom': 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))
+      '@testing-library/jest-dom': 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.1.0)
       '@vitest/expect': 1.6.0
       '@vitest/spy': 1.6.0
@@ -19711,7 +19638,7 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)))':
+  '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.8
@@ -19724,7 +19651,7 @@ snapshots:
     optionalDependencies:
       '@jest/globals': 29.7.0
       '@types/jest': 29.5.12
-      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
+      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
 
   '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))':
     dependencies:
@@ -19741,7 +19668,7 @@ snapshots:
       '@types/jest': 29.5.12
       jest: 29.7.0(@types/node@20.14.10)
 
-  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)))':
+  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(babel-plugin-macros@3.1.0))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.8
@@ -19754,7 +19681,7 @@ snapshots:
     optionalDependencies:
       '@jest/globals': 29.7.0
       '@types/jest': 29.5.12
-      jest: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
+      jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
 
   '@testing-library/react@14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -21448,36 +21375,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  create-jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   create-require@1.1.1: {}
 
   cross-spawn@5.1.0:
@@ -22571,13 +22468,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -22645,7 +22542,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -22673,7 +22570,7 @@ snapshots:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.3)
       eslint: 8.57.0
     optionalDependencies:
-      jest: 29.7.0
+      jest: 29.7.0(@types/node@20.14.10)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -24352,26 +24249,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@29.7.0:
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@20.14.10)
-      exit: 0.1.2
-      import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.14.10)
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    optional: true
-
   jest-cli@29.7.0(@types/node@20.14.10):
     dependencies:
       '@jest/core': 29.7.0
@@ -24411,44 +24288,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-cli@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      exit: 0.1.2
-      import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3))
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  jest-cli@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      exit: 0.1.2
-      import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest-config@29.7.0(@types/node@20.14.10):
     dependencies:
       '@babel/core': 7.24.8
@@ -24511,37 +24350,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-config@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
-    dependencies:
-      '@babel/core': 7.24.8
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.24.8)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0(babel-plugin-macros@3.1.0)
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.7
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 20.14.10
-      ts-node: 10.9.2(@swc/core@1.6.13(@swc/helpers@0.5.5))(@types/node@20.14.10)(typescript@5.5.3)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
   jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
@@ -24778,19 +24586,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0:
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/types': 29.6.3
-      import-local: 3.1.0
-      jest-cli: 29.7.0
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    optional: true
-
   jest@29.7.0(@types/node@20.14.10):
     dependencies:
       '@jest/core': 29.7.0
@@ -24816,30 +24611,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-      '@jest/types': 29.6.3
-      import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
-  jest@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3)):
-    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-      '@jest/types': 29.6.3
-      import-local: 3.1.0
-      jest-cli: 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(typescript@5.5.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jiti@1.21.6: {}
 
   jmespath@0.16.0: {}

From 59157ae393ab2acb8c83f74a9d312f7429ae474c Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:22:41 +0300
Subject: [PATCH 07/22] Fix failing tests

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../hurumap-core/src/ShareButton/ShareButton.snap.js     | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.snap.js b/packages/hurumap-core/src/ShareButton/ShareButton.snap.js
index 7a576bc5e..ec804119d 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.snap.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.snap.js
@@ -11,15 +11,10 @@ exports[`ShareButton renders unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="FacebookIcon"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-wsb35j-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
-      >
-        <path
-          d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
-        />
-      </svg>
+      />
     </button>
   </div>
 </div>

From d0a2c64a2b7f46b7dc4025460adea4916605dd92 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:16:53 +0300
Subject: [PATCH 08/22] Fix missing storybook icons

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 apps/uibook/package.json                      |   1 +
 .../HURUmap/core/ShareButton.stories.js       |  22 +++-
 pnpm-lock.yaml                                | 101 +++++++++---------
 3 files changed, 73 insertions(+), 51 deletions(-)

diff --git a/apps/uibook/package.json b/apps/uibook/package.json
index e4dd82925..3d68b7ec2 100644
--- a/apps/uibook/package.json
+++ b/apps/uibook/package.json
@@ -36,6 +36,7 @@
     "@emotion/styled": "^11.11.5",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
+    "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
     "@mui/utils": "^5.16.1",
     "@next/env": "^14.2.5",
diff --git a/apps/uibook/stories/HURUmap/core/ShareButton.stories.js b/apps/uibook/stories/HURUmap/core/ShareButton.stories.js
index a399ce39d..817d6f063 100644
--- a/apps/uibook/stories/HURUmap/core/ShareButton.stories.js
+++ b/apps/uibook/stories/HURUmap/core/ShareButton.stories.js
@@ -1,4 +1,11 @@
 import { ShareButton } from "@hurumap/core";
+import EmailIcon from "@mui/icons-material/Email";
+import FacebookIcon from "@mui/icons-material/Facebook";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import PinterestIcon from "@mui/icons-material/Pinterest";
+import TelegramIcon from "@mui/icons-material/Telegram";
+import WhatsAppIcon from "@mui/icons-material/WhatsApp";
+import XIcon from "@mui/icons-material/X";
 import React from "react";
 
 export default {
@@ -21,8 +28,19 @@ export default {
   },
 };
 
-function Template({ ...args }) {
-  return <ShareButton {...args} />;
+const iconMapping = {
+  Facebook: FacebookIcon,
+  Twitter: XIcon,
+  LinkedIn: LinkedInIcon,
+  WhatsApp: WhatsAppIcon,
+  Email: EmailIcon,
+  Telegram: TelegramIcon,
+  Pinterest: PinterestIcon,
+};
+
+function Template({ name, ...args }) {
+  const IconComponent = iconMapping[name];
+  return <ShareButton {...args} name={name} icon={IconComponent} />;
 }
 
 export const Default = Template.bind({});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b33c44b1..26cbcb93d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -763,7 +763,7 @@ importers:
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
       next-images:
         specifier: ^1.8.5
-        version: 1.8.5(webpack@5.93.0(esbuild@0.21.5))
+        version: 1.8.5(webpack@5.93.0)
       next-seo:
         specifier: ^6.5.0
         version: 6.5.0(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -826,7 +826,7 @@ importers:
         version: 3.0.1(video.js@8.16.1)
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(esbuild@0.21.5)
+        version: 5.93.0
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5
@@ -866,7 +866,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
@@ -890,7 +890,7 @@ importers:
         version: 29.7.0(@babel/core@7.24.8)
       babel-loader:
         specifier: ^9.1.3
-        version: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
+        version: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
       babel-plugin-module-resolver:
         specifier: ^4.1.0
         version: 4.1.0
@@ -908,7 +908,7 @@ importers:
         version: 5.3.2(@babel/core@7.24.8)(babel-plugin-module-resolver@4.1.0)
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0)
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -953,7 +953,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       svg-url-loader:
         specifier: ^8.0.0
-        version: 8.0.0(webpack@5.93.0(esbuild@0.21.5))
+        version: 8.0.0(webpack@5.93.0)
       typescript:
         specifier: ^5.5.3
         version: 5.5.3
@@ -1322,6 +1322,9 @@ importers:
       '@hurumap/next':
         specifier: workspace:*
         version: link:../../packages/hurumap-next
+      '@mui/icons-material':
+        specifier: ^5.16.1
+        version: 5.16.1(@mui/material@5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/material':
         specifier: ^5.16.1
         version: 5.16.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1333,7 +1336,7 @@ importers:
         version: 14.2.5
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.93.0)
+        version: 7.1.2(webpack@5.93.0(esbuild@0.21.5))
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
@@ -1370,7 +1373,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
@@ -1391,7 +1394,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0)
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -1406,7 +1409,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0
+        version: 5.93.0(esbuild@0.21.5)
 
   apps/vpnmanager:
     dependencies:
@@ -18998,7 +19001,7 @@ snapshots:
 
   '@storybook/mdx2-csf@1.1.0': {}
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19013,32 +19016,32 @@ snapshots:
       '@babel/preset-react': 7.24.7(@babel/core@7.24.8)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.8)
       '@babel/runtime': 7.24.8
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
-      '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
+      '@storybook/builder-webpack5': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@storybook/preset-react-webpack': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
-      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
-      css-loader: 6.11.0(webpack@5.93.0(esbuild@0.21.5))
+      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
+      css-loader: 6.11.0(webpack@5.93.0)
       find-up: 5.0.0
       fs-extra: 11.2.0
       image-size: 1.1.1
       loader-utils: 3.3.1
       next: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
-      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0(esbuild@0.21.5))
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0)
       pnp-webpack-plugin: 1.7.0(typescript@5.5.3)
       postcss: 8.4.39
-      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0(esbuild@0.21.5))
+      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-refresh: 0.14.2
       resolve-url-loader: 5.0.0
-      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0(esbuild@0.21.5))
+      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0)
       semver: 7.6.2
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
-      style-loader: 3.3.4(webpack@5.93.0(esbuild@0.21.5))
+      style-loader: 3.3.4(webpack@5.93.0)
       styled-jsx: 5.1.1(@babel/core@7.24.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
       ts-dedent: 2.2.0
       tsconfig-paths: 4.2.0
@@ -19046,7 +19049,7 @@ snapshots:
     optionalDependencies:
       sharp: 0.33.4
       typescript: 5.5.3
-      webpack: 5.93.0(esbuild@0.21.5)
+      webpack: 5.93.0
     transitivePeerDependencies:
       - '@jest/globals'
       - '@rspack/core'
@@ -19071,7 +19074,7 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19086,32 +19089,32 @@ snapshots:
       '@babel/preset-react': 7.24.7(@babel/core@7.24.8)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.8)
       '@babel/runtime': 7.24.8
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
-      '@storybook/builder-webpack5': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/preset-react-webpack': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+      '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
-      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
-      css-loader: 6.11.0(webpack@5.93.0)
+      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
+      css-loader: 6.11.0(webpack@5.93.0(esbuild@0.21.5))
       find-up: 5.0.0
       fs-extra: 11.2.0
       image-size: 1.1.1
       loader-utils: 3.3.1
       next: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
-      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0)
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0(esbuild@0.21.5))
       pnp-webpack-plugin: 1.7.0(typescript@5.5.3)
       postcss: 8.4.39
-      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0)
+      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0(esbuild@0.21.5))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-refresh: 0.14.2
       resolve-url-loader: 5.0.0
-      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0)
+      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0(esbuild@0.21.5))
       semver: 7.6.2
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
-      style-loader: 3.3.4(webpack@5.93.0)
+      style-loader: 3.3.4(webpack@5.93.0(esbuild@0.21.5))
       styled-jsx: 5.1.1(@babel/core@7.24.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
       ts-dedent: 2.2.0
       tsconfig-paths: 4.2.0
@@ -19119,7 +19122,7 @@ snapshots:
     optionalDependencies:
       sharp: 0.33.4
       typescript: 5.5.3
-      webpack: 5.93.0
+      webpack: 5.93.0(esbuild@0.21.5)
     transitivePeerDependencies:
       - '@jest/globals'
       - '@rspack/core'
@@ -21461,7 +21464,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.93.0
 
-  css-loader@7.1.2(webpack@5.93.0):
+  css-loader@7.1.2(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.39)
       postcss: 8.4.39
@@ -21472,7 +21475,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.6.2
     optionalDependencies:
-      webpack: 5.93.0
+      webpack: 5.93.0(esbuild@0.21.5)
 
   css-prefers-color-scheme@9.0.1(postcss@8.4.31):
     dependencies:
@@ -22468,13 +22471,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
     transitivePeerDependencies:
       - supports-color
 
@@ -22542,7 +22545,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -22977,11 +22980,11 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.93.0(esbuild@0.18.20)
 
-  file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)):
+  file-loader@6.2.0(webpack@5.93.0):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.93.0(esbuild@0.21.5)
+      webpack: 5.93.0
 
   file-system-cache@2.3.0:
     dependencies:
@@ -25479,11 +25482,11 @@ snapshots:
       url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.18.20)))(webpack@5.93.0(esbuild@0.18.20))
       webpack: 5.93.0(esbuild@0.18.20)
 
-  next-images@1.8.5(webpack@5.93.0(esbuild@0.21.5)):
+  next-images@1.8.5(webpack@5.93.0):
     dependencies:
-      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))
-      webpack: 5.93.0(esbuild@0.21.5)
+      file-loader: 6.2.0(webpack@5.93.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0))(webpack@5.93.0)
+      webpack: 5.93.0
 
   next-seo@6.5.0(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -28089,10 +28092,10 @@ snapshots:
       file-loader: 6.2.0(webpack@5.93.0(esbuild@0.18.20))
       webpack: 5.93.0(esbuild@0.18.20)
 
-  svg-url-loader@8.0.0(webpack@5.93.0(esbuild@0.21.5)):
+  svg-url-loader@8.0.0(webpack@5.93.0):
     dependencies:
-      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
-      webpack: 5.93.0(esbuild@0.21.5)
+      file-loader: 6.2.0(webpack@5.93.0)
+      webpack: 5.93.0
 
   svgo@3.3.2:
     dependencies:
@@ -28672,14 +28675,14 @@ snapshots:
     optionalDependencies:
       file-loader: 6.2.0(webpack@5.93.0(esbuild@0.18.20))
 
-  url-loader@4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5)):
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.93.0))(webpack@5.93.0):
     dependencies:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.3.0
-      webpack: 5.93.0(esbuild@0.21.5)
+      webpack: 5.93.0
     optionalDependencies:
-      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
+      file-loader: 6.2.0(webpack@5.93.0)
 
   url-parse@1.5.10:
     dependencies:

From 5c3e27b9914c13246916b2b7ec071d375acf5f1d Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:24:56 +0300
Subject: [PATCH 09/22] Review fixes

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 packages/hurumap-core/package.json                   |  6 +++---
 packages/hurumap-core/src/ShareButton/ShareButton.js | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
index 7512eb425..af57ff8fb 100644
--- a/packages/hurumap-core/package.json
+++ b/packages/hurumap-core/package.json
@@ -64,10 +64,10 @@
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "react-share": "^5.1.0"
   },
   "dependencies": {
-    "prop-types": "^15.8.1",
-    "react-share": "^5.1.0"
+    "prop-types": "^15.8.1"
   }
 }
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index 2f42dff1e..c47389c0d 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -21,10 +21,11 @@ const componentMap = {
 };
 
 const ShareButton = React.forwardRef(function ShareButton({
-  name,
-  url,
   ButtonProps,
+  IconProps,
   icon,
+  name,
+  url,
   ...props
 }) {
   const SocialButtonComponent = componentMap[name];
@@ -40,14 +41,17 @@ const ShareButton = React.forwardRef(function ShareButton({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...props.sx,
+        ...props?.sx,
       }}
     >
       <SocialButtonComponent url={url} {...ButtonProps}>
         <SvgIcon
           component={icon}
+          viewBox="0 0 24 24"
+          {...IconProps}
           sx={{
             width: "100%",
+            ...IconProps?.sx,
           }}
         />
       </SocialButtonComponent>

From d4440b19537acebee4c45f56c81a87ac8d1b7be6 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:23:06 +0300
Subject: [PATCH 10/22] Common copy btn

---
 .../HURUmap/IndicatorTitle/Share.js           |  60 +++++------
 packages/hurumap-core/package.json            |   1 +
 .../src/ShareButton/ShareButton.js            |  62 +++++++----
 pnpm-lock.yaml                                | 101 +++++++++---------
 4 files changed, 118 insertions(+), 106 deletions(-)

diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
index 92a30ba30..072490d22 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
@@ -1,9 +1,8 @@
 import { ShareButton } from "@hurumap/core";
-import { Grid, TextField, Typography, SvgIcon, useTheme } from "@mui/material";
+import { Grid, TextField, Typography, useTheme } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import useStyles from "./useStyles";
 
@@ -68,7 +67,7 @@ function Share({
     },
     { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
     { name: "Email", icon: EmailIcon, props: { subject: title } },
-    { name: "CopyUrl" },
+    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
   ];
 
   const className = `wrapper-${geoCode}-${indicatorId}`;
@@ -126,40 +125,29 @@ function Share({
     <Grid container className={classes.root}>
       {shareData.map((social) => (
         <Grid item xs={4} key={social.name}>
-          {social.name === "CopyUrl" ? (
-            <div className={classes.shareButton}>
-              <CopyToClipboard text={url} onCopy={handleOnCopy}>
-                <SvgIcon
-                  component={CopyIcon}
-                  viewBox="0 0 28 28"
-                  className={classes.copyIcon}
-                />
-              </CopyToClipboard>
-            </div>
-          ) : (
-            <ShareButton
-              name={social.name}
-              url={url}
-              icon={social.icon}
-              {...social.props}
-              sx={{
-                backgroundColor: `${theme.palette.background.default} `,
-                filter: "opacity(0.6)",
+          <ShareButton
+            name={social.name}
+            url={url}
+            icon={social.icon}
+            {...social.props}
+            sx={{
+              backgroundColor: `${theme.palette.background.default} `,
+              filter: "opacity(0.6)",
+              width: "100%",
+              border: `solid 1px ${theme.palette.background.paper} `,
+              paddingTop: `${theme.typography.pxToRem(5)} `,
+              "&:hover": {
+                border: "solid 1px #666666 ",
+                backgroundColor: `${theme.palette.grey.light} `,
+              },
+            }}
+            ButtonProps={{
+              style: {
                 width: "100%",
-                border: `solid 1px ${theme.palette.background.paper} `,
-                paddingTop: `${theme.typography.pxToRem(5)} `,
-                "&:hover": {
-                  border: "solid 1px #666666 ",
-                  backgroundColor: `${theme.palette.grey.light} `,
-                },
-              }}
-              ButtonProps={{
-                style: {
-                  width: "100%",
-                },
-              }}
-            />
-          )}
+              },
+            }}
+            onCopy={handleOnCopy}
+          />
         </Grid>
       ))}
 
diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
index af57ff8fb..b37b86743 100644
--- a/packages/hurumap-core/package.json
+++ b/packages/hurumap-core/package.json
@@ -63,6 +63,7 @@
     "@mui/utils": "^5.12.3",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
     "react-share": "^5.1.0"
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index c47389c0d..a413acd09 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -1,23 +1,28 @@
 import { Box, SvgIcon } from "@mui/material";
 import React from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import {
-  TwitterShareButton,
-  LinkedinShareButton,
-  FacebookShareButton,
   EmailShareButton,
-  WhatsappShareButton,
-  TelegramShareButton,
+  FacebookShareButton,
+  FacebookMessengerShareButton,
+  LinkedinShareButton,
   PinterestShareButton,
+  RedditShareButton,
+  TelegramShareButton,
+  TwitterShareButton,
+  WhatsappShareButton,
 } from "react-share";
 
 const componentMap = {
+  Email: EmailShareButton,
   Facebook: FacebookShareButton,
-  Twitter: TwitterShareButton,
+  FacebookMessenger: FacebookMessengerShareButton,
   LinkedIn: LinkedinShareButton,
-  WhatsApp: WhatsappShareButton,
-  Email: EmailShareButton,
-  Telegram: TelegramShareButton,
   Pinterest: PinterestShareButton,
+  Reddit: RedditShareButton,
+  Telegram: TelegramShareButton,
+  Twitter: TwitterShareButton,
+  WhatsApp: WhatsappShareButton,
 };
 
 const ShareButton = React.forwardRef(function ShareButton({
@@ -26,11 +31,12 @@ const ShareButton = React.forwardRef(function ShareButton({
   icon,
   name,
   url,
+  onCopy,
   ...props
 }) {
   const SocialButtonComponent = componentMap[name];
 
-  if (!SocialButtonComponent) {
+  if (!SocialButtonComponent && name !== "CopyUrl") {
     return null;
   }
 
@@ -44,17 +50,31 @@ const ShareButton = React.forwardRef(function ShareButton({
         ...props?.sx,
       }}
     >
-      <SocialButtonComponent url={url} {...ButtonProps}>
-        <SvgIcon
-          component={icon}
-          viewBox="0 0 24 24"
-          {...IconProps}
-          sx={{
-            width: "100%",
-            ...IconProps?.sx,
-          }}
-        />
-      </SocialButtonComponent>
+      {name === "CopyUrl" ? (
+        <CopyToClipboard text={url} onCopy={onCopy} {...ButtonProps}>
+          <SvgIcon
+            component={icon}
+            viewBox="0 0 24 24"
+            {...IconProps}
+            sx={{
+              width: "100%",
+              ...IconProps?.sx,
+            }}
+          />
+        </CopyToClipboard>
+      ) : (
+        <SocialButtonComponent url={url} {...ButtonProps}>
+          <SvgIcon
+            component={icon}
+            viewBox="0 0 24 24"
+            {...IconProps}
+            sx={{
+              width: "100%",
+              ...IconProps?.sx,
+            }}
+          />
+        </SocialButtonComponent>
+      )}
     </Box>
   );
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26cbcb93d..1c6f8c458 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -763,7 +763,7 @@ importers:
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
       next-images:
         specifier: ^1.8.5
-        version: 1.8.5(webpack@5.93.0)
+        version: 1.8.5(webpack@5.93.0(esbuild@0.21.5))
       next-seo:
         specifier: ^6.5.0
         version: 6.5.0(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -826,7 +826,7 @@ importers:
         version: 3.0.1(video.js@8.16.1)
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0
+        version: 5.93.0(esbuild@0.21.5)
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5
@@ -866,7 +866,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
@@ -890,7 +890,7 @@ importers:
         version: 29.7.0(@babel/core@7.24.8)
       babel-loader:
         specifier: ^9.1.3
-        version: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
+        version: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
       babel-plugin-module-resolver:
         specifier: ^4.1.0
         version: 4.1.0
@@ -908,7 +908,7 @@ importers:
         version: 5.3.2(@babel/core@7.24.8)(babel-plugin-module-resolver@4.1.0)
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0)
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -953,7 +953,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       svg-url-loader:
         specifier: ^8.0.0
-        version: 8.0.0(webpack@5.93.0)
+        version: 8.0.0(webpack@5.93.0(esbuild@0.21.5))
       typescript:
         specifier: ^5.5.3
         version: 5.5.3
@@ -1336,7 +1336,7 @@ importers:
         version: 14.2.5
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.93.0(esbuild@0.21.5))
+        version: 7.1.2(webpack@5.93.0)
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
@@ -1373,7 +1373,7 @@ importers:
         version: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
       '@storybook/nextjs':
         specifier: ^8.2.2
-        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
       '@storybook/react':
         specifier: ^8.2.2
         version: 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
@@ -1394,7 +1394,7 @@ importers:
         version: link:../../packages/eslint-config-commons-ui
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
+        version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0)
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
@@ -1409,7 +1409,7 @@ importers:
         version: 5.5.3
       webpack:
         specifier: ^5.93.0
-        version: 5.93.0(esbuild@0.21.5)
+        version: 5.93.0
 
   apps/vpnmanager:
     dependencies:
@@ -1775,6 +1775,9 @@ importers:
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
+      react-copy-to-clipboard:
+        specifier: ^5.1.0
+        version: 5.1.0(react@18.3.1)
       react-share:
         specifier: ^5.1.0
         version: 5.1.0(react@18.3.1)
@@ -19001,7 +19004,7 @@ snapshots:
 
   '@storybook/mdx2-csf@1.1.0': {}
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(babel-plugin-macros@3.1.0)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19016,32 +19019,32 @@ snapshots:
       '@babel/preset-react': 7.24.7(@babel/core@7.24.8)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.8)
       '@babel/runtime': 7.24.8
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
-      '@storybook/builder-webpack5': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/preset-react-webpack': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
+      '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10)(babel-plugin-macros@3.1.0))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
-      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
-      css-loader: 6.11.0(webpack@5.93.0)
+      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
+      css-loader: 6.11.0(webpack@5.93.0(esbuild@0.21.5))
       find-up: 5.0.0
       fs-extra: 11.2.0
       image-size: 1.1.1
       loader-utils: 3.3.1
       next: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
-      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0)
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0(esbuild@0.21.5))
       pnp-webpack-plugin: 1.7.0(typescript@5.5.3)
       postcss: 8.4.39
-      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0)
+      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0(esbuild@0.21.5))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-refresh: 0.14.2
       resolve-url-loader: 5.0.0
-      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0)
+      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0(esbuild@0.21.5))
       semver: 7.6.2
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
-      style-loader: 3.3.4(webpack@5.93.0)
+      style-loader: 3.3.4(webpack@5.93.0(esbuild@0.21.5))
       styled-jsx: 5.1.1(@babel/core@7.24.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
       ts-dedent: 2.2.0
       tsconfig-paths: 4.2.0
@@ -19049,7 +19052,7 @@ snapshots:
     optionalDependencies:
       sharp: 0.33.4
       typescript: 5.5.3
-      webpack: 5.93.0
+      webpack: 5.93.0(esbuild@0.21.5)
     transitivePeerDependencies:
       - '@jest/globals'
       - '@rspack/core'
@@ -19074,7 +19077,7 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(esbuild@0.21.5)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))':
+  '@storybook/nextjs@8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(type-fest@4.21.0)(typescript@5.5.3)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)':
     dependencies:
       '@babel/core': 7.24.8
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.8)
@@ -19089,32 +19092,32 @@ snapshots:
       '@babel/preset-react': 7.24.7(@babel/core@7.24.8)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.8)
       '@babel/runtime': 7.24.8
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(esbuild@0.21.5))
-      '@storybook/builder-webpack5': 8.2.2(esbuild@0.21.5)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
-      '@storybook/preset-react-webpack': 8.2.2(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0)
+      '@storybook/builder-webpack5': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
+      '@storybook/preset-react-webpack': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/react': 8.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))(typescript@5.5.3)
       '@storybook/test': 8.2.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.10))(storybook@8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8)))
       '@types/node': 18.19.39
       '@types/semver': 7.5.8
-      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0(esbuild@0.21.5))
-      css-loader: 6.11.0(webpack@5.93.0(esbuild@0.21.5))
+      babel-loader: 9.1.3(@babel/core@7.24.8)(webpack@5.93.0)
+      css-loader: 6.11.0(webpack@5.93.0)
       find-up: 5.0.0
       fs-extra: 11.2.0
       image-size: 1.1.1
       loader-utils: 3.3.1
       next: 14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
-      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0(esbuild@0.21.5))
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0)
       pnp-webpack-plugin: 1.7.0(typescript@5.5.3)
       postcss: 8.4.39
-      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0(esbuild@0.21.5))
+      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-refresh: 0.14.2
       resolve-url-loader: 5.0.0
-      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0(esbuild@0.21.5))
+      sass-loader: 12.6.0(sass@1.69.4)(webpack@5.93.0)
       semver: 7.6.2
       storybook: 8.2.2(@babel/preset-env@7.24.8(@babel/core@7.24.8))
-      style-loader: 3.3.4(webpack@5.93.0(esbuild@0.21.5))
+      style-loader: 3.3.4(webpack@5.93.0)
       styled-jsx: 5.1.1(@babel/core@7.24.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
       ts-dedent: 2.2.0
       tsconfig-paths: 4.2.0
@@ -19122,7 +19125,7 @@ snapshots:
     optionalDependencies:
       sharp: 0.33.4
       typescript: 5.5.3
-      webpack: 5.93.0(esbuild@0.21.5)
+      webpack: 5.93.0
     transitivePeerDependencies:
       - '@jest/globals'
       - '@rspack/core'
@@ -21464,7 +21467,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.93.0
 
-  css-loader@7.1.2(webpack@5.93.0(esbuild@0.21.5)):
+  css-loader@7.1.2(webpack@5.93.0):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.39)
       postcss: 8.4.39
@@ -21475,7 +21478,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.6.2
     optionalDependencies:
-      webpack: 5.93.0(esbuild@0.21.5)
+      webpack: 5.93.0
 
   css-prefers-color-scheme@9.0.1(postcss@8.4.31):
     dependencies:
@@ -22471,13 +22474,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -22545,7 +22548,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.21.5)))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -22980,11 +22983,11 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.93.0(esbuild@0.18.20)
 
-  file-loader@6.2.0(webpack@5.93.0):
+  file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.93.0
+      webpack: 5.93.0(esbuild@0.21.5)
 
   file-system-cache@2.3.0:
     dependencies:
@@ -25482,11 +25485,11 @@ snapshots:
       url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.18.20)))(webpack@5.93.0(esbuild@0.18.20))
       webpack: 5.93.0(esbuild@0.18.20)
 
-  next-images@1.8.5(webpack@5.93.0):
+  next-images@1.8.5(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
-      file-loader: 6.2.0(webpack@5.93.0)
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0))(webpack@5.93.0)
-      webpack: 5.93.0
+      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))
+      webpack: 5.93.0(esbuild@0.21.5)
 
   next-seo@6.5.0(next@14.2.5(@babel/core@7.24.8)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -28092,10 +28095,10 @@ snapshots:
       file-loader: 6.2.0(webpack@5.93.0(esbuild@0.18.20))
       webpack: 5.93.0(esbuild@0.18.20)
 
-  svg-url-loader@8.0.0(webpack@5.93.0):
+  svg-url-loader@8.0.0(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
-      file-loader: 6.2.0(webpack@5.93.0)
-      webpack: 5.93.0
+      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
+      webpack: 5.93.0(esbuild@0.21.5)
 
   svgo@3.3.2:
     dependencies:
@@ -28675,14 +28678,14 @@ snapshots:
     optionalDependencies:
       file-loader: 6.2.0(webpack@5.93.0(esbuild@0.18.20))
 
-  url-loader@4.1.1(file-loader@6.2.0(webpack@5.93.0))(webpack@5.93.0):
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.3.0
-      webpack: 5.93.0
+      webpack: 5.93.0(esbuild@0.21.5)
     optionalDependencies:
-      file-loader: 6.2.0(webpack@5.93.0)
+      file-loader: 6.2.0(webpack@5.93.0(esbuild@0.21.5))
 
   url-parse@1.5.10:
     dependencies:

From 5536691ff9f360729fe65bd4a3ee5c0f6978136b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:28:26 +0300
Subject: [PATCH 11/22] Climatemapped btn

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/Share.js           | 60 ++++++++-----------
 1 file changed, 24 insertions(+), 36 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
index 5cbbf2425..303db4e51 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
@@ -1,9 +1,8 @@
 import { ShareButton } from "@hurumap/core";
-import { Grid, TextField, Typography, SvgIcon, useTheme } from "@mui/material";
+import { Grid, TextField, Typography, useTheme } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import useStyles from "./useStyles";
 
@@ -68,7 +67,7 @@ function Share({
     },
     { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
     { name: "Email", icon: EmailIcon, props: { subject: title } },
-    { name: "CopyUrl" },
+    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
   ];
 
   const className = `wrapper-${geoCode}-${indicatorId}`;
@@ -126,40 +125,29 @@ function Share({
     <Grid container className={classes.root}>
       {shareData.map((social) => (
         <Grid item xs={4} key={social.name}>
-          {social.name === "CopyUrl" ? (
-            <div className={classes.shareButton}>
-              <CopyToClipboard text={url} onCopy={handleOnCopy}>
-                <SvgIcon
-                  component={CopyIcon}
-                  viewBox="0 0 28 28"
-                  className={classes.copyIcon}
-                />
-              </CopyToClipboard>
-            </div>
-          ) : (
-            <ShareButton
-              name={social.name}
-              icon={social.icon}
-              url={url}
-              {...social.props}
-              sx={{
-                backgroundColor: `${theme.palette.background.default} !important`,
-                filter: "opacity(0.6)",
+          <ShareButton
+            name={social.name}
+            url={url}
+            icon={social.icon}
+            {...social.props}
+            sx={{
+              backgroundColor: `${theme.palette.background.default} `,
+              filter: "opacity(0.6)",
+              width: "100%",
+              border: `solid 1px ${theme.palette.background.paper} `,
+              paddingTop: `${theme.typography.pxToRem(5)} `,
+              "&:hover": {
+                border: "solid 1px #666666 ",
+                backgroundColor: `${theme.palette.grey.light} `,
+              },
+            }}
+            ButtonProps={{
+              style: {
                 width: "100%",
-                border: `solid 1px ${theme.palette.background.paper} !important`,
-                paddingTop: `${theme.typography.pxToRem(5)} !important`,
-                "&:hover": {
-                  border: "solid 1px #666666 !important",
-                  backgroundColor: `${theme.palette.grey.light} !important`,
-                },
-              }}
-              ButtonProps={{
-                style: {
-                  width: "100%",
-                },
-              }}
-            />
-          )}
+              },
+            }}
+            onCopy={handleOnCopy}
+          />
         </Grid>
       ))}
 

From 2d7b2a92052bbd0e0bb149f844e5cd55cd36e46a Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:39:43 +0300
Subject: [PATCH 12/22] Share btn

---
 .../HURUmap/IndicatorTitle/index.js           | 44 +++++++++++++++-
 packages/hurumap-core/src/Share/Share.js      | 52 +++++++++++++++++++
 packages/hurumap-core/src/Share/index.js      |  3 ++
 packages/hurumap-core/src/index.js            |  1 +
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 packages/hurumap-core/src/Share/Share.js
 create mode 100644 packages/hurumap-core/src/Share/index.js

diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
index a705ec2ad..86f03875a 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
@@ -1,4 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
+import { Share } from "@hurumap/core";
 import { Grid } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
@@ -6,11 +7,17 @@ import React from "react";
 
 import Action from "./Action";
 import Download from "./Download";
-import Share from "./Share";
 
 import { ReactComponent as DownloadIcon } from "@/pesayetu/assets/icons/Component 1.svg";
 import { ReactComponent as ShareIcon } from "@/pesayetu/assets/icons/Component 27.svg";
 import { ReactComponent as InfoIcon } from "@/pesayetu/assets/icons/Component852.svg";
+import { ReactComponent as EmailIcon } from "@/pesayetu/assets/icons/Email.svg";
+import { ReactComponent as FacebookIcon } from "@/pesayetu/assets/icons/Facebook.svg";
+import { ReactComponent as CopyIcon } from "@/pesayetu/assets/icons/Group 5062.svg";
+import { ReactComponent as LinkedInIcon } from "@/pesayetu/assets/icons/LinkedIn.svg";
+import { ReactComponent as TwitterIcon } from "@/pesayetu/assets/icons/Twitter.svg";
+import { ReactComponent as WhatsAppIcon } from "@/pesayetu/assets/icons/WhatsApp.svg";
+import site from "@/pesayetu/utils/site";
 
 const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
   root: {
@@ -61,6 +68,37 @@ function IndicatorTitle({
 }) {
   const classes = useStyles(props);
 
+  const { geoCode, indicatorId } = props;
+
+  const url = new URL(
+    `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
+    site.environmentUrl,
+  ).toString();
+
+  const shareData = [
+    {
+      name: "Facebook",
+      icon: FacebookIcon,
+      props: { quote: title, hashtag: "#ClimateMapped.Africa" },
+    },
+    {
+      name: "Twitter",
+      icon: TwitterIcon,
+      props: { title, via: "Code4Africa", related: ["Code4Africa"] },
+    },
+    {
+      name: "LinkedIn",
+      icon: LinkedInIcon,
+      props: {
+        summary: title,
+        source: process.env.NEXT_PUBLIC_APP_URL,
+      },
+    },
+    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
+    { name: "Email", icon: EmailIcon, props: { subject: title } },
+    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
+  ];
+
   const actions = [
     description && {
       id: "act-description",
@@ -95,7 +133,9 @@ function IndicatorTitle({
       id: "act-share",
       title: "Share",
       header: "Share chart via:",
-      children: <Share title={title} {...props} />,
+      children: (
+        <Share title={title} shareData={shareData} url={url} {...props} />
+      ),
       icon: <ShareIcon />,
     },
   ];
diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
new file mode 100644
index 000000000..7200c4775
--- /dev/null
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -0,0 +1,52 @@
+import { Grid, useTheme } from "@mui/material";
+import React from "react";
+
+import ShareButton from "@/hurumap/core/ShareButton";
+
+const Share = React.forwardRef(function Share({
+  title,
+  chartType,
+  geoCode,
+  indicatorId,
+  isCompare,
+  shareData,
+  url,
+  handleOnCopy,
+  ...props
+}) {
+  const theme = useTheme();
+
+  return (
+    <Grid container {...props}>
+      {shareData.map((social) => (
+        <Grid item xs={4} key={social.name}>
+          <ShareButton
+            name={social.name}
+            url={url}
+            icon={social.icon}
+            {...social.props}
+            sx={{
+              backgroundColor: `${theme.palette.background.default} `,
+              filter: "opacity(0.6)",
+              width: "100%",
+              border: `solid 1px ${theme.palette.background.paper} `,
+              paddingTop: `${theme.typography.pxToRem(5)} `,
+              "&:hover": {
+                border: "solid 1px #666666 ",
+                backgroundColor: `${theme.palette.grey.light} `,
+              },
+            }}
+            ButtonProps={{
+              style: {
+                width: "100%",
+              },
+            }}
+            onCopy={handleOnCopy}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  );
+});
+
+export default Share;
diff --git a/packages/hurumap-core/src/Share/index.js b/packages/hurumap-core/src/Share/index.js
new file mode 100644
index 000000000..333669e11
--- /dev/null
+++ b/packages/hurumap-core/src/Share/index.js
@@ -0,0 +1,3 @@
+import Share from "./Share";
+
+export default Share;
diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js
index be3bc0b27..c0e672b2d 100644
--- a/packages/hurumap-core/src/index.js
+++ b/packages/hurumap-core/src/index.js
@@ -4,3 +4,4 @@ export { default as LocationTag } from "./LocationTag";
 export { default as LocationHighlight } from "./LocationHighlight";
 export { default as Location } from "./Location";
 export { default as ShareButton } from "./ShareButton";
+export { default as Share } from "./Share";

From 95fa090418a227c7ebad919bdd0f2e49603fee06 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 16:34:56 +0300
Subject: [PATCH 13/22] Add compare

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/index.js           | 59 ++++++++++++-
 packages/hurumap-core/src/Share/Share.js      | 86 ++++++++++++++++++-
 2 files changed, 140 insertions(+), 5 deletions(-)

diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
index 86f03875a..cea193d82 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
@@ -68,12 +68,61 @@ function IndicatorTitle({
 }) {
   const classes = useStyles(props);
 
-  const { geoCode, indicatorId } = props;
+  const { chartType, geoCode, indicatorId, isCompare } = props;
 
   const url = new URL(
     `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
     site.environmentUrl,
   ).toString();
+  const className = `wrapper-${geoCode}-${indicatorId}`;
+  const code = `<div>
+  <style>
+    .frame {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      z-index: 10;
+    }
+    .${className} {
+        position: relative;
+        overflow: hidden;
+        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
+    }
+    ${
+      isCompare
+        ? `@media (max-width: 1280px) {
+      .${className} {
+        padding-top: 160%;
+      }
+      @media (max-width: 620px) {
+        .${className}  {
+          padding-top: 200%;
+        }
+      @media (max-width: 500px) {
+        .${className}  {padding-top: 240% }}`
+        : `@media (max-width: 1280px) {
+        .${className}{
+          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
+        }
+    @media (max-width: 620px) {
+      .${className} {
+        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
+      }
+      @media (max-width: 500px) {
+        .${className} {
+          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
+        }
+      }`
+    }
+</style>
+<div class="${className}"><iframe class="frame"
+  src="${
+    process.env.NEXT_PUBLIC_APP_URL
+  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
+  `;
 
   const shareData = [
     {
@@ -134,7 +183,13 @@ function IndicatorTitle({
       title: "Share",
       header: "Share chart via:",
       children: (
-        <Share title={title} shareData={shareData} url={url} {...props} />
+        <Share
+          title={title}
+          shareData={shareData}
+          url={url}
+          code={code}
+          {...props}
+        />
       ),
       icon: <ShareIcon />,
     },
diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
index 7200c4775..522e03dfb 100644
--- a/packages/hurumap-core/src/Share/Share.js
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -1,20 +1,35 @@
-import { Grid, useTheme } from "@mui/material";
-import React from "react";
+import { Grid, TextField, Typography, useTheme } from "@mui/material";
+import React, { useState, useEffect } from "react";
 
 import ShareButton from "@/hurumap/core/ShareButton";
 
 const Share = React.forwardRef(function Share({
   title,
   chartType,
+  code,
   geoCode,
   indicatorId,
   isCompare,
   shareData,
   url,
-  handleOnCopy,
   ...props
 }) {
   const theme = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  const handleOnCopy = () => {
+    setCopied((prev) => !prev);
+  };
+
+  useEffect(() => {
+    let timer;
+    if (copied) {
+      timer = setTimeout(() => {
+        setCopied(false);
+      }, 3000);
+    }
+    return () => timer && clearTimeout(timer);
+  }, [copied]);
 
   return (
     <Grid container {...props}>
@@ -45,6 +60,71 @@ const Share = React.forwardRef(function Share({
           />
         </Grid>
       ))}
+      {copied ? (
+        <Grid
+          item
+          xs={12}
+          sx={{
+            height: theme.typography.pxToRem(36),
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: theme.typography.pxToRem(16),
+            border: `1px solid ${theme.palette.grey.light}`,
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: theme.typography.pxToRem(11),
+              lineHeight: 17 / 11,
+              color: "#666666",
+            }}
+          >
+            Copied!
+          </Typography>
+        </Grid>
+      ) : null}
+      <Grid
+        item
+        xs={12}
+        sx={{
+          height: theme.typography.pxToRem(36),
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: theme.typography.pxToRem(16),
+          border: `1px solid ${theme.palette.grey.light}`,
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: theme.typography.pxToRem(11),
+            lineHeight: 17 / 11,
+            color: "#666666",
+          }}
+        >
+          Embed on your website:
+        </Typography>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          height: theme.typography.pxToRem(36),
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: theme.typography.pxToRem(16),
+          border: `1px solid ${theme.palette.grey.light}`,
+        }}
+      >
+        <TextField
+          value={code}
+          sx={{
+            background: theme.palette.background.paper,
+            fontSize: theme.typography.pxToRem(11),
+            lineHeight: 17 / 11,
+            color: "#666666",
+          }}
+        />
+      </Grid>
     </Grid>
   );
 });

From 07fec58ea47e7c64803b1a33a69517de72e023b5 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 16:41:35 +0300
Subject: [PATCH 14/22] Remove unused files

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/Share.js           | 189 ------------------
 1 file changed, 189 deletions(-)
 delete mode 100644 apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js

diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
deleted file mode 100644
index 072490d22..000000000
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Share.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import { ShareButton } from "@hurumap/core";
-import { Grid, TextField, Typography, useTheme } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
-
-import useStyles from "./useStyles";
-
-import { ReactComponent as EmailIcon } from "@/pesayetu/assets/icons/Email.svg";
-import { ReactComponent as FacebookIcon } from "@/pesayetu/assets/icons/Facebook.svg";
-import { ReactComponent as CopyIcon } from "@/pesayetu/assets/icons/Group 5062.svg";
-import { ReactComponent as LinkedInIcon } from "@/pesayetu/assets/icons/LinkedIn.svg";
-import { ReactComponent as TwitterIcon } from "@/pesayetu/assets/icons/Twitter.svg";
-import { ReactComponent as WhatsAppIcon } from "@/pesayetu/assets/icons/WhatsApp.svg";
-import site from "@/pesayetu/utils/site";
-
-function Share({
-  title,
-  chartType,
-  geoCode,
-  indicatorId,
-  isCompare,
-  ...props
-}) {
-  const classes = useStyles(props);
-  const [copied, setCopied] = useState(false);
-  const theme = useTheme();
-
-  const handleOnCopy = () => {
-    setCopied((prev) => !prev);
-  };
-
-  useEffect(() => {
-    let timer;
-    if (copied) {
-      timer = setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-    }
-    return () => timer && clearTimeout(timer);
-  }, [copied]);
-
-  // Embed url
-  const url = new URL(
-    `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
-    site.environmentUrl,
-  ).toString();
-
-  const shareData = [
-    {
-      name: "Facebook",
-      icon: FacebookIcon,
-      props: { quote: title, hashtag: "#ClimateMapped.Africa" },
-    },
-    {
-      name: "Twitter",
-      icon: TwitterIcon,
-      props: { title, via: "Code4Africa", related: ["Code4Africa"] },
-    },
-    {
-      name: "LinkedIn",
-      icon: LinkedInIcon,
-      props: {
-        summary: title,
-        source: process.env.NEXT_PUBLIC_APP_URL,
-      },
-    },
-    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
-    { name: "Email", icon: EmailIcon, props: { subject: title } },
-    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
-  ];
-
-  const className = `wrapper-${geoCode}-${indicatorId}`;
-
-  const code = `<div>
-  <style>
-    .frame {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      z-index: 10;
-    }
-    .${className} {
-        position: relative;
-        overflow: hidden;
-        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
-    }
-    ${
-      isCompare
-        ? `@media (max-width: 1280px) {
-      .${className} {
-        padding-top: 160%;
-      }
-      @media (max-width: 620px) {
-        .${className}  {
-          padding-top: 200%;
-        }
-      @media (max-width: 500px) {
-        .${className}  {padding-top: 240% }}`
-        : `@media (max-width: 1280px) {
-        .${className}{
-          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
-        }
-    @media (max-width: 620px) {
-      .${className} {
-        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
-      }
-      @media (max-width: 500px) {
-        .${className} {
-          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
-        }
-      }`
-    }
-</style>
-<div class="${className}"><iframe class="frame"
-  src="${
-    process.env.NEXT_PUBLIC_APP_URL
-  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
-  `;
-
-  return (
-    <Grid container className={classes.root}>
-      {shareData.map((social) => (
-        <Grid item xs={4} key={social.name}>
-          <ShareButton
-            name={social.name}
-            url={url}
-            icon={social.icon}
-            {...social.props}
-            sx={{
-              backgroundColor: `${theme.palette.background.default} `,
-              filter: "opacity(0.6)",
-              width: "100%",
-              border: `solid 1px ${theme.palette.background.paper} `,
-              paddingTop: `${theme.typography.pxToRem(5)} `,
-              "&:hover": {
-                border: "solid 1px #666666 ",
-                backgroundColor: `${theme.palette.grey.light} `,
-              },
-            }}
-            ButtonProps={{
-              style: {
-                width: "100%",
-              },
-            }}
-            onCopy={handleOnCopy}
-          />
-        </Grid>
-      ))}
-
-      {copied ? (
-        <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-          <Typography className={classes.text}>Copied!</Typography>
-        </Grid>
-      ) : null}
-
-      <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-        <Typography className={classes.text}>Embed on your website:</Typography>
-      </Grid>
-      <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-        <TextField
-          value={code}
-          InputProps={{ classes: { input: clsx(classes.code, classes.text) } }}
-        />
-      </Grid>
-    </Grid>
-  );
-}
-
-Share.propTypes = {
-  title: PropTypes.string,
-  chartType: PropTypes.string,
-  geoCode: PropTypes.string,
-  indicatorId: PropTypes.number,
-  isCompare: PropTypes.bool,
-};
-
-Share.defaultProps = {
-  title: undefined,
-  geoCode: undefined,
-  indicatorId: undefined,
-  isCompare: undefined,
-  chartType: undefined,
-};
-
-export default Share;

From 62b04fdfcf4b864c866f3776f3e142bd53a99fd7 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 17:51:24 +0300
Subject: [PATCH 15/22] Update share style

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 packages/hurumap-core/src/Share/Share.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
index 522e03dfb..35eb3b5df 100644
--- a/packages/hurumap-core/src/Share/Share.js
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -96,10 +96,9 @@ const Share = React.forwardRef(function Share({
       >
         <Typography
           sx={{
-            fontSize: theme.typography.pxToRem(11),
-            lineHeight: 17 / 11,
             color: "#666666",
           }}
+          variant="caption"
         >
           Embed on your website:
         </Typography>
@@ -117,11 +116,15 @@ const Share = React.forwardRef(function Share({
       >
         <TextField
           value={code}
-          sx={{
-            background: theme.palette.background.paper,
-            fontSize: theme.typography.pxToRem(11),
-            lineHeight: 17 / 11,
-            color: "#666666",
+          size="small"
+          fullWidth
+          InputProps={{
+            style: {
+              background: theme.palette.background.paper,
+              fontSize: theme.typography.pxToRem(11),
+              lineHeight: 17 / 11,
+              color: "#666666",
+            },
           }}
         />
       </Grid>

From a0bd5f2aeb22bad0f7b614e89afe6677b724021b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 18:03:36 +0300
Subject: [PATCH 16/22] Climate mapped share

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/Share.js           | 189 ------------------
 .../HURUmap/IndicatorTitle/index.js           |  99 ++++++++-
 2 files changed, 97 insertions(+), 191 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
deleted file mode 100644
index 303db4e51..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Share.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import { ShareButton } from "@hurumap/core";
-import { Grid, TextField, Typography, useTheme } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
-
-import useStyles from "./useStyles";
-
-import { ReactComponent as EmailIcon } from "@/climatemappedafrica/assets/icons/Email.svg";
-import { ReactComponent as FacebookIcon } from "@/climatemappedafrica/assets/icons/Facebook.svg";
-import { ReactComponent as CopyIcon } from "@/climatemappedafrica/assets/icons/Group 5062.svg";
-import { ReactComponent as LinkedInIcon } from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
-import { ReactComponent as TwitterIcon } from "@/climatemappedafrica/assets/icons/Twitter.svg";
-import { ReactComponent as WhatsAppIcon } from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
-import site from "@/climatemappedafrica/utils/site";
-
-function Share({
-  title,
-  chartType,
-  geoCode,
-  indicatorId,
-  isCompare,
-  ...props
-}) {
-  const classes = useStyles(props);
-  const [copied, setCopied] = useState(false);
-  const theme = useTheme();
-
-  const handleOnCopy = () => {
-    setCopied((prev) => !prev);
-  };
-
-  useEffect(() => {
-    let timer;
-    if (copied) {
-      timer = setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-    }
-    return () => timer && clearTimeout(timer);
-  }, [copied]);
-
-  // Embed url
-  const url = new URL(
-    `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
-    site.environmentUrl,
-  ).toString();
-
-  const shareData = [
-    {
-      name: "Facebook",
-      icon: FacebookIcon,
-      props: { quote: title, hashtag: "#ClimateMapped.Africa" },
-    },
-    {
-      name: "Twitter",
-      icon: TwitterIcon,
-      props: { title, via: "Code4Africa", related: ["Code4Africa"] },
-    },
-    {
-      name: "LinkedIn",
-      icon: LinkedInIcon,
-      props: {
-        summary: title,
-        source: process.env.NEXT_PUBLIC_APP_URL,
-      },
-    },
-    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
-    { name: "Email", icon: EmailIcon, props: { subject: title } },
-    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
-  ];
-
-  const className = `wrapper-${geoCode}-${indicatorId}`;
-
-  const code = `<div>
-  <style>
-    .frame {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      z-index: 10;
-    }
-    .${className} {
-        position: relative;
-        overflow: hidden;
-        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
-    }
-    ${
-      isCompare
-        ? `@media (max-width: 1280px) {
-      .${className} {
-        padding-top: 160%;
-      }
-      @media (max-width: 620px) {
-        .${className}  {
-          padding-top: 200%;
-        }
-      @media (max-width: 500px) {
-        .${className}  {padding-top: 240% }}`
-        : `@media (max-width: 1280px) {
-        .${className}{
-          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
-        }
-    @media (max-width: 620px) {
-      .${className} {
-        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
-      }
-      @media (max-width: 500px) {
-        .${className} {
-          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
-        }
-      }`
-    }
-</style>
-<div class="${className}"><iframe class="frame"
-  src="${
-    process.env.NEXT_PUBLIC_APP_URL
-  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
-  `;
-
-  return (
-    <Grid container className={classes.root}>
-      {shareData.map((social) => (
-        <Grid item xs={4} key={social.name}>
-          <ShareButton
-            name={social.name}
-            url={url}
-            icon={social.icon}
-            {...social.props}
-            sx={{
-              backgroundColor: `${theme.palette.background.default} `,
-              filter: "opacity(0.6)",
-              width: "100%",
-              border: `solid 1px ${theme.palette.background.paper} `,
-              paddingTop: `${theme.typography.pxToRem(5)} `,
-              "&:hover": {
-                border: "solid 1px #666666 ",
-                backgroundColor: `${theme.palette.grey.light} `,
-              },
-            }}
-            ButtonProps={{
-              style: {
-                width: "100%",
-              },
-            }}
-            onCopy={handleOnCopy}
-          />
-        </Grid>
-      ))}
-
-      {copied ? (
-        <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-          <Typography className={classes.text}>Copied!</Typography>
-        </Grid>
-      ) : null}
-
-      <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-        <Typography className={classes.text}>Embed on your website:</Typography>
-      </Grid>
-      <Grid item xs={12} className={clsx(classes.row, classes.layout)}>
-        <TextField
-          value={code}
-          InputProps={{ classes: { input: clsx(classes.code, classes.text) } }}
-        />
-      </Grid>
-    </Grid>
-  );
-}
-
-Share.propTypes = {
-  title: PropTypes.string,
-  chartType: PropTypes.string,
-  geoCode: PropTypes.string,
-  indicatorId: PropTypes.number,
-  isCompare: PropTypes.bool,
-};
-
-Share.defaultProps = {
-  title: undefined,
-  geoCode: undefined,
-  indicatorId: undefined,
-  isCompare: undefined,
-  chartType: undefined,
-};
-
-export default Share;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
index 6a3560462..a329cc36b 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
@@ -1,4 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
+import { Share } from "@hurumap/core";
 import { Grid } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
@@ -6,11 +7,17 @@ import React from "react";
 
 import Action from "./Action";
 import Download from "./Download";
-import Share from "./Share";
 
 import { ReactComponent as DownloadIcon } from "@/climatemappedafrica/assets/icons/Component 1.svg";
 import { ReactComponent as ShareIcon } from "@/climatemappedafrica/assets/icons/Component 27.svg";
 import { ReactComponent as InfoIcon } from "@/climatemappedafrica/assets/icons/Component852.svg";
+import { ReactComponent as EmailIcon } from "@/climatemappedafrica/assets/icons/Email.svg";
+import { ReactComponent as FacebookIcon } from "@/climatemappedafrica/assets/icons/Facebook.svg";
+import { ReactComponent as CopyIcon } from "@/climatemappedafrica/assets/icons/Group 5062.svg";
+import { ReactComponent as LinkedInIcon } from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
+import { ReactComponent as TwitterIcon } from "@/climatemappedafrica/assets/icons/Twitter.svg";
+import { ReactComponent as WhatsAppIcon } from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
+import site from "@/climatemappedafrica/utils/site";
 
 const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
   root: {
@@ -61,6 +68,86 @@ function IndicatorTitle({
 }) {
   const classes = useStyles(props);
 
+  const { chartType, geoCode, indicatorId, isCompare } = props;
+
+  const url = new URL(
+    `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
+    site.environmentUrl,
+  ).toString();
+  const className = `wrapper-${geoCode}-${indicatorId}`;
+  const code = `<div>
+  <style>
+    .frame {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      z-index: 10;
+    }
+    .${className} {
+        position: relative;
+        overflow: hidden;
+        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
+    }
+    ${
+      isCompare
+        ? `@media (max-width: 1280px) {
+      .${className} {
+        padding-top: 160%;
+      }
+      @media (max-width: 620px) {
+        .${className}  {
+          padding-top: 200%;
+        }
+      @media (max-width: 500px) {
+        .${className}  {padding-top: 240% }}`
+        : `@media (max-width: 1280px) {
+        .${className}{
+          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
+        }
+    @media (max-width: 620px) {
+      .${className} {
+        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
+      }
+      @media (max-width: 500px) {
+        .${className} {
+          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
+        }
+      }`
+    }
+</style>
+<div class="${className}"><iframe class="frame"
+  src="${
+    process.env.NEXT_PUBLIC_APP_URL
+  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
+  `;
+
+  const shareData = [
+    {
+      name: "Facebook",
+      icon: FacebookIcon,
+      props: { quote: title, hashtag: "#ClimateMapped.Africa" },
+    },
+    {
+      name: "Twitter",
+      icon: TwitterIcon,
+      props: { title, via: "Code4Africa", related: ["Code4Africa"] },
+    },
+    {
+      name: "LinkedIn",
+      icon: LinkedInIcon,
+      props: {
+        summary: title,
+        source: process.env.NEXT_PUBLIC_APP_URL,
+      },
+    },
+    { name: "WhatsApp", icon: WhatsAppIcon, props: { quote: title } },
+    { name: "Email", icon: EmailIcon, props: { subject: title } },
+    { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
+  ];
+
   const actions = [
     description && {
       id: "act-description",
@@ -95,7 +182,15 @@ function IndicatorTitle({
       id: "act-share",
       title: "Share",
       header: "Share chart via:",
-      children: <Share title={title} {...props} />,
+      children: (
+        <Share
+          title={title}
+          shareData={shareData}
+          url={url}
+          code={code}
+          {...props}
+        />
+      ),
       icon: <ShareIcon />,
     },
   ];

From a1e7e16f68454f43e93d1c042a0764d55756a91b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 18:23:40 +0300
Subject: [PATCH 17/22] Share tests

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 packages/hurumap-core/src/Share/Share.js      | 27 +++++-----
 packages/hurumap-core/src/Share/Share.snap.js | 53 +++++++++++++++++++
 packages/hurumap-core/src/Share/Share.test.js | 22 ++++++++
 .../src/ShareButton/ShareButton.js            | 14 ++---
 4 files changed, 95 insertions(+), 21 deletions(-)
 create mode 100644 packages/hurumap-core/src/Share/Share.snap.js
 create mode 100644 packages/hurumap-core/src/Share/Share.test.js

diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
index 35eb3b5df..d6aa66a9b 100644
--- a/packages/hurumap-core/src/Share/Share.js
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -3,17 +3,20 @@ import React, { useState, useEffect } from "react";
 
 import ShareButton from "@/hurumap/core/ShareButton";
 
-const Share = React.forwardRef(function Share({
-  title,
-  chartType,
-  code,
-  geoCode,
-  indicatorId,
-  isCompare,
-  shareData,
-  url,
-  ...props
-}) {
+const Share = React.forwardRef(function Share(
+  {
+    title,
+    chartType,
+    code,
+    geoCode,
+    indicatorId,
+    isCompare,
+    shareData,
+    url,
+    ...props
+  },
+  ref,
+) {
   const theme = useTheme();
   const [copied, setCopied] = useState(false);
 
@@ -32,7 +35,7 @@ const Share = React.forwardRef(function Share({
   }, [copied]);
 
   return (
-    <Grid container {...props}>
+    <Grid container {...props} ref={ref}>
       {shareData.map((social) => (
         <Grid item xs={4} key={social.name}>
           <ShareButton
diff --git a/packages/hurumap-core/src/Share/Share.snap.js b/packages/hurumap-core/src/Share/Share.snap.js
new file mode 100644
index 000000000..ab5ea623d
--- /dev/null
+++ b/packages/hurumap-core/src/Share/Share.snap.js
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Share renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  >
+    <div
+      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-caption css-l67hkg-MuiTypography-root"
+      >
+        Embed on your website:
+      </span>
+    </div>
+    <div
+      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
+    >
+      <div
+        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+      >
+        <div
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+          style="background: rgb(255, 255, 255); font-size: 0.6875rem; line-height: 1.5454545454545454; color: rgb(102, 102, 102);"
+        >
+          <input
+            aria-invalid="false"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1n4twyu-MuiInputBase-input-MuiOutlinedInput-input"
+            id=":r0:"
+            type="text"
+            value="<h1>code</h1>"
+          />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          >
+            <legend
+              class="css-ihdtdm"
+            >
+              <span
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/hurumap-core/src/Share/Share.test.js b/packages/hurumap-core/src/Share/Share.test.js
new file mode 100644
index 000000000..7c8be4d9d
--- /dev/null
+++ b/packages/hurumap-core/src/Share/Share.test.js
@@ -0,0 +1,22 @@
+import { render } from "@commons-ui/testing-library";
+import * as React from "react";
+
+import Share from "./Share";
+
+describe("Share", () => {
+  it("renders unchanged", () => {
+    const { container } = render(
+      <Share
+        title="Area of agricultural land in hectares"
+        chartType="treemap"
+        code="<h1>code</h1>"
+        geoCode="KE"
+        indicatorId={1087}
+        isCompare={false}
+        shareData={[]}
+        url="http://localhost:3001/embed/ke/1087"
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index a413acd09..ffd9c5466 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -25,15 +25,10 @@ const componentMap = {
   WhatsApp: WhatsappShareButton,
 };
 
-const ShareButton = React.forwardRef(function ShareButton({
-  ButtonProps,
-  IconProps,
-  icon,
-  name,
-  url,
-  onCopy,
-  ...props
-}) {
+const ShareButton = React.forwardRef(function ShareButton(
+  { ButtonProps, IconProps, icon, name, url, onCopy, ...props },
+  ref,
+) {
   const SocialButtonComponent = componentMap[name];
 
   if (!SocialButtonComponent && name !== "CopyUrl") {
@@ -49,6 +44,7 @@ const ShareButton = React.forwardRef(function ShareButton({
         alignItems: "center",
         ...props?.sx,
       }}
+      ref={ref}
     >
       {name === "CopyUrl" ? (
         <CopyToClipboard text={url} onCopy={onCopy} {...ButtonProps}>

From 3bb8db3d69bbf28de99601f80cd1a6252c710d94 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 29 Jul 2024 18:36:19 +0300
Subject: [PATCH 18/22] Share stories

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../stories/HURUmap/core/Share.stories.js     | 110 ++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 apps/uibook/stories/HURUmap/core/Share.stories.js

diff --git a/apps/uibook/stories/HURUmap/core/Share.stories.js b/apps/uibook/stories/HURUmap/core/Share.stories.js
new file mode 100644
index 000000000..2cfda99b5
--- /dev/null
+++ b/apps/uibook/stories/HURUmap/core/Share.stories.js
@@ -0,0 +1,110 @@
+import { Share } from "@hurumap/core";
+import EmailIcon from "@mui/icons-material/Email";
+import FacebookIcon from "@mui/icons-material/Facebook";
+import CopyIcon from "@mui/icons-material/FileCopy";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import PinterestIcon from "@mui/icons-material/Pinterest";
+import TelegramIcon from "@mui/icons-material/Telegram";
+import WhatsAppIcon from "@mui/icons-material/WhatsApp";
+import XIcon from "@mui/icons-material/X";
+import React from "react";
+
+const shareData = [
+  {
+    name: "Facebook",
+    icon: FacebookIcon,
+  },
+  {
+    name: "Twitter",
+    icon: XIcon,
+  },
+  {
+    name: "LinkedIn",
+    icon: LinkedInIcon,
+  },
+  {
+    name: "WhatsApp",
+    icon: WhatsAppIcon,
+  },
+  {
+    name: "Email",
+    icon: EmailIcon,
+  },
+  {
+    name: "Telegram",
+    icon: TelegramIcon,
+  },
+  {
+    name: "Pinterest",
+    icon: PinterestIcon,
+  },
+  {
+    name: "CopyUrl",
+    icon: CopyIcon,
+  },
+];
+
+export default {
+  title: "@hurumap/core/Share",
+  component: Share,
+  argTypes: {
+    url: {
+      control: {
+        type: "text",
+      },
+    },
+    title: {
+      control: {
+        type: "text",
+      },
+    },
+    chartType: {
+      control: {
+        type: "select",
+      },
+      options: ["line", "bar", "treemap"],
+    },
+    code: {
+      control: {
+        type: "text",
+      },
+    },
+    geoCode: {
+      control: {
+        type: "text",
+      },
+    },
+    indicatorId: {
+      control: {
+        type: "number",
+      },
+    },
+    isCompare: {
+      control: {
+        type: "boolean",
+      },
+    },
+    shareData: {
+      control: {
+        type: "object",
+      },
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <Share {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  shareData,
+  title: "Area of agricultural land in hectares",
+  chartType: "treemap",
+  code: "<h1>code</h1>",
+  geoCode: "KE",
+  indicatorId: 1087,
+  isCompare: false,
+  url: "http://localhost:3001/embed/ke/1087",
+};

From 09a112e3f119fe2944f859a4cd64dfae2f895830 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:38:32 +0300
Subject: [PATCH 19/22] Reuse code

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/IndicatorTitle/index.js           | 57 +++--------------
 .../HURUmap/IndicatorTitle/index.js           | 57 +++--------------
 packages/hurumap-core/src/Share/Share.js      | 61 ++++++++++++++++++-
 packages/hurumap-core/src/Share/Share.snap.js | 39 +++++++++++-
 packages/hurumap-core/src/Share/Share.test.js |  5 +-
 5 files changed, 116 insertions(+), 103 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
index a329cc36b..25cb619f2 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
@@ -68,61 +68,13 @@ function IndicatorTitle({
 }) {
   const classes = useStyles(props);
 
-  const { chartType, geoCode, indicatorId, isCompare } = props;
+  const { geoCode, indicatorId } = props;
 
   const url = new URL(
     `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
     site.environmentUrl,
   ).toString();
   const className = `wrapper-${geoCode}-${indicatorId}`;
-  const code = `<div>
-  <style>
-    .frame {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      z-index: 10;
-    }
-    .${className} {
-        position: relative;
-        overflow: hidden;
-        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
-    }
-    ${
-      isCompare
-        ? `@media (max-width: 1280px) {
-      .${className} {
-        padding-top: 160%;
-      }
-      @media (max-width: 620px) {
-        .${className}  {
-          padding-top: 200%;
-        }
-      @media (max-width: 500px) {
-        .${className}  {padding-top: 240% }}`
-        : `@media (max-width: 1280px) {
-        .${className}{
-          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
-        }
-    @media (max-width: 620px) {
-      .${className} {
-        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
-      }
-      @media (max-width: 500px) {
-        .${className} {
-          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
-        }
-      }`
-    }
-</style>
-<div class="${className}"><iframe class="frame"
-  src="${
-    process.env.NEXT_PUBLIC_APP_URL
-  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
-  `;
 
   const shareData = [
     {
@@ -148,6 +100,11 @@ function IndicatorTitle({
     { name: "CopyUrl", icon: CopyIcon, props: { subject: title } },
   ];
 
+  const codeData = {
+    className,
+    src: `${process.env.NEXT_PUBLIC_APP_URL}/embed/${geoCode.toLowerCase()}/${indicatorId}`,
+  };
+
   const actions = [
     description && {
       id: "act-description",
@@ -187,7 +144,7 @@ function IndicatorTitle({
           title={title}
           shareData={shareData}
           url={url}
-          code={code}
+          codeData={codeData}
           {...props}
         />
       ),
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
index cea193d82..f0ea1be57 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
@@ -68,61 +68,18 @@ function IndicatorTitle({
 }) {
   const classes = useStyles(props);
 
-  const { chartType, geoCode, indicatorId, isCompare } = props;
+  const { geoCode, indicatorId } = props;
 
   const url = new URL(
     `/embed/${geoCode.toLowerCase()}/${indicatorId}`,
     site.environmentUrl,
   ).toString();
   const className = `wrapper-${geoCode}-${indicatorId}`;
-  const code = `<div>
-  <style>
-    .frame {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      z-index: 10;
-    }
-    .${className} {
-        position: relative;
-        overflow: hidden;
-        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
-    }
-    ${
-      isCompare
-        ? `@media (max-width: 1280px) {
-      .${className} {
-        padding-top: 160%;
-      }
-      @media (max-width: 620px) {
-        .${className}  {
-          padding-top: 200%;
-        }
-      @media (max-width: 500px) {
-        .${className}  {padding-top: 240% }}`
-        : `@media (max-width: 1280px) {
-        .${className}{
-          padding-top: ${chartType === "treemap" ? "100%" : "75%"};
-        }
-    @media (max-width: 620px) {
-      .${className} {
-        padding-top: ${chartType === "treemap" ? "120%" : "100%"};
-      }
-      @media (max-width: 500px) {
-        .${className} {
-          padding-top: ${chartType === "treemap" ? "170%" : "140%"};
-        }
-      }`
-    }
-</style>
-<div class="${className}"><iframe class="frame"
-  src="${
-    process.env.NEXT_PUBLIC_APP_URL
-  }/embed/${geoCode.toLowerCase()}/${indicatorId}"></iframe></div></div>
-  `;
+
+  const codeData = {
+    className,
+    src: `${process.env.NEXT_PUBLIC_APP_URL}/embed/${geoCode.toLowerCase()}/${indicatorId}`,
+  };
 
   const shareData = [
     {
@@ -187,7 +144,7 @@ function IndicatorTitle({
           title={title}
           shareData={shareData}
           url={url}
-          code={code}
+          codeData={codeData}
           {...props}
         />
       ),
diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
index d6aa66a9b..14ce9b8eb 100644
--- a/packages/hurumap-core/src/Share/Share.js
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -7,7 +7,7 @@ const Share = React.forwardRef(function Share(
   {
     title,
     chartType,
-    code,
+    codeData,
     geoCode,
     indicatorId,
     isCompare,
@@ -20,6 +20,65 @@ const Share = React.forwardRef(function Share(
   const theme = useTheme();
   const [copied, setCopied] = useState(false);
 
+  const { src, className } = codeData;
+
+  const code = `
+  <div>
+    <style>
+      .frame {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        z-index: 10;
+      }
+      .${className} {
+        position: relative;
+        overflow: hidden;
+        padding-top: ${chartType === "treemap" ? "75%" : "56.25%"};
+      }
+      ${
+        isCompare
+          ? `@media (max-width: 1280px) {
+              .${className} {
+                padding-top: 160%;
+              }
+            }
+            @media (max-width: 620px) {
+              .${className} {
+                padding-top: 200%;
+              }
+            }
+            @media (max-width: 500px) {
+              .${className} {
+                padding-top: 240%;
+              }
+            }`
+          : `@media (max-width: 1280px) {
+              .${className} {
+                padding-top: ${chartType === "treemap" ? "100%" : "75%"};
+              }
+            }
+            @media (max-width: 620px) {
+              .${className} {
+                padding-top: ${chartType === "treemap" ? "120%" : "100%"};
+              }
+            }
+            @media (max-width: 500px) {
+              .${className} {
+                padding-top: ${chartType === "treemap" ? "170%" : "140%"};
+              }
+            }`
+      }
+    </style>
+    <div class="${className}">
+      <iframe class="frame" src="${src}"></iframe>
+    </div>
+  </div>
+`;
+
   const handleOnCopy = () => {
     setCopied((prev) => !prev);
   };
diff --git a/packages/hurumap-core/src/Share/Share.snap.js b/packages/hurumap-core/src/Share/Share.snap.js
index ab5ea623d..ec7e33dd2 100644
--- a/packages/hurumap-core/src/Share/Share.snap.js
+++ b/packages/hurumap-core/src/Share/Share.snap.js
@@ -29,7 +29,44 @@ exports[`Share renders unchanged 1`] = `
             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1n4twyu-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r0:"
             type="text"
-            value="<h1>code</h1>"
+            value="
+  <div>
+    <style>
+      .frame {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        z-index: 10;
+      }
+      .chart {
+        position: relative;
+        overflow: hidden;
+        padding-top: 75%;
+      }
+      @media (max-width: 1280px) {
+              .chart {
+                padding-top: 100%;
+              }
+            }
+            @media (max-width: 620px) {
+              .chart {
+                padding-top: 120%;
+              }
+            }
+            @media (max-width: 500px) {
+              .chart {
+                padding-top: 170%;
+              }
+            }
+    </style>
+    <div class="chart">
+      <iframe class="frame" src="http://localhost:3001/embed/ke/1087"></iframe>
+    </div>
+  </div>
+"
           />
           <fieldset
             aria-hidden="true"
diff --git a/packages/hurumap-core/src/Share/Share.test.js b/packages/hurumap-core/src/Share/Share.test.js
index 7c8be4d9d..c8007906b 100644
--- a/packages/hurumap-core/src/Share/Share.test.js
+++ b/packages/hurumap-core/src/Share/Share.test.js
@@ -9,7 +9,10 @@ describe("Share", () => {
       <Share
         title="Area of agricultural land in hectares"
         chartType="treemap"
-        code="<h1>code</h1>"
+        codeData={{
+          src: "http://localhost:3001/embed/ke/1087",
+          className: "chart",
+        }}
         geoCode="KE"
         indicatorId={1087}
         isCompare={false}

From 7cef1ccd145ca0c863e632f5aa77bbb032a870ea Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 31 Jul 2024 13:56:09 +0300
Subject: [PATCH 20/22] Working action

---
 .../HURUmap/IndicatorTitle/Action.js          | 120 ------------------
 .../HURUmap/IndicatorTitle/index.js           |   3 +-
 .../HURUmap/IndicatorTitle/Action.js          | 120 ------------------
 .../HURUmap/IndicatorTitle/index.js           |   3 +-
 packages/hurumap-core/src/Action/Action.js    | 118 +++++++++++++++++
 packages/hurumap-core/src/Action/index.js     |   3 +
 packages/hurumap-core/src/index.js            |   1 +
 7 files changed, 124 insertions(+), 244 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
 delete mode 100644 apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
 create mode 100644 packages/hurumap-core/src/Action/Action.js
 create mode 100644 packages/hurumap-core/src/Action/index.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
deleted file mode 100644
index 27a67425d..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/Action.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  Popper,
-  Fade,
-  Paper,
-  ButtonBase,
-  Typography,
-  IconButton,
-  ClickAwayListener,
-  Tooltip,
-} from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import PropTypes from "prop-types";
-import React, { useState } from "react";
-
-import { ReactComponent as CloseIcon } from "@/climatemappedafrica/assets/icons/action-close.svg";
-
-const useStyles = makeStyles(({ palette, typography, zIndex }) => ({
-  root: {},
-  popper: {
-    zIndex: zIndex.drawer,
-  },
-  paper: {
-    background: palette.background.default,
-    border: `1px solid ${palette.grey.light}`,
-    width: typography.pxToRem(180),
-    boxShadow: "0px 3px 6px #00000029",
-    borderRadius: 0,
-    marginTop: typography.pxToRem(-40),
-  },
-  header: {
-    background: palette.background.paper,
-    height: typography.pxToRem(36),
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%",
-    paddingLeft: typography.pxToRem(16),
-    paddingRight: typography.pxToRem(10),
-  },
-  title: {
-    fontSize: typography.pxToRem(11),
-    lineHeight: 17 / 11,
-    color: "#666666",
-  },
-  button: {
-    padding: 0,
-  },
-}));
-
-function Action({ children, header, icon, title, id, ...props }) {
-  const classes = useStyles(props);
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <div className={classes.root}>
-      <Tooltip title={title}>
-        <IconButton
-          onClick={handleClick}
-          className={classes.button}
-          size="large"
-        >
-          {icon}
-        </IconButton>
-      </Tooltip>
-      <Popper
-        open={Boolean(anchorEl)}
-        placement="bottom-end"
-        anchorEl={anchorEl}
-        className={classes.popper}
-        transition
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            {/* Fix: https://github.com/mui/material-ui/issues/27154#issuecomment-1117386458  */}
-            <div>
-              <ClickAwayListener onClickAway={handleClose}>
-                <Paper className={classes.paper}>
-                  <ButtonBase onClick={handleClose} className={classes.header}>
-                    <Typography className={classes.title}>{header}</Typography>
-                    <CloseIcon />
-                  </ButtonBase>
-                  {children}
-                </Paper>
-              </ClickAwayListener>
-            </div>
-          </Fade>
-        )}
-      </Popper>
-    </div>
-  );
-}
-
-Action.propTypes = {
-  icon: PropTypes.node,
-  header: PropTypes.string,
-  title: PropTypes.string,
-  id: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-Action.defaultProps = {
-  icon: undefined,
-  title: undefined,
-  id: undefined,
-  header: undefined,
-  children: undefined,
-};
-
-export default Action;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
index 25cb619f2..30ed8ef63 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/IndicatorTitle/index.js
@@ -1,11 +1,10 @@
 import { RichTypography } from "@commons-ui/core";
-import { Share } from "@hurumap/core";
+import { Share, Action } from "@hurumap/core";
 import { Grid } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";
 
-import Action from "./Action";
 import Download from "./Download";
 
 import { ReactComponent as DownloadIcon } from "@/climatemappedafrica/assets/icons/Component 1.svg";
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
deleted file mode 100644
index f3b969aeb..000000000
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Action.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  Popper,
-  Fade,
-  Paper,
-  ButtonBase,
-  Typography,
-  IconButton,
-  ClickAwayListener,
-  Tooltip,
-} from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import PropTypes from "prop-types";
-import React, { useState } from "react";
-
-import { ReactComponent as CloseIcon } from "@/pesayetu/assets/icons/action-close.svg";
-
-const useStyles = makeStyles(({ palette, typography, zIndex }) => ({
-  root: {},
-  popper: {
-    zIndex: zIndex.drawer,
-  },
-  paper: {
-    background: palette.background.default,
-    border: `1px solid ${palette.grey.light}`,
-    width: typography.pxToRem(180),
-    boxShadow: "0px 3px 6px #00000029",
-    borderRadius: 0,
-    marginTop: typography.pxToRem(-40),
-  },
-  header: {
-    background: palette.background.paper,
-    height: typography.pxToRem(36),
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%",
-    paddingLeft: typography.pxToRem(16),
-    paddingRight: typography.pxToRem(10),
-  },
-  title: {
-    fontSize: typography.pxToRem(11),
-    lineHeight: 17 / 11,
-    color: "#666666",
-  },
-  button: {
-    padding: 0,
-  },
-}));
-
-function Action({ children, header, icon, title, id, ...props }) {
-  const classes = useStyles(props);
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <div className={classes.root}>
-      <Tooltip title={title}>
-        <IconButton
-          onClick={handleClick}
-          className={classes.button}
-          size="large"
-        >
-          {icon}
-        </IconButton>
-      </Tooltip>
-      <Popper
-        open={Boolean(anchorEl)}
-        placement="bottom-end"
-        anchorEl={anchorEl}
-        className={classes.popper}
-        transition
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            {/* Fix: https://github.com/mui/material-ui/issues/27154#issuecomment-1117386458  */}
-            <div>
-              <ClickAwayListener onClickAway={handleClose}>
-                <Paper className={classes.paper}>
-                  <ButtonBase onClick={handleClose} className={classes.header}>
-                    <Typography className={classes.title}>{header}</Typography>
-                    <CloseIcon />
-                  </ButtonBase>
-                  {children}
-                </Paper>
-              </ClickAwayListener>
-            </div>
-          </Fade>
-        )}
-      </Popper>
-    </div>
-  );
-}
-
-Action.propTypes = {
-  icon: PropTypes.node,
-  header: PropTypes.string,
-  title: PropTypes.string,
-  id: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-Action.defaultProps = {
-  icon: undefined,
-  title: undefined,
-  id: undefined,
-  header: undefined,
-  children: undefined,
-};
-
-export default Action;
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
index f0ea1be57..93f48a219 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/index.js
@@ -1,11 +1,10 @@
 import { RichTypography } from "@commons-ui/core";
-import { Share } from "@hurumap/core";
+import { Share, Action } from "@hurumap/core";
 import { Grid } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";
 
-import Action from "./Action";
 import Download from "./Download";
 
 import { ReactComponent as DownloadIcon } from "@/pesayetu/assets/icons/Component 1.svg";
diff --git a/packages/hurumap-core/src/Action/Action.js b/packages/hurumap-core/src/Action/Action.js
new file mode 100644
index 000000000..1e403f120
--- /dev/null
+++ b/packages/hurumap-core/src/Action/Action.js
@@ -0,0 +1,118 @@
+import {
+  Box,
+  ButtonBase,
+  ClickAwayListener,
+  Fade,
+  IconButton,
+  Paper,
+  Popper,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+
+const Action = React.forwardRef(function Action(
+  {
+    ButtonProps,
+    HeaderProps,
+    PaperProps,
+    PopperProps,
+    TooltipProps,
+    children,
+    header,
+    icon,
+    title,
+    id,
+    ...props
+  },
+  ref,
+) {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <Box ref={ref} {...props}>
+      <Tooltip title={title} {...TooltipProps}>
+        <IconButton
+          onClick={handleClick}
+          sx={{
+            padding: 0,
+          }}
+          size="large"
+        >
+          {icon}
+        </IconButton>
+      </Tooltip>
+      <Popper
+        open={Boolean(anchorEl)}
+        placement="bottom-end"
+        anchorEl={anchorEl}
+        {...PopperProps}
+        sx={(theme) => ({
+          zIndex: theme.zIndex.drawer,
+          ...PopperProps?.sx,
+        })}
+        transition
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            {/* Fix: https://github.com/mui/material-ui/issues/27154#issuecomment-1117386458  */}
+            <div>
+              <ClickAwayListener onClickAway={handleClose}>
+                <Paper
+                  {...PaperProps}
+                  sx={(theme) => ({
+                    background: theme.palette.background.default,
+                    border: `1px solid ${theme.palette.grey.light}`,
+                    width: theme.typography.pxToRem(180),
+                    boxShadow: "0px 3px 6px #00000029",
+                    borderRadius: 0,
+                    marginTop: theme.typography.pxToRem(-40),
+                    ...PaperProps?.sx,
+                  })}
+                >
+                  <ButtonBase
+                    onClick={handleClose}
+                    {...ButtonProps}
+                    sx={(theme) => ({
+                      background: theme.palette.background.paper,
+                      height: theme.typography.pxToRem(36),
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      width: "100%",
+                      paddingLeft: theme.typography.pxToRem(16),
+                      paddingRight: theme.typography.pxToRem(10),
+                      ...ButtonProps?.sx,
+                    })}
+                  >
+                    <Typography
+                      {...HeaderProps}
+                      sx={(theme) => ({
+                        fontSize: theme.typography.pxToRem(11),
+                        lineHeight: 17 / 11,
+                        color: "#666666",
+                        ...HeaderProps?.sx,
+                      })}
+                    >
+                      {header}
+                    </Typography>
+                  </ButtonBase>
+                  {children}
+                </Paper>
+              </ClickAwayListener>
+            </div>
+          </Fade>
+        )}
+      </Popper>
+    </Box>
+  );
+});
+
+export default Action;
diff --git a/packages/hurumap-core/src/Action/index.js b/packages/hurumap-core/src/Action/index.js
new file mode 100644
index 000000000..941400755
--- /dev/null
+++ b/packages/hurumap-core/src/Action/index.js
@@ -0,0 +1,3 @@
+import Action from "./Action";
+
+export default Action;
diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js
index c0e672b2d..25d86d7b8 100644
--- a/packages/hurumap-core/src/index.js
+++ b/packages/hurumap-core/src/index.js
@@ -5,3 +5,4 @@ export { default as LocationHighlight } from "./LocationHighlight";
 export { default as Location } from "./Location";
 export { default as ShareButton } from "./ShareButton";
 export { default as Share } from "./Share";
+export { default as Action } from "./Action";

From 814637a7c34d0192530ab67d5b0687359ed3e71b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:20:49 +0300
Subject: [PATCH 21/22] Update review

---
 .../src/components/HURUmap/Chart/index.js     | 18 ++++++----
 .../HURUmap/IndicatorTitle/Download.js        |  8 +++--
 .../hurumap-core/src/Action/Action.snap.js    | 34 +++++++++++++++++++
 .../hurumap-core/src/Action/Action.test.js    | 30 ++++++++++++++++
 packages/hurumap-core/src/Share/Share.js      |  2 +-
 .../src/ShareButton/ShareButton.js            | 10 ++++--
 6 files changed, 89 insertions(+), 13 deletions(-)
 create mode 100644 packages/hurumap-core/src/Action/Action.snap.js
 create mode 100644 packages/hurumap-core/src/Action/Action.test.js

diff --git a/apps/pesayetu/src/components/HURUmap/Chart/index.js b/apps/pesayetu/src/components/HURUmap/Chart/index.js
index 3da6fdff7..3b208db2f 100644
--- a/apps/pesayetu/src/components/HURUmap/Chart/index.js
+++ b/apps/pesayetu/src/components/HURUmap/Chart/index.js
@@ -79,13 +79,17 @@ function Chart({
       );
       setCSpec(spec);
       if (chartRef?.current) {
-        const newView = await embed(chartRef.current, spec, {
-          renderer: "canvas",
-          actions: false,
-          tooltip: handler,
-        });
-
-        setView(newView.view);
+        try {
+          const newView = await embed(chartRef.current, spec, {
+            renderer: "canvas",
+            actions: false,
+            tooltip: handler,
+          });
+
+          setView(newView.view);
+        } catch (error) {
+          console.error(error);
+        }
       }
     }
     renderChart();
diff --git a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Download.js b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Download.js
index 6523f5d37..510457da3 100644
--- a/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Download.js
+++ b/apps/pesayetu/src/components/HURUmap/IndicatorTitle/Download.js
@@ -41,8 +41,12 @@ function Download({
   const [layout, setLayout] = useState(0);
 
   useEffect(() => {
-    const viewProp = new vega.View(vega.parse(spec), { renderer: "none" });
-    setView(viewProp);
+    try {
+      const viewProp = new vega.View(vega.parse(spec), { renderer: "none" });
+      setView(viewProp);
+    } catch (error) {
+      console.error("Error creating view", error);
+    }
   }, [spec]);
 
   const setImageLayout = async (e, type) => {
diff --git a/packages/hurumap-core/src/Action/Action.snap.js b/packages/hurumap-core/src/Action/Action.snap.js
new file mode 100644
index 000000000..fc1f6bf63
--- /dev/null
+++ b/packages/hurumap-core/src/Action/Action.snap.js
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Action renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    <button
+      aria-label="Action"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-16rd89w-MuiButtonBase-root-MuiIconButton-root"
+      data-mui-internal-clone-element="true"
+      tabindex="0"
+      type="button"
+    >
+      <svg
+        height="100"
+        width="100"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          fill="red"
+          r="40"
+          stroke="black"
+          stroke-width="3"
+        />
+      </svg>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/hurumap-core/src/Action/Action.test.js b/packages/hurumap-core/src/Action/Action.test.js
new file mode 100644
index 000000000..9ae689f09
--- /dev/null
+++ b/packages/hurumap-core/src/Action/Action.test.js
@@ -0,0 +1,30 @@
+import { render } from "@commons-ui/testing-library";
+import React from "react";
+
+import Action from "./Action";
+
+const defaultProps = {
+  id: "1",
+  title: "Action",
+  icon: (
+    <svg width="100" height="100">
+      <circle
+        cx="50"
+        cy="50"
+        r="40"
+        stroke="black"
+        strokeWidth="3"
+        fill="red"
+      />
+    </svg>
+  ),
+  header: "Header",
+  children: <div>Children</div>,
+};
+
+describe("Action", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Action {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/hurumap-core/src/Share/Share.js b/packages/hurumap-core/src/Share/Share.js
index 14ce9b8eb..6aae3dce6 100644
--- a/packages/hurumap-core/src/Share/Share.js
+++ b/packages/hurumap-core/src/Share/Share.js
@@ -95,7 +95,7 @@ const Share = React.forwardRef(function Share(
 
   return (
     <Grid container {...props} ref={ref}>
-      {shareData.map((social) => (
+      {shareData?.map((social) => (
         <Grid item xs={4} key={social.name}>
           <ShareButton
             name={social.name}
diff --git a/packages/hurumap-core/src/ShareButton/ShareButton.js b/packages/hurumap-core/src/ShareButton/ShareButton.js
index ffd9c5466..a99130253 100644
--- a/packages/hurumap-core/src/ShareButton/ShareButton.js
+++ b/packages/hurumap-core/src/ShareButton/ShareButton.js
@@ -26,12 +26,16 @@ const componentMap = {
 };
 
 const ShareButton = React.forwardRef(function ShareButton(
-  { ButtonProps, IconProps, icon, name, url, onCopy, ...props },
+  { ButtonProps, IconProps, component, icon, name, url, onCopy, ...props },
   ref,
 ) {
-  const SocialButtonComponent = componentMap[name];
+  let SocialButtonComponent = component;
 
-  if (!SocialButtonComponent && name !== "CopyUrl") {
+  if (name && name !== "CopyUrl") {
+    SocialButtonComponent = componentMap[name];
+  }
+
+  if (!SocialButtonComponent) {
     return null;
   }
 

From 70bc8ba246e349f9829ea7da7369bd7bd3a88ec9 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:40:01 +0300
Subject: [PATCH 22/22] Add stories

---
 .../stories/HURUmap/core/Action.stories.js    | 38 +++++++++++++++++++
 .../stories/HURUmap/core/Share.stories.js     |  5 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 apps/uibook/stories/HURUmap/core/Action.stories.js

diff --git a/apps/uibook/stories/HURUmap/core/Action.stories.js b/apps/uibook/stories/HURUmap/core/Action.stories.js
new file mode 100644
index 000000000..c8a8a1615
--- /dev/null
+++ b/apps/uibook/stories/HURUmap/core/Action.stories.js
@@ -0,0 +1,38 @@
+import { Action } from "@hurumap/core";
+import { Add as AddIcon } from "@mui/icons-material";
+import React from "react";
+
+export default {
+  title: "@hurumap/core/Action",
+  component: Action,
+  argTypes: {
+    title: {
+      control: {
+        type: "text",
+      },
+    },
+    header: {
+      control: {
+        type: "text",
+      },
+    },
+    icon: {
+      control: {
+        type: "element",
+      },
+    },
+  },
+};
+
+function Template(args) {
+  return <Action {...args} />;
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  id: "1",
+  title: "Action",
+  icon: <AddIcon />,
+  header: "Header",
+  children: <div>Children</div>,
+};
diff --git a/apps/uibook/stories/HURUmap/core/Share.stories.js b/apps/uibook/stories/HURUmap/core/Share.stories.js
index 2cfda99b5..6099aab86 100644
--- a/apps/uibook/stories/HURUmap/core/Share.stories.js
+++ b/apps/uibook/stories/HURUmap/core/Share.stories.js
@@ -102,7 +102,10 @@ Default.args = {
   shareData,
   title: "Area of agricultural land in hectares",
   chartType: "treemap",
-  code: "<h1>code</h1>",
+  codeData: {
+    src: "http://localhost:3001/embed/ke/1087",
+    className: "chart",
+  },
   geoCode: "KE",
   indicatorId: 1087,
   isCompare: false,