@thecb/components 7.5.0 → 7.5.1

package/package.json

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

package/src/components/atoms/icons/WalletIconSmall.js

@@ -2,7 +2,7 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const WalletIconSmall = ({ themeValues }) => {
+const WalletIconSmall = ({ themeValues, iconIndex = 0 }) => {
   return (
     <svg
       width="20"
@@ -18,7 +18,7 @@ const WalletIconSmall = ({ themeValues }) => {
         fill={themeValues.singleIconColor}
       />
       <mask
-        id="mask0_503_574"
+        id={`mask0_503_574-${iconIndex}`}
         style={{ maskType: "alpha" }}
         maskUnits="userSpaceOnUse"
         x="3"
@@ -33,7 +33,7 @@ const WalletIconSmall = ({ themeValues }) => {
           fill="white"
         />
       </mask>
-      <g mask="url(#mask0_503_574)">
+      <g mask={`url(#mask0_503_574-${iconIndex})`}>
         <rect width="20" height="20" fill={themeValues.singleIconColor} />
       </g>
     </svg>

package/src/components/atoms/icons/index.js

@@ -61,7 +61,6 @@ import WalletBannerIcon from "./WalletBannerIcon";
 import StandardCheckoutImage from "./StandardCheckoutImage";
 import GuidedCheckoutImage from "./GuidedCheckoutImage";
 import ProfileImage from "./ProfileImage";
-import FindIconSmall from "./FindIconSmall";
 
 export {
   AccountsIcon,
@@ -126,6 +125,5 @@ export {
   WalletBannerIcon,
   StandardCheckoutImage,
   GuidedCheckoutImage,
-  ProfileImage,
-  FindIconSmall
+  ProfileImage
 };

package/src/components/atoms/index.js

@@ -32,8 +32,7 @@ export { default as Paragraph } from "./paragraph";
 export { default as PasswordRequirements } from "./password-requirements";
 export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
-export { default as RadioButtonWithLabel } from "./radio-button-with-label";
-export { default as RadioButton } from "../molecules/radio-section/radio-button/RadioButton";
+export { default as RadioButton } from "./radio-button";
 export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";

package/src/components/atoms/link/ExternalLink.d.ts

@@ -15,4 +15,4 @@ export interface ExternalLinkProps {
 }
 
 export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/link/ExternalLink.js

@@ -1,4 +1,4 @@
-import React, { useContext, forwardRef } from "react";
+import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
@@ -6,53 +6,47 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 
-const ExternalLink = forwardRef(
-  (
-    {
-      href = "",
-      newTab = false,
-      size = "1rem",
-      lineHeight = "1.5rem",
-      weight = FONT_WEIGHT_REGULAR,
-      extraStyles = ``,
-      variant = "primary",
-      tabIndex = "0",
-      dataQa,
-      ariaLabel,
-      children
-    },
-    ref
-  ) => {
-    const themeContext = useContext(ThemeContext);
-    const themeValues = createThemeValues(
-      themeContext,
-      fallbackValues,
-      "Link",
-      variant
-    );
+const ExternalLink = ({
+  href = "",
+  newTab = false,
+  size = "1rem",
+  lineHeight = "1.5rem",
+  weight = FONT_WEIGHT_REGULAR,
+  extraStyles = ``,
+  variant = "primary",
+  tabIndex = "0",
+  dataQa,
+  ariaLabel,
+  children
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Link",
+    variant
+  );
 
-    return (
-      <StyledExternalLink
-        href={href}
-        target={newTab ? "_blank" : ""}
-        color={themeValues.externalLinkColor}
-        size={size}
-        lineheight={lineHeight}
-        weight={weight}
-        hovercolor={themeValues.hoverColor}
-        activeColor={themeValues.activeColor}
-        fontFamily={themeValues.fontFamily}
-        tabIndex={tabIndex}
-        extrastyles={extraStyles}
-        rel={newTab ? "noopener" : ""}
-        data-qa={dataQa}
-        aria-label={ariaLabel}
-        ref={ref}
-      >
-        {safeChildren(children, <span />)}
-      </StyledExternalLink>
-    );
-  }
-);
+  return (
+    <StyledExternalLink
+      href={href}
+      target={newTab ? "_blank" : ""}
+      color={themeValues.externalLinkColor}
+      size={size}
+      lineheight={lineHeight}
+      weight={weight}
+      hovercolor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
+      fontFamily={themeValues.fontFamily}
+      tabIndex={tabIndex}
+      extrastyles={extraStyles}
+      rel={newTab ? "noopener" : ""}
+      data-qa={dataQa}
+      aria-label={ariaLabel}
+    >
+      {safeChildren(children, <span />)}
+    </StyledExternalLink>
+  );
+};
 
 export default ExternalLink;

package/src/components/atoms/link/ExternalLink.styled.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React from "react";
 import styled from "styled-components";
 import { ROYAL_BLUE } from "../../../constants/colors";
 /*
@@ -8,9 +8,7 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  forwardRef(({ hoverColor, activeColor, extrastyles, ...props }, ref) => (
-    <a {...props} ref={ref} />
-  ))
+  ({ hoverColor, activeColor, extrastyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};

package/src/components/atoms/link/InternalLink.d.ts

@@ -16,4 +16,4 @@ export interface InternalLinkProps {
 }
 
 export const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/link/InternalLink.js

@@ -1,57 +1,51 @@
-import React, { useContext, forwardRef } from "react";
+import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
 
-const InternalLink = forwardRef(
-  (
-    {
-      to = "",
-      color,
-      children,
-      active,
-      fontSize,
-      lineheight,
-      fontWeight,
-      variant = "primary",
-      margin,
-      tabIndex = "0",
-      dataQa,
-      extraStyles = ``
-    },
-    ref
-  ) => {
-    const themeContext = useContext(ThemeContext);
-    const themeValues = createThemeValues(
-      themeContext,
-      fallbackValues,
-      "Link",
-      variant
-    );
+const InternalLink = ({
+  to = "",
+  color,
+  children,
+  active,
+  fontSize,
+  lineheight,
+  fontWeight,
+  variant = "primary",
+  margin,
+  tabIndex = "0",
+  dataQa,
+  extraStyles = ``
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Link",
+    variant
+  );
 
-    return (
-      <StyledInternalLink
-        to={to}
-        color={color}
-        lineheight={lineheight}
-        active={active}
-        fontWeight={fontWeight}
-        fontSize={fontSize}
-        fontFamily={themeValues.fontFamily}
-        margin={margin}
-        hoverColor={themeValues.hoverColor}
-        activeColor={themeValues.activeColor}
-        tabIndex={tabIndex}
-        extrastyles={extraStyles}
-        data-qa={dataQa}
-        ref={ref}
-      >
-        {safeChildren(children, <span />)}
-      </StyledInternalLink>
-    );
-  }
-);
+  return (
+    <StyledInternalLink
+      to={to}
+      color={color}
+      lineheight={lineheight}
+      active={active}
+      fontWeight={fontWeight}
+      fontSize={fontSize}
+      fontFamily={themeValues.fontFamily}
+      margin={margin}
+      hoverColor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
+      tabIndex={tabIndex}
+      extrastyles={extraStyles}
+      data-qa={dataQa}
+    >
+      {safeChildren(children, <span />)}
+    </StyledInternalLink>
+  );
+};
 
 export default InternalLink;

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { ROYAL_BLUE } from "../../../constants/colors";
@@ -9,11 +9,8 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  forwardRef(
-    (
-      { hoverColor, activeColor, active, color, extrastyles, ...props },
-      ref
-    ) => <Link {...props} ref={ref} />
+  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
+    <Link {...props} />
   )
 )`
   display: flex;

package/src/components/{molecules/radio-section → atoms}/radio-button/RadioButton.js

@@ -1,8 +1,8 @@
 import React from "react";
+import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioButton.theme";
-import { Motion } from "../../../atoms/layouts";
+import { Motion } from "../layouts";
 import styled from "styled-components";
-import { themeComponent } from "../../../../util/themeUtils";
 
 const HiddenRadioButton = styled.input`
   opacity: 0;

package/src/components/atoms/radio-button/RadioButton.stories.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+import RadioButton from "./RadioButton";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+
+export const radioButtonsDefault = () => {
+  const [selected, setSelected] = useState(null);
+  const [focused, setFocused] = useState(null);
+
+  return (
+    <Box
+      onFocus={() => setFocused(name)}
+      onBlur={() => setFocused(null)}
+      extraStyles="outline: none;"
+      tabIndex="0"
+    >
+      <RadioButton
+        name="demo"
+        radioOn={selected === name}
+        radioFocused={focused === name}
+        toggleRadio={() => setSelected(name)}
+        disabled={boolean("disabled", false, "props")}
+      />
+    </Box>
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/RadioButton",
+  Component: RadioButton
+});
+
+export default story;

package/src/components/{molecules/radio-section → atoms}/radio-button/RadioButton.theme.js

@@ -1,4 +1,4 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, GREY_CHATEAU } from "../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
 const inactiveColor = `${GREY_CHATEAU}`;

package/{dist/src → src}/components/atoms/radio-button/index.js

@@ -1,2 +1,3 @@
 import RadioButton from "./RadioButton";
+
 export default RadioButton;

package/src/components/molecules/index.js

@@ -11,6 +11,7 @@ export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
+export { default as InternalUserInfoForm } from "./internal-user-info-form";
 export { default as LoginForm } from "./login-form";
 export { default as Modal } from "./modal";
 export { default as Module } from "./module";
@@ -25,7 +26,6 @@ export { default as PaymentFormCard } from "./payment-form-card";
 export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";
 export { default as PhoneForm } from "./phone-form";
 export { default as Popover } from "./popover";
-export { default as RadioGroup } from "./radio-group";
 export { default as RadioSection } from "./radio-section";
 export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -0,0 +1,266 @@
+import React, { useEffect } from "react";
+import { required, isProbablyEmail } from "redux-freeform";
+import { Stack, Box, Cluster } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+import FormSelect from "../../atoms/form-select";
+import SearchableSelect from "../../atoms/searchable-select";
+import { GHOST_GREY } from "../../../constants/colors";
+
+const RESEARCHER = "RESEARCHER";
+const AGENCY_ADMIN = "AGENCY_ADMIN";
+const CLIENT_ADMIN = "CLIENT_ADMIN";
+const SUPERVISOR = "SUPERVISOR";
+const CB_ADMIN = "CITYBASE_ADMIN";
+const CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
+const PROFILE = "PROFILE";
+const ADD = "ADD";
+const EDIT = "EDIT";
+
+const roleDescriptions = {
+  [RESEARCHER]: "Researcher",
+  [AGENCY_ADMIN]: "Agency admin",
+  [CLIENT_ADMIN]: "Client admin",
+  [SUPERVISOR]: "Supervisor",
+  [CB_ADMIN]: "Citybase admin"
+};
+
+const InternalUserInfoForm = ({
+  variant = "default",
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit = noop,
+  closeForm,
+  allAgencyOptions,
+  selectedAgencies,
+  allSelected,
+  toggleSelectAllAgencies = noop,
+  selectAgency,
+  roleOptions,
+  clientOptions,
+  namesDisabled,
+  emailDisabled,
+  roleDisabled,
+  selectionDisabled,
+  formType,
+  openChangePasswordForm,
+  firstName,
+  lastName
+}) => {
+  useEffect(() => {
+    if (formType === CREATE_CLIENT_ADMIN) {
+      actions.fields.client.addValidator(required());
+    }
+    if (formType !== PROFILE) {
+      actions.fields.email.addValidator(required());
+      actions.fields.role.addValidator(required());
+    }
+  }, []);
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const clientErrorMessages = {
+    [required.error]: "Client is required"
+  };
+  const firstNameErrorMessages = {
+    [required.error]: "First name is required"
+  };
+  const lastNameErrorMessages = {
+    [required.error]: "Last name is required"
+  };
+  const emailErrorMessages = {
+    [isProbablyEmail.error]: "Invalid email address"
+  };
+  const roleErrorMessages = {
+    [required.error]: "Role is required"
+  };
+  return (
+    <FormContainer
+      variant={variant}
+      role="form"
+      aria-label="user-info-form"
+      extraStyles={`padding: 0;`}
+    >
+      {formType === PROFILE && (
+        <Box padding="1.5rem">
+          <Cluster justify="flex-start" align="center">
+            <Box padding="1.25rem" borderRadius="50%" background="#CACED8">
+              <Heading variant="h4" weight="700">
+                {firstName.charAt(0).toUpperCase()}
+                {lastName.charAt(0).toUpperCase()}
+              </Heading>
+            </Box>
+            <Text variant="p" weight="700" extraStyles={`padding-left: 1rem;`}>
+              {firstName} {lastName}
+            </Text>
+          </Cluster>
+        </Box>
+      )}
+      {formType === CREATE_CLIENT_ADMIN && (
+        <Box
+          padding="1.5rem 1.5rem 0.5rem"
+          borderColor={GHOST_GREY}
+          borderSize="1px"
+          borderWidthOverride="0 0 1px 0"
+        >
+          <FormInputColumn>
+            <Heading variant="h6" weight="700" margin="0 0 1rem">
+              Select Client
+            </Heading>
+            <FormSelect
+              labelTextWhenNoError="Client"
+              errorMessages={clientErrorMessages}
+              options={clientOptions.map(client => ({
+                text: client,
+                value: client,
+                id: client
+              }))}
+              field={fields.client}
+              fieldActions={actions.fields.client}
+              showErrors={showErrors}
+              onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            />
+          </FormInputColumn>
+        </Box>
+      )}
+      <Box
+        padding={
+          formType === PROFILE ? "1.5rem 1.5rem 0" : "1.5rem 1.5rem 0.5rem"
+        }
+        borderColor={GHOST_GREY}
+        borderSize="1px"
+        borderWidthOverride={formType === PROFILE ? "1px 0 0" : "0 0 1px 0"}
+      >
+        <FormInputColumn>
+          <Heading variant="h6" weight="700" margin="0 0 1rem">
+            Personal Information
+          </Heading>
+          <FormInput
+            labelTextWhenNoError="First Name"
+            errorMessages={firstNameErrorMessages}
+            field={fields.firstName}
+            fieldActions={actions.fields.firstName}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={namesDisabled}
+            autocomplete="given-name"
+          />
+          <FormInput
+            labelTextWhenNoError="Last Name"
+            errorMessages={lastNameErrorMessages}
+            field={fields.lastName}
+            fieldActions={actions.fields.lastName}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={namesDisabled}
+            autocomplete="family-name"
+          />
+          <FormInput
+            labelTextWhenNoError="Email"
+            errorMessages={emailErrorMessages}
+            field={fields.email}
+            fieldActions={actions.fields.email}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={emailDisabled}
+            autocomplete="email"
+          />
+          {formType === PROFILE && (
+            <FormInput
+              labelTextWhenNoError="Password"
+              errorMessages={{}}
+              field={{ rawValue: "•••••••••••••" }}
+              disabled={true}
+              decorator={
+                <Text
+                  variant="pS"
+                  color={`#15749D`}
+                  onClick={openChangePasswordForm}
+                  extraStyles={`cursor: pointer;`}
+                >
+                  Change Password
+                </Text>
+              }
+            />
+          )}
+        </FormInputColumn>
+      </Box>
+      <Box padding="1.5rem">
+        {formType !== PROFILE && (
+          <Box padding="0 0 0.5rem">
+            <FormInputColumn>
+              <Heading variant="h6" weight="700" margin="0 0 1rem">
+                User Settings
+              </Heading>
+              <FormSelect
+                labelTextWhenNoError="User Role"
+                errorMessages={roleErrorMessages}
+                options={roleOptions.map(role => ({
+                  text: roleDescriptions[role],
+                  value: role,
+                  id: role
+                }))}
+                field={fields.role}
+                fieldActions={actions.fields.role}
+                showErrors={showErrors}
+                onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+                disabled={roleDisabled}
+              />
+            </FormInputColumn>
+          </Box>
+        )}
+        {(formType === ADD || formType === EDIT) && (
+          <Box padding="0.5rem 0 1.5rem">
+            <FormInputColumn>
+              <Text variant="p">Select which agencies the user can view</Text>
+              <SearchableSelect
+                actions={actions}
+                fields={fields}
+                items={allAgencyOptions}
+                selectedItems={selectedAgencies}
+                allSelected={allSelected}
+                toggleSelectAllItems={toggleSelectAllAgencies}
+                selectItem={selectAgency}
+                disabled={selectionDisabled}
+              />
+            </FormInputColumn>
+          </Box>
+        )}
+        <Box padding="0">
+          <Stack childGap="1rem" direction="row" justify="flex-end">
+            <ButtonWithAction
+              text="Cancel"
+              action={() => {
+                if (formType !== CREATE_CLIENT_ADMIN) {
+                  toggleSelectAllAgencies(false);
+                }
+                closeForm();
+              }}
+              variant={"secondary"}
+              dataQa="Cancel"
+              extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
+            />
+            <ButtonWithAction
+              text="Save"
+              action={handleSubmit}
+              variant="primary"
+              dataQa="Save"
+              extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
+            />
+          </Stack>
+        </Box>
+      </Box>
+    </FormContainer>
+  );
+};
+
+export default InternalUserInfoForm;