@thecb/components 7.0.1-beta.1 → 7.0.2-beta.1

package/package.json

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

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
+          fill-rule="evenodd"
+          clip-rule="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/molecules/copyable/Copyable.js

@@ -0,0 +1,85 @@
+import React, { 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 `text` and a clipboard icon. When hovered, a popover with content `initialPopoverContent` will be displayed.
+When clicked, `text` will be copied to the clipboard, the popover content will change to `copiedPopoverContent` for `copiedPopoverContentDuration` milliseconds,
+and the `onCopy` callback will be executed.
+*/
+
+const CopyableText = ({ text, 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>{text}</Text>
+        <ClipboardIcon />
+      </Stack>
+    </ButtonWithAction>
+  );
+};
+
+const Copyable = ({
+  text,
+  onCopy,
+  initialPopoverContent = "Click to copy to clipboard",
+  copiedPopoverContent = "Copied!",
+  withPopover = true,
+  popoverMinWidth = "210px",
+  copiedPopoverContentDuration = 1000,
+  popoverID = 0,
+  extraStyles
+}) => {
+  const popoverPosition = {
+    top: "-65px",
+    right: "auto",
+    bottom: "auto",
+    left: "50%"
+  };
+  const popoverArrowPosition = {
+    arrowTop: "auto",
+    arrowRight: "auto",
+    arrowBottom: "-8px",
+    arrowLeft: "calc(50% - 4px)" // Popover arrow is 8px wide. This places the middle of the arrow in the middle of the popover.
+  };
+  const [popoverContent, setPopoverContent] = useState(initialPopoverContent);
+  const [timer, setTimer] = useState(undefined);
+  const onClick = () => {
+    setPopoverContent(copiedPopoverContent);
+    navigator.clipboard.writeText(text).catch(e => console.error(e));
+    onCopy?.();
+    if (timer) {
+      clearTimeout(timer);
+    }
+    setTimer(
+      setTimeout(() => {
+        setPopoverContent(initialPopoverContent);
+        setTimer(undefined);
+      }, copiedPopoverContentDuration)
+    );
+  };
+  return withPopover ? (
+    <Popover
+      minWidth={popoverMinWidth}
+      position={popoverPosition}
+      arrowPosition={popoverArrowPosition}
+      popoverID={popoverID}
+      extraStyles={`> button#btnPopover${popoverID} { margin: 0 }; #Disclosed${popoverID} { transform: translateX(-50%); }; ${extraStyles}`}
+      triggerText={CopyableText({ text, onClick })}
+      content={popoverContent}
+    ></Popover>
+  ) : (
+    CopyableText({ text, onClick })
+  );
+};
+
+export default Copyable;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CopyableProps {
+  text: string;
+  initialPopoverContent?: string;
+  copiedPopoverContent?: string;
+  copiedPopoverContentDuration?: number;
+  withPopover?: boolean;
+  popoverID?: number;
+  popoverMinWidth?: string;
+  onCopy?: () => void;
+  extraStyles?: 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/index.d.ts

@@ -1,3 +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,7 @@
 export { default as AddressForm } from "./address-form";
 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

@@ -108,7 +108,7 @@ const Popover = ({
           right: ${right}; 
           bottom: ${bottom}; 
           left: ${left};
-          height: ${height}
+          height: ${height};
           `}
       >
         <Paragraph>{content}</Paragraph>

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

@@ -0,0 +1,26 @@
+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;
+  };
+}
+
+export const Popover: React.FC<Expand<PopoverProps> &
+  React.HTMLAttributes<HTMLElement>>;