@thecb/components 4.0.24 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.24",
+  "version": "4.1.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/box-with-shadow/BoxWithShadow.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { rgba } from "polished";
+import { fallbackValues } from "./BoxWithShadow.theme";
+import Box from "../layouts/Box";
+import { themeComponent } from "../../../util/themeUtils";
+import { BLACK } from "../../../constants/colors";
+
+const BoxWithShadow = ({ variant, themeValues, children, ...props }) => {
+  const shadowRegistry = {
+    baseStandard: `0px 3px 7px 2px ${rgba(BLACK, 0.1)}, 0px 1px 2px 1px ${rgba(
+      BLACK,
+      0.1
+    )};`,
+    baseHover: `0px 1px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
+    baseClick: `0px 4px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
+    insetStandard: `0px 1px 4px 2px ${rgba(BLACK, 0.1)}, 0px 2px 1px 0px ${rgba(
+      BLACK,
+      0.15
+    )};`,
+    insetHover: `0px 1px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
+    insetClick: `0px 4px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
+    linkShadowFocus: `0px 0px 5px 2px ${rgba(
+      themeValues.linkColor,
+      0.3
+    )}, 0px 1px 2px 0px ${rgba(
+      themeValues.linkColor,
+      0.3
+    )}, 0px 4px 8px 0px ${rgba(themeValues.linkColor, 0.2)};`,
+    overlayShadow: `0px 1px 8px -1px ${rgba(
+      BLACK,
+      0.3
+    )}, 0px 1px 4px 0px ${rgba(BLACK, 0.2)}, 0px 7px 32px 0px ${rgba(
+      BLACK,
+      0.2
+    )};`
+  };
+  return (
+    <Box boxShadow={shadowRegistry[variant]} {...props}>
+      {children}
+    </Box>
+  );
+};
+export default themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues);

package/src/components/atoms/box-with-shadow/BoxWithShadow.theme.js

@@ -0,0 +1,7 @@
+import { MATISSE_BLUE } from "../../../constants/colors";
+
+const linkColor = MATISSE_BLUE;
+
+export const fallbackValues = {
+  linkColor
+};

package/src/components/atoms/box-with-shadow/index.js

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

package/src/components/atoms/index.js

@@ -1,6 +1,7 @@
 export { default as AddObligation } from "./add-obligation";
 export { default as Alert } from "./alert";
 export { default as AmountCallout } from "./amount-callout";
+export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";

package/src/constants/colors.js

@@ -4,7 +4,7 @@ Need to add a new color? Visit http://chir.ag/projects/name-that-color to genera
 Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
 to the one generated by name-that-color.
 */
-
+const BLACK = "#000000";
 const TRANSPARENT = "transparent";
 // WHITE
 const WHITE = "#FFFFFF";
@@ -110,6 +110,7 @@ const ALERT_COLORS = {
 };
 
 export {
+  BLACK,
   TRANSPARENT,
   WHITE,
   SOLITUDE_WHITE,