fieldDescriptions: createImageFields()

in src/elements/image/ImageElementForm.tsx [54:158]
104 lines of code
1 McCabe index (conditional complexity)

    fieldDescriptions: createImageFields(options),
    component: ({ fields }) => {
      const sendTelemetryEvent = useContext(TelemetryContext);

      return (
        <div data-cy={ImageElementTestId}>
          <Columns>
            <Column width={2 / 5}>
              <FieldLayoutVertical>
                <RoleStore>
                  {(additionalRoleOptions) => (
                    <RoleOptionsDropdown
                      additionalRoleOptions={additionalRoleOptions}
                      field={fields.role}
                      mainImage={fields.mainImage.value}
                    />
                  )}
                </RoleStore>
                <ImageView
                  field={fields.mainImage}
                  updateFields={({ caption, source, photographer }) => {
                    fields.caption.update(caption);
                    fields.source.update(source);
                    fields.photographer.update(photographer);
                  }}
                />
                <CustomDropdownView
                  field={fields.imageType}
                  label={"Image type"}
                />
              </FieldLayoutVertical>
            </Column>
            <Column width={3 / 5}>
              <FieldLayoutVertical>
                <DemoFieldWrapper
                  field={fields.caption}
                  headingLabel="Caption"
                  description={`${htmlLength(
                    fields.caption.value
                  )}/600 characters`}
                />
                <DemoFieldWrapper
                  field={fields.alt}
                  headingLabel={<AltText>Alt text</AltText>}
                  headingContent={
                    <>
                      <Tooltip>
                        <p>
                          ‘Alt text’ describes what’s in an image. It helps
                          users of screen readers understand our images, and
                          improves our SEO.
                        </p>
                        <p>
                          <a
                            href="https://docs.google.com/document/d/1oW542iCRyKfI4DS22QU7AH0TQRWLYMm7bTlhJlX5_Ng/edit?usp=sharing"
                            target="_blank"
                          >
                            Find out more
                          </a>
                        </p>
                      </Tooltip>
                      <Button
                        priority="secondary"
                        size="xsmall"
                        iconSide="left"
                        onClick={() => {
                          sendTelemetryEvent?.(
                            ImageElementTelemetryType.CopyFromCaptionButtonPressed
                          );
                          fields.alt.update(fields.caption.value);
                        }}
                      >
                        Copy from caption
                      </Button>
                    </>
                  }
                />
                <Columns>
                  <Column width={1 / 2}>
                    <DemoFieldWrapper
                      field={fields.photographer}
                      headingLabel="Photographer"
                    />
                  </Column>
                  <Column width={1 / 2}>
                    <DemoFieldWrapper
                      field={fields.source}
                      headingLabel="Source"
                    />
                  </Column>
                </Columns>
                <Columns>
                  <Column width={1 / 2}>
                    <CustomCheckboxView
                      field={fields.displayCredit}
                      label="Display credit information"
                    />
                  </Column>
                </Columns>
              </FieldLayoutVertical>
            </Column>
          </Columns>
        </div>
      );
    },