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

package/src/components/molecules/collapsible-section/CollapsibleSection.stories.js

@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+import CollapsibleSection from "./CollapsibleSection.js";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Molecules/CollapsibleSection",
+  component: CollapsibleSection,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    isOpen: true,
+    toggleSection: fn(),
+    themeValues: {},
+    isMobile: undefined,
+    supportsTouch: undefined,
+    title: "Example Title",
+    customPadding: undefined,
+    initiallyOpen: true,
+    openHeight: "auto",
+    children: <p>The children prop will populate this content.</p>,
+    customTitle: false,
+    stackTitle: false,
+    stackTitleContent: "StackTitleContent Prop Value",
+    sectionGap: "0.5rem",
+    name: "",
+    index: 1,
+    extraStyles: ""
+  },
+  argTypes: {
+    isOpen: {
+      description:
+        "Boolean indicating whether the section is expanded (true) or collapsed (false).",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    toggleSection: {
+      description:
+        "Function that toggles the expanded versus collapsed state for a given 'CollapsibleSection'",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    isMobile: {
+      description:
+        "Whether user is on a mobile device (typically screen size smaller than 768px)",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    supportsTouch: {
+      description: "Whether a device supports touch events",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    title: {
+      description:
+        "The title of the collapsible section, that, when clicked or tapped will toggle the component's expanded/collapsed state",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    customPadding: {
+      description:
+        "The amount of padding to apply to the title prop's containing `Box` element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    initiallyOpen: {
+      description: "Whether the component should render itself open by default",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    openHeight: {
+      description: "Sets the height of the component when it is expanded",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    children: {
+      description:
+        "Content that will show when the component is expanded and be hidden when the component is collapsed",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    customTitle: {
+      description:
+        "Renders a differently styled title element when true, and is also used to help compute an appropriate label for the wrapper",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    stackTitle: {
+      description:
+        "Whether or not to include an additional title (content provided by StackTitleContent prop) above the CollapsibleSection",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    stackTitleContent: {
+      description:
+        "When stackTitle prop is true, this content is used for a header located _above_ the CollapsibleSection",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    sectionGap: {
+      description:
+        "When the CollapsibleSection is open and not on a mobile screen, this prop determines the wrapping Stack component's 'childGap' prop value.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    name: {
+      description:
+        "When it's not empty, 'name' provides the label value for the Box instance with a role of 'heading.'",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    index: {
+      description:
+        "The index value of the current CollapsibleSection in a list of CollapsibleSections. It is used to create a unique ID string for each component.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 1 }
+      }
+    },
+    extraStyles: {
+      description:
+        "A string containing additional CSS to apply to the title's Box container (the one with role='button').",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    title: "Basic Title"
+  }
+};
+
+export const ToggleSection = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(true);
+    return (
+      <CollapsibleSection
+        {...args}
+        title="ToggleSection Title"
+        isOpen={isOpen}
+        toggleSection={() => setIsOpen(!isOpen)}
+      />
+    );
+  }
+};
+
+export const Mobile = {
+  args: {
+    title: "Mobile Title",
+    isMobile: true
+  }
+};
+
+export const CustomTitle = {
+  args: {
+    title: "Custom Title",
+    customTitle: true
+  }
+};
+
+export const CustomPadding = {
+  args: {
+    title: "CustomPadding Title",
+    customPadding: "3rem"
+  }
+};
+
+export const StackTitleContentAndStackTitle = {
+  args: {
+    title: "StackTitleContentAndStackTitle Title",
+    stackTitle: true,
+    stackTitleContent: <h1>Stack Title Content</h1>
+  }
+};
+
+export const SectionGap = {
+  args: {
+    title: "SectionGap Title",
+    sectionGap: "100px"
+  }
+};

package/src/components/molecules/collapsible-section/index.d.ts

@@ -8,7 +8,7 @@ export interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -23,4 +23,4 @@ export interface CollapsibleSectionProps {
 }
 
 export const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  Omit<React.HTMLAttributes<HTMLElement>, "title">>; // ommitting title prop to avoid conflicts with component's title prop

package/src/components/molecules/contact-card/ContactCard.js

@@ -0,0 +1,157 @@
+import React, { useContext } from "react";
+import * as R from "ramda";
+import { Box, Stack } from "../../atoms/layouts";
+import { ExternalLink, InternalLink } from "../../atoms";
+import { ThemeContext } from "styled-components";
+import * as Styled from "./ContactCard.styled";
+import { createIdFromString } from "../../../util/general";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
+import SolidDivider from "../../atoms/solid-divider";
+import { ROYAL_BLUE_VIVID, WHITE } from "../../../constants/colors";
+import { createThemeValues } from "../../../util/themeUtils";
+import { TextWrapStyles } from "./ContactCard.styled";
+import { URL_TEST } from "../../../constants/regex_constants";
+
+const ContactCard = ({
+  title,
+  secondTitle = "Helpful Links",
+  content = "",
+  links = [],
+  extraStyles = "",
+  titleVariant = "h3",
+  ariaLabel = "Contact Information",
+  linkVariant = "primary"
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+  const linkFallbackValues = { externalLinkColor: ROYAL_BLUE_VIVID };
+  const linkThemeValues = createThemeValues(
+    themeContext,
+    linkFallbackValues,
+    "Link",
+    linkVariant
+  );
+
+  return (
+    <Styled.Container
+      borderRadius="8px"
+      background={WHITE}
+      boxShadow="0px 2px 4px rgba(0, 0, 0, 0.25)"
+      dataQa={createIdFromString(title, "contact-card")}
+      maxWidth="100%"
+      minWidth={isMobile ? "240px" : "208px"}
+      minHeight="141px"
+      padding="1.5rem"
+      extraStyles={extraStyles}
+      role="complementary"
+      aria-label={ariaLabel}
+    >
+      <Stack
+        childGap="8px"
+        bottomItem={3}
+        justify="space-between"
+        style={{ width: "100%" }}
+        fullHeight
+      >
+        <Box padding={0} width="100%">
+          <Styled.Title
+            variant={titleVariant}
+            margin={0}
+            fontSize={FONT_SIZE.MD}
+            weight={FONT_WEIGHT_SEMIBOLD}
+          >
+            {title}
+          </Styled.Title>
+        </Box>
+        <Box padding={"0"} width="100%">
+          <Styled.Content>{content}</Styled.Content>
+        </Box>
+      </Stack>
+      {links.length > 0 && (
+        <>
+          <SolidDivider aria-hidden={true} />
+          <Stack
+            childGap={"8px"}
+            bottomItem={3}
+            justify="space-between"
+            style={{ width: "100%" }}
+            fullHeight
+          >
+            <Styled.Title
+              variant={titleVariant}
+              margin={0}
+              fontSize={FONT_SIZE.MD}
+              weight={FONT_WEIGHT_SEMIBOLD}
+            >
+              {secondTitle}
+            </Styled.Title>
+            <Stack
+              childGap={"4px"}
+              justify="space-between"
+              extraStyles={`width: 100%;`}
+              fullHeight
+            >
+              {links.map(link => {
+                const linkID = createIdFromString(
+                  link.text,
+                  "contact-card-link"
+                );
+                return (
+                  <React.Fragment key={linkID}>
+                    {R.test(URL_TEST, link.link) ? (
+                      <ExternalLink
+                        dataQa={linkID}
+                        href={link.link}
+                        newTab={true}
+                        isUnderlined={false}
+                        extraStyles={`
+                          flex-direction: row;
+                          align-items: center;
+                          align-content: flex-start;
+                          justify-content: space-between;
+                          word-break: break-word;
+                          ${TextWrapStyles}
+                        `}
+                        size={FONT_SIZE.SM}
+                        lineHeight="1.313rem"
+                      >
+                        {link.text}
+                        <ExternalLinkIcon
+                          linkColor={linkThemeValues.externalLinkColor}
+                          text={link.text}
+                          ariaLabel="(Opens in a new tab)"
+                        />
+                      </ExternalLink>
+                    ) : (
+                      <InternalLink
+                        to={link.link}
+                        dataQa={linkID}
+                        fontSize={FONT_SIZE.SM}
+                        color={linkThemeValues.externalLinkColor}
+                        isUnderlined={false}
+                        active={false}
+                        lineheight="1.313rem"
+                        extraStyles={`
+                          word-break: break-word;
+                          ${TextWrapStyles}
+                        `}
+                      >
+                        {link.text}
+                      </InternalLink>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </Stack>
+          </Stack>
+        </>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default ContactCard;

package/src/components/molecules/contact-card/ContactCard.stories.js

@@ -0,0 +1,80 @@
+import React from "react";
+import ContactCard from "./ContactCard";
+
+const meta = {
+  title: "Molecules/ContactCard",
+  component: ContactCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "City Hall Payment Center",
+    extraStyles: "",
+    titleVariant: "h3"
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the ContactCard's heading area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "City Hall Payment Center" }
+      }
+    },
+    content: {
+      description: "Text to display in the ContactCard's content area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    links: {
+      description: "Array of links to display in the ContactCard",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: "[]" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles to apply to the ContactCard",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleVariant: {
+      description: "HTML element to use for heading element, default is h3",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h3" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicContactCard = {
+  args: {
+    title: "City Hall Payment Center",
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",
+    links: [
+      {
+        text: "Wallet Login",
+        link: "/login"
+      },
+      {
+        text: "Cityville Home",
+        link: "https://cityville-demos.uat.cityba.se/"
+      },
+      {
+        text: "Contact Us",
+        link: "https://eunasolutions.com/contact-us/"
+      }
+    ]
+  },
+  render: args => {
+    return <ContactCard {...args} key="contact-card-basic" extraStyles={``} />;
+  }
+};

package/src/components/molecules/contact-card/ContactCard.styled.js

@@ -0,0 +1,44 @@
+import styled, { css } from "styled-components";
+import Heading from "../../atoms/heading";
+import { Box } from "../../atoms/layouts";
+import { FONT_SIZE } from "../../../constants/style_constants";
+
+export const TextWrapStyles = css`
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  max-width: 100%;
+`;
+
+export const Container = styled(Box)`
+  height: fit-content;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  border-radius: 8px;
+  ${({ extraStyles }) => extraStyles}
+`;
+
+export const Title = styled(Heading)`
+  ${TextWrapStyles}
+`;
+
+export const Content = styled(Box)`
+  word-break: break-word;
+  padding: 0;
+  font-size: ${FONT_SIZE.SM};
+  line-height: 1.313rem;
+  letter-spacing: 0.14px;
+  ${TextWrapStyles}
+
+  p {
+    margin: 0;
+  }
+
+  p,
+  span {
+    line-height: 1.313rem;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+
+export interface ContactCardProps {
+  title?: string; // title 1
+  secondTitle?: string; // title 2
+  content?: any; // content
+  links?: any; // list of links
+  extraStyles?: string; // extra styles
+  titleVariant?: string; // title variant
+  ariaLabel?: string; // aria label
+  linkVariant?: string; // link variant
+}
+
+export const ContactCard: React.FC<Expand<ContactCardProps> &
+  HTMLAttributes<HTMLElement>>;

package/src/components/molecules/contact-card/index.js

@@ -0,0 +1,3 @@
+import ContactCard from "./ContactCard";
+
+export default ContactCard;

package/src/components/molecules/edit-name-form/EditNameForm.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as EditNameFormStories from './EditNameForm.stories.js';
+
+<Meta of={EditNameFormStories} />
+
+<Title />
+
+Renders input fields to collect a person's first name and last name.
+
+<Story />
+
+<Controls />

package/src/components/molecules/edit-name-form/EditNameForm.stories.js

@@ -0,0 +1,117 @@
+import React from "react";
+import EditNameForm from "./EditNameForm";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <EditNameForm {...props} />;
+
+const ConnectedEditNameForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/EditNameForm",
+  component: ConnectedEditNameForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    fields: undefined,
+    actions: undefined,
+    clearOnDismount: undefined,
+    showErrors: undefined,
+    handleSubmit: noop
+  },
+  argTypes: {
+    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: undefined }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on any of the text inputs (via `onKeyDown` prop passed to `FormInput` component).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: noop }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedEditNameForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedEditNameForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedEditNameForm {...args} />
+};

package/src/components/molecules/editable-list/EditableList.js

@@ -23,6 +23,7 @@ const EditableList = ({
   titleWeight = "400",
   canAdd = true,
   addItem,
+  addItemDestination,
   removeItem,
   editItem,
   itemName,
@@ -100,7 +101,9 @@ const EditableList = ({
                 disabled={expiredItem === EXPIRED}
               >
                 <Text variant="p" color={CHARADE_GREY}>
-                  {renderItem(item)}
+                  {!!renderItem &&
+                    typeof renderItem === "function" &&
+                    renderItem(item)}
                 </Text>
                 <EditableListItemControls>
                   {item.isPrimary && (
@@ -166,6 +169,8 @@ const EditableList = ({
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
+              isLink={!!addItemDestination}
+              destination={addItemDestination}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}