@thecb/components 12.0.0-beta.2 → 12.0.0-beta.3

package/package.json

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

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

@@ -4,8 +4,9 @@ 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 { SPACING } from "../../../constants/style_constants";
+import { Link } from "react-router-dom";
 
 const LinkCard = ({
   title = "Test Workflow",
@@ -15,33 +16,32 @@ const LinkCard = ({
   leftContent,
   showRight,
   rightContent,
+  href,
   extraStyles = "",
   extraHoverStyles = "",
   extraActiveStyles = "",
   themeValues,
   titleVariant = "h3",
   disabled = false,
-  isExternalLink = false,
-  href = ""
+  isExternalLink = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
   const locatorSlug = title?.toLowerCase?.()?.replaceAll?.(regex, "-");
 
   return (
-    <Styled.Container
-      as="a"
+    <Styled.LinkWrapper
+      as={Link}
+      to={disabled ? undefined : href}
       role="link"
-      href={disabled ? undefined : href}
-      tabIndex={disabled ? -1 : 0}
-      borderRadius="8px"
+      isMobile={isMobile}
       dataQa={`link-card-${locatorSlug}`}
-      themeValues={themeValues}
+      theme={themeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
       aria-disabled={disabled}
-      disabled={disabled}
+      isDisabled={disabled}
       aria-label={`${title}, ${subtitle}`}
     >
       <Stack
@@ -58,9 +58,9 @@ const LinkCard = ({
         >
           <Styled.Title
             variant={titleVariant}
-            themeValues={themeValues}
+            theme={themeValues}
             margin={0}
-            disabled={disabled}
+            isDisabled={disabled}
           >
             {title}
           </Styled.Title>
@@ -75,8 +75,8 @@ const LinkCard = ({
         <Box padding={subtitlePadding} width="100%">
           <Styled.Subtitle
             variant="pS"
-            themeValues={themeValues}
-            disabled={disabled}
+            theme={themeValues}
+            isDisabled={disabled}
           >
             {subtitle}
           </Styled.Subtitle>
@@ -98,7 +98,7 @@ const LinkCard = ({
           </Styled.Footer>
         </Box>
       </Stack>
-    </Styled.Container>
+    </Styled.LinkWrapper>
   );
 };
 

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

@@ -1,12 +1,11 @@
 import React from "react";
-import { Grid } from "../../atoms/layouts";
 import {
   COOL_GREY_05,
   MANATEE_GREY,
   ROYAL_BLUE_VIVID,
   SEA_GREEN
 } from "../../../constants/colors";
-import { Box } from "../../atoms/layouts";
+import { Box, Grid } from "../../atoms/layouts";
 import LinkCard from "./LinkCard";
 import Badge from "../../atoms/badge/Badge";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
@@ -28,7 +27,7 @@ const meta = {
     leftContent: undefined,
     showRight: undefined,
     rightContent: undefined,
-    href: "#",
+    href: "/example",
     extraStyles: "",
     extraActiveStyles: "",
     extraHoverStyles: "",
@@ -80,10 +79,10 @@ const meta = {
       }
     },
     href: {
-      description: "URL or path the LinkCard navigates to",
+      description: "Route path the LinkCard navigates to",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "" }
+        defaultValue: { summary: undefined }
       }
     },
     extraStyles: {
@@ -125,7 +124,7 @@ const meta = {
     },
     isExternalLink: {
       description:
-        "Whether the link associated with the LinkCard is external or not. External links have an external link icon displayed in the top right corner.",
+        "Whether the LinkCard uses an external link, default is internal",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: false }
@@ -198,7 +197,7 @@ export const ExternalLinkCard = {
   args: {
     title: "Construction Permits",
     subtitle: "Cityville Department of Building Inspection",
-    href: "https://example.com/construction-permits"
+    href: "/construction-permits"
   },
   render: args => {
     return (
@@ -253,165 +252,10 @@ export const ExternalLinkCard = {
   }
 };
 
-export const GridOfLinkCards = {
-  args: {
-    title: "Water Bills - Autopay",
-    subtitle: "Cityville Water Management",
-    href: "/water-bills"
-  },
-  render: args => {
-    return (
-      <Grid columnGap="40px">
-        <LinkCard
-          {...args}
-          extraStyles={`transition: all .2s ease-in-out;`}
-          extraHoverStyles={`.show-on-hover {opacity: 1}`}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant={"success"}
-              Icon={() =>
-                AutopayIcon({
-                  fill: SEA_GREEN
-                })
-              }
-            />
-          }
-          showRight={true}
-          rightContent={
-            <Box
-              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={ROYAL_BLUE_VIVID}
-                id={`workflow-two`}
-                extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-              >
-                {"Find"}
-              </Text>
-              <PlusCircleIcon
-                labelledBy={`workflow-two`}
-                color={ROYAL_BLUE_VIVID}
-              />
-            </Box>
-          }
-        />
-        <LinkCard
-          {...args}
-          extraStyles={`transition: all .2s ease-in-out;`}
-          extraHoverStyles={`.show-on-hover {opacity: 1}`}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant={"success"}
-              Icon={() =>
-                AutopayIcon({
-                  fill: SEA_GREEN
-                })
-              }
-            />
-          }
-          showRight={true}
-          rightContent={
-            <Box
-              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={ROYAL_BLUE_VIVID}
-                id={`workflow-two`}
-                extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-              >
-                {"Find"}
-              </Text>
-              <PlusCircleIcon
-                labelledBy={`workflow-two`}
-                color={ROYAL_BLUE_VIVID}
-              />
-            </Box>
-          }
-        />
-        <LinkCard
-          {...args}
-          extraStyles={`transition: all .2s ease-in-out;`}
-          extraHoverStyles={`.show-on-hover {opacity: 1}`}
-          showLeft={true}
-          leftContent={
-            <Badge
-              label="Autopay Available"
-              variant={"success"}
-              Icon={() =>
-                AutopayIcon({
-                  fill: SEA_GREEN
-                })
-              }
-            />
-          }
-          showRight={true}
-          rightContent={
-            <Box
-              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={ROYAL_BLUE_VIVID}
-                id={`workflow-two`}
-                extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-              >
-                {"Find"}
-              </Text>
-              <PlusCircleIcon
-                labelledBy={`workflow-two`}
-                color={ROYAL_BLUE_VIVID}
-              />
-            </Box>
-          }
-        />
-      </Grid>
-    );
-  }
-};
-
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",
-    subtitle: "Cityville Water Management",
+    subittle: "Cityville Water Management",
     href: "/water-bills"
   },
   render: args => {
@@ -526,3 +370,138 @@ 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

@@ -2,43 +2,44 @@ import styled from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
-import { Box } from "../../atoms/layouts";
 import {
-  SPACING,
-  FONT_SIZE,
-  BORDER_THIN,
-  FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
+import { Link } from "react-router-dom";
 
-export const Container = styled(Box)`
+export const LinkWrapper = styled(Link)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
+  gap: 40px;
+  flex-shrink: 0;
+  padding: 24px;
+  max-width: ${({ isMobile }) => (isMobile ? "100%" : "288px")};
+  min-width: ${({ isMobile }) => (isMobile ? "240px" : "288px")};
+  min-height: 141px;
   align-self: stretch;
   border-radius: 8px;
-  padding: 24px;
-  ${({ disabled, themeValues }) => `
+  text-decoration: none;
+  ${({ isDisabled, theme }) => `
     background-color: ${
-      disabled
-        ? themeValues.disabledBackgroundColor
-        : themeValues.backgroundColor
+      isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor
     };
     border: 1px solid ${
-      disabled ? themeValues.disabledBorderColor : themeValues.borderColor
+      isDisabled ? theme.disabledBorderColor : theme.borderColor
     };
   `}
-  text-decoration: none;
-  transition: all 0.2s ease-in-out;
+  transition: all .2s ease-in-out;
 
-  ${({ disabled, themeValues }) =>
-    disabled
+  ${({ isDisabled, theme }) =>
+    isDisabled
       ? `
         &:hover,
         &:active {
           cursor: default;
           box-shadow: none;
-          border: 1px solid ${themeValues.disabledBorderColor};
+          border: 1px solid ${theme.disabledBorderColor};
         }
       `
       : `
@@ -54,12 +55,12 @@ export const Container = styled(Box)`
         }
 
         &:hover:not(:active) {
-          border: 1px solid ${themeValues.borderColor};
+          border: 1px solid ${theme.borderColor};
         }
 
         &:active {
-          background-color: ${themeValues.activeBackgroundColor};
-          border: ${BORDER_THIN} solid ${themeValues.borderColor};
+          background-color: ${theme.activeBackgroundColor};
+          border: 1px solid ${theme.borderColor};
         }
       `}
 `;
@@ -71,12 +72,12 @@ export const Title = styled(Heading)`
   align-self: stretch;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: ${FONT_SIZE.MD};
+  font-size: 16px;
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ disabled, themeValues }) =>
-    `color: ${disabled ? themeValues.disabledColor : themeValues.color};`};
+  ${({ isDisabled, theme }) =>
+    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -86,12 +87,12 @@ export const Subtitle = styled(Paragraph)`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   align-self: stretch;
-  font-size: ${FONT_SIZE.SM};
+  font-size: 14px;
   line-height: 150%;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  ${({ disabled, themeValues }) =>
-    `color: ${disabled ? themeValues.disabledColor : themeValues.textColor};`};
+  ${({ isDisabled, theme }) =>
+    `color: ${isDisabled ? theme.disabledColor : theme.textColor};`};
 `;
 
 export const Footer = styled(Stack)`

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

@@ -1,11 +1,11 @@
 import {
   CORNFLOWER_BLUE,
   LINK_WATER,
+  MOON_RAKER,
   ROYAL_BLUE_VIVID,
   MANATEE_GREY,
   GHOST_GREY,
-  TRANSPARENT,
-  BRIGHT_GREY
+  TRANSPARENT
 } from "../../../constants/colors";
 
 const disabledBackgroundColor = TRANSPARENT;
@@ -13,9 +13,8 @@ const disabledBorderColor = GHOST_GREY;
 const disabledColor = MANATEE_GREY;
 const activeBackgroundColor = CORNFLOWER_BLUE;
 const backgroundColor = LINK_WATER;
-const borderColor = MANATEE_GREY;
+const borderColor = MOON_RAKER;
 const color = ROYAL_BLUE_VIVID;
-const textColor = BRIGHT_GREY;
 
 export const fallbackValues = {
   disabledBackgroundColor,
@@ -24,6 +23,5 @@ export const fallbackValues = {
   activeBackgroundColor,
   backgroundColor,
   borderColor,
-  color,
-  textColor
+  color
 };

package/src/components/molecules/link-card/index.d.ts

@@ -10,13 +10,11 @@ export interface LinkCardProps {
   leftContent?: JSX.Element;
   showRight?: boolean;
   rightContent?: JSX.Element;
-  href: string;
+  onClick: () => void;
   extraHoverStyles?: string;
   extraStyles?: string;
   extraActiveStyles?: string;
   titleVariant?: string;
-  disabled?: boolean;
-  isExternalLink?: boolean;
 }
 
 export const LinkCard: React.FC<Expand<LinkCardProps> &