@thecb/components 10.6.0-beta.0 → 10.6.0-beta.1

package/package.json

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

package/src/components/atoms/wallet-name/WalletName.js

@@ -2,21 +2,20 @@ import React, { Fragment, useContext } from "react";
 import { Box } from "../layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import ButtonWithAction from "../button-with-action";
-import { noop } from "../../../util/general";
 import Text from "../text/Text";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./WalletName.theme";
 import Module from "../../molecules/module/Module";
 
 const WalletName = ({
-  mainText = "",
-  action = noop,
-  text = "Not you?",
-  actionText = "Check out as a guest",
-  themeValues
+  mainText,
+  action,
+  text,
+  actionText,
+  themeValues,
+  disableAction = false
 }) => {
-  const themeContext = useContext(ThemeContext);
-  const { isMobile } = themeContext;
+  const { isMobile } = useContext(ThemeContext);
 
   return (
     <Fragment>
@@ -28,7 +27,7 @@ const WalletName = ({
           margin="0 0 0 0"
           extraStyles={
             isMobile
-              ? `display: flex; flex-direction: column; flex-wrap: wrap;  span {text - align: right;}`
+              ? `display: flex; flex-direction: column; flex-wrap: wrap;  span {text-align: right;}`
               : `display: flex; justify-content: space-between; align-items: center;`
           }
         >
@@ -37,17 +36,21 @@ const WalletName = ({
           </Box>
           {!isMobile && (
             <Box padding="0">
-              <Text variant="pXS">{text}</Text>
-              &nbsp;
-              <ButtonWithAction
-                text={actionText}
-                action={action}
-                variant="smallGhost"
-                extraStyles="
+              {text && <Text variant="pXS">{text}</Text>}
+              {text && actionText && <>&nbsp;</>}
+              {action && actionText && (
+                <ButtonWithAction
+                  disabled={disableAction}
+                  text={actionText}
+                  action={action}
+                  variant="smallGhost"
+                  extraStyles="
                   margin-left: 0;
+                  min-width: 0;
                   span {font-size: 0.75rem;}
                 "
-              />
+                />
+              )}
             </Box>
           )}
         </Box>
@@ -57,13 +60,16 @@ const WalletName = ({
           padding="0 0 24px"
           extraStyles="display: flex; align-items: center; justify-content: flex-end;"
         >
-          <Text extraStyles="font-size: 12px">{text}</Text>
-          <ButtonWithAction
-            text={actionText}
-            action={action}
-            variant="smallGhost"
-            extraStyles="span {font-size: 12px;}"
-          />
+          {text && <Text extraStyles="font-size: 12px">{text}</Text>}
+          {action && actionText && (
+            <ButtonWithAction
+              text={actionText}
+              action={action}
+              variant="smallGhost"
+              extraStyles="span {font-size: 12px;}"
+              disabled={disableAction}
+            />
+          )}
         </Box>
       )}
     </Fragment>

package/src/components/atoms/wallet-name/WalletName.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletName from "./WalletName";
-import { text, object } from "@storybook/addon-knobs";
+import { text, object, boolean } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
 
 export const walletName = () => {
@@ -10,6 +10,7 @@ export const walletName = () => {
       action={object("action", () => window.alert("action fired!"), "props")}
       actionText={text("actionText", "Check out as a guest", "props")}
       text={text("text", "Not you?", "props")}
+      actionDisabled={boolean("actionDisabled", false, "props")}
     />
   );
 };

package/src/components/atoms/wallet-name/WalletName.theme.js

@@ -1,9 +1,13 @@
-import { CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, ROYAL_BLUE, WHITE } from "../../../constants/colors";
 
 const backgroundColor = {
   primary: WHITE
 };
 
+const color = {
+  primary: ROYAL_BLUE
+};
+
 const boxShadow = {
   primary: `box-shadow: 0px 1px 2px 0px rgba(${CHARADE_GREY}, 0.1);
     box-shadow: 0px 2px 6px 0px rgba(${CHARADE_GREY}, 0.2);
@@ -12,5 +16,6 @@ const boxShadow = {
 
 export const fallbackValues = {
   backgroundColor,
+  color,
   boxShadow
 };

package/src/components/atoms/wallet-name/index.d.ts

@@ -3,9 +3,10 @@ import Expand from "../../../util/expand";
 
 export interface WalletNameProps {
   action?: () => void;
-  text?: string;
-  actionText?: string;
-  mainText?: string;
+  text: string;
+  actionText: string;
+  mainText: string;
+  actionDisabled?: boolean;
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

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

@@ -76,6 +76,7 @@ export const modalV2 = () => (
     noButtons={boolean("noButtons", false, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
+    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
     useDangerButton={boolean("useDangerButton", false, groupId)}
   />
 );

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

@@ -18,6 +18,7 @@ import {
   ButtonLayoutWrapper,
   CancelButton,
   CloseButton,
+  CloseIconButton,
   ContinueButton
 } from "./__private__";
 
@@ -38,10 +39,12 @@ const Modal = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "Cancel",
+  cancelButtonVariant = "secondary",
   children = [],
   closeButtonText = "Close",
   continueAction = noop,
   continueButtonText = "Continue",
+  continueButtonVariant = "primary",
   continueURL = "",
   customWidth = "",
   dataQa = null,
@@ -60,6 +63,7 @@ const Modal = ({
   onExit = hideModal,
   onlyCloseButton = false,
   onlyContinueButton = false,
+  showCloseIconButton = false,
   underlayClickExits = true,
   useDangerButton = false
 }) => {
@@ -108,7 +112,7 @@ const Modal = ({
             borderRadius: BORDER_RADIUS.MD,
             margin: SPACING.XS,
             overflow: "auto",
-            width: isMobile ? "" : customWidth || "615px"
+            width: isMobile ? "" : customWidth || "576px"
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
@@ -122,7 +126,13 @@ const Modal = ({
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
               padding={`${SPACING.XS} ${SPACING.MD}`}
             >
-              <Cluster justify="flex-start" align="center">
+              <Cluster
+                justify={showCloseIconButton ? "space-between" : "flex-start"}
+                align={
+                  showCloseIconButton && isMobile ? "flex-start" : "center"
+                }
+                nowrap
+              >
                 <Title
                   as="h2"
                   weight={FONT_WEIGHT_SEMIBOLD}
@@ -130,6 +140,9 @@ const Modal = ({
                 >
                   {modalHeaderText}
                 </Title>
+                {showCloseIconButton && (
+                  <CloseIconButton hideModal={hideModal} />
+                )}
               </Cluster>
             </Box>
             <Box background={modalBodyBg || ATHENS_GREY} padding="0">
@@ -161,6 +174,7 @@ const Modal = ({
                         buttonExtraStyles={buttonExtraStyles}
                         cancelAction={cancelAction}
                         cancelButtonText={cancelButtonText}
+                        cancelButtonVariant={cancelButtonVariant}
                         hideModal={hideModal}
                         isMobile={isMobile}
                         key="cancel"
@@ -172,6 +186,7 @@ const Modal = ({
                         continueAction={continueAction}
                         continueButtonText={continueButtonText}
                         continueURL={continueURL}
+                        continueButtonVariant={continueButtonVariant}
                         isContinueActionDisabled={isContinueActionDisabled}
                         isLoading={isLoading}
                         isMobile={isMobile}

package/src/components/molecules/modal/__private__/CancelButton.js

@@ -10,6 +10,7 @@ export const CancelButton = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "",
+  cancelButtonVariant = "secondary",
   hideModal = noop,
   isMobile = false
 }) => {
@@ -27,7 +28,7 @@ export const CancelButton = ({
       role="button"
       text={cancelButtonText}
       textExtraStyles={`${fontSize}`}
-      variant="secondary"
+      variant={cancelButtonVariant}
     />
   );
 };

package/src/components/molecules/modal/__private__/CloseIconButton.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+import { CloseIcon } from "../../../atoms/icons/CloseIcon";
+
+export const CloseIconButton = ({
+  buttonExtraStyles = "",
+  hideModal = noop,
+  iconWidth = "24",
+  iconHeight = "24",
+  ariaLabel = "Close Modal"
+}) => {
+  return (
+    <ButtonWithAction
+      action={hideModal}
+      aria-label={ariaLabel}
+      contentOverride
+      extraStyles={`
+        min-height: auto;
+        min-width: auto;
+        height: 1.5rem;
+        margin: 0 0 0 0.5rem;
+        &:focus {
+            outline-offset: -3px;
+        }
+     `}
+      variant="smallGhost"
+    >
+      <CloseIcon
+        role="img"
+        aria-hidden="true"
+        iconWidth={iconWidth}
+        iconHeight={iconHeight}
+      />
+    </ButtonWithAction>
+  );
+};
+
+export default CloseIconButton;

package/src/components/molecules/modal/__private__/ContinueButton.js

@@ -12,6 +12,7 @@ export const ContinueButton = ({
   continueAction = noop,
   continueButtonText = "",
   continueURL = "",
+  continueButtonVariant = "primary",
   isContinueActionDisabled = false,
   isLoading = false,
   isMobile = false,
@@ -36,7 +37,7 @@ export const ContinueButton = ({
       text={continueButtonText}
       textExtraStyles={`${fontSize}`}
       url={continueURL}
-      variant={useDangerButton ? "danger" : "primary"}
+      variant={useDangerButton ? "danger" : continueButtonVariant}
     />
   );
 };

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

@@ -14,6 +14,7 @@ export interface CancelButtonProps {
   buttonExtraStyles?: string;
   cancelAction?: Function;
   cancelButtonText?: string;
+  cancelButtonVariant?: string;
   hideModal?: Function;
   isMobile?: boolean;
 }
@@ -31,11 +32,23 @@ export interface CloseButtonProps {
 export declare const CloseButton: React.FC<Expand<CloseButtonProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+export interface CloseIconButtonProps {
+  buttonExtraStyles?: string;
+  hideModal?: action;
+  iconWidth?: string;
+  iconHeight?: string;
+  ariaLabel?: string;
+}
+
+export declare const CloseIconButton: React.FC<Expand<CloseIconButtonProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 export interface ContinueButtonProps {
   buttonExtraStyles?: string;
   continueAction?: Function;
   continueButtonText?: string;
   continueURL?: string;
+  continueButtonVariant?: string;
   isContinueActionDisabled?: boolean;
   isLoading?: boolean;
   isMobile?: boolean;

package/src/components/molecules/modal/__private__/index.js

@@ -1,4 +1,5 @@
 export { default as ButtonLayoutWrapper } from "./ButtonLayoutWrapper";
 export { default as CancelButton } from "./CancelButton";
 export { default as CloseButton } from "./CloseButton";
+export { default as CloseIconButton } from "./CloseIconButton";
 export { default as ContinueButton } from "./ContinueButton";

package/src/constants/style_constants.js

@@ -8,7 +8,8 @@ export const FONT_SIZE = {
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
-  LG: "1.125rem" // 18px
+  LG: "1.125rem", // 18px
+  XL: "1.250rem" //20px
 };
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";