[Publisher][Agency Settings] Add new biological sex and race & ethnicity data source questions

common/components/CheckboxOptions/CheckboxOptions.styles.tsx

@@ -18,6 +18,7 @@
 import styled from "styled-components/macro";
 
 import { typography } from "../GlobalStyles";
+import { NewInput } from "../Input";
 
 export const CheckboxContainer = styled.div``;
 
@@ -41,3 +42,9 @@ export const Checkbox = styled.input`
   min-height: 16px;
   border: 1px solid red;
 `;
+
+export const OtherInput = styled(NewInput)`
+  height: 120px;
+  gap: unset;
+  margin-bottom: 16px;
+`;

common/components/CheckboxOptions/CheckboxOptions.tsx

@@ -15,16 +15,24 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import React from "react";
+import React, { useState } from "react";
 
 import * as Styled from "./CheckboxOptions.styles";
 
+export type OtherDescriptionParams = {
+  value: string;
+  isEnabled: boolean;
+  placeholder?: string;
+  onChange: (value: string) => void;
+};
+
 export type CheckboxOption = {
   key: string;
   label: string;
   checked: boolean;
   disabled?: boolean;
   icon?: string | React.ReactNode;
+  otherDescription?: OtherDescriptionParams;
   onChangeOverride?: () => void;
 };
 
