@thecb/components 10.4.0-beta.4 → 10.4.0-beta.6

package/package.json

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

package/src/components/atoms/badge/Badge.theme.js

@@ -28,6 +28,6 @@ const color = {
 };
 
 export const fallbackValues = {
-  background: background,
-  color: color
+  background,
+  color
 };

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { Fragment, useState } from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
+import { Box } from "../layouts";
 import ButtonWithAction from "./ButtonWithAction";
 import page from "../../../../.storybook/page";
 
@@ -14,21 +15,38 @@ const variants = {
   smallGhost: "smallGhost",
   tertiary: "tertiary",
   danger: "danger",
+  dangerSecondary: "dangerSecondary",
+  whiteSecondary: "whiteSecondary",
+  whitePrimary: "whitePrimary",
   None: undefined
 };
 const defaultValue = "primary";
 const groupId = "props";
 
-const buttonHandler = () => console.log("Button selected");
+const buttonHandler = () => window.alert("Button click!");
 
 export const buttonWithAction = () => (
-  <ButtonWithAction
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    disabled={boolean("disabled", false, "props")}
-    text={text("text", "button", "props")}
-    isLoading={boolean("isLoading", false, "props")}
-    action={text("action", buttonHandler, "props")}
-  />
+  <Fragment>
+    {/* Uncomment to view buttons on a dark background */}
+    {/* <Box extraStyles="background-color: #000;">
+      <ButtonWithAction
+        variant={select(variantsLabel, variants, defaultValue, groupId)}
+        disabled={boolean("disabled", false, "props")}
+        text={text("text", "button", "props")}
+        isLoading={boolean("isLoading", false, "props")}
+        action={text("action", buttonHandler, "props")}
+      />
+    </Box> */}
+    <Box extraStyles="background-color: #fff;">
+      <ButtonWithAction
+        variant={select(variantsLabel, variants, defaultValue, groupId)}
+        disabled={boolean("disabled", false, "props")}
+        text={text("text", "button", "props")}
+        isLoading={boolean("isLoading", false, "props")}
+        action={text("action", buttonHandler, "props")}
+      />
+    </Box>
+  </Fragment>
 );
 
 const story = page({

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -8,25 +8,24 @@ const {
   MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR,
-  STORM_GREY
+  ERROR_COLOR
 } = colors;
 
 const { LINK_TEXT_DECORATION } = styleConstants;
 
 const disabledBorderColor = {
-  primary: STORM_GREY,
-  secondary: STORM_GREY,
+  primary: MANATEE_GREY,
+  secondary: MANATEE_GREY,
   back: TRANSPARENT,
-  smallPrimary: STORM_GREY,
-  smallSecondary: STORM_GREY,
+  smallPrimary: MANATEE_GREY,
+  smallSecondary: MANATEE_GREY,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
-  danger: STORM_GREY,
-  dangerSecondary: STORM_GREY,
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  danger: MANATEE_GREY,
+  dangerSecondary: MANATEE_GREY,
+  whiteSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY
 };
 
 const disabledColor = {

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

@@ -17,7 +17,6 @@ import {
   PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { noop } from "../../../util/general";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -37,27 +36,21 @@ const PlaceholderContentWrapper = ({
   action,
   destination,
   children,
-  dataQa,
-  disabled = false
+  dataQa
 }) =>
   isLink ? (
     <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
-      <Box
-        padding="0"
-        minHeight="100%"
-        extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
-      >
+      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
   ) : (
     <Box
-      onClick={disabled ? noop : action}
+      onClick={action}
       padding="0"
       minHeight="100%"
+      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
-      aria-disabled={disabled}
-      extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
     >
       {children}
     </Box>
@@ -72,26 +65,21 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  dataQa,
-  disabled = false
-}) => {
-  const tintedColor = `${tint(0.9, themeValues.color)}`;
-
-  return (
-    <PlaceholderContentWrapper
-      isLink={isLink}
-      action={action}
-      destination={destination}
-      dataQa={dataQa}
-      disabled={disabled}
-    >
-      <Box
-        padding="0"
-        borderRadius="4px"
-        border="none"
-        minHeight={themeValues.height}
-        hiddenStyles={!visible}
-        extraStyles={`
+  dataQa
+}) => (
+  <PlaceholderContentWrapper
+    isLink={isLink}
+    action={action}
+    destination={destination}
+    dataQa={dataQa}
+  >
+    <Box
+      padding="0"
+      borderRadius="4px"
+      border="none"
+      minHeight={themeValues.height}
+      hiddenStyles={!visible}
+      extraStyles={`
         background: linear-gradient(
           to right,
           ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
@@ -112,22 +100,22 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-        hoverStyles={`background-color: ${
-          variant === "large" ? GRECIAN_GREY : tintedColor
-        };`}
-      >
-        <Center maxWidth="300px">
-          <Box
-            padding="0"
-            tabIndex="0"
-            onKeyPress={e => e.key === "Enter" && !disabled && action()}
-          >
-            <Cluster justify="center" align="center" minHeight="100%">
-              <Switcher maxChildren={2} childGap="0">
-                {variant === "large" && <div></div>}
-                <Box
-                  padding="0"
-                  extraStyles={`.fill { 
+      hoverStyles={`background-color: ${
+        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
+      };`}
+    >
+      <Center maxWidth="300px">
+        <Box
+          padding="0"
+          tabIndex="0"
+          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"
+                extraStyles={`.fill { 
                     fill: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
@@ -136,45 +124,44 @@ const Placeholder = ({
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
                   }`}
-                >
-                  {variant === "large" ? (
-                    <Center intrinsic>
-                      {getLargeIcon(largeIcon)}
-                      <Text
-                        variant="pS"
-                        color={themeValues.color}
-                        weight={FONT_WEIGHT_REGULAR}
-                        extraStyles={`text-align: center;`}
-                      >
-                        {text}
-                      </Text>
-                    </Center>
-                  ) : (
-                    <Cover singleChild minHeight="100%">
-                      <Cluster justify="center" align="center">
-                        <IconAdd />
-                        <Center intrinsic>
-                          <Text
-                            variant="pS"
-                            color={themeValues.color}
-                            weight={FONT_WEIGHT_REGULAR}
-                            extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                          >
-                            {text}
-                          </Text>
-                        </Center>
-                      </Cluster>
-                    </Cover>
-                  )}
-                </Box>
-              </Switcher>
-            </Cluster>
-          </Box>
-        </Center>
-      </Box>
-    </PlaceholderContentWrapper>
-  );
-};
+              >
+                {variant === "large" ? (
+                  <Center intrinsic>
+                    {getLargeIcon(largeIcon)}
+                    <Text
+                      variant="pS"
+                      color={themeValues.color}
+                      weight={FONT_WEIGHT_REGULAR}
+                      extraStyles={`text-align: center;`}
+                    >
+                      {text}
+                    </Text>
+                  </Center>
+                ) : (
+                  <Cover singleChild minHeight="100%">
+                    <Cluster justify="center" align="center">
+                      <IconAdd />
+                      <Center intrinsic>
+                        <Text
+                          variant="pS"
+                          color={themeValues.color}
+                          weight={FONT_WEIGHT_REGULAR}
+                          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,