@thecb/components 10.6.1 → 10.6.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.1",
+  "version": "10.6.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/icons.stories.js

@@ -32,6 +32,7 @@ import {
   FailedIcon,
   PencilIcon,
   PendingIcon,
+  PlusCircleIcon,
   RefundIcon,
   RejectedIcon,
   RejectedVelocityIcon,
@@ -58,6 +59,7 @@ export const accountsIcon = () => <AccountsIcon />;
 export const accountsAddIcon = () => <AccountsAddIcon />;
 export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
 export const goToEmailIcon = () => <GoToEmailIcon />;
+export const plusCircleIcon = () => <PlusCircleIcon />;
 export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
 export const paymentMethodIcon = () => <PaymentMethodIcon />;
 export const accountsIconSmall = () => <AccountsIconSmall />;

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

@@ -5,25 +5,17 @@ import Text from "../text";
 import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import {
-  STORM_GREY,
-  GRECIAN_GREY,
-  CHARADE_GREY,
-  WHITE,
-  TRANSPARENT,
-  MANATEE_GREY
-} from "../../../constants/colors";
+import { TRANSPARENT, MANATEE_GREY } from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
-  IconAdd,
+  PlusCircleIcon,
   PaymentMethodAddIcon,
   DisabledAccountsAddIcon,
   DisabledPropertiesAddIcon,
   DisabledPaymentMethodsAddIcon
 } from "../icons";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { noop } from "../../../util/general";
 
 const getLargeIcon = (iconName, isDisabled) => {
   switch (iconName) {
@@ -67,6 +59,8 @@ const renderContent = ({ isLink, destination, dataQa, children, action }) =>
       minHeight="100%"
       extraStyles="cursor: pointer;"
       dataQa={dataQa}
+      tabIndex="0"
+      onKeyPress={e => e.key === "Enter" && action()}
     >
       {children}
     </Box>
@@ -101,126 +95,94 @@ const Placeholder = ({
   themeValues,
   isDisabled = false,
   dataQa
-}) => (
-  <PlaceholderContentWrapper
-    isLink={isLink}
-    action={action}
-    destination={destination}
-    dataQa={dataQa}
-    isDisabled={isDisabled}
-  >
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={
-        isDisabled
-          ? `border: 1px dashed ${MANATEE_GREY}; 
-        display: flex;
-        justify-content: center;
-        align-items:center;`
-          : `
-        background: linear-gradient(
-          to right,
-          ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
-          rgba(255, 255, 255, 0) 0%
-        ),
-        linear-gradient(${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(to right, ${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%);
-        background-position: top, right, bottom, left;
-        background-repeat: repeat-x, repeat-y;
-        background-size: 5px 1px, 1px 5px;
-        display: flex;
-        justify-content: center;
-        align-items:center;`
-      }
-      hoverStyles={`background-color: ${
-        isDisabled
-          ? TRANSPARENT
-          : variant === "large"
-          ? GRECIAN_GREY
-          : tint(0.9, themeValues.color)
-      };`}
+}) => {
+  const borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
+  return (
+    <PlaceholderContentWrapper
+      isLink={isLink}
+      action={action}
+      destination={destination}
+      dataQa={dataQa}
+      isDisabled={isDisabled}
     >
-      <Center maxWidth="300px">
-        <Box
-          padding="0"
-          tabIndex="0"
-          onKeyPress={e => (isDisabled ? noop : 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
-                    }; 
+      <Box
+        padding="0"
+        borderRadius="4px"
+        border="none"
+        minHeight={themeValues.height}
+        hiddenStyles={!visible}
+        extraStyles={`
+          display: flex;
+          justify-content: center;
+          align-items:center;
+          background-image: repeating-linear-gradient(0deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(90deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(180deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(270deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px);
+          background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
+          background-position: 0 0, 0 0, 100% 0, 0 100%;
+          background-repeat: no-repeat;
+        `}
+        hoverStyles={`background-color: ${
+          isDisabled ? TRANSPARENT : tint(0.9, themeValues.color)
+        };`}
+        activeStyles={`background-color: ${
+          isDisabled ? TRANSPARENT : tint(0.8, themeValues.color)
+        };`}
+      >
+        <Center maxWidth="300px">
+          <Box padding="0">
+            <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 : themeValues.color}; 
                   } .stroke { 
-                    stroke: ${
-                      isDisabled
-                        ? MANATEE_GREY
-                        : variant === "large"
-                        ? CHARADE_GREY
-                        : themeValues.color
-                    }; 
+                    stroke: ${isDisabled ? MANATEE_GREY : themeValues.color}; 
                   } `}
-              >
-                {variant === "large" ? (
-                  <Center intrinsic>
-                    {getLargeIcon(largeIcon, isDisabled)}
-                    <Text
-                      variant="pS"
-                      color={isDisabled ? MANATEE_GREY : themeValues.color}
-                      weight={FONT_WEIGHT_SEMIBOLD}
-                      extraStyles={`text-align: center;`}
-                    >
-                      {text}
-                    </Text>
-                  </Center>
-                ) : (
-                  <Cover singleChild minHeight="100%">
-                    <Cluster justify="center" align="center">
-                      <IconAdd
-                        fill={isDisabled ? MANATEE_GREY : WHITE}
-                        strokeWidth="2"
-                      />
-                      <Center intrinsic>
-                        <Text
-                          variant="pS"
+                >
+                  {variant === "large" ? (
+                    <Center intrinsic>
+                      {getLargeIcon(largeIcon, isDisabled)}
+                      <Text
+                        variant="pS"
+                        color={isDisabled ? MANATEE_GREY : themeValues.color}
+                        weight={FONT_WEIGHT_SEMIBOLD}
+                        extraStyles={`text-align: center;`}
+                      >
+                        {text}
+                      </Text>
+                    </Center>
+                  ) : (
+                    <Cover singleChild minHeight="100%">
+                      <Cluster justify="center" align="center">
+                        <PlusCircleIcon
                           color={isDisabled ? MANATEE_GREY : themeValues.color}
-                          weight={FONT_WEIGHT_SEMIBOLD}
-                          extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                        >
-                          {text}
-                        </Text>
-                      </Center>
-                    </Cluster>
-                  </Cover>
-                )}
-              </Box>
-            </Switcher>
-          </Cluster>
-        </Box>
-      </Center>
-    </Box>
-  </PlaceholderContentWrapper>
-);
+                        />
+                        <Center intrinsic>
+                          <Text
+                            variant="pS"
+                            color={
+                              isDisabled ? MANATEE_GREY : themeValues.color
+                            }
+                            weight={FONT_WEIGHT_SEMIBOLD}
+                            extraStyles={`padding: 0 0 0 8px; text-align: center;`}
+                          >
+                            {text}
+                          </Text>
+                        </Center>
+                      </Cluster>
+                    </Cover>
+                  )}
+                </Box>
+              </Switcher>
+            </Cluster>
+          </Box>
+        </Center>
+      </Box>
+    </PlaceholderContentWrapper>
+  );
+};
 
 export default themeComponent(
   Placeholder,

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

@@ -30,6 +30,7 @@ export const placeholder = () => (
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
     key="placeholder"
     isDisabled={boolean("isDisabled", false, "props")}
+    action={() => console.log("placeholder action")}
   />
 );