@thecb/components 7.1.0-beta.1 → 7.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.1.0-beta.1",
+  "version": "7.2.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/card-registry/index.js

@@ -28,7 +28,7 @@ export const cardRegistry = {
       heading="Manage Your Wallet"
       buttonText="Go to Wallet"
       text="Add your personal information and payment methods to make fast payments."
-      cardAction="/profile/settings"
+      cardAction="/profile/wallet"
       {...props}
     />
   )

package/src/components/atoms/icons/ClipboardIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const ClipboardIcon = ({ themeValues }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_1104_623"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="2"
+        width="16"
+        height="18"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z"
+          fill={themeValues.singleIconColor}
+        />
+      </mask>
+      <g mask="url(#mask0_1104_623)">
+        <rect width="24" height="24" fill={themeValues.singleIconColor} />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  ClipboardIcon,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/WalletBannerIcon.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const WalletBannerIcon = ({ themeValues }) => {
+  return (
+    <svg
+      width="317"
+      height="166"
+      viewBox="0 0 317 166"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity="0.301503"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M157.432 143.31C173.852 143.31 187.163 146.266 187.163 149.912C187.163 153.558 173.852 156.514 157.432 156.514C141.012 156.514 127.701 153.558 127.701 149.912C127.701 146.266 141.012 143.31 157.432 143.31ZM41.3941 87.7459C46.9893 87.7459 51.584 92.0228 52.0911 97.4855C53.1543 96.7244 54.4526 96.2715 55.8593 96.2715C59.4395 96.2715 62.3423 99.1744 62.3423 102.755C62.3423 106.335 59.4395 109.238 55.8593 109.238H26.5139C22.3239 109.238 18.9268 105.841 18.9268 101.65C18.9268 97.4605 22.3239 94.0633 26.5139 94.0633C28.2175 94.0633 29.7842 94.6317 31.0509 95.5794C32.3211 91.0603 36.4686 87.7459 41.3941 87.7459ZM289.555 54.7295C291.057 54.7295 292.275 55.9473 292.275 57.4495V79.08C292.275 80.5822 291.057 81.8 289.555 81.8H252.252C250.75 81.8 249.532 80.5822 249.532 79.08V57.4495C249.532 55.9473 250.75 54.7295 252.252 54.7295H289.555ZM64.3171 53.0475C66.8713 53.0475 69.0467 54.6476 69.9112 56.8984C70.1319 56.8362 70.3633 56.8011 70.6035 56.8011C71.4206 56.8011 72.147 57.1854 72.6164 57.7815C73.0915 57.5674 73.6177 57.4452 74.1728 57.4452C76.2714 57.4452 77.9725 59.147 77.9725 61.2464C77.9725 63.3457 76.2714 65.0475 74.1728 65.0475H57.7722C55.6737 65.0475 53.9725 63.3457 53.9725 61.2464C53.9725 59.147 55.6737 57.4452 57.7722 57.4452C58.0293 57.4452 58.2802 57.4714 58.5227 57.5203C59.199 54.9474 61.5333 53.0475 64.3171 53.0475ZM194.464 27C200.473 27 205.344 31.8711 205.344 37.88V39.3591L93.4999 41.3254V34.48C93.4999 30.3489 96.8488 27 100.98 27H194.464ZM40.8804 21.0475C43.8206 21.0475 46.3247 22.8887 47.32 25.4787C47.574 25.4072 47.8403 25.3668 48.1169 25.3668C49.0574 25.3668 49.8936 25.8089 50.4339 26.4949C50.9809 26.2485 51.5866 26.108 52.2255 26.108C54.6413 26.108 56.5995 28.0662 56.5995 30.4819C56.5995 32.8976 54.6413 34.8559 52.2255 34.8559H33.3465C30.9307 34.8559 28.9725 32.8976 28.9725 30.4819C28.9725 28.0662 30.9307 26.108 33.3465 26.108C33.6424 26.108 33.9312 26.1381 34.2103 26.1943C34.9888 23.2337 37.676 21.0475 40.8804 21.0475ZM244.693 7C247.633 7 250.138 8.84119 251.133 11.4312C251.386 11.3597 251.653 11.3193 251.93 11.3193C252.871 11.3193 253.706 11.7614 254.246 12.4474C254.794 12.201 255.399 12.0604 256.038 12.0604C258.454 12.0604 260.412 14.0187 260.412 16.4344C260.412 18.8501 258.454 20.8084 256.038 20.8084H237.159C234.744 20.8084 232.785 18.8501 232.785 16.4344C232.785 14.0187 234.744 12.0604 237.159 12.0604C237.455 12.0604 237.744 12.0906 238.024 12.1468C238.802 9.18622 241.488 7 244.693 7Z"
+        fill={themeValues.singleIconColor}
+      />
+      <path
+        d="M214.62 39.3979H104.38C98.3711 39.3979 93.5 44.2691 93.5 50.278V125.518C93.5 131.527 98.3711 136.398 104.38 136.398H214.62C220.629 136.398 225.5 131.527 225.5 125.518V50.278C225.5 44.2691 220.629 39.3979 214.62 39.3979Z"
+        fill="white"
+      />
+      <path
+        d="M283.856 61.1409H246.553C245.051 61.1409 243.833 62.3587 243.833 63.8609V85.4913C243.833 86.9936 245.051 88.2113 246.553 88.2113H283.856C285.359 88.2113 286.576 86.9936 286.576 85.4913V63.8609C286.576 62.3587 285.359 61.1409 283.856 61.1409Z"
+        fill="#CACED8"
+      />
+      <path
+        d="M280.7 124.181C281.827 124.152 282.764 125.041 282.793 126.167C282.822 127.242 282.013 127.744 280.96 127.85L280.808 127.86L265.557 128.26C264.431 128.29 263.494 127.401 263.464 126.274C263.436 125.199 264.245 124.297 265.298 124.191L265.45 124.181H280.7ZM88.0248 124.181C89.1514 124.194 90.0536 125.119 90.04 126.245C90.0269 127.321 89.1841 128.192 88.1277 128.257L87.9754 128.261H64.9185C63.7919 128.247 62.8897 127.323 62.9033 126.196C62.9163 125.121 63.7591 124.25 64.8156 124.185L64.9679 124.181H88.0248ZM56.9822 126.116C57.0376 127.19 56.2519 128.112 55.2018 128.245L55.05 128.258H47.2912C46.166 128.316 45.2068 127.451 45.1488 126.326C45.0933 125.252 45.879 124.329 46.9291 124.197L47.0809 124.183H54.8397C55.9649 124.125 56.9241 124.99 56.9822 126.116ZM224.423 124.358L255.529 124.364C256.604 124.352 257.487 125.157 257.5 126.163C257.513 127.123 256.729 127.919 255.722 128L255.577 128.006L224.471 128C223.396 128.012 222.513 127.207 222.5 126.201C222.488 125.241 223.272 124.445 224.278 124.364L224.423 124.358ZM286.576 67.5523V73.2514H243.833V67.5523H286.576ZM148.315 70C150.89 70 153.143 71.6682 154.017 74.1055C154.37 75.0909 153.858 76.1762 152.872 76.5295C151.936 76.8651 150.91 76.4194 150.507 75.5291L150.448 75.3848C150.103 74.4209 149.252 73.791 148.315 73.791C147.432 73.791 146.626 74.349 146.247 75.2183L146.18 75.3848C145.827 76.3703 144.742 76.8827 143.756 76.5295C142.771 76.1762 142.259 75.0909 142.612 74.1055C143.486 71.6681 145.738 70 148.315 70ZM171.828 70C174.404 70 176.656 71.6682 177.53 74.1055C177.883 75.0909 177.371 76.1762 176.386 76.5295C175.449 76.8651 174.423 76.4194 174.02 75.5291L173.962 75.3848C173.616 74.4209 172.765 73.791 171.828 73.791C170.945 73.791 170.14 74.349 169.76 75.2183L169.694 75.3848C169.34 76.3703 168.255 76.8827 167.27 76.5295C166.284 76.1762 165.772 75.0909 166.125 74.1055C166.999 71.6681 169.252 70 171.828 70ZM195.464 24.96C202.496 24.96 208.216 30.578 208.38 37.5706L208.384 37.88L208.383 39H215.548C221.557 39 226.428 43.8711 226.428 49.88V126.429C226.428 132.437 221.557 137.309 215.548 137.309H103.38C97.3712 137.309 92.5001 132.437 92.5001 126.429V44.325L92.4601 44.3254V34.48C92.4601 29.3129 96.5767 25.1072 101.709 24.9637L101.98 24.96H195.464ZM215.548 43.08L96.5801 43.081V126.429C96.5801 130.104 99.4964 133.099 103.141 133.224L103.38 133.229H215.548C219.223 133.229 222.218 130.312 222.344 126.667L222.348 126.429V49.88C222.348 46.2043 219.431 43.2098 215.786 43.0841L215.548 43.08ZM170.148 92.5353C171.195 92.5353 172.044 93.3839 172.044 94.4308C172.044 97.3486 169.736 99.7275 166.846 99.8418L166.628 99.8461H153.123C150.133 99.8461 147.709 97.4214 147.709 94.4308C147.709 93.3839 148.557 92.5353 149.604 92.5353C150.601 92.5353 151.418 93.305 151.494 94.2826L151.5 94.4308C151.5 95.278 152.148 95.9738 152.976 96.0485L153.123 96.0551H166.628C167.475 96.0551 168.171 95.4064 168.246 94.5786L168.253 94.4308C168.253 93.3839 169.101 92.5353 170.148 92.5353ZM283.856 61.1409C285.359 61.1409 286.576 62.3587 286.576 63.8609V85.4914C286.576 86.9936 285.359 88.2114 283.856 88.2114H246.553C245.051 88.2114 243.833 86.9936 243.833 85.4914V63.8609C243.833 62.3587 245.051 61.1409 246.553 61.1409H283.856ZM283.856 63.1809H246.553C246.212 63.1809 245.929 63.4325 245.881 63.7604L245.873 63.8609V85.4914C245.873 85.8328 246.125 86.1154 246.453 86.164L246.553 86.1714H283.856C284.198 86.1714 284.48 85.9198 284.529 85.5919L284.536 85.4914V63.8609C284.536 63.5195 284.285 63.2369 283.957 63.1883L283.856 63.1809ZM279.61 79.508C280.361 79.508 280.97 80.1169 280.97 80.868V80.9975C280.97 81.7486 280.361 82.3575 279.61 82.3575H272.357C271.606 82.3575 270.997 81.7486 270.997 80.9975V80.868C270.997 80.1169 271.606 79.508 272.357 79.508H279.61ZM195.464 29.04H101.98C99.049 29.04 96.6593 31.3582 96.5444 34.2612L96.5401 34.48V39H204.303L204.304 37.88C204.304 33.0849 200.486 29.1816 195.725 29.0437L195.464 29.04Z"
+        fill="#3B414D"
+      />
+      <path
+        d="M163.125 136.938L163.125 147.186L169.17 147.186C170.245 147.186 171.126 148.018 171.204 149.074L171.21 149.226C171.21 150.301 170.378 151.183 169.322 151.26L169.17 151.266H161.085C160.01 151.266 159.128 150.434 159.051 149.378L159.045 149.226V136.938H163.125ZM155.206 136.938V148.828C155.206 149.903 154.373 150.784 153.318 150.862L153.166 150.868H145.081C143.954 150.868 143.041 149.954 143.041 148.828C143.041 147.752 143.873 146.871 144.928 146.793L145.081 146.788L151.125 146.787L151.126 136.938H155.206ZM92.5043 102.345C92.4966 102.35 92.494 102.988 92.4932 103.823L92.4925 106.265C92.4924 106.341 92.4923 106.416 92.4922 106.488L92.4914 106.896C92.4899 107.403 92.4869 107.742 92.481 107.747C90.9028 109.118 88.694 111.036 85.8547 113.501L101.261 118.91C102.288 117.146 104.199 115.96 106.387 115.96C107.514 115.96 108.427 116.873 108.427 118C108.427 119.075 107.595 119.957 106.539 120.034L106.387 120.04C105.367 120.04 104.54 120.867 104.54 121.887C104.54 122.859 105.29 123.656 106.243 123.73L106.387 123.735H109.783C110.91 123.735 111.823 124.649 111.823 125.775C111.823 126.851 110.991 127.732 109.936 127.81L109.783 127.815H106.387C103.489 127.815 101.077 125.736 100.562 122.987L81.8461 116.42C81.1978 116.193 80.7368 115.671 80.5604 115.057C80.0263 114.262 80.1207 113.19 80.7967 112.499L80.9186 112.384L92.297 102.503C92.3387 102.467 92.4374 102.395 92.488 102.358L92.5043 102.345ZM268.895 93.9879C270.022 93.9879 270.935 94.9013 270.935 96.0279C270.935 97.1034 270.103 97.9845 269.047 98.0623L268.895 98.0679L263.322 98.0681C263.251 98.144 263.174 98.2153 263.09 98.281L262.96 98.3742L236.748 115.767C236.067 116.219 235.187 116.218 234.51 115.778L234.369 115.678C230.885 112.971 228.272 110.941 226.529 109.587C226.52 109.58 226.514 109.172 226.511 108.363L226.51 108.019C226.51 107.958 226.51 107.895 226.51 107.83L226.51 106.728C226.51 106.646 226.51 106.562 226.51 106.476L226.511 105.939C226.512 105.473 226.513 104.964 226.515 104.409L235.713 111.556L256.041 98.0675L252.027 98.0679C250.9 98.0679 249.987 97.1546 249.987 96.0279C249.987 94.9525 250.819 94.0714 251.875 93.9935L252.027 93.9879H268.895ZM240.628 66.1276C245.545 66.1276 249.532 70.1144 249.532 75.0323C249.532 79.9503 245.545 83.9371 240.628 83.9371C235.71 83.9371 231.723 79.9503 231.723 75.0323C231.723 70.1144 235.71 66.1276 240.628 66.1276ZM289.555 53.7295C291.543 53.7295 293.167 55.2893 293.27 57.2519L293.275 57.4495V79.08C293.275 81.0682 291.715 82.6921 289.753 82.7948L289.555 82.8L286.249 82.7948V80.7948L289.555 80.8C290.455 80.8 291.194 80.1088 291.269 79.2284L291.275 79.08L291.274 67.8395L286.275 67.84V62.1409L291.274 62.1405L291.275 57.4495C291.275 56.5496 290.584 55.8111 289.704 55.7358L289.555 55.7295H252.252C251.352 55.7295 250.614 56.4206 250.539 57.3011L250.532 57.4495V61.1409H248.532V57.4495C248.532 55.4613 250.092 53.8373 252.055 53.7346L252.252 53.7295H289.555Z"
+        fill={themeValues.singleIconColor}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M241.696 70.4019L241.696 73.9629L245.258 73.9638V76.1009L241.696 76.1009L241.696 79.6628H239.559L239.558 76.1009L235.997 76.1009V73.9638L239.558 73.9629L239.559 70.4019H241.696Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default themeComponent(
+  WalletBannerIcon,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/WalletIconSmall.js

@@ -19,7 +19,7 @@ const WalletIconSmall = ({ themeValues }) => {
       />
       <mask
         id="mask0_503_574"
-        style={{ "mask-type": "alpha" }}
+        style={{ maskType: "alpha" }}
         maskUnits="userSpaceOnUse"
         x="3"
         y="4"

package/src/components/atoms/icons/index.js

@@ -57,6 +57,7 @@ import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
 import CheckIcon from "./CheckIcon";
 import WarningIconXS from "./WarningIconXS";
 import CashIcon from "./CashIcon";
+import WalletBannerIcon from "./WalletBannerIcon";
 
 export {
   AccountsIcon,
@@ -117,5 +118,6 @@ export {
   PeriscopeFailedIcon,
   CheckIcon,
   WarningIconXS,
-  CashIcon
+  CashIcon,
+  WalletBannerIcon
 };

package/src/components/atoms/nav-tabs/NavTab.js

@@ -35,7 +35,7 @@ const NavTab = ({ path, label, themeValues }) => {
             color: ${themeValues.activeColor};
             ${isMobile ? "" : `${border}`}
           };
-          padding: 1.25rem 0.1rem;
+          padding: 1.25rem 0;
         `}
       >
         {label}

package/src/components/molecules/banner/Banner.js

@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { Box, Cluster, Stack } from "../../atoms/layouts";
+import BoxWithShadow from "../../atoms/box-with-shadow";
+import { themeComponent } from "../../../util/themeUtils";
+import Paragraph from "../../atoms/paragraph";
+import Title from "../../atoms/title";
+import { fallbackValues } from "./Banner.theme";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+
+const Banner = ({
+  themevalues,
+  heading,
+  subHeading,
+  image,
+  padding = "1.5rem, 0.5rem",
+  mobilePadding = "1rem, 0.5rem",
+  minWidth = "100%",
+  minHeight = "auto",
+  contentSpacing = "3rem",
+  mobileContentSpacing = "0.5rem"
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <BoxWithShadow
+      variant="baseStandard"
+      borderRadius="4px"
+      backgroundColor={themevalues.backgroundColor}
+      minWidth={minWidth}
+      minHeight={minHeight}
+      padding={isMobile ? mobilePadding : padding}
+    >
+      <Cluster
+        childGap={isMobile ? mobileContentSpacing : contentSpacing}
+        justify="center"
+        align="center"
+      >
+        <Stack childGap="0">
+          <Title variant="small" as="h2" weight={FONT_WEIGHT_SEMIBOLD}>
+            {heading}
+          </Title>
+          <Paragraph>{subHeading}</Paragraph>
+        </Stack>
+        <Box padding="0">{image}</Box>
+      </Cluster>
+    </BoxWithShadow>
+  );
+};
+
+export default themeComponent(Banner, "Banner", fallbackValues);

package/src/components/molecules/banner/Banner.stories.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import Banner from "./Banner";
+import { WalletBannerIcon } from "../../atoms/icons";
+
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+export const banner = () => (
+  <Banner
+    heading={text("bannerHeading", "Banner Heading Text", groupId)}
+    subHeading={text("bannerSubheading", "Banner Description", groupId)}
+    image={WalletBannerIcon}
+    padding={text("padding", null, groupId)}
+    mobilePadding={text("mobilePadding", null, groupId)}
+    minWidth={text("minWidth", null, groupId)}
+    minHeight={text("minHeight", null, groupId)}
+    contentSpacing={text("contentSpacing", null, groupId)}
+    mobileContentSpacing={text("mobileContentSpacing", null, groupId)}
+  />
+);
+
+banner.storyName = "Welcome to Wallet Banner";
+
+const story = page({
+  title: "Components|Molecules/Banner",
+  Component: Banner
+});
+export default story;

package/src/components/molecules/banner/Banner.theme.js

@@ -0,0 +1,5 @@
+const backgroundColor = "#ebeffb";
+
+export const fallbackValues = {
+  backgroundColor
+};

package/src/components/molecules/banner/index.js

@@ -0,0 +1,3 @@
+import Banner from "./Banner";
+
+export default Banner;

package/src/components/molecules/collapsible-section/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CollapsibleSectionProps {
+  isOpen?: boolean;
+  toggleSection: (
+    event?: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
+  isMobile?: boolean;
+  supportsTouch?: boolean;
+  title?: string;
+  customPadding?: string;
+  initiallyOpen?: boolean;
+  openHeight?: string;
+  children?: JSX.Element;
+  customTitle?: boolean;
+  stackTitle?: boolean;
+  stackTitleContent?: string | JSX.Element;
+  sectionGap?: string;
+  name?: string;
+  index?: number;
+}
+
+export const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/copyable/Copyable.js

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+import ButtonWithAction from "../../atoms/button-with-action";
+import ClipboardIcon from "../../atoms/icons/ClipboardIcon";
+import Popover from "../popover";
+import Stack from "../../atoms/layouts/Stack";
+import Text from "../../atoms/text";
+
+/*
+This component will render `content` and a clipboard icon.
+When hovered, a popover with content `initialPopoverContent` will be displayed.
+to the left of the content.
+
+When clicked, `content` will be copied to the clipboard, the popover content
+will change to `copySuccessPopoverContent` for `copiedPopoverContentDuration`
+milliseconds, and the `onCopy` callback will be executed.
+
+If the content was unable to be copied to the clipboard, the popover will instead
+display `copyErrorPopoverContent`
+
+If you only want the copy to clipboard behaviour without a popover, pass the prop
+`hasPopover={false}`
+*/
+
+const CopyableContent = ({ content, onClick }) => {
+  return (
+    <ButtonWithAction
+      data-testid="copyable-trigger"
+      contentOverride
+      action={onClick}
+      variant="ghost"
+      extraStyles="padding: 0; margin: 0; min-height: initial; min-width: initial"
+    >
+      <Stack direction="row" childGap="0.25rem">
+        <Text>{content}</Text>
+        <ClipboardIcon />
+      </Stack>
+    </ButtonWithAction>
+  );
+};
+
+const Copyable = ({
+  content,
+  onCopy,
+  initialPopoverContent = "Click to copy to clipboard",
+  copySuccessPopoverContent = "Copied!",
+  copyErrorPopoverContent = "Unable to copy value",
+  copiedPopoverContentDuration = 1000,
+  hasPopover = true,
+  popoverMinWidth = "max-content",
+  popoverID = 0,
+  popoverExtraStyles
+}) => {
+  const [popoverContent, setPopoverContent] = useState(initialPopoverContent);
+  const [startTimer, setStartTimer] = useState(false);
+  const [attemptCopy, setAttemptCopy] = useState(false);
+  const [timeoutId, setTimeoutId] = useState(null);
+
+  const cleanup = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  };
+
+  useEffect(() => {
+    if (startTimer) {
+      if (timeoutId) {
+        // If there's an active timeout, clean it up.
+        cleanup();
+      }
+      // Start a timeout to restore popover content to the initial value.
+      // Record the ID of the timeout so it can be cleaned up later.
+      setTimeoutId(
+        setTimeout(() => {
+          setPopoverContent(initialPopoverContent);
+        }, copiedPopoverContentDuration)
+      );
+
+      // Set startTimer to false immediately after starting the timer,
+      // so subsequent clicks will start a new timer, refreshing the duration.
+      setStartTimer(false);
+    }
+
+    // Return cleanup function so timeout will be cleared when component unmounts.
+    return cleanup;
+  }, [startTimer]);
+
+  useEffect(() => {
+    if (attemptCopy) {
+      navigator.clipboard
+        .writeText(content)
+        .then(() => {
+          setPopoverContent(copySuccessPopoverContent);
+          onCopy?.();
+          setAttemptCopy(false);
+        })
+        .catch(error => {
+          console.error(error);
+          setPopoverContent(copyErrorPopoverContent);
+          setAttemptCopy(false);
+        });
+    }
+  }, [attemptCopy]);
+
+  const onClick = () => {
+    setStartTimer(true);
+    setAttemptCopy(true);
+  };
+
+  const popoverArrowWidth = "8px";
+
+  return hasPopover ? (
+    <Popover
+      minWidth={popoverMinWidth}
+      position={{
+        top: "auto",
+        right: "auto",
+        bottom: "auto",
+        left: `calc(-${popoverArrowWidth} - 8px)`
+      }}
+      arrowPosition={{
+        arrowTop: "auto",
+        arrowRight: "-8px",
+        arrowBottom: `calc(50% - ${popoverArrowWidth})`,
+        arrowLeft: "auto"
+      }}
+      transform="translate(-100%, -75%)"
+      arrowDirection="right"
+      popoverID={popoverID}
+      buttonExtraStyles="margin: 0;min-width:auto"
+      extraStyles={popoverExtraStyles}
+      triggerText={CopyableContent({ content, onClick })}
+      content={popoverContent}
+    ></Popover>
+  ) : (
+    CopyableContent({ content, onClick })
+  );
+};
+
+export default Copyable;

package/src/components/molecules/copyable/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CopyableProps {
+  content: string;
+  onCopy?: () => void;
+  initialPopoverContent?: string;
+  copySuccessPopoverContent?: string;
+  copyErrorPopoverContent?: string;
+  copiedPopoverContentDuration?: number;
+  hasPopover?: boolean;
+  popoverID?: number;
+  popoverMinWidth?: string;
+  popoverExtraStyles?: string;
+}
+
+export const Copyable: React.FC<Expand<CopyableProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/copyable/index.js

@@ -0,0 +1,3 @@
+import Copyable from "./Copyable";
+
+export default Copyable;

package/src/components/molecules/editable-table/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface EditableTableProps {
+  title?: string;
+  renderItem?: (items: any[]) => JSX.Element;
+  items?: any[];
+  isMobile?: boolean;
+}
+
+export const EditableTable: React.FC<Expand<EditableTableProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export interface TableListItemProps {
+  title: string | JSX.Element;
+  value: string | JSX.Element;
+  canEdit?: boolean;
+  canRemove?: boolean;
+  isMobile?: boolean;
+  borderTopItem?: boolean;
+}
+
+export const TableListItem: React.FC<Expand<TableListItemProps>>;

package/src/components/molecules/index.d.ts

@@ -1 +1,5 @@
+export * from "./collapsible-section";
+export * from "./copyable";
+export * from "./editable-table";
 export * from "./footer-with-subfooter";
+export * from "./popover";

package/src/components/molecules/index.js

@@ -1,6 +1,8 @@
 export { default as AddressForm } from "./address-form";
+export { default as Banner } from "./banner";
 export { default as ChangePasswordForm } from "./change-password-form";
 export { default as CollapsibleSection } from "./collapsible-section";
+export { default as Copyable } from "./copyable";
 export { default as EditNameForm } from "./edit-name-form";
 export { default as EditableList } from "./editable-list";
 export * from "./editable-table";

package/src/components/molecules/modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext } from "react";
+import React, { Fragment, useContext, useRef } from "react";
 import { ThemeContext } from "styled-components";
 import AriaModal from "react-aria-modal";
 import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
@@ -47,10 +47,15 @@ const Modal = ({
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const modalContainerRef = useRef(null);
   return (
-    <Fragment>
+    <div ref={modalContainerRef}>
       {modalOpen && (
         <AriaModal
+          // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+          focusTrapOptions={{
+            fallbackFocus: modalContainerRef?.current
+          }}
           onExit={onExit}
           getApplicationNode={getApplicationNode}
           titleText={modalHeaderText}
@@ -188,7 +193,7 @@ const Modal = ({
         </AriaModal>
       )}
       {children}
-    </Fragment>
+    </div>
   );
 };
 

package/src/components/molecules/popover/Popover.js

@@ -8,6 +8,20 @@ import { useOutsideClick } from "../../../util";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 
+const arrowBorder = (direction, width = "8px") => {
+  const angle = `${width} solid transparent`;
+  const straight = `${width} solid rgba(255, 255, 255, 0.85)`;
+  if (direction == "down") {
+    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
+  } else if (direction == "up") {
+    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
+  } else if (direction == "left") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
+  } else if (direction == "right") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
+  }
+};
+
 const Popover = ({
   themeValues,
   triggerText = "",
@@ -23,7 +37,10 @@ const Popover = ({
   maxWidth = "300px",
   height = "auto",
   position, // { top: string, right: string, bottom: string, left: string }
-  arrowPosition // { top: string, right: string, bottom: string, left: string }
+  arrowPosition, // { top: string, right: string, bottom: string, left: string }
+  arrowDirection = "down",
+  transform = "none",
+  buttonExtraStyles
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
   const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
@@ -73,6 +90,7 @@ const Popover = ({
         aria-describedby={`Disclosure${popoverID}`}
         aria-controls={`Disclosed${popoverID}`}
         ref={triggerRef}
+        extraStyles={buttonExtraStyles}
       >
         {hasIcon && (
           <>
@@ -108,13 +126,25 @@ const Popover = ({
           right: ${right}; 
           bottom: ${bottom}; 
           left: ${left};
-          height: ${height}
+          height: ${height};
+          transform: ${transform};
           `}
       >
         <Paragraph>{content}</Paragraph>
         <Box
           padding="0"
-          extraStyles={`position: absolute; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ${arrowBottom}; right: ${arrowRight}; top: ${arrowTop}; left: ${arrowLeft};`}
+          extraStyles={`
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            ${arrowBorder(arrowDirection, "8px")};
+            filter: drop-shadow(2px 8px 14px black);
+            bottom: ${arrowBottom};
+            right: ${arrowRight};
+            top: ${arrowTop};
+            left: ${arrowLeft};
+          `}
         />
       </Box>
     </Box>

package/src/components/molecules/popover/index.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface PopoverProps {
+  triggerText?: string | JSX.Element;
+  content?: string | JSX.Element;
+  hasIcon?: boolean;
+  iconHelpText?: string; // for screen-readers, required if using an icon for trigger
+  popoverID?: number;
+  popoverFocus?: boolean;
+  extraStyles?: string;
+  textExtraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  position?: { top: string; right: string; bottom: string; left: string };
+  arrowPosition?: {
+    arrowTop: string;
+    arrowRight: string;
+    arrowBottom: string;
+    arrowLeft: string;
+  };
+  arrowDirection?: "left" | "right" | "top" | "bottom";
+  transform?: string;
+  disclosedExtraStyles?: string;
+}
+
+export const Popover: React.FC<Expand<PopoverProps> &
+  React.HTMLAttributes<HTMLElement>>;