@thecb/components 5.9.1 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.9.1",
+  "version": "5.10.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -30,14 +30,14 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
     "@rollup/plugin-json": "^4.0.3",
-    "@storybook/addon-a11y": "5.3.14",
-    "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-docs": "^6.4.22",
     "@storybook/addon-knobs": "^5.3.14",
-    "@storybook/addon-storysource": "^5.3.14",
-    "@storybook/addon-viewport": "^5.3.14",
-    "@storybook/react": "^5.3.14",
+    "@storybook/addon-storysource": "^6.4.22",
+    "@storybook/addon-viewport": "^6.4.22",
+    "@storybook/react": "^6.4.22",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -52,7 +52,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "6.0.0-alpha.3",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
@@ -60,13 +60,13 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "storybook": "^5.3.14",
+    "storybook": "^6.4.22",
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "6.0.0-alpha.3",
+    "react-router-dom": "^6.3.0",
     "styled-theming": "^2.2.0"
   },
   "husky": {

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,4 +1,4 @@
-const color = "#15749D";
+const color = "#292A33";
 
 export const fallbackValues = {
   color

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

@@ -64,6 +64,7 @@ const ButtonWithAction = ({
   action = noop,
   variant = "primary",
   text,
+  textWrap = false,
   isLoading = false,
   dataQa = null,
   textExtraStyles,
@@ -143,6 +144,7 @@ const ButtonWithAction = ({
               weight={themeValues.fontWeight}
               variant={themeValues.fontSizeVariant}
               color={themeValues.color}
+              textWrap={textWrap}
               extraStyles={textExtraStyles}
             >
               {text}

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -12,6 +12,7 @@ const ButtonWithLink = ({
   extraStyles,
   linkExtraStyles,
   newTab = false,
+  dataQa,
   ...otherProps
 }) => {
   const ButtonWithLinkWrapper = ({
@@ -19,6 +20,7 @@ const ButtonWithLink = ({
     url,
     disabled,
     newTab,
+    dataQa,
     extraStyles
   }) => {
     if (disabled) {
@@ -30,11 +32,17 @@ const ButtonWithLink = ({
         tabIndex="-1"
         newTab={newTab}
         extraStyles={extraStyles}
+        dataQa={dataQa}
       >
         {safeChildren(children, <span />)}
       </ExternalLink>
     ) : (
-      <InternalLink to={url} tabIndex="-1" extraStyles={extraStyles}>
+      <InternalLink
+        to={url}
+        tabIndex="-1"
+        dataQa={dataQa}
+        extraStyles={extraStyles}
+      >
         {safeChildren(children, <span />)}
       </InternalLink>
     );
@@ -47,6 +55,7 @@ const ButtonWithLink = ({
       newTab={newTab}
       extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {
         text-decoration: none; }`}
+      dataQa={dataQa}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
     </ButtonWithLinkWrapper>

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

@@ -1,8 +1,7 @@
 import React from "react";
-import { fallbackValues } from "./Icons.theme";
-import { themeComponent } from "../../../util/themeUtils";
+import { SEA_GREEN } from "../../../constants/colors";
 
-const AutopayOnIcon = ({ themeValues }) => (
+const AutopayOnIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="12"
@@ -12,7 +11,7 @@ const AutopayOnIcon = ({ themeValues }) => (
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path
         className="autopayIcon"
-        fill={themeValues.primaryColor}
+        fill={SEA_GREEN}
         fillRule="nonzero"
         d="M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
       ></path>
@@ -20,9 +19,4 @@ const AutopayOnIcon = ({ themeValues }) => (
   </svg>
 );
 
-export default themeComponent(
-  AutopayOnIcon,
-  "Icons",
-  fallbackValues,
-  "primary"
-);
+export default AutopayOnIcon;

package/src/components/atoms/layouts/Box.styled.js

@@ -35,8 +35,8 @@ export const BoxWrapper = styled(
   position: relative;
   box-sizing: border-box;
   padding: ${({ padding }) => padding};
-  border: ${({ borderSize, borderColor }) =>
-    `${borderSize} solid ${borderColor}`};
+  border: ${({ border, borderSize, borderColor }) =>
+    border ? border : `${borderSize} solid ${borderColor}`};
   box-shadow: ${({ boxShadow }) => boxShadow};
   background-color: ${({ background }) => background};
   min-height: ${({ minHeight }) => (minHeight ? minHeight : "auto")};
@@ -45,9 +45,7 @@ export const BoxWrapper = styled(
   max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : "auto")};
   color: ${({ color }) => color};
   border-radius: ${({ borderRadius }) => borderRadius};
-  border-width: ${({ borderWidthOverride, borderSize }) =>
-    borderWidthOverride ? borderWidthOverride : borderSize};
-  border: ${({ border }) => border};
+  border-width: ${({ borderWidthOverride }) => borderWidthOverride};
   text-align: ${({ textAlign }) => textAlign};
 
   &:hover {

package/src/components/atoms/layouts/Cluster.js

@@ -40,7 +40,7 @@ const Cluster = ({
       childGap={childGap}
       minHeight={minHeight}
       minWidth={minWidth}
-      nowrap={nowrap}
+      $nowrap={nowrap}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/atoms/layouts/Cluster.styled.js

@@ -16,7 +16,7 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 export const ClusterInnerWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: ${({ nowrap }) => (nowrap ? "nowrap" : "wrap")};
+  flex-wrap: ${({ $nowrap }) => ($nowrap ? "nowrap" : "wrap")};
   justify-content: ${({ justify }) => justify};
   align-items: ${({ align }) => align};
   margin: calc(${({ childGap }) => childGap} / 2 * -1);

package/src/components/atoms/layouts/examples/cluster-example/ClusterExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { text, radios } from "@storybook/addon-knobs";
 import ClusterExample from "./ClusterExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -8,10 +8,9 @@ import ResizingContainer from "../ResizingContainer";
 import LayoutContentBlock from "../LayoutContentBlock";
 
 export default {
-  title: "Layouts|Basic Layouts/Cluster",
+  title: "Layouts/Basic Layouts/Cluster",
   component: ClusterExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -59,9 +58,7 @@ export const basicCluster = () => (
   </ResizingContainer>
 );
 
-basicCluster.story = {
-  name: "Resizing Nav Cluster"
-};
+basicCluster.storyName = "Resizing Nav Cluster";
 
 export const formButtonCluster = () => (
   <FixedSizeContainer
@@ -75,9 +72,7 @@ export const formButtonCluster = () => (
   </FixedSizeContainer>
 );
 
-formButtonCluster.story = {
-  name: "Form Button Cluster"
-};
+formButtonCluster.storyName = "Form Button Cluster";
 
 export const formInputCluster = () => (
   <ResizingContainer
@@ -92,6 +87,4 @@ export const formInputCluster = () => (
   </ResizingContainer>
 );
 
-formInputCluster.story = {
-  name: "Form Input Cluster"
-};
+formInputCluster.storyName = "Form Input Cluster";

package/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.js

@@ -27,9 +27,7 @@ export const cover = () => (
   </Cover>
 );
 
-cover.story = {
-  name: "Cover with Multiple Children"
-};
+cover.storyName = "Cover with Multiple Children";
 
 export const coverSingleChild = () => (
   <Cover
@@ -48,6 +46,4 @@ export const coverSingleChild = () => (
   </Cover>
 );
 
-coverSingleChild.story = {
-  name: "Cover with Single Child"
-};
+coverSingleChild.storyName = "Cover with Single Child";

package/src/components/atoms/layouts/examples/grid-example/GridExample.stories.js

@@ -1,15 +1,14 @@
 import React from "react";
-import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import { text, radios, number } from "@storybook/addon-knobs";
 import GridExample from "./GridExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
 import ResizingContainer from "../ResizingContainer";
 
 export default {
-  title: "Layouts|Basic Layouts/Grid",
+  title: "Layouts/Basic Layouts/Grid",
   component: GridExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -39,6 +38,4 @@ export const basicGrid = () => (
   </ResizingContainer>
 );
 
-basicGrid.story = {
-  name: "Grid of cards"
-};
+basicGrid.storyName = "Grid of cards";

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { text, radios } from "@storybook/addon-knobs";
 import SidebarExample from "./SidebarExample";
 //import Stack from "../../Stack";
 import Switcher from "../../Switcher";
@@ -10,10 +10,9 @@ import ResizingContainer from "../ResizingContainer";
 import LayoutContentBlock from "../LayoutContentBlock";
 
 export default {
-  title: "Layouts|Basic Layouts/Sidebar",
+  title: "Layouts/Basic Layouts/Sidebar",
   component: SidebarExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -82,6 +81,4 @@ export const basicSidebar = () => (
   </ResizingContainer>
 );
 
-basicSidebar.story = {
-  name: "Sidebar and content"
-};
+basicSidebar.storyName = "Sidebar and content";

package/src/components/atoms/layouts/examples/stack-example/StackExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, number, boolean } from "@storybook/addon-knobs";
+import { text, number, boolean } from "@storybook/addon-knobs";
 import StackExample from "./StackExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -7,10 +7,9 @@ import FixedSizeContainer from "../FixedSizeContainer";
 import { TROUT_GREY } from "../../../../../constants/colors";
 
 export default {
-  title: "Layouts|Basic Layouts/Stack",
+  title: "Layouts/Basic Layouts/Stack",
   component: StackExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -36,9 +35,7 @@ export const basicStack = () => (
   </FixedSizeContainer>
 );
 
-basicStack.story = {
-  name: "Basic Stack"
-};
+basicStack.storyName = "Basic Stack";
 
 export const bottomItemStack = () => (
   <FixedSizeContainer
@@ -50,9 +47,7 @@ export const bottomItemStack = () => (
   </FixedSizeContainer>
 );
 
-bottomItemStack.story = {
-  name: "Bottom Item Stack"
-};
+bottomItemStack.storyName = "Bottom Item Stack";
 
 export const splitStack = () => (
   <FixedSizeContainer
@@ -64,6 +59,4 @@ export const splitStack = () => (
   </FixedSizeContainer>
 );
 
-splitStack.story = {
-  name: "Split Stack"
-};
+splitStack.storyName = "Split Stack";

package/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import { text, radios, number } from "@storybook/addon-knobs";
 import SwitcherExample from "./SwitcherExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -7,10 +7,9 @@ import FixedSizeContainer from "../FixedSizeContainer";
 import ResizingContainer from "../ResizingContainer";
 
 export default {
-  title: "Layouts|Basic Layouts/Switcher",
+  title: "Layouts/Basic Layouts/Switcher",
   component: SwitcherExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -42,9 +41,7 @@ export const basicSwitcher = () => (
   </ResizingContainer>
 );
 
-basicSwitcher.story = {
-  name: "Resizing Switcher"
-};
+basicSwitcher.storyName = "Resizing Switcher";
 
 export const childLimitSwitcher = () => (
   <FixedSizeContainer
@@ -60,6 +57,4 @@ export const childLimitSwitcher = () => (
   </FixedSizeContainer>
 );
 
-childLimitSwitcher.story = {
-  name: "Limited Children Switcher"
-};
+childLimitSwitcher.storyName = "Limited Children Switcher";

package/src/components/atoms/link/ExternalLink.js

@@ -15,6 +15,7 @@ const ExternalLink = ({
   extraStyles = ``,
   variant = "primary",
   tabIndex = "0",
+  dataQa,
   children
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -39,6 +40,7 @@ const ExternalLink = ({
       tabIndex={tabIndex}
       extrastyles={extraStyles}
       rel={newTab ? "noopener" : ""}
+      data-qa={dataQa}
     >
       {safeChildren(children, <span />)}
     </StyledExternalLink>

package/src/components/atoms/link/InternalLink.js

@@ -16,6 +16,7 @@ const InternalLink = ({
   variant = "primary",
   margin,
   tabIndex = "0",
+  dataQa,
   extraStyles = ``
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -40,6 +41,7 @@ const InternalLink = ({
       activeColor={themeValues.activeColor}
       tabIndex={tabIndex}
       extrastyles={extraStyles}
+      data-qa={dataQa}
     >
       {safeChildren(children, <span />)}
     </StyledInternalLink>

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

@@ -21,7 +21,7 @@ const PlaceholderContentWrapper = ({
   dataQa
 }) =>
   isLink ? (
-    <Link to={destination} dataQa={dataQa}>
+    <Link to={destination} data-qa={dataQa}>
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>

package/src/components/atoms/text/Text.js

@@ -10,6 +10,7 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
+  textWrap = true,
   extraStyles = ``,
   hoverStyles,
   onClick,
@@ -30,6 +31,7 @@ const Text = ({
     onClick={onClick}
     onKeyPress={onKeyPress}
     data-qa={dataQa}
+    $textWrap={textWrap}
     {...rest}
   >
     {safeChildren(children, <span />)}

package/src/components/atoms/text/Text.styled.js

@@ -8,6 +8,7 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
+  white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {
     ${({ hoverStyles }) =>

package/src/components/molecules/obligation/Obligation.js

@@ -1,6 +1,11 @@
 import React from "react";
 import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
-import { WHITE, BRIGHT_GREY, ATHENS_GREY } from "../../../constants/colors";
+import {
+  WHITE,
+  BRIGHT_GREY,
+  ATHENS_GREY,
+  GRECIAN_GREY
+} from "../../../constants/colors";
 import {
   IconModule,
   TitleModule,
@@ -25,26 +30,43 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  isActive = true,
+  dueDate,
+  agencyName,
+  inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = ""
 }) => {
-  const obligation = obligations[0];
-  const { customAttributes } = obligation;
+  /*
+    The value of obligations is always an array. It can contain:
+      - A single obligation
+      - A group of obligations (a "collection")
+    
+    The top level desc/subdesc for all obligations in a collection is the same
+    (Collection accounts look different in the Account Details page)
+  */
+  const firstObligation = obligations[0];
+  const customAttributes = firstObligation?.customAttributes ?? {};
   const boxShadowValue =
-    "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+    "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   const activeObligation = (
     <Box
       padding="0"
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${obligation.description} ${obligation.subDescription}`}
+      aria-label={`${firstObligation?.description ??
+        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
+      border={`1px solid ${GRECIAN_GREY}`}
+      borderWidthOverride="1px 0 0 0"
     >
-      <Box background={WHITE}>
+      <Box background={WHITE} padding={isMobile ? "16px" : "24px 16px"}>
         <Stack childGap="14px">
-          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+          <Box
+            key={`${firstObligation?.id}-top`}
+            padding="0 8px"
+            minWidth="100%"
+          >
             <Cluster
               justify="space-between"
               align="center"
@@ -63,8 +85,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={obligation.description}
-                    subtitle={obligation.subDescription}
+                    title={firstObligation?.description}
+                    subtitle={firstObligation?.subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -72,7 +94,7 @@ const Obligation = ({
               </Box>
               {!isMobile && (
                 <AmountModule
-                  totalAmountDue={obligations.reduce(
+                  totalAmountDue={obligations?.reduce(
                     (acc, curr) => acc + curr.amountDue,
                     0
                   )}
@@ -103,6 +125,7 @@ const Obligation = ({
               isMobile={isMobile}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
+              obligationAssocID={obligationAssocID}
             />
           )}
         </Stack>
@@ -122,6 +145,7 @@ const Obligation = ({
           isMobile={isMobile}
           isPaymentPlan={isPaymentPlan}
           nextAutopayDate={nextAutopayDate}
+          obligationAssocID={obligationAssocID}
         />
       )}
     </Box>
@@ -135,17 +159,17 @@ const Obligation = ({
       as="section"
       aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
     >
-      <Box background={ATHENS_GREY}>
+      <Box background={ATHENS_GREY} padding={isMobile ? "16px" : "24px"}>
         <Stack childGap="14px">
-          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+          <Box key={`${obligationAssocID}-top`} padding="0" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
-              childGap="4px"
+              childGap="40px"
               nowrap
             >
               <Box padding="0">
-                <Cluster justify="flex-start" align="center">
+                <Cluster justify="flex-start" align="center" nowrap>
                   <IconModule
                     icon={config.icon}
                     iconDefault={config.iconDefault}
@@ -174,6 +198,9 @@ const Obligation = ({
                   isMobile={isMobile}
                   nextAutopayDate={nextAutopayDate}
                   obligationAssocID={obligationAssocID}
+                  dueDate={dueDate}
+                  agencyName={agencyName}
+                  configType={config.type}
                 />
               )}
             </Cluster>
@@ -190,6 +217,9 @@ const Obligation = ({
               isMobile={isMobile}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              dueDate={dueDate}
+              agencyName={agencyName}
+              configType={config.type}
             />
           )}
         </Stack>
@@ -197,7 +227,7 @@ const Obligation = ({
     </Box>
   );
 
-  return isActive ? activeObligation : inactiveObligation;
+  return inactive ? inactiveObligation : activeObligation;
 };
 
 export default Obligation;

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -42,6 +42,7 @@ const AmountModule = ({
             paymentPlanSchedule={paymentPlanSchedule}
             isPaymentPlan={isPaymentPlan}
             nextAutopayDate={nextAutopayDate}
+            controlType="link"
           />
         )}
       </Stack>