@thecb/components 7.2.1 → 7.3.2-beta.0

package/package.json

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

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -3,6 +3,7 @@ import { Cluster } from "../../atoms/layouts";
 import Text from "../text";
 import styled from "styled-components";
 import { colors } from "../../../constants";
+import { noop } from "../../../util/general";
 
 const HiddenRadioInput = styled.input`
   // can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it
@@ -53,7 +54,8 @@ const RadioButtonWithLabel = ({
   groupName,
   setValue,
   ariaInvalid,
-  index
+  index,
+  handleChange = noop // optional, for custom event handling in ingesting app
 }) => (
   <InputAndLabelContainer align="center" childGap="0.5rem">
     <HiddenRadioInput
@@ -63,7 +65,10 @@ const RadioButtonWithLabel = ({
       name={groupName}
       id={id}
       value={value}
-      onChange={e => setValue(e.target.value)}
+      onChange={e => {
+        setValue(e.target.value);
+        handleChange(e);
+      }}
       defaultChecked={index === 0}
     />
     <Text

package/src/components/molecules/index.js

@@ -11,7 +11,6 @@ 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";

package/src/components/molecules/radio-group/RadioGroup.js

@@ -3,6 +3,7 @@ import RadioButtonWithLabel from "../../atoms/radio-button-with-label/RadioButto
 import { Stack } from "../../atoms";
 import { colors } from "../../../constants";
 import styled from "styled-components";
+import { noop } from "../../../util/general";
 
 const DefaultHeading = styled.div`
   font-size: 0.875rem;
@@ -25,6 +26,7 @@ const RadioGroup = ({
   ),
   config,
   extraStyles,
+  handleChange = noop, // optional, for custom event handling in ingesting app
   // redux-freeform props - this is similar to how FormInput works, duplicated because the radio input is hidden for styling overrides
   field,
   fieldActions
@@ -45,6 +47,7 @@ const RadioGroup = ({
             {...c}
             groupName={groupName}
             setValue={setValue}
+            handleChange={handleChange}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.stories.js

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import RadioButtonWithLabel from "./RadioButtonWithLabel";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-
-export const radioButtonWithLabel = () => {
-  const [selected, setSelected] = useState("");
-  const handleRadioClick = e => {
-    setSelected(e.currentTarget.value);
-  };
-
-  return (
-    <Box>
-      <RadioButtonWithLabel
-        id="some-id"
-        value="some-value"
-        labelText="A radio button with a label."
-        handleRadioClick={handleRadioClick}
-        selected={selected}
-      />
-      <RadioButtonWithLabel
-        id="another-id"
-        value="another-value"
-        labelText="Another radio button with a label."
-        handleRadioClick={handleRadioClick}
-        selected={selected}
-      />
-    </Box>
-  );
-};
-
-radioButtonWithLabel.storyName = "RadioButtonWithLabel";
-
-const story = page({
-  title: "Components|Atoms/RadioButtonWithLabel",
-  Component: RadioButtonWithLabel
-});
-
-export default story;

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

@@ -1,266 +0,0 @@
-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;

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

@@ -1,26 +0,0 @@
-import { createFormState, required, isProbablyEmail } from "redux-freeform";
-
-const formConfig = {
-  client: {
-    validators: []
-  },
-  firstName: {
-    validators: [required()]
-  },
-  lastName: {
-    validators: [required()]
-  },
-  email: {
-    validators: [isProbablyEmail()]
-  },
-  role: {
-    validators: []
-  },
-  searchTerm: {
-    validators: []
-  }
-};
-
-export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
-  formConfig
-);

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

@@ -1,11 +0,0 @@
-import InternalUserInfoForm from "./InternalUserInfoForm";
-import {
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-} from "./InternalUserInfoForm.state";
-
-InternalUserInfoForm.reducer = reducer;
-InternalUserInfoForm.mapStateToProps = mapStateToProps;
-InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps;
-export default InternalUserInfoForm;