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

package/package.json

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

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
-
 const PropertiesAddIcon = ({ themeValues }) => {
   return (
     <svg width={100} height={100} viewBox="0 0 84 100">

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

@@ -42,10 +42,7 @@ import {
   KebabMenuIcon,
   MultiCartIcon,
   CloseIcon,
-  TrashIconV2,
-  DisabledPropertiesAddIcon,
-  DisabledAccountsAddIcon,
-  DisabledPaymentMethodsAddIcon
+  TrashIconV2
 } from "./index";
 
 const story = page({
@@ -95,8 +92,3 @@ export const kebabMenuIcon = () => <KebabMenuIcon />;
 export const multiCartIcon = () => <MultiCartIcon />;
 export const closeIcon = () => <CloseIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
-export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
-export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
-export const disabledPaymentMethodsAddIcon = () => (
-  <DisabledPaymentMethodsAddIcon />
-);

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

@@ -90,9 +90,6 @@ import KebabMenuIcon from "./KebabMenuIcon";
 import MultiCartIcon from "./MultiCartIcon";
 import CloseIcon from "./CloseIcon";
 import TrashIconV2 from "./TrashIconV2";
-import DisabledAccountsAddIcon from "./DisabledAccountsAddIcon";
-import DisabledPropertiesAddIcon from "./DisabledPropertiesAddIcon";
-import DisabledPaymentMethodsAddIcon from "./DisabledPaymentMethodsAddIcon";
 
 export {
   AccountsIcon,
@@ -186,8 +183,5 @@ export {
   KebabMenuIcon,
   MultiCartIcon,
   CloseIcon,
-  TrashIconV2,
-  DisabledAccountsAddIcon,
-  DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  TrashIconV2
 };

package/src/components/atoms/index.js

@@ -48,4 +48,5 @@ export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
+export { default as WalletName } from "./wallet-name";
 export * from "./table";

package/src/components/atoms/placeholder/Placeholder.js

@@ -8,55 +8,39 @@ import { themeComponent } from "../../../util/themeUtils";
 import {
   STORM_GREY,
   GRECIAN_GREY,
-  CHARADE_GREY,
-  WHITE,
-  TRANSPARENT,
-  MANATEE_GREY
+  CHARADE_GREY
 } from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
   IconAdd,
-  PaymentMethodAddIcon,
-  DisabledAccountsAddIcon,
-  DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { noop } from "../../../util/general";
 
-const getLargeIcon = (iconName, isDisabled) => {
+const getLargeIcon = iconName => {
   switch (iconName) {
     case "accounts":
-      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
+      return <AccountsAddIcon />;
     case "properties":
-      return isDisabled ? <DisabledPropertiesAddIcon /> : <PropertiesAddIcon />;
+      return <PropertiesAddIcon />;
     case "payments":
-      return isDisabled ? (
-        <DisabledPaymentMethodsAddIcon />
-      ) : (
-        <PaymentMethodAddIcon />
-      );
+      return <PaymentMethodAddIcon />;
     default:
-      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
+      return <AccountsAddIcon />;
   }
 };
 
-const renderDisabledContent = ({ children }) => (
-  <Box
-    padding="0"
-    minHeight="100%"
-    extraStyles="cursor: default;"
-    aria-disabled={true}
-  >
-    {children}
-  </Box>
-);
-
-const renderContent = ({ isLink, destination, dataQa, children, action }) =>
+const PlaceholderContentWrapper = ({
+  isLink,
+  action,
+  destination,
+  children,
+  dataQa
+}) =>
   isLink ? (
     <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
-      <Box padding="0" minHeight="100%" extraStyles="cursor: pointer;">
+      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
@@ -65,31 +49,13 @@ const renderContent = ({ isLink, destination, dataQa, children, action }) =>
       onClick={action}
       padding="0"
       minHeight="100%"
-      extraStyles="cursor: pointer;"
+      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
     >
       {children}
     </Box>
   );
 
-const PlaceholderContentWrapper = ({
-  isLink,
-  action,
-  destination,
-  children,
-  isDisabled = false,
-  dataQa
-}) =>
-  isDisabled
-    ? renderDisabledContent({ children })
-    : renderContent({
-        children,
-        action,
-        isLink,
-        destination,
-        dataQa
-      });
-
 const Placeholder = ({
   text,
   action,
@@ -99,7 +65,6 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  isDisabled = false,
   dataQa
 }) => (
   <PlaceholderContentWrapper
@@ -107,7 +72,6 @@ const Placeholder = ({
     action={action}
     destination={destination}
     dataQa={dataQa}
-    isDisabled={isDisabled}
   >
     <Box
       padding="0"
@@ -115,13 +79,7 @@ const Placeholder = ({
       border="none"
       minHeight={themeValues.height}
       hiddenStyles={!visible}
-      extraStyles={
-        isDisabled
-          ? `border: 1px dashed ${MANATEE_GREY}; 
-        display: flex;
-        justify-content: center;
-        align-items:center;`
-          : `
+      extraStyles={`
         background: linear-gradient(
           to right,
           ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
@@ -141,52 +99,38 @@ const Placeholder = ({
         background-size: 5px 1px, 1px 5px;
         display: flex;
         justify-content: center;
-        align-items:center;`
-      }
+        align-items:center;`}
       hoverStyles={`background-color: ${
-        isDisabled
-          ? TRANSPARENT
-          : variant === "large"
-          ? GRECIAN_GREY
-          : tint(0.9, themeValues.color)
+        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
       };`}
     >
       <Center maxWidth="300px">
         <Box
           padding="0"
           tabIndex="0"
-          onKeyPress={e => (isDisabled ? noop : e.key === "Enter" && action())}
+          onKeyPress={e => e.key === "Enter" && action()}
         >
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">
               {variant === "large" && <div></div>}
               <Box
                 padding="0"
-                aria-disabled={isDisabled}
                 extraStyles={`.fill { 
                     fill: ${
-                      isDisabled
-                        ? MANATEE_GREY
-                        : variant === "large"
-                        ? CHARADE_GREY
-                        : themeValues.color
+                      variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
                   } .stroke { 
                     stroke: ${
-                      isDisabled
-                        ? MANATEE_GREY
-                        : variant === "large"
-                        ? CHARADE_GREY
-                        : themeValues.color
+                      variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
                   } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
-                    {getLargeIcon(largeIcon, isDisabled)}
+                    {getLargeIcon(largeIcon)}
                     <Text
                       variant="pS"
-                      color={isDisabled ? MANATEE_GREY : themeValues.color}
+                      color={themeValues.color}
                       weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
@@ -196,14 +140,11 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd
-                        fill={isDisabled ? MANATEE_GREY : WHITE}
-                        strokeWidth="2"
-                      />
+                      <IconAdd strokeWidth="2" />
                       <Center intrinsic>
                         <Text
                           variant="pS"
-                          color={isDisabled ? MANATEE_GREY : themeValues.color}
+                          color={themeValues.color}
                           weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -29,7 +29,6 @@ export const placeholder = () => (
     text={text("text", "Add an Account", "props")}
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
     key="placeholder"
-    isDisabled={boolean("isDisabled", false, "props")}
   />
 );
 
@@ -37,5 +36,4 @@ const story = page({
   title: "Components|Atoms/Placeholder",
   Component: Placeholder
 });
-
 export default story;

package/src/components/atoms/placeholder/Placeholder.theme.js

@@ -1,13 +1,7 @@
 import { BRIGHT_GREY, CHARADE_GREY } from "../../../constants/colors";
 
-const color = {
-  default: `${CHARADE_GREY}`,
-  large: `${BRIGHT_GREY}`
-};
-const height = {
-  default: "3rem",
-  large: "192px"
-};
+const color = { default: `${CHARADE_GREY}`, large: `${BRIGHT_GREY}` };
+const height = { default: "3rem", large: "192px" };
 
 export const fallbackValues = {
   color,

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

@@ -0,0 +1,78 @@
+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
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Fragment>
+      <Module spacingBottom={isMobile ? "0" : "1.5rem"}>
+        <Box
+          padding="24px"
+          boxShadow={themeValues.boxShadow}
+          spacingBottom="0"
+          margin="0 0 0 0"
+          extraStyles={
+            isMobile
+              ? `display: flex; flex-direction: column; flex-wrap: wrap;  span {text - align: right;}`
+              : `display: flex; justify-content: space-between; align-items: center;`
+          }
+        >
+          <Box padding="0 0 0">
+            <Text>{mainText}</Text>
+          </Box>
+          {!isMobile && (
+            <Box padding="0">
+              <Text variant="pXS">{text}</Text>
+              &nbsp;
+              <ButtonWithAction
+                text={actionText}
+                action={action}
+                variant="smallGhost"
+                extraStyles="
+                  margin-left: 0;
+                  span {font-size: 0.75rem;}
+                "
+              />
+            </Box>
+          )}
+        </Box>
+      </Module>
+      {isMobile && (
+        <Box
+          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;}"
+          />
+        </Box>
+      )}
+    </Fragment>
+  );
+};
+
+export default themeComponent(
+  WalletName,
+  "WalletName",
+  fallbackValues,
+  "primary"
+);

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

@@ -0,0 +1,22 @@
+import React from "react";
+import WalletName from "./WalletName";
+import { text, object } from "@storybook/addon-knobs";
+import page from "../../../../.storybook/page";
+
+export const walletName = () => {
+  return (
+    <WalletName
+      mainText={text("mainText", "Firstname Lastname", "props")}
+      action={object("action", () => window.alert("action fired!"), "props")}
+      actionText={text("actionText", "Check out as a guest", "props")}
+      text={text("text", "Not you?", "props")}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/WalletName",
+  component: WalletName
+});
+
+export default story;

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

@@ -0,0 +1,16 @@
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
+
+const backgroundColor = {
+  primary: WHITE
+};
+
+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);
+    box-shadow: 0px -1px 0px 0px rgba(${CHARADE_GREY}, 0.1) inset;`
+};
+
+export const fallbackValues = {
+  backgroundColor,
+  boxShadow
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface WalletNameProps {
+  action?: () => void;
+  text?: string;
+  actionText?: string;
+  mainText?: string;
+}
+
+export const WalletName: React.FC<Expand<WalletNameProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

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

package/src/components/molecules/editable-list/EditableList.js

@@ -40,8 +40,7 @@ const EditableList = ({
   listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
   ariaLabel,
-  editItemAriaRole = "",
-  disablePlaceholder = false
+  editItemAriaRole = ""
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -162,14 +161,13 @@ const EditableList = ({
             );
           })}
         </Box>
-        {canAdd && !(!maxItems || items.length < maxItems) && (
+        {canAdd && (!maxItems || items.length < maxItems) && (
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}
-              isDisabled={disablePlaceholder}
             />
           </Box>
         )}

package/src/components/molecules/editable-list/EditableList.stories.js

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+
 import EditableList from "./EditableList";
 import page from "../../../../.storybook/page";
 

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

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

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

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

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

@@ -14,7 +14,6 @@ export interface CancelButtonProps {
   buttonExtraStyles?: string;
   cancelAction?: Function;
   cancelButtonText?: string;
-  cancelButtonVariant?: string;
   hideModal?: Function;
   isMobile?: boolean;
 }
@@ -32,23 +31,11 @@ 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,5 +1,4 @@
 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,8 +8,7 @@ export const FONT_SIZE = {
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
-  LG: "1.125rem", // 18px
-  XL: "1.250rem" //20px
+  LG: "1.125rem" // 18px
 };
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";