✨ Site-wide hero update

[petertgiles]

✨ Feature

Updates to the Hero component. All variants now allow for breadcrumbs and non-tab variants optionally allow for body overlap of the hero.

The pattern that we're going for:

1. Pages that are single forms have overlap and dashboards also have overlap
2. Tabs are reserved for page sets with multiple chunks of data
3. All other pages have the standard header

Out of scope:
Update to the mobile tab component

🕵️ Details

Desktop options

1. Tabs, no tabs, or no tabs with overlap
2. Centered or not
3. Image or not

Which makes for all these variants :

1. Tabs, no image
2. Tabs, with image
3. Tabs, no image, Centered
4. Tabs, with image, Centered
5. No tabs, no image
6. No tabs, with image
7. No tabs, no image, Overlap
8. No tabs, with image, Overlap
9. No tabs, no image, Centered
10. No tabs, with image, Centered
11. No tabs, no image, Centered, Overlap
12. No tabs, with image, Centered, Overlap

Mobile options

Mobile

1. Tabs or no
2. Image or no
3. Always centered

So only 4 variants for mobile

1. Tabs, no image
2. Tabs, with image (not in design file, but please dev it)
3. No tabs, no image
4. No tabs, with image (not in design file, but please dev it)

🎨 Design

Hero component figma

@JoshBeveridge

Here are screenshots, just adding it because Figma was aligning the tabs incorrectly sometimes... if it looks weird, check back here or ask Josh.

Desktop

Mobile

Suggested implementation

• Create a new hero component
• Deprecate the old one

✅ Acceptance Criteria

• Desktop variants

  • Tabs, no tabs, or no tabs with overlap
  • Centered or not
  • Image or not
  • Buttons or not

• Mobile variants

  • Tabs, no tabs
  • Image or not
  • Buttons or not

• breadcrumb placement updated

• Storybook story

• Design review @JoshBeveridge

[vd1992]

Overlap comparison