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

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

@@ -0,0 +1,528 @@
+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 LinkCard from "./LinkCard";
+import Badge from "../../atoms/badge/Badge";
+import AutopayIcon from "../../atoms/icons/AutopayIcon";
+import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
+import Text from "../../atoms/text";
+
+const meta = {
+  title: "Molecules/LinkCard",
+  component: LinkCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "Test Workflow",
+    subtitle: "Link your benefit plan",
+    showLeft: undefined,
+    leftContent: undefined,
+    showRight: undefined,
+    rightContent: undefined,
+    href: "#",
+    extraStyles: "",
+    extraActiveStyles: "",
+    extraHoverStyles: "",
+    titleVariant: "h3",
+    disabled: false,
+    isExternalLink: false
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the LinkCard's title area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Test Workflow" }
+      }
+    },
+    subtitle: {
+      description: "Text to display in the LinkCard's body area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Link your benefit plan" }
+      }
+    },
+    showLeft: {
+      description: "Whether to show the LinkCard's left content",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    leftContent: {
+      description: "Component to render on LinkCard's left side",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showRight: {
+      description: "Whether to show LinkCard's right content",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightContent: {
+      description: "Component to render on LinkCard's right side",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    href: {
+      description: "URL or path the LinkCard navigates to",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles to apply to the LinkCard",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraActiveStyles: {
+      descripton:
+        "Extra styles to apply to the LinkCard when it is in an active state",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraHoverStyles: {
+      description:
+        "Extra styles to apply to the LinkCard when it is being hovered",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleVariant: {
+      description: "HTML element to use for title element, default is h3",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h3" }
+      }
+    },
+    disabled: {
+      description: "Whether the card is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    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.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicLinkCard = {
+  args: {
+    title: "Construction Permits",
+    subtitle: "Cityville Department of Building Inspection",
+    href: "/construction-permits"
+  },
+  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={
+          <Badge
+            label="Autopay Available"
+            variant={"success"}
+            Icon={() =>
+              AutopayIcon({
+                fill: SEA_GREEN
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay`}
+            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`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Pay"}
+            </Text>
+            <ArrowRightIcon labelledBy={`workflow`} color={ROYAL_BLUE_VIVID} />
+          </Box>
+        }
+      />
+    );
+  }
+};
+
+export const ExternalLinkCard = {
+  args: {
+    title: "Construction Permits",
+    subtitle: "Cityville Department of Building Inspection",
+    href: "https://example.com/construction-permits"
+  },
+  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={
+          <Badge
+            label="Autopay Available"
+            variant={"success"}
+            Icon={() =>
+              AutopayIcon({
+                fill: SEA_GREEN
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay`}
+            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`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Pay"}
+            </Text>
+            <ArrowRightIcon labelledBy={`workflow`} color={ROYAL_BLUE_VIVID} />
+          </Box>
+        }
+        isExternalLink={true}
+      />
+    );
+  }
+};
+
+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",
+    href: "/water-bills"
+  },
+  render: args => {
+    return (
+      <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>
+        }
+      />
+    );
+  }
+};
+
+export const DisabledLinkCard = {
+  args: {
+    title: "Property Tax - Autopay",
+    subtitle: "",
+    href: "/property-tax"
+  },
+  render: args => {
+    return (
+      <LinkCard
+        {...args}
+        extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
+        disabled={true}
+        showLeft={true}
+        leftContent={
+          <Badge
+            label="Autopay Available"
+            variant={"disabled"}
+            Icon={() =>
+              AutopayIcon({
+                fill: MANATEE_GREY
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay-disabled`}
+            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={COOL_GREY_05}
+              id={`workflow-disabled`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Find"}
+            </Text>
+            <PlusCircleIcon
+              labelledBy={`workflow-disabled`}
+              color={COOL_GREY_05}
+            />
+          </Box>
+        }
+      />
+    );
+  }
+};

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

@@ -3,35 +3,42 @@ import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import {
+  SPACING,
+  FONT_SIZE,
+  BORDER_THIN,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
 
 export const Container = styled(Box)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 100%;
-  gap: 40px;
-  flex-shrink: 0;
   align-self: stretch;
   border-radius: 8px;
-  ${({ isDisabled, theme }) => `
+  padding: 24px;
+  ${({ disabled, themeValues }) => `
     background-color: ${
-      isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor
+      disabled
+        ? themeValues.disabledBackgroundColor
+        : themeValues.backgroundColor
     };
     border: 1px solid ${
-      isDisabled ? theme.disabledBorderColor : theme.borderColor
+      disabled ? themeValues.disabledBorderColor : themeValues.borderColor
     };
   `}
-  transition: all .2s ease-in-out;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
 
-  ${({ isDisabled, theme }) =>
-    isDisabled
+  ${({ disabled, themeValues }) =>
+    disabled
       ? `
         &:hover,
         &:active {
           cursor: default;
           box-shadow: none;
-          border: 1px solid ${theme.disabledBorderColor};
+          border: 1px solid ${themeValues.disabledBorderColor};
         }
       `
       : `
@@ -47,12 +54,12 @@ export const Container = styled(Box)`
         }
 
         &:hover:not(:active) {
-          border: 1px solid ${theme.borderColor};
+          border: 1px solid ${themeValues.borderColor};
         }
 
         &:active {
-          background-color: ${theme.activeBackgroundColor};
-          border: 1px solid ${theme.borderColor};
+          background-color: ${themeValues.activeBackgroundColor};
+          border: ${BORDER_THIN} solid ${themeValues.borderColor};
         }
       `}
 `;
@@ -64,12 +71,12 @@ export const Title = styled(Heading)`
   align-self: stretch;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 16px;
+  font-size: ${FONT_SIZE.MD};
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ isDisabled, theme }) =>
-    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
+  ${({ disabled, themeValues }) =>
+    `color: ${disabled ? themeValues.disabledColor : themeValues.color};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -79,12 +86,12 @@ export const Subtitle = styled(Paragraph)`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   align-self: stretch;
-  font-size: 14px;
+  font-size: ${FONT_SIZE.SM};
   line-height: 150%;
   letter-spacing: 0.14px;
-  font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ isDisabled, theme }) =>
-    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  ${({ disabled, themeValues }) =>
+    `color: ${disabled ? themeValues.disabledColor : themeValues.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
+  TRANSPARENT,
+  BRIGHT_GREY
 } from "../../../constants/colors";
 
 const disabledBackgroundColor = TRANSPARENT;
@@ -13,8 +13,9 @@ const disabledBorderColor = GHOST_GREY;
 const disabledColor = MANATEE_GREY;
 const activeBackgroundColor = CORNFLOWER_BLUE;
 const backgroundColor = LINK_WATER;
-const borderColor = MOON_RAKER;
+const borderColor = MANATEE_GREY;
 const color = ROYAL_BLUE_VIVID;
+const textColor = BRIGHT_GREY;
 
 export const fallbackValues = {
   disabledBackgroundColor,
@@ -23,5 +24,6 @@ export const fallbackValues = {
   activeBackgroundColor,
   backgroundColor,
   borderColor,
-  color
+  color,
+  textColor
 };

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

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

package/src/components/molecules/login-form/LoginForm.js

@@ -15,7 +15,8 @@ const LoginForm = ({
   }
   const emailErrorMessages = {
     [required.error]: "Email address is required",
-    [isProbablyEmail.error]: "Invalid email address"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
   const passwordErrorMessages = {
     [required.error]: "Password is required"

package/src/components/molecules/login-form/LoginForm.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LoginFormStories from './LoginForm.stories.js';
+
+<Meta of={LoginFormStories} />
+
+<Title />
+
+Renders a form for users to login to the NFE User Profile. Built with [FormInput](?path=/docs/atoms-form-layouts-forminput--docs).
+
+The user is required to submit an email and password. Both inputs are validated as required inputs, while the email is also checked against the `isProbablyEmail` validator.
+
+<Controls />
+
+
+<Story />