@thecb/components 12.0.0-beta.6 → 12.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.0.0-beta.6",
+  "version": "12.0.0-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -8,7 +8,7 @@
   "source": "src/index.js",
   "scripts": {
     "storybook": "storybook dev -p 6006",
-  "build": "rollup -cm",
+    "build": "rollup -cm",
     "build-storybook": "storybook build"
   },
   "repository": {

package/src/components/atoms/card-type/CardType.js

@@ -45,11 +45,7 @@ const CardType = ({ type, size = "small" }) => {
   const normalizedType = normalizeType(type);
   const { label, [size]: IconComponent } =
     cardBrands[normalizedType] || cardBrands.default;
-  return (
-    <span>
-      <IconComponent />
-    </span>
-  );
+  return <IconComponent />;
 };
 
 export default CardType;

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.js

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./FormattedBankAccount.theme";
-import BankIcon from "../icons/BankIcon";
-import { Stack, Box } from "../layouts";
+import BankIconLarge from "../icons/BankIconLarge";
+import { Stack } from "../layouts";
 import Text from "../text";
 
 export const BankItemWrapper = styled.div`
@@ -11,6 +11,12 @@ export const BankItemWrapper = styled.div`
   justify-content: flex-start;
   align-items: center;
 `;
+export const BankIconWrapper = styled.div`
+  margin-right: 8px;
+  width: 36px;
+  height: auto;
+  display: flex;
+`;
 
 export const BankAccountText = styled.h4`
   color: ${({ color }) => color};
@@ -32,9 +38,9 @@ const FormattedBankAccount = ({
   themeValues
 }) => (
   <BankItemWrapper>
-    <Box padding="0.25rem 0 0 0" extraStyles={`margin-right: 1rem;`}>
-      <BankIcon />
-    </Box>
+    <BankIconWrapper>
+      <BankIconLarge />
+    </BankIconWrapper>
     <Stack childGap="0">
       {accountType === CHECKING && (
         <BankAccountText color={themeValues.textColor}>

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -14,7 +14,7 @@ export const CreditCardWrapper = styled.div`
 `;
 
 export const CCIconWrapper = styled.div`
-  margin-right: 16px;
+  margin-right: 8px;
   width: 36px;
   height: auto;
   display: flex;
@@ -30,36 +30,36 @@ const FormattedCreditCard = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
-  <CreditCardWrapper>
-    <CCIconWrapper>
-      <CardType type={type} size={isMobile ? "small" : "large"} />
-    </CCIconWrapper>
-    <Stack childGap="0">
-      <Box padding="0">
-        <Text
-          variant="p"
-          padding="0"
-          color={themeValues.textColor}
-          textAlign="left"
-          extraStyles={`display: inline-block;`}
-        >
-          {`Card ending in ${lastFour}`}
-        </Text>
-        {expireDate && (
-          <Fragment>
-            {renderCardStatus(expirationStatus, expireDate, "left", "p")}
-          </Fragment>
+    <CreditCardWrapper>
+      <CCIconWrapper>
+        <CardType type={type} size={isMobile ? "small" : "large"} />
+      </CCIconWrapper>
+      <Stack childGap="0">
+        <Box padding="0">
+          <Text
+            variant="p"
+            padding="0"
+            color={themeValues.textColor}
+            textAlign="left"
+            extraStyles={`display: inline-block;`}
+          >
+            {`Card ending in ${lastFour}`}
+          </Text>
+          {expireDate && (
+            <Fragment>
+              {renderCardStatus(expirationStatus, expireDate, "left", "p")}
+            </Fragment>
+          )}
+        </Box>
+        {autoPay && (
+          <Text
+            variant="p"
+            color={themeValues.autopayTextColor}
+            extraStyles={`font-style: italic; font-size: .75rem;`}
+          >{`Autopay On`}</Text>
         )}
-      </Box>
-      {autoPay && (
-        <Text
-          variant="p"
-          color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic; font-size: .75rem;`}
-        >{`Autopay On`}</Text>
-      )}
-    </Stack>
-  </CreditCardWrapper>
+      </Stack>
+    </CreditCardWrapper>
   );
 };
 export default themeComponent(

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

@@ -24,7 +24,8 @@ const InternalLink = forwardRef(
       hoverUnderline = true,
       extraHoverStyles = ``,
       extraActiveStyles = ``,
-      extraFocusStyles = ``
+      extraFocusStyles = ``,
+      ...rest
     },
     ref
   ) => {
@@ -57,6 +58,7 @@ const InternalLink = forwardRef(
         extraFocusStyles={extraFocusStyles}
         data-qa={dataQa}
         ref={ref}
+        {...rest}
       >
         {safeChildren(children, <span />)}
       </StyledInternalLink>

package/src/components/molecules/editable-list/EditableList.js

@@ -6,6 +6,7 @@ import {
 import { Box, Stack } from "../../atoms/layouts";
 import Placeholder from "../../atoms/placeholder";
 import ButtonWithAction from "../../atoms/button-with-action";
+import { InternalLink } from "../../atoms/link";
 import Text from "../../atoms/text";
 import Title from "../../atoms/title";
 import {
@@ -42,7 +43,8 @@ const EditableList = ({
   qaPrefix,
   ariaLabel,
   editItemAriaRole = "",
-  disablePlaceholder = false
+  disablePlaceholder = false,
+  getEditHref = null
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -150,14 +152,25 @@ const EditableList = ({
                       dataQa={qaPrefix + " Edit"}
                       key={`Edit ${item.id}`}
                     >
-                      <ButtonWithAction
-                        variant="smallGhost"
-                        text="Edit"
-                        action={() => editItem(item.id)}
-                        extraStyles={`min-width: 0;`}
-                        aria-label={`Edit ${ariaLabel || itemName}`}
-                        role={editItemAriaRole}
-                      />
+                      {getEditHref ? (
+                        <InternalLink
+                          to={getEditHref(item)}
+                          fontWeight="400"
+                          extraStyles={`margin: 0.5rem; min-width: 0;`}
+                          aria-label={`Edit ${ariaLabel || itemName}`}
+                        >
+                          Edit
+                        </InternalLink>
+                      ) : (
+                        <ButtonWithAction
+                          variant="smallGhost"
+                          text="Edit"
+                          action={() => editItem(item.id)}
+                          extraStyles={`min-width: 0;`}
+                          aria-label={`Edit ${ariaLabel || itemName}`}
+                          role={editItemAriaRole}
+                        />
+                      )}
                     </Box>
                   )}
                 </EditableListItemControls>

package/src/components/molecules/link-card/LinkCard.js

@@ -23,7 +23,8 @@ const LinkCard = ({
   themeValues,
   titleVariant = "h3",
   disabled = false,
-  isExternalLink = false
+  isExternalLink = false,
+  key
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
@@ -31,18 +32,20 @@ const LinkCard = ({
 
   return (
     <Styled.LinkWrapper
+      key={key || locatorSlug}
       as={Link}
       to={disabled ? undefined : href}
       role="link"
       isMobile={isMobile}
-      dataQa={`link-card-${locatorSlug}`}
-      theme={themeValues}
+      $theme={themeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
       aria-disabled={disabled}
-      isDisabled={disabled}
+      disabled={disabled}
       aria-label={`${title}, ${subtitle}`}
+      data-qa={`link-card-${locatorSlug}`}
+      tabIndex={disabled ? -1 : 0}
     >
       <Stack
         childGap={0}
@@ -58,9 +61,9 @@ const LinkCard = ({
         >
           <Styled.Title
             variant={titleVariant}
-            theme={themeValues}
+            $theme={themeValues}
             margin={0}
-            isDisabled={disabled}
+            disabled={disabled}
           >
             {title}
           </Styled.Title>
@@ -75,8 +78,8 @@ const LinkCard = ({
         <Box padding={subtitlePadding} width="100%">
           <Styled.Subtitle
             variant="pS"
-            theme={themeValues}
-            isDisabled={disabled}
+            $theme={themeValues}
+            disabled={disabled}
           >
             {subtitle}
           </Styled.Subtitle>

package/src/components/molecules/link-card/LinkCard.stories.js

@@ -5,7 +5,7 @@ import {
   ROYAL_BLUE_VIVID,
   SEA_GREEN
 } from "../../../constants/colors";
-import { Box, Grid } from "../../atoms/layouts";
+import { Box } from "../../atoms/layouts";
 import LinkCard from "./LinkCard";
 import Badge from "../../atoms/badge/Badge";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
@@ -89,7 +89,7 @@ const meta = {
       description: "Extra styles to apply to the LinkCard",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "" }
       }
     },
     extraActiveStyles: {
@@ -97,7 +97,7 @@ const meta = {
         "Extra styles to apply to the LinkCard when it is in an active state",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "" }
       }
     },
     extraHoverStyles: {
@@ -105,7 +105,7 @@ const meta = {
         "Extra styles to apply to the LinkCard when it is being hovered",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "" }
       }
     },
     titleVariant: {
@@ -145,8 +145,6 @@ export const BasicLinkCard = {
     return (
       <LinkCard
         {...args}
-        key="link-card-basic"
-        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={false}
         leftContent={
@@ -203,8 +201,6 @@ export const ExternalLinkCard = {
     return (
       <LinkCard
         {...args}
-        key="link-card-basic"
-        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={false}
         leftContent={
@@ -255,14 +251,13 @@ export const ExternalLinkCard = {
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",
-    subittle: "Cityville Water Management",
+    subtitle: "Cityville Water Management",
     href: "/water-bills"
   },
   render: args => {
     return (
       <LinkCard
         {...args}
-        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={true}
         leftContent={
@@ -295,7 +290,7 @@ export const CompleteLinkCard = {
               id={`workflow-two`}
               extraStyles={`
                 transition: opacity .2s ease-in-out; 
-                opacity: 0
+                opacity: 0;
               `}
             >
               {"Find"}
@@ -321,7 +316,6 @@ export const DisabledLinkCard = {
     return (
       <LinkCard
         {...args}
-        extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
         disabled={true}
         showLeft={true}
         leftContent={
@@ -370,138 +364,3 @@ export const DisabledLinkCard = {
     );
   }
 };
-
-export const LinkCardGrid = {
-  render: () => {
-    const sharedStyles = `transition: all .2s ease-in-out;`;
-    const sharedHoverStyles = `.show-on-hover {opacity: 1}`;
-
-    const rightSlot = (id, label, Icon, color) => (
-      <Box
-        data-qa={`find-or-pay-${id}`}
-        extraStyles={`
-          display: flex;
-          gap: 6px;
-          justify-content: space-between;
-          align-items: center;
-        `}
-        padding="0"
-        hoverStyles=".show-on-hover {opacity: 1;}"
-      >
-        <Text
-          variant="pS"
-          className="show-on-hover"
-          color={color}
-          id={`workflow-${id}`}
-          extraStyles={`
-            transition: opacity .2s ease-in-out;
-            opacity: 0
-          `}
-        >
-          {label}
-        </Text>
-        <Icon labelledBy={`workflow-${id}`} color={color} />
-      </Box>
-    );
-
-    return (
-      <Grid minColWidth={18} columnGap="1rem">
-        <LinkCard
-          title="Construction Permits"
-          subtitle="Cityville Department of Building Inspection"
-          href="/construction-permits"
-          extraStyles={sharedStyles}
-          extraHoverStyles={sharedHoverStyles}
-          showRight={true}
-          rightContent={rightSlot(
-            "permits",
-            "Pay",
-            ArrowRightIcon,
-            ROYAL_BLUE_VIVID
-          )}
-        />
-        <LinkCard
-          title="Water Bills"
-          subtitle="Cityville Water Management"
-          href="/water-bills"
-          extraStyles={sharedStyles}
-          extraHoverStyles={sharedHoverStyles}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant="success"
-              Icon={() => AutopayIcon({ fill: SEA_GREEN })}
-            />
-          }
-          showRight={true}
-          rightContent={rightSlot(
-            "water",
-            "Find",
-            PlusCircleIcon,
-            ROYAL_BLUE_VIVID
-          )}
-        />
-        <LinkCard
-          title="Property Tax"
-          subtitle="Cityville Revenue Department"
-          href="/property-tax"
-          extraStyles={sharedStyles}
-          extraHoverStyles={sharedHoverStyles}
-          showRight={true}
-          rightContent={rightSlot(
-            "tax",
-            "Pay",
-            ArrowRightIcon,
-            ROYAL_BLUE_VIVID
-          )}
-          isExternalLink={true}
-        />
-        <LinkCard
-          title="Business Licenses"
-          subtitle="Cityville Commerce Division"
-          href="/business-licenses"
-          extraStyles={sharedStyles}
-          extraHoverStyles={sharedHoverStyles}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant="success"
-              Icon={() => AutopayIcon({ fill: SEA_GREEN })}
-            />
-          }
-          showRight={true}
-          rightContent={rightSlot(
-            "licenses",
-            "Pay",
-            ArrowRightIcon,
-            ROYAL_BLUE_VIVID
-          )}
-        />
-        <LinkCard
-          title="Parking Fines"
-          subtitle="Cityville Transportation Authority"
-          href="/parking-fines"
-          disabled={true}
-          extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant="disabled"
-              Icon={() => AutopayIcon({ fill: MANATEE_GREY })}
-            />
-          }
-          showRight={true}
-          rightContent={rightSlot(
-            "parking",
-            "Find",
-            PlusCircleIcon,
-            COOL_GREY_05
-          )}
-        />
-      </Grid>
-    );
-  }
-};

package/src/components/molecules/link-card/LinkCard.styled.js

@@ -9,6 +9,14 @@ import {
 import { Link } from "react-router-dom";
 
 export const LinkWrapper = styled(Link)`
+  ${({
+    disabled,
+    $theme: theme,
+    extraStyles,
+    disabledStyles,
+    hoverStyles,
+    activeStyles
+  }) => `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -18,25 +26,23 @@ export const LinkWrapper = styled(Link)`
   align-self: stretch;
   border-radius: 8px;
   text-decoration: none;
-  ${({ isDisabled, theme }) => `
-    background-color: ${
-      isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor
-    };
-    border: 1px solid ${
-      isDisabled ? theme.disabledBorderColor : theme.borderColor
-    };
-  `}
-  ${({ extraStyles }) => extraStyles}
-  transition: all .2s ease-in-out;
+  background-color: ${
+    disabled ? theme.disabledBackgroundColor : theme.backgroundColor
+  };
+  border: 1px solid
+    ${disabled ? theme.disabledBorderColor : theme.borderColor};
+  transition: all 0.2s ease-in-out;
+  ${extraStyles || ""}
 
-  ${({ isDisabled, theme }) =>
-    isDisabled
+  ${
+    disabled
       ? `
         &:hover,
         &:active {
           cursor: default;
           box-shadow: none;
           border: 1px solid ${theme.disabledBorderColor};
+          ${disabledStyles || ""}
         }
       `
       : `
@@ -50,6 +56,7 @@ export const LinkWrapper = styled(Link)`
             0px 56px 31px 0px rgba(41, 42, 51, 0.01),
             0px 80px 33px 0px rgba(41, 42, 51, 0);
         }
+        ${hoverStyles || ""}
 
         &:hover:not(:active) {
           border: 1px solid ${theme.borderColor};
@@ -58,8 +65,11 @@ export const LinkWrapper = styled(Link)`
         &:active {
           background-color: ${theme.activeBackgroundColor};
           border: 1px solid ${theme.borderColor};
+          ${activeStyles || ""}
         }
-      `}
+      `
+  }
+  `}
 `;
 
 export const Title = styled(Heading)`
@@ -73,8 +83,8 @@ export const Title = styled(Heading)`
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ isDisabled, theme }) =>
-    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
+  color: ${({ disabled, $theme: theme }) =>
+    disabled ? theme.disabledColor : theme.color};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -88,8 +98,8 @@ export const Subtitle = styled(Paragraph)`
   line-height: 150%;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  ${({ isDisabled, theme }) =>
-    `color: ${isDisabled ? theme.disabledColor : theme.textColor};`};
+  color: ${({ disabled, $theme: theme }) =>
+    disabled ? theme.disabledColor : theme.textColor};
 `;
 
 export const Footer = styled(Stack)`

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

@@ -19,7 +19,7 @@ const IconsModule = ({
     Icon = iconsMap[icon];
   }
   return (
-    <Box padding="0 1rem 0 0">
+    <Box padding="0 1rem 0 0" aria-hidden="true">
       <Cluster justify="center" align="center">
         <Icon color={iconColor} />
       </Cluster>

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

@@ -105,7 +105,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="6px 14px 6px 6px"
+        margin="6px 8px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}