Multiple Page List & Loop Pattern Card Description

[ToddWebDev]

Feature Enhancement Ticket

Title: Enhance Multiple Page List & Loop Pattern Card Description to accept a string or a component

Description: The Array Builder Pattern(Multiple responses list & loop) pattern cards currently only support a string for the description and do not support a more detailed card description. Some implementations may want to include more information in their card descriptions. For example, the VA design system card component example may include a list of items:

const CardDescription = ({ incomeType, grossMonthlyIncome, payer }) => (
  <ul className="u-list-no-bullets vads-u-padding-left--0">
    <li>
      Income type:{' '}
      <span className="vads-u-font-weight--bold">
        {incomeTypeLabels[incomeType]}
      </span>
    </li>
    <li>
      Gross monthly income:{' '}
      <span className="vads-u-font-weight--bold">
        {formatCurrency(grossMonthlyIncome)}
      </span>
    </li>
    <li>
      Income recipient:{' '}
      <span className="vads-u-font-weight--bold">{payer}</span>
    </li>
  </ul>
);

Examples: Card description as string

Card description as component

Priority: [Low]

Dependencies: Array Builder Pattern(Multiple responses list & loop)

Acceptance Criteria: The arrayBuilderPattern card description prop accepts either a string or a component

Testing Instructions: All existing unit tests pass Button screen reader text is updated to work with string or object for Accessibility

Additional Notes:

[aplatt-coforma]

Hey team! Please add your planning poker estimate with Zenhub @danlim715 @TaiWilkin @ToddWebDev @wayne-weibel