Mocks for "Program Index" Page

[ssandbekkhaug]

Design updates

Feature requirements

Page layout:

• [ ] Page h1 heading - "Apply to programs in one place" + subtitle
• [ ] Common intake program - (displays above applications if not started, displays in my applications if started)
• [ ] My applications - https://github.com/civiform/civiform/issues/7988
• [ ] Category filters
• [ ] Programs and services - "Available programs and services"
  • When filters are present
  • [ ] Programs based on your selections
  • [ ] All other programs

Requirements by section

H1 heading and top heading banner

• [ ] Text is left aligned instead of centered
• [ ] New text and color styles, see design specs section
• [ ] New colors, see design specs section

  My applications - see: https://github.com/civiform/civiform/issues/7988

• [ ] New text and color styles, see design specs section

  Category filters

• [ ] New text and color styles, see design specs section

  Programs and services

• [ ] New text and color styles, see design specs section
  • [ ] Common intake program - title changed to eligibility survey, new text and color specs, see design

Design specs

Figma mocks

• [ ] Logged out, Desktop and mobile
• [ ] Logged in, Desktop and mobile
• [ ] No filters

Spacing guidelines

• Refer to Figma devmode annotations to see the spacing guidelines
• For more information about our spacing guidelines, see our writeup on spacing
  • CiviForm spacing documentation

Layout guidelines

• Designs provided include mobile, desktop
• Layout

  Color guidelines

• CiviForm and USWDS colors: Unless specified all North Star designs will be implemented using USWDS theme color tokens and USWDS state color tokens

Text styles

• All text should use the class usa-prose unless specified otherwise
• https://designsystem.digital.gov/components/prose/

Hover states

• Use the default USWDS hover styles.

USWDS components used

• USWDS Checkbox tile
  • See USWDS guidance on the how to use the component
  • Checkbox tiles should be used for the filters on the homepage
  • We should no longer override the USWDS focus styles. Focus will now be on the checkbox only, not the surrounding tile.
• USWDS tag
  • See USWDS guidance on the how to use the component
  • Our version will be using sentence case
  • See Figma for detailed color specifications
• USWDS card
  • See USWDS guidance on the how to use the component
  • Our version has the addition of tags above and below the main content
  • We have versions with images and without images(for my applications section)
  • See Figma for detailed color specifications

Accessibility

• Colors have been checked for contrast standard
• See devmode for heading (h1, h2, h3) definitions. Using the "usa-prose" CSS class should make these consistent.
  • devmode link 1 , link 2
  • The screen-reader-only text for the program card "View and apply" buttons should be "View and apply to Program name". Probably use "aria-label".
  • The “You are applying as a guest…” alert should have an ARIA role of "status". Same for the TI "You are applying as a guest..." banner.

This is the "landing page" for CiviForm.

Old UX

[sijiayam]

@melanie-exygy Please take a look and let me know if there are any missing details or requirements.

[github-actions[bot]]

Thanks, @sijiayam, for your interest in contributing to CiviForm! You can find info on how to get started here: https://github.com/civiform/civiform/wiki/Technical-contribution-guide#community-contributors-not-part-of-exygy-google-or-a-civic-entity.