Added highlights

src/components/Icon/index.js

@@ -472,3 +472,45 @@ export const FactbookIcon = ({
     </SvgContainer>
   )
 }
+
+export const EmailIcon = ({
+  strokeWidth = 2,
+  fill = "none",
+  stroke = "currentcolor",
+  ...restProps
+}) => {
+  return (
+    <SvgContainer
+      strokeWidth={strokeWidth}
+      stroke={stroke}
+      fill={fill}
+      {...restProps}
+    >
+      <path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    </SvgContainer>
+  )
+}
+
+export const FacebookIcon = ({
+  strokeWidth = 2,
+  fill = "currentcolor",
+  ...restProps
+}) => {
+  return (
+    <SvgContainer strokeWidth="none" stroke="none" fill={fill} {...restProps}>
+      <path d="M22.5 0c.83 0 1.5.67 1.5 1.5v21c0 .83-.67 1.5-1.5 1.5h-6v-9h3l.75-3.75H16.5v-1.5c0-1.5.75-2.25 2.25-2.25h1.5V3.75h-3c-2.76 0-4.5 2.16-4.5 5.25v2.25h-3V15h3v9H1.5A1.5 1.5 0 010 22.5v-21C0 .67.67 0 1.5 0h21z" />
+    </SvgContainer>
+  )
+}
+
+export const InstagramIcon = ({
+  strokeWidth = 2,
+  fill = "currentcolor",
+  ...restProps
+}) => {
+  return (
+    <SvgContainer strokeWidth="none" stroke="none" fill={fill} {...restProps}>
+      <path d="M16.15 2.003a5.748 5.748 0 014.231 1.65 5.782 5.782 0 011.616 4.198v8.298c0 1.732-.566 3.224-1.65 4.273a5.948 5.948 0 01-4.231 1.575h-8.23a5.881 5.881 0 01-4.191-1.575 5.799 5.799 0 01-1.691-4.307V7.851c0-3.515 2.332-5.848 5.848-5.848h8.297zm.04 1.858H7.886c-1.208 0-2.25.358-2.94 1.041a4.015 4.015 0 00-1.083 2.95v8.263c0 1.25.358 2.25 1.082 2.983a4.165 4.165 0 002.941 1.041h8.23a4.165 4.165 0 002.941-1.041 3.938 3.938 0 001.167-2.95V7.852a4.165 4.165 0 00-1.083-2.907 4.015 4.015 0 00-2.95-1.083zM12 6.801c2.825 0 5.165 2.333 5.165 5.166a5.165 5.165 0 11-5.164-5.165zm0 1.85a3.324 3.324 0 00-3.307 3.307 3.324 3.324 0 003.308 3.308 3.323 3.323 0 003.307-3.308A3.324 3.324 0 0012 8.651zm5.365-3.14a1.166 1.166 0 110 2.332 1.166 1.166 0 010-2.332z" />
+    </SvgContainer>
+  )
+}

src/components/PageHeader/index.js

