Create Header Components

[anastasialanz]

Description

We need to create two new header components, PageHeader and SectionHeader.

PageHeader

Implementation

• Always uses an h1
• When a string value is passed into heading, always renders an h1
• Optional overline

type PageHeaderProps {
  heading: ReactNode;
  overline?: ReactNode;
  description?: ReactNode;
  children?: ReactNode;
}

<PageHeader
  heading="Page Header"
  description="An optional description"
  overline="An optional overline"
>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <ActionMenu>
     ...
  </ActionMenu>
</PageHeader>

SectionHeader

Implementation

• Never uses an h1
• Can be an h2 - h6
• When a string value is passed into heading, always renders an h2

type SectionHeaderProps {
  heading: ReactNode;
  description?: ReactNode;
  children?: ReactNode;
}

<SectionHeader
  heading="Section Heading"
  description="An optional description"
>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <ActionMenu>
     ...
  </ActionMenu>
</SectionHeader>

<SectionHeader
  heading={<h3>Section Heading</h3>}
  description="An optional description"
>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <ActionMenu>
     ...
  </ActionMenu>
</SectionHeader>

The dark mode styles can be found in the Figma.

[!NOTE]
The horizontal rule in the screenshot and Figma are not part of the component.

Container Queries

• Large: >= 80rem @container (min-width: 80rem) {}
• Medium: 79.9375rem to 48rem @container (min-width: 48rem) {}
• Small: <= 79.9375rem

Ask in the #cauldron channel if you need a link to the designs.

[JoshMK]

👍 Looks good.

[anastasialanz]

Would it be better to use string | ReactElement<HTMLHeadingElement> for the heading prop? We switched it to ReactNode for more flexibility.

Should overline only ever be a string? We left it as ReactNode to make it flexible.

[scurker]

Looks good! 🎉

[ezirlingerDQ]

@denysfedorov Updated the Figma link in the ticket. It now points to the proper place.

[denysfedorov]

@anastasialanz Hello! I have a question about PageHeader component, since heading should be always H1 level, the heading prop should be string I suppose? If we leave it as a ReactNode we can pass any element to it and this element will be wrapped by <h1> tag. O

    <div
        className={classNames('PageHeader', className)}
        ref={ref}
        {...otherProps}
      >
        {overline}
        {/* here we can pass another span and it will be <h1><span>test</span></h1> /*}
        <h1 className="PageHeader__heading">{heading}</h1> 
        {description}
        {children}
      </div>

[scurker]

@anastasialanz Hello! I have a question about PageHeader component, since heading should be always H1 level, the heading prop should be string I suppose? If we leave it as a ReactNode we can pass any element to it and this element will be wrapped by <h1> tag. O

That's a known issue. There might be instances where we need to add other properties to the h1, like id, so we need to allow some flexibility there.

[somaalapati]

@anastasialanz What is the best way to test this ticket? Is this component available on any existing issue view to verify? CC: @Raghu2010 @gayathrit12

[anastasialanz]

@scurker is this component being used in a Launchpad component for testing purposes?

[scurker]

Soon yes. Best way to test this right now though is within Cauldron documentation.