@thecb/components 10.4.0-beta.5 → 10.4.0-beta.7

package/package.json

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

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/molecules/link-card/LinkCard.js

@@ -40,7 +40,7 @@ const LinkCard = ({
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
       onClick={disabled ? noop : onClick}
-      disabled={disabled}
+      aria-disabled={disabled}
     >
       <Stack
         childGap={0}