@thecb/components 12.0.0-beta.8 → 12.0.0

package/package.json

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

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

@@ -7,6 +7,7 @@ const AutopayOnIcon = ({ color = SEA_GREEN }) => (
     width="12"
     height="13"
     viewBox="0 0 12 13"
+    aria-hidden="true"
   >
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path

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

@@ -1,12 +1,9 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box, Stack } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
-import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
-import { noop } from "../../../util/general";
 import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
-import { Link } from "react-router-dom";
 
 const LinkCard = ({
   title = "Test Workflow",
@@ -23,29 +20,28 @@ const LinkCard = ({
   themeValues,
   titleVariant = "h3",
   disabled = false,
-  isExternalLink = false,
-  key
+  isExternalLink = false
 }) => {
-  const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
   const locatorSlug = title?.toLowerCase?.()?.replaceAll?.(regex, "-");
 
   return (
-    <Styled.LinkWrapper
-      key={key || locatorSlug}
-      as={Link}
-      to={disabled ? undefined : href}
-      role="link"
-      isMobile={isMobile}
-      $theme={themeValues}
-      extraStyles={extraStyles}
-      hoverStyles={extraHoverStyles}
-      activeStyles={extraActiveStyles}
+    <Styled.StyledAnchor
+      key={`link-card-${locatorSlug}`}
+      href={disabled ? undefined : href}
+      rel={isExternalLink ? "noopener noreferrer" : undefined}
+      target={isExternalLink ? "_blank" : undefined}
+      tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled}
-      disabled={disabled}
+      $disabled={disabled}
       aria-label={`${title}, ${subtitle}`}
       data-qa={`link-card-${locatorSlug}`}
-      tabIndex={disabled ? -1 : 0}
+      $theme={themeValues}
+      $extraStyles={
+        disabled ? `pointer-events: none; ${extraStyles}` : extraStyles
+      }
+      $hoverStyles={extraHoverStyles}
+      $activeStyles={extraActiveStyles}
     >
       <Stack
         childGap={0}
@@ -63,7 +59,7 @@ const LinkCard = ({
             variant={titleVariant}
             $theme={themeValues}
             margin={0}
-            disabled={disabled}
+            $disabled={disabled}
           >
             {title}
           </Styled.Title>
@@ -79,7 +75,7 @@ const LinkCard = ({
           <Styled.Subtitle
             variant="pS"
             $theme={themeValues}
-            disabled={disabled}
+            $disabled={disabled}
           >
             {subtitle}
           </Styled.Subtitle>
@@ -101,7 +97,7 @@ const LinkCard = ({
           </Styled.Footer>
         </Box>
       </Stack>
-    </Styled.LinkWrapper>
+    </Styled.StyledAnchor>
   );
 };
 

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

@@ -8,6 +8,7 @@ import {
 import { Box } from "../../atoms/layouts";
 import LinkCard from "./LinkCard";
 import Badge from "../../atoms/badge/Badge";
+import { fn } from "@storybook/test";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
 import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
 import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
@@ -27,7 +28,7 @@ const meta = {
     leftContent: undefined,
     showRight: undefined,
     rightContent: undefined,
-    href: "/example",
+    onClick: fn(),
     extraStyles: "",
     extraActiveStyles: "",
     extraHoverStyles: "",
@@ -78,10 +79,10 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
-    href: {
-      description: "Route path the LinkCard navigates to",
+    onClick: {
+      description: "Function to execute on click of LinkCard",
       table: {
-        type: { summary: "string" },
+        type: { summary: "function" },
         defaultValue: { summary: undefined }
       }
     },
@@ -89,7 +90,7 @@ const meta = {
       description: "Extra styles to apply to the LinkCard",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "" }
+        defaultValue: { summary: undefined }
       }
     },
     extraActiveStyles: {
@@ -97,7 +98,7 @@ const meta = {
         "Extra styles to apply to the LinkCard when it is in an active state",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "" }
+        defaultValue: { summary: undefined }
       }
     },
     extraHoverStyles: {
@@ -105,7 +106,7 @@ const meta = {
         "Extra styles to apply to the LinkCard when it is being hovered",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "" }
+        defaultValue: { summary: undefined }
       }
     },
     titleVariant: {
@@ -138,13 +139,14 @@ export default meta;
 export const BasicLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection",
-    href: "/construction-permits"
+    subtitle: "Cityville Department of Building Inspection"
   },
   render: args => {
     return (
       <LinkCard
         {...args}
+        key="link-card-basic"
+        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={false}
         leftContent={
@@ -194,13 +196,14 @@ export const BasicLinkCard = {
 export const ExternalLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection",
-    href: "/construction-permits"
+    subtitle: "Cityville Department of Building Inspection"
   },
   render: args => {
     return (
       <LinkCard
         {...args}
+        key="link-card-basic"
+        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={false}
         leftContent={
@@ -251,13 +254,13 @@ export const ExternalLinkCard = {
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",
-    subtitle: "Cityville Water Management",
-    href: "/water-bills"
+    subittle: "Cityville Water Management"
   },
   render: args => {
     return (
       <LinkCard
         {...args}
+        extraStyles={`transition: all .2s ease-in-out;`}
         extraHoverStyles={`.show-on-hover {opacity: 1}`}
         showLeft={true}
         leftContent={
@@ -290,7 +293,7 @@ export const CompleteLinkCard = {
               id={`workflow-two`}
               extraStyles={`
                 transition: opacity .2s ease-in-out; 
-                opacity: 0;
+                opacity: 0
               `}
             >
               {"Find"}
@@ -309,13 +312,13 @@ export const CompleteLinkCard = {
 export const DisabledLinkCard = {
   args: {
     title: "Property Tax - Autopay",
-    subtitle: "",
-    href: "/property-tax"
+    subtitle: ""
   },
   render: args => {
     return (
       <LinkCard
         {...args}
+        extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
         disabled={true}
         showLeft={true}
         leftContent={

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

@@ -6,16 +6,15 @@ import {
   FONT_WEIGHT_SEMIBOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { Link } from "react-router-dom";
 
-export const LinkWrapper = styled(Link)`
+export const StyledAnchor = styled("a")`
   ${({
-    disabled,
+    $disabled: disabled,
     $theme: theme,
-    extraStyles,
-    disabledStyles,
-    hoverStyles,
-    activeStyles
+    $extraStyles: extraStyles,
+    $disabledStyles: disabledStyles,
+    $hoverStyles: hoverStyles,
+    $activeStyles: activeStyles
   }) => `
   display: flex;
   flex-direction: column;
@@ -83,7 +82,7 @@ export const Title = styled(Heading)`
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  color: ${({ disabled, $theme: theme }) =>
+  color: ${({ $disabled: disabled, $theme: theme }) =>
     disabled ? theme.disabledColor : theme.color};
 `;
 
@@ -98,7 +97,7 @@ export const Subtitle = styled(Paragraph)`
   line-height: 150%;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  color: ${({ disabled, $theme: theme }) =>
+  color: ${({ $disabled: disabled, $theme: theme }) =>
     disabled ? theme.disabledColor : theme.textColor};
 `;
 

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

@@ -5,7 +5,8 @@ import {
   ROYAL_BLUE_VIVID,
   MANATEE_GREY,
   GHOST_GREY,
-  TRANSPARENT
+  TRANSPARENT,
+  BRIGHT_GREY
 } from "../../../constants/colors";
 
 const disabledBackgroundColor = TRANSPARENT;
@@ -15,6 +16,7 @@ const activeBackgroundColor = CORNFLOWER_BLUE;
 const backgroundColor = LINK_WATER;
 const borderColor = MOON_RAKER;
 const color = ROYAL_BLUE_VIVID;
+const textColor = BRIGHT_GREY;
 
 export const fallbackValues = {
   disabledBackgroundColor,
@@ -23,5 +25,6 @@ export const fallbackValues = {
   activeBackgroundColor,
   backgroundColor,
   borderColor,
-  color
+  color,
+  textColor
 };

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

@@ -98,12 +98,6 @@ const AutopayModalModule = ({
       : navigateToSettings,
     isLoading: deactivatingSchedule
   };
-  const modalLinkHoverFocus = `
-    outline: none;
-    cursor: pointer;
-    text-decoration: underline;
-    text-decoration-color: #317D4F;
-  `;
 
   const hoverStyles = "text-decoration: underline;";
   const activeStyles = "text-decoration: underline;";
@@ -144,15 +138,24 @@ const AutopayModalModule = ({
         return (
           <Box
             padding="0"
+            role="button"
+            tabIndex="0"
             onClick={
               onClick ||
               (() => {
                 toggleModal(true);
               })
             }
+            onKeyDown={
+              onKeyPress ||
+              (e => {
+                e.key === "Enter" && toggleModal(true);
+              })
+            }
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
-            extraStyles={"cursor: pointer;"}
+            extraStyles={"cursor: pointer; margin-bottom: 5px;"}
+            dataQa={`${shortPlan} On`}
           >
             <Cluster
               justify={isMobile ? "flex-start" : "flex-end"}
@@ -161,18 +164,8 @@ const AutopayModalModule = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={onClick || (() => toggleModal(true))}
-                onKeyPress={
-                  onKeyPress ||
-                  (e => {
-                    e.key === "Enter" && toggleModal(true);
-                  })
-                }
-                tabIndex="0"
-                dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
                 weight={FONT_WEIGHT_REGULAR}
-                hoverStyles={modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
                 disabled={disableActions}
               >