RHCLOUD-30755 add ContentHeader component

[aferd]

Jira https://issues.redhat.com/browse/RHCLOUD-30755

[patternfly-build]

Preview: https://react-component-groups-pr-component-groups-143.surge.sh

A11y report: https://react-component-groups-pr-component-groups-143-a11y.surge.sh

[fhlavac]

@aferd can you please add cypress component tests for the core functionality?

[fhlavac]

I've tried to summarize my comments here, it should also help with the layout issues you've mentioned.

import React from 'react';
import {
  Divider,
  Flex,
  FlexItem,
  Split,
  SplitItem,
  Text,
  PageSection,
  TextContent,
  Button,
  ButtonVariant,
  ButtonProps
} from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';

export interface PageHeaderLinkProps extends ButtonProps {
  /** Title for the link */
  label: string;
  /** Indicates if the link points to an external page */
  isExternal?: boolean;
}

export interface ContentHeaderProps {
  /** Title for content header */
  title: string;
  /** Subtitle for content header */
  subtitle: string;
  /** Optional link below subtitle */
  linkProps?: PageHeaderLinkProps;
  /** Optional icon for content header (appears to the left of the content header's title with a divider) */
  icon?: React.ReactNode;
  /** Optional badge for content header (appears to the right of the content header's title) */
  label?: React.ReactNode;
  /** Breadcrumbs component */
  breadcrumbs?: React.ReactNode;
  /** Menu that appears to the far right of the title */
  actionMenu?: React.ReactNode;
  /** Custom OUIA ID */
  ouiaId?: string | number;
}

export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<ContentHeaderProps>> = ({
  title,
  subtitle,
  linkProps,
  icon,
  label,
  breadcrumbs = null,
  actionMenu,
}: ContentHeaderProps) => (
  <PageSection variant="light" className='pf-v5-u-p-md'>
    <div className="pf-v5-u-mb-md">
      {breadcrumbs}
    </div>
    <Flex>
      {icon && (
        <>
          <FlexItem>
            {icon}
          </FlexItem>
          <Divider orientation={{ default: 'vertical' }} />
        </>
      )}
      <FlexItem flex={{ default: 'flex_1' }}>
        <Split hasGutter>
          <SplitItem>
            <TextContent>
              <Text component="h1">
                {title}
              </Text>
            </TextContent>
          </SplitItem>
          {label && (
            <SplitItem>
              {label}
            </SplitItem>
          )}
          <SplitItem isFilled />
          {actionMenu && (
            <SplitItem>
              {actionMenu}
            </SplitItem>
          )}
        </Split>
        <TextContent>
          <Text component="p">
            {subtitle}
          </Text>
          {linkProps && (
            <Button variant={ButtonVariant.link} isInline icon={linkProps.isExternal ? <ExternalLinkAltIcon /> : null} iconPosition="end" {...linkProps}>
              {linkProps.label}
            </Button>
          )}
        </TextContent>
      </FlexItem>
    </Flex>
  </PageSection>
);

export default ContentHeader;

[fhlavac]

@aferd one last thing I've missed. Could you please also add OUIA ids to the key component's elements similarly to other components in this repo? It should also help with the cypress testing. Thank you 🙂

[fhlavac]

@aferd the a11y tests seem to be failing on missing image-alt

[fhlavac]

According to the PF example, the title should have a 8px bottom margin

https://www.patternfly.org/components/page/react-demos/sticky-section-group/

[fhlavac]

@aferd left some more comments, but it looks great! Thank you 🎉

[fhlavac]

@aferd just two small comments to improve the examples. Looks great! Let's wait for the UX review.
Can you also squash the changes to 2-3 meaningful commits? Also feat(ContentHeader): prefix should be added to the commit message to trigger a release after merge.

[andrew-ronaldson]

I noticed the label next to the title seemed to be aligned to the top of the text. Think that flex layout could align center?

[fhlavac]

@aferd perfect, if you could clean up the commits a bit, and this one might be good to go! 🎉

[andrew-ronaldson]

Last update from me, sorry!
The content header with icon. Can we center that vertically with the title area. I added align-self:center but not sure if there is an existing pf modifier for that.

Inspected code

Sorry for this one too but can you remove the pf-v5-u-align-content-centerfrom the div around the label. What you have makes the text align on the baseline with the title, which is nice, but the overall label feels top aligned.

[andrew-ronaldson]

Aaaaaaaaaproved. thanks!

[fhlavac]

Great work! Thanks @aferd 🎉