@thecb/components 9.1.5-beta.0 → 9.2.0-beta.0

package/package.json

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

package/src/components/atoms/line-item/LineItem.js

@@ -25,7 +25,7 @@ const LineItem = ({
 
   const visibleCustomAttrs = customAttributes
     ?.filter(
-      attr => visibleFields.includes(attr.key) && attr.key !== "description"
+      attr => visibleFields?.includes(attr.key) && attr.key !== "description"
     )
     ?.map(attr => (
       <Paragraph variant="pS" weight="400" key={attr.key} color={STORM_GREY}>

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,21 +24,19 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
-      outlineOffset: "2px"
+      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
-      outlineOffset: "2px"
+      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
     },
     on: {
       borderColor: themeValues.activeColor,
-      outline: "0"
+      boxShadow: "0px 0px 0px 0px #FFFFFF"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      outline: "0"
+      boxShadow: "0px 0px 0px 0px #FFFFFF"
     }
   };
 
@@ -99,7 +97,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="6px 14px 6px 6px"
+        margin="4px 14px 4px 4px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
+import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${STORM_GREY}`;
+const inactiveColor = `${GREY_CHATEAU}`;
 
 export const fallbackValues = {
   activeColor,

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -0,0 +1,90 @@
+import React from "react";
+
+// import CloseIcon from "../CloseIcon";
+// import ErrorIcon from "../ErrorMessage/ErrorIcon";
+// import SuccessIcon from "../SuccessMessage/SuccessIcon";
+// import { SEMI_BOLD } from "@/constants/fonts";
+// import { CloseIconWrapper } from "./ToastNotification.styled";
+import { Box, Cluster } from "../../atoms/layouts";
+import { Paragraph } from "../../atoms";
+import {
+  SuccessfulIconMedium,
+  ErroredIcon,
+  IconQuitLarge,
+  SuccessfulIconSmall,
+} from "../../atoms/icons";
+import { ERROR_COLOR, HINT_GREEN } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import styled from "styled-components";
+
+export const CloseIconWrapper = styled.div`
+  min-height: 24px;
+  min-width: 24px;
+  display: flex;
+  margin: 16px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const VARIANTS = {
+  SUCCESS: "success",
+  ERROR: "error",
+};
+
+const ToastNotification = ({
+  message = "",
+  extraStyles,
+  minWidth = "112px",
+  maxWidth = "350px",
+  height = "56px",
+  closeToastNotification,
+  toastOpen,
+  variant = VARIANTS.SUCCESS,
+  backgroundColor
+}) => (
+  <Box
+    onClick={closeToastNotification}
+    background={
+      backgroundColor
+        ? backgroundColor
+        : variant === VARIANTS.SUCCESS
+        ? HINT_GREEN
+        : variant === "error"
+        ? ERROR_COLOR
+        : WHITE
+    }
+    minWidth={minWidth}
+    minHeight={height && parseInt(height) < 100 ? height : "100px"}
+    height={height ? height : "auto"}
+    tabIndex={toastOpen ? "-1" : "0"}
+    padding="0"
+    borderRadius="4px"
+    boxShadow="0px 4px 4px rgba(41, 42, 51, 0.15),
+      0px 1px 7px rgba(41, 42, 51, 0.2),
+      0px 7px 12px rgba(41, 42, 51, 0.15)"
+    extraStyles={`
+      display: ${toastOpen ? "block" : "none"};
+      position: fixed; bottom: 4rem; left: 4rem;
+      ${extraStyles};
+    `}
+  >
+    <Cluster align="center" childGap="0">
+      {variant === "success" && <SuccessfulIconSmall />}
+      {variant === "error" && <ErroredIcon />}
+      <Box padding="1rem 0" maxWidth={maxWidth}>
+        <Paragraph
+          weight={FONT_WEIGHT_SEMIBOLD}
+          extraStyles={"word-break: break-word;"}
+        >
+          {message}
+        </Paragraph>
+      </Box>
+      <CloseIconWrapper>
+        <IconQuitLarge />
+      </CloseIconWrapper>
+    </Cluster>
+  </Box>
+);
+
+export default ToastNotification;

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import ToastNotification from "./ToastNotification";
+import page from "../../../../.storybook/page";
+
+export const toastNotificationSuccess = () => {
+  const [toastOpen, setToastOpen] = useState(true);
+  return (
+    <ToastNotification
+      toastOpen={toastOpen}
+      closeToastNotification={() => setToastOpen(false)}
+      message="Successful"
+      variant="success"
+    />
+  );
+};
+toastNotificationSuccess.storyName = "Success Toast";
+
+export const toastNotificationError = () => {
+  const [toastOpen, setToastOpen] = useState(true);
+  return (
+    <ToastNotification
+      toastOpen={toastOpen}
+      closeToastNotification={() => setToastOpen(false)}
+      message="Errored"
+      variant="error"
+    />
+  );
+};
+toastNotificationError.storyName = "Error Toast";
+
+const story = page({
+  title: "Components|Molecules/ToastNotification",
+  Component: ToastNotification
+});
+
+export default story;

package/src/components/molecules/toast-notification/index.d.ts

@@ -0,0 +1 @@
+// TODO - add types

package/src/components/molecules/toast-notification/index.js

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