@thecb/components 12.0.1-beta.1 → 12.0.1

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -101,6 +101,7 @@ const Checkbox = forwardRef(
       themeValues,
       hidden = false,
       error = false,
+      isRequired = false,
       checkboxMargin = "0 16px 0 0",
       extraStyles,
       textExtraStyles,
@@ -130,6 +131,13 @@ const Checkbox = forwardRef(
         ref={ref}
         padding="0"
         tabIndex="0"
+        role="checkbox"
+        aria-checked={checked}
+        aria-required={isRequired || undefined}
+        aria-invalid={error}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledById}
+        aria-describedby={error ? `${name}-error-message` : undefined}
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
         onKeyDown={e => handleClick(e, onChange)}
@@ -150,20 +158,17 @@ const Checkbox = forwardRef(
               id={`checkbox-${name}`}
               disabled={disabled}
               name={name}
-              aria-label={ariaLabel}
-              aria-labelledby={ariaLabelledById}
               checked={checked}
               onChange={onChange}
               tabIndex="-1"
-              aria-invalid={error}
-              aria-describedby={error ? `${name}-error-message` : ""}
+              required={isRequired}
+              aria-hidden="true"
             />
             <StyledCheckbox
-              role="checkbox"
+              aria-hidden="true"
               error={error}
               disabled={disabled}
               checked={checked}
-              aria-checked={checked}
               focused={focused}
               defaultStyles={themeValues.defaultStyles}
               checkedStyles={themeValues.checkedStyles}

package/src/components/atoms/form-layouts/FormInput.js

@@ -224,6 +224,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
+            aria-required={isRequired}
             onChange={value => setValue(value)}
             onBlur={e => handleOnBlur(e.target.value)}
             type={type}
@@ -265,6 +266,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
+            aria-required={isRequired}
             onChange={e => setValue(e.target.value)}
             onBlur={e => handleOnBlur(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { Box, Stack } from "../../atoms/layouts";
-import { ExternalLink, InternalLink } from "../../atoms/link";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
 import * as Styled from "./LinkCard.styled";
@@ -26,102 +25,79 @@ const LinkCard = ({
   const regex = /\W/g;
   const locatorSlug = title?.toLowerCase?.()?.replaceAll?.(regex, "-");
 
-  const baseStyles = Styled.getCardBaseStyles(
-    themeValues,
-    disabled,
-    extraStyles
-  );
-  const hoverActiveStyles = Styled.getCardHoverActiveStyles(
-    themeValues,
-    disabled,
-    extraHoverStyles,
-    extraActiveStyles
-  );
-
-  const cardContent = (
-    <Stack
-      childGap={0}
-      bottomItem={3}
-      justify="space-between"
-      style={{ width: "100%" }}
-      fullHeight
-    >
-      <Stack
-        direction="row"
-        childGap="0.5rem"
-        extraStyles={`align-items: center;`}
-      >
-        <Styled.Title
-          variant={titleVariant}
-          $theme={themeValues}
-          margin={0}
-          $disabled={disabled}
-        >
-          {title}
-        </Styled.Title>
-        {isExternalLink && (
-          <ExternalLinkIcon
-            linkColor={themeValues.color}
-            text={locatorSlug}
-            style={{ height: "1.125rem", width: "1.125rem" }}
-          />
-        )}
-      </Stack>
-      <Box padding={subtitlePadding} width="100%">
-        <Styled.Subtitle variant="pS" $theme={themeValues} $disabled={disabled}>
-          {subtitle}
-        </Styled.Subtitle>
-      </Box>
-      <Box
-        background="transparent"
-        borderWidthOverride="0 0 0 0"
-        padding="0"
-        width="100%"
-      >
-        <Styled.Footer direction="row" childGap="6px" justify="space-between">
-          {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
-          {showLeft && !!leftContent ? (
-            leftContent
-          ) : (
-            <Box extraStyles="margin-right: auto;" />
-          )}
-          {showRight && !!rightContent && rightContent}
-        </Styled.Footer>
-      </Box>
-    </Stack>
-  );
-
-  if (isExternalLink) {
-    return (
-      <ExternalLink
-        key={`link-card-${locatorSlug}`}
-        href={disabled ? "" : href}
-        newTab={true}
-        isUnderlined={false}
-        tabIndex={disabled ? "-1" : "0"}
-        ariaLabel={`${title}, ${subtitle}`}
-        dataQa={`link-card-${locatorSlug}`}
-        extraStyles={`${baseStyles} ${hoverActiveStyles}`}
-      >
-        {cardContent}
-      </ExternalLink>
-    );
-  }
-
   return (
-    <InternalLink
+    <Styled.StyledAnchor
       key={`link-card-${locatorSlug}`}
-      to={disabled ? "" : href}
-      isUnderlined={false}
-      hoverUnderline={false}
-      tabIndex={disabled ? "-1" : "0"}
-      aria-label={`${title}, ${subtitle}`}
+      href={disabled ? undefined : href}
+      rel={isExternalLink ? "noopener noreferrer" : undefined}
+      target={isExternalLink ? "_blank" : undefined}
+      tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled}
+      $disabled={disabled}
+      aria-label={`${title}, ${subtitle}`}
       data-qa={`link-card-${locatorSlug}`}
-      extraStyles={`${baseStyles} ${hoverActiveStyles}`}
+      $theme={themeValues}
+      $extraStyles={
+        disabled ? `pointer-events: none; ${extraStyles}` : extraStyles
+      }
+      $hoverStyles={extraHoverStyles}
+      $activeStyles={extraActiveStyles}
     >
-      {cardContent}
-    </InternalLink>
+      <Stack
+        childGap={0}
+        bottomItem={3}
+        justify="space-between"
+        style={{ width: "100%" }}
+        fullHeight
+      >
+        <Stack
+          direction="row"
+          childGap="0.5rem"
+          extraStyles={`align-items: center;`}
+        >
+          <Styled.Title
+            variant={titleVariant}
+            $theme={themeValues}
+            margin={0}
+            $disabled={disabled}
+          >
+            {title}
+          </Styled.Title>
+          {isExternalLink && (
+            <ExternalLinkIcon
+              linkColor={themeValues.color}
+              text={locatorSlug}
+              style={{ height: "1.125rem", width: "1.125rem" }}
+            />
+          )}
+        </Stack>
+        <Box padding={subtitlePadding} width="100%">
+          <Styled.Subtitle
+            variant="pS"
+            $theme={themeValues}
+            $disabled={disabled}
+          >
+            {subtitle}
+          </Styled.Subtitle>
+        </Box>
+        <Box
+          background="transparent"
+          borderWidthOverride="0 0 0 0"
+          padding="0"
+          width="100%"
+        >
+          <Styled.Footer direction="row" childGap="6px" justify="space-between">
+            {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
+            {showLeft && !!leftContent ? (
+              leftContent
+            ) : (
+              <Box extraStyles="margin-right: auto;" />
+            )}
+            {showRight && !!rightContent && rightContent}
+          </Styled.Footer>
+        </Box>
+      </Stack>
+    </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";
@@ -23,11 +24,11 @@ const meta = {
   args: {
     title: "Test Workflow",
     subtitle: "Link your benefit plan",
-    href: "/test-workflow",
     showLeft: undefined,
     leftContent: undefined,
     showRight: undefined,
     rightContent: undefined,
+    onClick: fn(),
     extraStyles: "",
     extraActiveStyles: "",
     extraHoverStyles: "",
@@ -50,14 +51,6 @@ const meta = {
         defaultValue: { summary: "Link your benefit plan" }
       }
     },
-    href: {
-      description:
-        "URL or path for the LinkCard. Internal path for InternalLink, full URL for ExternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
     showLeft: {
       description: "Whether to show the LinkCard's left content",
       table: {
@@ -86,6 +79,13 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
+    onClick: {
+      description: "Function to execute on click of LinkCard",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
     extraStyles: {
       description: "Extra styles to apply to the LinkCard",
       table: {
@@ -139,8 +139,7 @@ export default meta;
 export const BasicLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection",
-    href: "/permits/construction"
+    subtitle: "Cityville Department of Building Inspection"
   },
   render: args => {
     return (
@@ -197,8 +196,7 @@ export const BasicLinkCard = {
 export const ExternalLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection",
-    href: "https://example.com/permits/construction"
+    subtitle: "Cityville Department of Building Inspection"
   },
   render: args => {
     return (
@@ -256,8 +254,7 @@ export const ExternalLinkCard = {
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",
-    subittle: "Cityville Water Management",
-    href: "/water-bills/autopay"
+    subittle: "Cityville Water Management"
   },
   render: args => {
     return (
@@ -315,8 +312,7 @@ export const CompleteLinkCard = {
 export const DisabledLinkCard = {
   args: {
     title: "Property Tax - Autopay",
-    subtitle: "",
-    href: "/property-tax/autopay"
+    subtitle: ""
   },
   render: args => {
     return (

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

@@ -7,7 +7,16 @@ import {
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
 
-export const getCardBaseStyles = (theme, disabled, extraStyles) => `
+export const StyledAnchor = styled("a")`
+  ${({
+    $disabled: disabled,
+    $theme: theme,
+    $extraStyles: extraStyles,
+    $disabledStyles: disabledStyles,
+    $hoverStyles: hoverStyles,
+    $activeStyles: activeStyles
+  }) => `
+  display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 40px;
@@ -16,60 +25,51 @@ export const getCardBaseStyles = (theme, disabled, extraStyles) => `
   align-self: stretch;
   border-radius: 8px;
   text-decoration: none;
-  font-size: inherit;
-  color: inherit;
-  font-weight: inherit;
-  line-height: inherit;
   background-color: ${
     disabled ? theme.disabledBackgroundColor : theme.backgroundColor
   };
   border: 1px solid
     ${disabled ? theme.disabledBorderColor : theme.borderColor};
   transition: all 0.2s ease-in-out;
-  ${disabled ? `pointer-events: none;` : ""}
   ${extraStyles || ""}
-`;
 
-export const getCardHoverActiveStyles = (
-  theme,
-  disabled,
-  hoverStyles,
-  activeStyles
-) => {
-  if (disabled) {
-    return `
-      &:hover,
-      &:active {
-        cursor: default;
-        box-shadow: none;
-        border: 1px solid ${theme.disabledBorderColor};
-      }
-    `;
-  }
-  return `
-    &:hover,
-    &:active {
-      cursor: pointer;
-      box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
-        0px 5px 11px 0px rgba(41, 42, 51, 0.1),
-        0px 4px 19px 0px rgba(41, 42, 51, 0.09),
-        0px 27px 26px 0px rgba(41, 42, 51, 0.05),
-        0px 56px 31px 0px rgba(41, 42, 51, 0.01),
-        0px 80px 33px 0px rgba(41, 42, 51, 0);
-    }
-    ${hoverStyles || ""}
+  ${
+    disabled
+      ? `
+        &:hover,
+        &:active {
+          cursor: default;
+          box-shadow: none;
+          border: 1px solid ${theme.disabledBorderColor};
+          ${disabledStyles || ""}
+        }
+      `
+      : `
+        &:hover,
+        &:active {
+          cursor: pointer;
+          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+            0px 5px 11px 0px rgba(41, 42, 51, 0.1),
+            0px 4px 19px 0px rgba(41, 42, 51, 0.09),
+            0px 27px 26px 0px rgba(41, 42, 51, 0.05),
+            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};
-    }
+        &:hover:not(:active) {
+          border: 1px solid ${theme.borderColor};
+        }
 
-    &:active {
-      background-color: ${theme.activeBackgroundColor};
-      border: 1px solid ${theme.borderColor};
-      ${activeStyles || ""}
-    }
-  `;
-};
+        &:active {
+          background-color: ${theme.activeBackgroundColor};
+          border: 1px solid ${theme.borderColor};
+          ${activeStyles || ""}
+        }
+      `
+  }
+  `}
+`;
 
 export const Title = styled(Heading)`
   display: -webkit-box;

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

@@ -5,19 +5,16 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   title?: string; // title
   subtitle?: string; // beneath title
-  subtitlePadding?: string;
   themeValues?: any;
   showLeft?: boolean;
   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> &

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -65,6 +65,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         autocompleteValue="given-name"
         dataQa="First name"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Last name"
@@ -75,6 +76,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         autocompleteValue="family-name"
         dataQa="Last name"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Email address"
@@ -87,6 +89,7 @@ const RegistrationForm = ({
         isEmail
         autocompleteValue="email"
         dataQa="Email address"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Password"
@@ -98,6 +101,7 @@ const RegistrationForm = ({
         type="password"
         autocompleteValue="new-password"
         dataQa="Password"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -109,6 +113,7 @@ const RegistrationForm = ({
         type="password"
         autocompleteValue="new-password"
         dataQa="Confirm password"
+        isRequired
       />
       <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
         <PasswordRequirements password={fields.password} isMobile={isMobile} />

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -29,7 +29,8 @@ const TermsAndConditionsControlV2 = ({
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  isRequired = false
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -61,6 +62,7 @@ const TermsAndConditionsControlV2 = ({
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
               labelledById={TermsAndConditionsTitleDivId}
+              isRequired={isRequired}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>