@thecb/components 3.2.0 → 3.3.0

package/package.json

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

package/src/components/atoms/add-obligation/AddObligation.js

@@ -0,0 +1,59 @@
+import React from "react";
+import ButtonWithAction from "../button-with-action";
+import { Box, Center, Cluster, Cover } from "../layouts";
+import { IconAdd } from "../icons";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { fallbackValues } from "./AddObligation.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const AddObligation = ({
+  text,
+  action,
+  themeValues,
+  extraStyles,
+  textExtraStyles
+}) => {
+  const hoverStyles = `
+  &:hover {
+    .fill { fill: ${themeValues.hoverColor}; }
+    .stroke { stroke: ${themeValues.hoverColor}; }
+  }`;
+
+  const activeStyles = `
+   &:active {
+     .fill { fill: ${themeValues.activeColor}; }
+     .stroke { stroke: ${themeValues.activeColor}; }
+    }`;
+
+  const defaultStyles = `
+      min-height: 0;
+      .fill { fill: ${themeValues.color}; }
+      .stroke { stroke: ${themeValues.color}; }
+     `;
+  return (
+    <Box
+      className="button"
+      padding="0.5rem 0"
+      hoverStyles={hoverStyles}
+      activeStyles={activeStyles}
+      extraStyles={defaultStyles}
+    >
+      <Cover singleChild minHeight="100%">
+        <Cluster justify="center" align="center" minHeight="100%">
+          <IconAdd />
+          <Center intrinsic>
+            <ButtonWithAction
+              action={action}
+              text={text}
+              variant="smallGhost"
+              extraStyles={`min-height: 0; ${extraStyles}`}
+              textExtraStyles={`padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ${FONT_WEIGHT_SEMIBOLD}; ${textExtraStyles}`}
+            />
+          </Center>
+        </Cluster>
+      </Cover>
+    </Box>
+  );
+};
+
+export default themeComponent(AddObligation, "AddObligation", fallbackValues);

package/src/components/atoms/add-obligation/AddObligation.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import AddObligation from "./AddObligation";
+import page from "../../../../.storybook/page";
+
+export const addObligation = () => (
+  <AddObligation
+    text={text("text", "Lorem", "props")}
+    extraStyles={text("extraStyles", "", "props")}
+    textExtraStyles={text("textExtraStyles", "", "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/AddObligation",
+  Component: AddObligation
+});
+export default story;

package/src/components/atoms/add-obligation/AddObligation.theme.js

@@ -0,0 +1,9 @@
+const color = "#15749D";
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+
+export const fallbackValues = {
+  color,
+  hoverColor,
+  activeColor
+};

package/src/components/atoms/add-obligation/index.js

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

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

@@ -0,0 +1,36 @@
+import React from "react";
+
+const IconAdd = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    className="icon"
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
+      ></path>
+    </defs>
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+      <g transform="translate(-407 -563)">
+        <g transform="translate(408 562)">
+          <g transform="translate(0 2)">
+            <g transform="translate(3.94 3.858)">
+              <mask fill="#fff">
+                <use xlinkHref="#path-1"></use>
+              </mask>
+              <use className="fill" xlinkHref="#path-1"></use>
+            </g>
+            <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default IconAdd;

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

@@ -17,6 +17,7 @@ import CheckmarkIcon from "./CheckmarkIcon";
 import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
+import IconAdd from "./IconAdd";
 
 export {
   AccountsIcon,
@@ -37,5 +38,6 @@ export {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon
+  PaymentIcon,
+  IconAdd
 };

package/src/components/atoms/index.js

@@ -1,3 +1,4 @@
+export { default as AddObligation } from "./add-obligation";
 export { default as Alert } from "./alert";
 export { default as AmountCallout } from "./amount-callout";
 export { default as Breadcrumb } from "./breadcrumb";

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

@@ -1,15 +1,16 @@
-import React, { useContext } from "react";
-import { ThemeContext } from "styled-components";
+import React from "react";
 import { Link } from "react-router-dom";
 import Text from "../text";
-import { Box, Switcher, Center, Cluster } from "../layouts";
+import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { IconAdd } from "../../../deprecated/icons";
-import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
-import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
+import {
+  STORM_GREY,
+  GRECIAN_GREY,
+  CHARADE_GREY
+} from "../../../constants/colors";
+import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import withWindowSize from "../../withWindowSize";
 
 const PlaceholderContentWrapper = ({
   isLink,
@@ -40,30 +41,26 @@ const Placeholder = ({
   text,
   action,
   visible = true,
-  iconID,
   isLink = false,
   destination,
   variant,
   largeIcon,
   themeValues,
   dataQa
-}) => {
-  const { isMobile } = useContext(ThemeContext);
-
-  return (
-    <PlaceholderContentWrapper
-      isLink={isLink}
-      action={action}
-      destination={destination}
-      dataQa={dataQa}
-    >
-      <Box
-        padding="0"
-        borderRadius="4px"
-        border="none"
-        minHeight={themeValues.height}
-        hiddenStyles={!visible}
-        extraStyles={`
+}) => (
+  <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,
           ${STORM_GREY} 40%,
@@ -78,45 +75,65 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-        hoverStyles={`background-color: ${GRECIAN_GREY};`}
-      >
-        <Center maxWidth="300px">
-          <Box padding="0px 0px 0px 0px">
-            <Cluster justify="center" align="center" minHeight="100%">
-              <Switcher maxChildren={2} childGap="0">
-                {variant === "large" && <div></div>}
-                <Cluster justify="center" align="center" minHeight="100%">
-                  {variant === "large" ? (
-                    largeIcon === "accounts" ? (
+      hoverStyles={`background-color: ${GRECIAN_GREY};`}
+    >
+      <Center maxWidth="300px">
+        <Box padding="0px 0px 0px 0px">
+          <Cluster justify="center" align="center" minHeight="100%">
+            <Switcher maxChildren={2} childGap="0">
+              {variant === "large" && <div></div>}
+              <Box
+                padding="0"
+                extraStyles={`.fill { 
+                    fill: ${CHARADE_GREY}; 
+                  } .stroke { 
+                    stroke: ${CHARADE_GREY}; 
+                  }`}
+              >
+                {variant === "large" ? (
+                  <Center intrinsic>
+                    {largeIcon === "accounts" ? (
                       <AccountsAddIcon />
                     ) : (
                       <PropertiesAddIcon />
-                    )
-                  ) : (
-                    <IconAdd iconID={iconID} isMobile={isMobile} />
-                  )}
-                </Cluster>
-                <Center intrinsic>
-                  <Text
-                    variant="pS"
-                    color={themeValues.color}
-                    weight={FONT_WEIGHT_REGULAR}
-                    textAlign="center"
-                    extraStyles={variant !== "large" && `padding: 0 0 0 8px;`}
-                  >
-                    {text}
-                  </Text>
-                </Center>
-              </Switcher>
-            </Cluster>
-          </Box>
-        </Center>
-      </Box>
-    </PlaceholderContentWrapper>
-  );
-};
+                    )}
+                    <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(
-  withWindowSize(Placeholder),
+  Placeholder,
   "Placeholder",
   fallbackValues,
   "default"

package/src/deprecated/icons/index.js

@@ -1,4 +1,3 @@
-import { IconAdd } from "./IconAdd";
 import { IconWarn } from "./IconWarn";
 import { IconCheck } from "./IconCheck";
 import { IconCheckEmail } from "./IconCheckEmail";
@@ -24,7 +23,6 @@ const AlertIcons = {
 };
 
 export {
-  IconAdd,
   IconWarn,
   IconCheck,
   IconCheckEmail,