@@ -1,14 +1,9 @@
-import {
-  Box,
-  Stack,
-  HStack,
-  Container,
-  Button,
-  SimpleGrid,
-} from "@chakra-ui/react"
+import { Box, Stack, HStack, Container, SimpleGrid } from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Link"
-import { ArrowLeftIcon, ShareIcon } from "@/components/Icon"
+import { ArrowLeftIcon } from "@/components/Icon"
+
+export { default as PageHeaderShareButton } from "@/components/ShareButton"
 
 export function PageHeader(props) {
   return (
@@ -21,7 +16,14 @@ export function PageHeader(props) {
 }
 
 export function PageHeaderContent(props) {
-  return <Stack spacing={5} py={10} gridColumn={["1 / -1", null, null, "1 / span 5"]} {...props} />
+  return (
+    <Stack
+      spacing={5}
+      py={10}
+      gridColumn={["1 / -1", null, null, "1 / span 5"]}
+      {...props}
+    />
+  )
 }
 
 export function PageHeaderSubnavigation(props) {
@@ -51,14 +53,3 @@ export function PageHeaderBackButton(props) {
     />
   )
 }
-
-export function PageHeaderShareButton(props) {
-  return (
-    <Button
-      colorScheme="gray"
-      borderRadius="sm"
-      rightIcon={<ShareIcon size="1.25rem" />}
-      {...props}
-    />
-  )
-}

src/components/ShareButton/index.js

@@ -0,0 +1,146 @@
+import {
+  HStack,
+  Text,
+  Stack,
+  SimpleGrid,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from "@chakra-ui/react"
+
+import {
+  ShareIcon,
+  CloseIcon,
+  TwitterIcon,
+  LinkedInIcon,
+  FacebookIcon,
+  EmailIcon,
+} from "@/components/Icon"
+import { ButtonLink } from "@/components/Link"
+import useShareButton from "./useShareButton"
+
+export default function PageHeaderShareButton(props) {
+  const { isOpen, onClose, onOpen } = useDisclosure()
+  const shareLinks = useShareButton()
+  return (
+    <HStack spacing={0}>
+      <Button
+        colorScheme="gray"
+        borderRadius="sm"
+        rightIcon={<ShareIcon size="1.25rem" />}
+        onClick={onOpen}
+        {...props}
+      />
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent maxW="46rem" mx={5} borderRadius="none">
+          <ModalCloseButton
+            top={3}
+            right={3}
+            borderRadius="none"
+            w={10}
+            h={10}
+            _focusVisible={{
+              outline: "0.125rem solid black",
+              outlineOffset: "0.125rem",
+            }}
+          >
+            <CloseIcon size="1.75rem" aria-hidden="true" focusable="false" />
+          </ModalCloseButton>
+          <ModalHeader
+            pt={16}
+            pb={3}
+            px={10}
+            fontWeight={700}
+            fontSize="3xl"
+            lineHeight="shorter"
+          >
+            {"Share this content"}
+          </ModalHeader>
+          <ModalBody pt={0} pb={10} px={10}>
+            <Stack spacing={6}>
+              <Text color="gray.500" fontSize="lg">
+                {
+                  "Spread the word and share this page with your audience across various social channels"
+                }
+              </Text>
+              <SimpleGrid columns={[2]} gridGap={6}>
+                <ButtonLink
+                  bg="black"
+                  color="white"
+                  _hover={{ bg: "twitter.500" }}
+                  _focusVisible={{
+                    bg: "twitter.500",
+                    outline: "0.125rem solid",
+                    outlineColor: "twitter.500",
+                  }}
+                  textAlign="left"
+                  justifyContent="flex-start"
+                  leftIcon={<TwitterIcon />}
+                  href={shareLinks.twitter}
+                >
+                  {"X (Twitter)"}
+                </ButtonLink>
+                <ButtonLink
+                  bg="black"
+                  color="white"
+                  _hover={{ bg: "facebook.500" }}
+                  _focusVisible={{
+                    bg: "facebook.500",
+                    outline: "0.125rem solid",
+                    outlineColor: "facebook.500",
+                  }}
+                  textAlign="left"
+                  justifyContent="flex-start"
+                  leftIcon={<FacebookIcon />}
+                  href={shareLinks.facebook}
+                >
+                  {"Facebook"}
+                </ButtonLink>
+                <ButtonLink
+                  bg="black"
+                  color="white"
+                  _hover={{ bg: "linkedin.500" }}
+                  _focusVisible={{
+                    bg: "linkedin.500",
+                    outline: "0.125rem solid",
+                    outlineColor: "linkedin.500",
+                  }}
+                  textAlign="left"
+                  justifyContent="flex-start"
+                  leftIcon={<LinkedInIcon />}
+                  href={shareLinks.linkedin}
+                >
+                  {"LinkedIn"}
+                </ButtonLink>
+                <ButtonLink
+                  bg="black"
+                  color="white"
+                  _hover={{ bg: "brand.500", color: "brand.1000" }}
+                  _focusVisible={{
+                    bg: "brand.500",
+                    color: "brand.1000",
+                    outline: "0.125rem solid",
+                    outlineColor: "brand.500",
+                  }}
+                  textAlign="left"
+                  justifyContent="flex-start"
+                  leftIcon={<EmailIcon />}
+                  href={shareLinks.email}
+                >
+                  {"Email"}
+                </ButtonLink>
+              </SimpleGrid>
+            </Stack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </HStack>
+  )
+}

src/components/ShareButton/useShareButton.js

@@ -0,0 +1,48 @@
+import { useRouter } from "next/router"
+
+const siteUrl = "https://www.global-climatescope.org/"
+
+export default function useShareButton(opts) {
+  const { platform } = opts || {}
+  const router = useRouter()
+  const shareLinks = getShareLinks(router.asPath)
+  return platform ? shareLinks[platform] || "" : shareLinks
+}
+
+function getShareUrl(siteUrl, asPath) {
+  const [a, b] = siteUrl.split("//")
+  return `${a}//${b
+    .split("/")
+    .filter((d) => d)
+    .join("/")}${asPath}`
+}
+
+function getShareLinks(asPath) {
+  const twitterRoot = "http://twitter.com/intent/tweet"
+  const facebookRoot = "http://facebook.com/sharer/sharer.php"
+  const linkedinRoot = "http://linkedin.com/shareArticle"
+
+  const shareUrl = getShareUrl(siteUrl, asPath)
+
+  const twitterShareText = `Discover the most attractive markets for energy transition investment. @BloombergNEF`
+  const facebookShareText = `${shareUrl}`
+  const emailSubject = `Climatescope 2024`
+  const emailBody = `${shareUrl}`
+
+  const encodedTwitterShareText = encodeURIComponent(twitterShareText)
+  const encodedFacebookShareText = encodeURIComponent(facebookShareText)
+
+  const twitterShareUrl = `${twitterRoot}?url=${shareUrl}&text=${encodedTwitterShareText}&original_referer=${shareUrl}`
+  const facebookShareUrl = `${facebookRoot}?u=${shareUrl}&text=${encodedFacebookShareText}&original_referer=${shareUrl}`
+  const linkedinShareUrl = `${linkedinRoot}?url=${shareUrl}`
+  const emailShareUrl = `mailto:?subject=${encodeURIComponent(
+    emailSubject
+  )}&body=${emailBody}`
+
+  return {
+    twitter: twitterShareUrl,
+    facebook: facebookShareUrl,
+    linkedin: linkedinShareUrl,
+    email: emailShareUrl,
+  }
+}