@@ -39,26 +47,56 @@ export const CheckboxOptions: React.FC<CheckboxOptionsProps> = ({
   options,
   onChange,
 }) => {
+  const [otherDescriptionValue, setOtherDescriptionValue] = useState("");
+
   return (
     <Styled.CheckboxContainer>
       {options.map(
-        ({ key, label, checked, disabled, icon, onChangeOverride }) => (
-          <Styled.CheckboxOptionsWrapper key={key}>
-            <Styled.Checkbox
-              id={key}
-              type="checkbox"
-              checked={checked}
-              onChange={() =>
-                onChangeOverride
-                  ? onChangeOverride()
-                  : onChange({ key, checked })
-              }
-              disabled={disabled}
-            />
-            <Styled.CheckboxLabel>
-              {label} {icon}
-            </Styled.CheckboxLabel>
-          </Styled.CheckboxOptionsWrapper>
+        ({
+          key,
+          label,
+          checked,
+          disabled,
+          icon,
+          otherDescription,
+          onChangeOverride,
+        }) => (
+          <React.Fragment key={key}>
+            <Styled.CheckboxOptionsWrapper>
+              <Styled.Checkbox
+                id={key}
+                type="checkbox"
+                checked={checked}
+                onChange={() =>
+                  onChangeOverride
+                    ? onChangeOverride()
+                    : onChange({ key, checked })
+                }
+                disabled={disabled}
+              />
+              <Styled.CheckboxLabel>
+                {label} {icon}
+              </Styled.CheckboxLabel>
+            </Styled.CheckboxOptionsWrapper>
+            {otherDescription?.isEnabled && (
+              <Styled.OtherInput
+                id="checkbox-other-description"
+                name="checkbox-other-description"
+                type="text"
+                multiline
+                placeholder={
+                  otherDescription.placeholder ||
+                  "Please provide additional information..."
+                }
+                value={otherDescriptionValue || otherDescription.value}
+                onChange={(e) => {
+                  setOtherDescriptionValue(e.target.value);
+                  otherDescription.onChange(e.target.value);
+                }}
+                fullWidth
+              />
+            )}
+          </React.Fragment>
         )
       )}
     </Styled.CheckboxContainer>

common/components/Modal/Modal.styled.tsx

@@ -62,6 +62,7 @@ export const InnerWrapper = styled.div<{
   centerText?: boolean;
   customPadding?: string;
   noBottomDiv?: boolean;
+  maxHeight?: number;
 }>`
   background-color: ${palette.solid.white};
   width: 100%;
@@ -77,6 +78,8 @@ export const InnerWrapper = styled.div<{
       return `& > div:last-child {display: none;}`;
     }
   }};
+  ${({ maxHeight }) =>
+    maxHeight && `max-height: ${maxHeight}px; overflow-y: auto;`};
 `;
 
 export const Icon = styled.img`

common/components/Modal/Modal.tsx

@@ -43,6 +43,7 @@ type ModalProps = Partial<{
   jurisdictionsSettingsConfigs?: boolean;
   agencySettingsAndJurisdictionsTitleConfigs?: boolean;
   noBottomDiv?: boolean;
+  maxHeight?: number;
 }>;
 
 export function Modal({
@@ -61,6 +62,7 @@ export function Modal({
   jurisdictionsSettingsConfigs,
   agencySettingsAndJurisdictionsTitleConfigs,
   noBottomDiv,
+  maxHeight,
 }: ModalProps) {
   const primaryButtonColor = (): ButtonColor => {
     if (modalType === "alert") return "red";
@@ -84,6 +86,7 @@ export function Modal({
           centerText={centerText}
           customPadding={customPadding}
           noBottomDiv={noBottomDiv}
+          maxHeight={maxHeight}
         >
           {modalType === "success" && <Styled.Icon src={successIcon} alt="" />}
           {modalType === "warning" && <Styled.Icon src={warningIcon} alt="" />}

common/types.ts

@@ -85,12 +85,13 @@ export type AgencySettingType =
   | "PURPOSE_AND_FUNCTIONS"
   | "HOMEPAGE_URL"
   | "ZIPCODE"
-  | "DATA_SHARING_TYPE";
+  | "DATA_SHARING_TYPE"
+  | "BIOLOGICAL_SEX_RACE_ETHNICITY_DATA_SOURCE";
 
 export interface AgencySetting {
   setting_type: AgencySettingType;
   source_id: number;
-  value: string | string[];
+  value: string | string[] | object;
 }
 
 export interface PublicUserAgency {

publisher/src/components/AgencySettings/AgencySettings.styles.tsx

@@ -234,10 +234,14 @@ export const EditModeButtonsContainer = styled.div<{ noMargin?: boolean }>`
 
 // Basic Info
 
-export const BasicInfoBlockTitle = styled(AgencySettingsBlockTitle)`
+export const BasicInfoBlockTitle = styled(AgencySettingsBlockTitle)<{
+  withPadding?: boolean;
+}>`
   ${typography.body};
   justify-content: space-between;
   align-items: center;
+
+  ${({ withPadding }) => withPadding && `padding: 24px 0 4px;`}
 `;
 
 export const CheckboxSpacingWrapper = styled.div`
@@ -440,6 +444,22 @@ export const SupervisionSystemRow = styled(AgencySettingsInfoRow)<{
   border: none;
 `;
 
+// Data Source
+export const DataSourceContainer = styled.div`
+  border-top: 1px solid ${palette.highlight.grey5};
+  border-bottom: 1px solid ${palette.highlight.grey5};
+  margin-left: -40px;
+  margin-right: -40px;
+  padding: 16px 40px;
+`;
+export const DataSourceTitle = styled.div`
+  font-weight: 700;
+  padding-bottom: 8px;
+`;
+export const DataSourceQuestionWrapper = styled.div`
+  padding-bottom: 12px;
+`;
+
 // Jurisdictions
 export const JurisdictionsInputWrapper = styled.div`
   position: relative;

publisher/src/components/AgencySettings/AgencySettings.tsx

@@ -26,6 +26,7 @@ import {
   AgencySettingsWrapper,
 } from "./AgencySettings.styles";
 import { AgencySettingsBasicInfo } from "./AgencySettingsBasicInfo";
+import AgencySettingsDataSource from "./AgencySettingsDataSource";
 // TODO(#1537) Ungate zipcode and agency data sharing fields
 // import AgencySettingsDataSharingType from "./AgencySettingsDataSharingType";
 import AgencySettingsDescription from "./AgencySettingsDescription";
@@ -42,6 +43,7 @@ export enum ActiveSetting {
   HomepageUrl = "HOMEPAGE_URL",
   Supervisions = "SUPERVISIONS",
   Jurisdictions = "JURISDICTIONS",
+  DataSource = "BIOLOGICAL_SEX_RACE_ETHNICITY_DATA_SOURCE",
 }
 
 export type SettingProps = {
@@ -103,6 +105,9 @@ export const AgencySettings: React.FC = observer(() => {
             settingProps={generateSettingProps(ActiveSetting.Supervisions)}
           />
         )}
+        <AgencySettingsDataSource
+          settingProps={generateSettingProps(ActiveSetting.DataSource)}
+        />
         <AgencySettingsJurisdictions
           settingProps={generateSettingProps(ActiveSetting.Jurisdictions)}
         />