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

package/src/components/molecules/email-form/EmailForm.js

@@ -8,6 +8,7 @@ import {
 import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
+import { useConditionallyAddValidator } from "../../../hooks";
 
 const EmailForm = ({
   variant = "default",
@@ -25,9 +26,16 @@ const EmailForm = ({
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
+  useConditionallyAddValidator(
+    isRequired,
+    required,
+    actions.fields.email.addValidator,
+    actions.fields.email.removeValidator
+  );
   const emailFieldErrorMessages = {
     [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"
   };
 
   return (

package/src/components/molecules/email-form/EmailForm.state.js

@@ -2,7 +2,7 @@ import { createFormState, required, isProbablyEmail } from "redux-freeform";
 
 const formConfig = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()] // 'required' validator is conditionally added based on `isRequired` prop
   }
 };
 

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -0,0 +1,210 @@
+import React from "react";
+import EmailForm from "./EmailForm";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, isProbablyEmail } from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  email: {
+    validators: [isProbablyEmail()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <EmailForm {...props} />;
+
+const ConnectedEmailForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/EmailForm",
+  component: ConnectedEmailForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    variant: "default",
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    showErrors: false,
+    guestCheckout: false,
+    handleSubmit: noop,
+    showWalletCheckbox: false,
+    saveToWallet: noop,
+    walletCheckboxMarked: false,
+    isRequired: false
+  },
+  argTypes: {
+    variant: {
+      description: "Form container variant.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    fields: {
+      description:
+        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    actions: {
+      description:
+        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description: "Show form field errors.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    guestCheckout: {
+      description:
+        "If `true`, displays a message about creating a wallet later for faster checkout.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on the email input (via `onKeyDown` prop passed to `FormInput` component).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showWalletCheckbox: {
+      description:
+        "If `true`, displays a checkbox to save the email address to wallet.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    saveToWallet: {
+      description: "Function called when the wallet checkbox is toggled.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    walletCheckboxMarked: {
+      description: "Whether the wallet checkbox is checked.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    isRequired: {
+      description: "If `true`, the email field becomes required.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedEmailForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const GuestCheckout = {
+  args: {
+    guestCheckout: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const WithWalletCheckbox = {
+  args: {
+    showWalletCheckbox: true,
+    saveToWallet: fn()
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const Required = {
+  args: {
+    isRequired: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const RequiredWithErrors = {
+  args: {
+    isRequired: true,
+    showErrors: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const GuestCheckoutWithWallet = {
+  args: {
+    guestCheckout: true,
+    showWalletCheckbox: true,
+    saveToWallet: fn(),
+    walletCheckboxMarked: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -15,7 +15,8 @@ const ForgotPasswordForm = ({
   }
   const EmailErrorMessages = {
     [required.error]: "Email address is required",
-    [isProbablyEmail.error]: "Email address is not valid"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
 
   return (

package/src/components/molecules/hero-image/HeroImage.js

@@ -0,0 +1,135 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { Box, Center, Stack } from "../../atoms/layouts";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./HeroImage.theme";
+import withWindowSize from "../../withWindowSize";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import * as Styled from "./HeroImage.styled";
+
+const HeroImage = ({
+  variant = "v1",
+  themeValues,
+  heading,
+  subheading,
+  description,
+  imageUrl,
+  minWidth = "100%",
+  minHeight = "auto",
+  contentMaxWidth = "76.5rem",
+  contentSpacing = "0.5rem",
+  headingVariant = "h1",
+  secondaryHeadingVariant = "h2",
+  extraStyles
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Styled.HeroContainer
+      variant={variant}
+      minWidth={minWidth}
+      minHeight={minHeight}
+      padding={isMobile ? "2rem" : "3rem 2rem"}
+      extraStyles={extraStyles}
+      imageUrl={imageUrl}
+      isMobile={isMobile}
+      theme={themeValues}
+    >
+      <Center
+        maxWidth={contentMaxWidth}
+        width={"100%"}
+        intrinsic
+        extraStyles={`
+          flex-flow: unset;
+          justify-content: ${Styled.getDeviceStyles(
+            isMobile,
+            themeValues.justifyContent
+          )};
+          flex-wrap: nowrap;
+        `}
+      >
+        <Stack
+          childGap={contentSpacing}
+          extraStyles={`max-width: ${
+            isMobile || variant === "v2" ? "100%" : "50%"
+          };`}
+        >
+          {variant === "v1" ? (
+            <Stack childGap="0">
+              {heading && (
+                <Styled.HeroHeading
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
+                  color={themeValues.heroTextColor}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
+                >
+                  {heading}
+                </Styled.HeroHeading>
+              )}
+              {subheading && (
+                <Styled.HeroSubheading
+                  variant="large"
+                  as={secondaryHeadingVariant}
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  color={themeValues.heroTextColor}
+                  isMobile={isMobile}
+                  theme={themeValues}
+                >
+                  {subheading}
+                </Styled.HeroSubheading>
+              )}
+            </Stack>
+          ) : (
+            <>
+              {heading && (
+                <Styled.HeroHeading
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
+                  color={themeValues.heroTextColor}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
+                >
+                  {heading}
+                </Styled.HeroHeading>
+              )}
+            </>
+          )}
+          {description && (
+            <Box padding="0">
+              <Styled.HeroDescription
+                color={themeValues.heroTextColor}
+                isMobile={isMobile}
+                theme={themeValues}
+              >
+                {description}
+              </Styled.HeroDescription>
+            </Box>
+          )}
+        </Stack>
+      </Center>
+    </Styled.HeroContainer>
+  );
+};
+
+export default withWindowSize(
+  themeComponent(HeroImage, "HeroImage", fallbackValues, "v1")
+);

package/src/components/molecules/hero-image/HeroImage.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as HeroImageStories from './HeroImage.stories.js';
+
+<Meta of={HeroImageStories} />
+
+<Title />
+
+HeroImage is a themeable component that renders a heading, sub-heading, and description with an image gradient background. It supports custom padding and content spacing for both mobile and desktop, as well as minimum width and height values.
+
+<div style={{ margin: "2em 0"}}>
+  <Story />
+</div>
+
+<Controls />

package/src/components/molecules/hero-image/HeroImage.stories.js

@@ -0,0 +1,149 @@
+import { head } from "ramda";
+import HeroImage from "./HeroImage";
+
+const meta = {
+  title: "Molecules/HeroImage",
+  component: HeroImage,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    heading: "Cityville",
+    subheading: "Payment Center",
+    description:
+      "Find and make payments quickly and conveniently from your computer or phone."
+  },
+  argTypes: {
+    heading: {
+      description: "Hero image main heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    headingVariant: {
+      description: "Heading variant for the hero image heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h1" }
+      }
+    },
+    secondaryHeadingVariant: {
+      description: "secondary heading variant for the hero image heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h2" }
+      }
+    },
+    subheading: {
+      description: "Hero image sub-heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    description: {
+      description: "Hero image description",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    imageUrl: {
+      description:
+        "Image URL for the hero image. If excluded or contains an invalid URL, a solid background (primaryHeroColor) will display.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      description: "styles for the HeroImage container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description:
+        "Minimum width of the HeroImage, must be a valid value for the `min-width` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "100%" }
+      }
+    },
+    minHeight: {
+      description:
+        "Minimum height of the HeroImage, must be a valid value for the `min-height` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    contentSpacing: {
+      description:
+        "Space between the headers and image, must be a valid CSS measurement value with a unit",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3rem" }
+      }
+    },
+    contentMaxWidth: {
+      description: "Maximum width of the content inside the hero image",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "76.5rem" }
+      }
+    },
+    variant: {
+      description: "Variant of the hero image (v1 or v2)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "v1" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const DesktopV1 = {
+  args: {
+    variant: "v1",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl:
+      "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/hero.jpg"
+  }
+};
+
+export const NoImageV1 = {
+  args: {
+    variant: "v1",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl: undefined
+  }
+};
+
+export const DesktopV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl:
+      "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/hero.jpg"
+  }
+};
+
+export const NoImageV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl: undefined
+  }
+};

package/src/components/molecules/hero-image/HeroImage.styled.js

@@ -0,0 +1,83 @@
+import React from "react";
+import styled from "styled-components";
+import { Paragraph, Box } from "../../atoms";
+import Title from "../../atoms/title/Title.js";
+import { rgba, adjustHue, darken } from "polished";
+
+const getHeroGradientStyles = ({ variant, isMobile, heroPrimaryColor }) => {
+  const v1Gradient = `linear-gradient(
+    90deg,
+    ${heroPrimaryColor} 33%,
+    transparent 100%
+  )`;
+  const v1GradientMobile = `linear-gradient(
+    ${rgba(heroPrimaryColor, 0.8)},
+    ${rgba(heroPrimaryColor, 0.8)}
+  )`;
+  const heroSecondaryColor = darken(0.18, adjustHue(-29, heroPrimaryColor));
+  const v2Gradient = `linear-gradient(
+    90deg,
+    ${rgba(heroPrimaryColor, 0.8)} 0%,
+    ${rgba(heroSecondaryColor, 0.8)} 100%
+  )`;
+
+  return variant === "v1"
+    ? isMobile
+      ? v1GradientMobile
+      : v1Gradient
+    : v2Gradient;
+};
+
+export const getDeviceStyles = (isMobile, theme) =>
+  isMobile ? theme.mobile : theme.desktop;
+
+export const HeroContainer = styled(
+  ({ variant, imageUrl, isMobile, theme, extraStyles, ...props }) => (
+    <Box {...props} />
+  )
+)`
+  display: flex;
+  background: ${({ variant, imageUrl, isMobile, theme }) =>
+    `${getHeroGradientStyles({
+      variant,
+      isMobile,
+      heroPrimaryColor: theme.heroPrimaryColor
+    })},
+    url(${imageUrl}) center / cover no-repeat, ${theme.heroPrimaryColor}`};
+  ${({ extraStyles }) => extraStyles}
+`;
+
+export const HeroHeading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingLineHeight)};
+`;
+
+export const HeroSubheading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingLineHeight)};
+`;
+
+export const HeroDescription = styled(({ theme, isMobile, ...props }) => (
+  <Paragraph {...props} />
+))`
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionLineHeight)};
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionFontSize)};
+  text-align: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.textAlign)};
+`;