feat(herobody): add tooltip

isomerpages · Sep 13, 2023 · 5e6737e · 5e6737e
1 parent bfe6485
commit 5e6737e
Showing 1 changed file with 77 additions and 67 deletions.
diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
@@ -16,6 +16,7 @@ import {
   Input,
   Radio,
   SingleSelect,
+  Tooltip,
 } from "@opengovsg/design-system-react"
 import _ from "lodash"
 import { useState } from "react"
@@ -222,73 +223,82 @@ const HeroSideSectionLayout = ({
       <Box w="100%">
         <Text textStyle="subhead-1">Section background colour</Text>
         <HStack spacing="0.75rem" alignItems="flex-start">
-          <IconButton
-            aria-label="black background"
-            border="1px solid"
-            borderColor="border.input.default"
-            bg="black"
-            colorScheme="black"
-            isRound
-            size="sm"
-            onClick={() =>
-              onChange({
-                target: {
-                  id: "section-0-hero-backgroundColor",
-                  value: "black",
-                },
-              })
-            }
-            _focus={{
-              boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
-            }}
-          >
-            <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
-          </IconButton>
-          <IconButton
-            border="1px solid"
-            borderColor="border.input.default"
-            bg="white"
-            colorScheme="white"
-            isRound
-            size="sm"
-            aria-label="white background"
-            _focus={{
-              boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
-            }}
-            onClick={() =>
-              onChange({
-                target: {
-                  id: "section-0-hero-backgroundColor",
-                  value: "white",
-                },
-              })
-            }
-          >
-            <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
-          </IconButton>
-          <IconButton
-            border="1px solid"
-            borderColor="border.input.default"
-            aria-label="gray background"
-            bg="none"
-            _hover={{
-              bg: "none",
-            }}
-            isRound
-            size="sm"
-            _focus={{
-              boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
-            }}
-            onClick={() =>
-              onChange({
-                target: {
-                  id: "section-0-hero-backgroundColor",
-                  value: "gray",
-                },
-              })
-            }
-            icon={<BxGrayTranslucent />}
-          />
+          <Tooltip label="black" hasArrow>
+            <IconButton
+              aria-label="black background"
+              border="1px solid"
+              borderColor="border.input.default"
+              bg="black"
+              colorScheme="black"
+              isRound
+              size="sm"
+              onClick={() =>
+                onChange({
+                  target: {
+                    id: "section-0-hero-backgroundColor",
+                    value: "black",
+                  },
+                })
+              }
+              _focus={{
+                boxShadow:
+                  "0 0 0 2px var(--chakra-colors-border-action-default)",
+              }}
+            >
+              <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip label="white" hasArrow>
+            <IconButton
+              border="1px solid"
+              borderColor="border.input.default"
+              bg="white"
+              colorScheme="white"
+              isRound
+              size="sm"
+              aria-label="white background"
+              _focus={{
+                boxShadow:
+                  "0 0 0 2px var(--chakra-colors-border-action-default)",
+              }}
+              onClick={() =>
+                onChange({
+                  target: {
+                    id: "section-0-hero-backgroundColor",
+                    value: "white",
+                  },
+                })
+              }
+            >
+              <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip label="translucent gray" hasArrow>
+            <IconButton
+              border="1px solid"
+              borderColor="border.input.default"
+              aria-label="gray background"
+              bg="none"
+              _hover={{
+                bg: "none",
+              }}
+              isRound
+              size="sm"
+              _focus={{
+                boxShadow:
+                  "0 0 0 2px var(--chakra-colors-border-action-default)",
+              }}
+              onClick={() =>
+                onChange({
+                  target: {
+                    id: "section-0-hero-backgroundColor",
+                    value: "gray",
+                  },
+                })
+              }
+              icon={<BxGrayTranslucent />}
+            />
+          </Tooltip>
         </HStack>
       </Box>
     </>