@patternfly/react-core 6.4.1-prerelease.8 → 6.5.0-prerelease.1

package/src/components/Alert/examples/AlertInlineVariations.tsx

@@ -0,0 +1,45 @@
+import { Fragment } from 'react';
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
+
+export const AlertInlineVariations: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      isInline
+      variant="success"
+      title="Success alert title"
+      actionLinks={
+        <Fragment>
+          <AlertActionLink component="a" href="#">
+            View details
+          </AlertActionLink>
+          <AlertActionLink // eslint-disable-next-line no-console
+            onClick={() => console.log('Clicked on Ignore')}
+          >
+            Ignore
+          </AlertActionLink>
+        </Fragment>
+      }
+    >
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+    </Alert>
+    <Alert isInline variant="success" title="Success alert title">
+      <p>
+        Success alert description. This should tell the user more information about the alert.{' '}
+        <a href="#">This is a link.</a>
+      </p>
+    </Alert>
+    <Alert
+      isInline
+      variant="success"
+      title="Success alert title"
+      // eslint-disable-next-line no-console
+      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
+    >
+      <p>Short alert description.</p>
+    </Alert>
+    <Alert isInline variant="success" title="div success alert title" component="div" />
+    <Alert isInline variant="success" title="h6 Success alert title" component="h6">
+      <p>Short alert description.</p>
+    </Alert>
+  </Fragment>
+);

package/src/components/Alert/examples/AlertPlainInlineVariants.tsx

@@ -0,0 +1,12 @@
+import { Fragment } from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const AlertPlainInlineVariants: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert variant="custom" isInline isPlain title="Custom inline alert title" />
+    <Alert variant="info" isInline isPlain title="Info inline alert title" />
+    <Alert variant="success" isInline isPlain title="Success inline alert title" />
+    <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
+    <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
+  </Fragment>
+);

package/src/components/Alert/examples/AlertPlainInlineVariations.tsx

@@ -0,0 +1,7 @@
+import { Alert } from '@patternfly/react-core';
+
+export const AlertPlainInlineVariations: React.FunctionComponent = () => (
+  <Alert isInline isPlain variant="success" title="Success alert title">
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+  </Alert>
+);

package/src/components/Alert/examples/AlertStaticLiveRegion.tsx

@@ -0,0 +1,29 @@
+import { Fragment } from 'react';
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+
+export const AlertStaticLiveRegion: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      isLiveRegion
+      variant="info"
+      title="Default live region configuration"
+      // eslint-disable-next-line no-console
+      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
+    >
+      This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS
+      classes.
+    </Alert>
+    <Alert
+      aria-live="assertive"
+      aria-relevant="additions text"
+      aria-atomic="true"
+      variant="info"
+      title="Customized live region"
+      // eslint-disable-next-line no-console
+      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
+    >
+      You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
+      containing element.
+    </Alert>
+  </Fragment>
+);

package/src/components/Alert/examples/AlertTimeout.tsx

@@ -0,0 +1,45 @@
+import { Fragment, useState } from 'react';
+import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
+
+export const AlertTimeout: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
+  const [newAlertKey, setNewAlertKey] = useState<number>(0);
+
+  const onClick = () => {
+    const timeout = 8000;
+    setNewAlertKey((key) => key + 1);
+    setAlerts((prevAlerts) => [
+      <Alert
+        title="Default timeout Alert"
+        timeout={timeout}
+        actionLinks={
+          <Fragment>
+            <AlertActionLink component="a" href="#">
+              View details
+            </AlertActionLink>
+            <AlertActionLink // eslint-disable-next-line no-console
+              onClick={() => console.log('Clicked on Ignore')}
+            >
+              Ignore
+            </AlertActionLink>
+          </Fragment>
+        }
+        key={newAlertKey}
+      >
+        This alert will dismiss after {`${timeout / 1000} seconds`}
+      </Alert>,
+      ...prevAlerts
+    ]);
+  };
+
+  return (
+    <Fragment>
+      <Button variant="secondary" onClick={onClick}>
+        Add alert
+      </Button>
+      <AlertGroup hasAnimations isLiveRegion>
+        {alerts}
+      </AlertGroup>
+    </Fragment>
+  );
+};

package/src/components/Alert/examples/AlertTruncated.tsx

@@ -0,0 +1,28 @@
+import { Fragment } from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const AlertTruncated: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      variant="info"
+      truncateTitle={1}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+    <Alert
+      variant="warning"
+      truncateTitle={2}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+    <Alert
+      variant="danger"
+      truncateTitle={3}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+  </Fragment>
+);

package/src/components/Alert/examples/AlertVariants.tsx

@@ -0,0 +1,12 @@
+import { Fragment } from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const AlertVariants: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert title="Custom alert title" ouiaId="CustomAlert" />
+    <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
+    <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
+    <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
+    <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
+  </Fragment>
+);

package/src/components/Alert/examples/AlertVariations.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
+
+export const AlertVariations: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      variant="success"
+      title="Success alert title"
+      actionLinks={
+        <Fragment>
+          <AlertActionLink component="a" href="#">
+            View details
+          </AlertActionLink>
+          <AlertActionLink // eslint-disable-next-line no-console
+            onClick={() => console.log('Clicked on Ignore')}
+          >
+            Ignore
+          </AlertActionLink>
+        </Fragment>
+      }
+    >
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+    </Alert>
+    <Alert variant="success" title="Success alert title">
+      <p>
+        Success alert description. This should tell the user more information about the alert.{' '}
+        <a href="#">This is a link.</a>
+      </p>
+    </Alert>
+    <Alert
+      variant="success"
+      title="Success alert title"
+      // eslint-disable-next-line no-console
+      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
+    >
+      <p>Short alert description.</p>
+    </Alert>
+    <Alert variant="success" title="div success alert title" component="div" />
+    <Alert variant="success" title="h6 Success alert title" component="h6">
+      <p>Short alert description.</p>
+    </Alert>
+  </Fragment>
+);

package/src/components/Button/Button.tsx

@@ -107,6 +107,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isHamburger?: boolean;
   /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
   hamburgerVariant?: 'expand' | 'collapse';
+  /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
+  isCircle?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -131,6 +133,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isSettings,
   isHamburger,
   hamburgerVariant,
+  isCircle,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -261,6 +264,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
+        isCircle && styles.modifiers.circle,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

package/src/components/Button/__tests__/Button.test.tsx

@@ -214,6 +214,11 @@ test(`Renders without class ${styles.modifiers.progress} when isLoading = false
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.progress);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when isCircle is true`, () => {
+  render(<Button isCircle>Circle Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
 test(`Renders custom icon with class ${styles.modifiers.inProgress} when isLoading = true and icon is present`, () => {
   render(
     <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-66"
+    data-ouia-component-id="OUIA-Generated-Button-primary-67"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -138,6 +138,14 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```
 
+### Circle buttons
+
+Pass `isCircle` to a button to modify its styling from simply rounded corners to complete circles. Circle buttons are intended for buttons that only contain an icon and adequate accessible naming.
+
+```ts file="./ButtonCircle.tsx"
+
+```
+
 ## Animated examples
 
 The following `<Button>` implementations have animations built into them. When using one of the following implementations, the `icon` property will be overridden due to the animations needing specific icons internally.

package/src/components/Button/examples/ButtonCircle.tsx

@@ -0,0 +1,63 @@
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+interface LoadingPropsType {
+  spinnerAriaValueText: string;
+  spinnerAriaLabelledBy?: string;
+  spinnerAriaLabel?: string;
+  isLoading: boolean;
+}
+
+export const ButtonCircle: React.FunctionComponent = () => {
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const uploadingProps = {} as LoadingPropsType;
+  uploadingProps.spinnerAriaValueText = 'Loading circle variant example';
+  uploadingProps.spinnerAriaLabel = 'Uploading circle variant example data';
+  uploadingProps.isLoading = isUploading;
+
+  return (
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
+      <Button
+        variant="secondary"
+        isCircle
+        icon={<PlusCircleIcon />}
+        aria-label="Add secondary circle variant example"
+      />
+      <Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
+      <Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
+      <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
+      <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
+      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
+      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button
+        variant="stateful"
+        state="read"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful read circle variant example"
+      />
+      <Button
+        variant="stateful"
+        state="attention"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful attention circle variant example"
+      />
+      <Button
+        variant="plain"
+        isCircle
+        {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
+        onClick={() => setIsUploading(!isUploading)}
+        icon={<UploadIcon />}
+        {...uploadingProps}
+      />
+    </Flex>
+  );
+};

package/src/components/Compass/Compass.tsx

@@ -0,0 +1,107 @@
+import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
+import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
+
+export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the compass. */
+  className?: string;
+  /** Content placed at the top of the layout */
+  header?: React.ReactNode;
+  /** Flag indicating if the header is expanded */
+  isHeaderExpanded?: boolean;
+  /** Content placed at the horizontal start of the layout, before the main content */
+  sidebarStart?: React.ReactNode;
+  /** Flag indicating if the start sidebar is expanded */
+  isSidebarStartExpanded?: boolean;
+  /** Content placed at the center of the layout */
+  main?: React.ReactNode;
+  /** Content placed at the horizontal end of the layout, after the main content */
+  sidebarEnd?: React.ReactNode;
+  /** Flag indicating if the end sidebar is expanded */
+  isSidebarEndExpanded?: boolean;
+  /** Content placed at the bottom of the layout */
+  footer?: React.ReactNode;
+  /** Flag indicating if the footer is expanded */
+  isFooterExpanded?: boolean;
+  /** Content rendered in an optional drawer wrapping the layout */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+  /** Light theme background image path of the compass */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the compass */
+  backgroundSrcDark?: string;
+}
+
+export const Compass: React.FunctionComponent<CompassProps> = ({
+  className,
+  header,
+  isHeaderExpanded = true,
+  sidebarStart,
+  isSidebarStartExpanded = true,
+  main,
+  sidebarEnd,
+  isSidebarEndExpanded = true,
+  footer,
+  isFooterExpanded = true,
+  drawerContent,
+  drawerProps,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const backgroundImageStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    backgroundImageStyles[compassBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    backgroundImageStyles[compassBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  const compassContent = (
+    <div className={css(styles.compass, className)} {...props} style={{ ...props.style, ...backgroundImageStyles }}>
+      <div
+        className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
+        {...(!isHeaderExpanded && { inert: 'true' })}
+      >
+        {header}
+      </div>
+      <div
+        className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
+        {...(!isSidebarStartExpanded && { inert: 'true' })}
+      >
+        {sidebarStart}
+      </div>
+      <div className={css(styles.compassMain)}>{main}</div>
+      <div
+        className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
+        {...(!isSidebarEndExpanded && { inert: 'true' })}
+      >
+        {sidebarEnd}
+      </div>
+      <div
+        className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
+        {...(!isFooterExpanded && { inert: 'true' })}
+      >
+        {footer}
+      </div>
+    </div>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+Compass.displayName = 'Compass';

package/src/components/Compass/CompassContent.tsx

@@ -0,0 +1,42 @@
+import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main compass area. Typically one or more CompassPanel components. */
+  children: React.ReactNode;
+  /** Additional classes added to the CompassContent */
+  className?: string;
+  /** Content rendered in an optional drawer wrapping the CompassContent */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+}
+
+export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
+  children,
+  className,
+  drawerProps,
+  drawerContent,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const compassContent = (
+    <div className={css(styles.compassContent, className)} {...props}>
+      {children}
+    </div>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+CompassContent.displayName = 'CompassContent';

package/src/components/Compass/CompassHeader.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassHeaderProps {
+  /** Content of the logo area */
+  logo?: React.ReactNode;
+  /** Content of the navigation area */
+  nav?: React.ReactNode;
+  /** Content of the profile area */
+  profile?: React.ReactNode;
+}
+
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+  <>
+    <div className={css(`${styles.compass}__logo`)}>{logo}</div>
+    <div className={css(styles.compassNav)}>{nav}</div>
+    <div className={css(styles.compassProfile)}>{profile}</div>
+  </>
+);
+
+CompassHeader.displayName = 'CompassHeader';

package/src/components/Compass/CompassHero.tsx

@@ -0,0 +1,87 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
+import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
+import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
+import compassHeroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_light';
+import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_light';
+import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
+import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
+import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
+
+interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+  /** Content of the hero */
+  children?: React.ReactNode;
+  /** Additional classes added to the hero */
+  className?: string;
+  /** Light theme background image path of the hero */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the hero */
+  backgroundSrcDark?: string;
+  /** Light theme gradient of the hero */
+  gradientLight?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Dark theme gradient of the hero */
+  gradientDark?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+}
+
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
+  className,
+  children,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  gradientLight,
+  gradientDark,
+  ...props
+}) => {
+  const backgroundImageStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    backgroundImageStyles[compassHeroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    backgroundImageStyles[compassHeroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  if (gradientLight) {
+    if (gradientLight.stop1) {
+      backgroundImageStyles[compassHeroGradientStop1Light.name] = gradientLight.stop1;
+    }
+    if (gradientLight.stop2) {
+      backgroundImageStyles[compassHeroGradientStop2Light.name] = gradientLight.stop2;
+    }
+    if (gradientLight.stop3) {
+      backgroundImageStyles[compassHeroGradientStop3Light.name] = gradientLight.stop3;
+    }
+  }
+  if (gradientDark) {
+    if (gradientDark.stop1) {
+      backgroundImageStyles[compassHeroGradientStop1Dark.name] = gradientDark.stop1;
+    }
+    if (gradientDark.stop2) {
+      backgroundImageStyles[compassHeroGradientStop2Dark.name] = gradientDark.stop2;
+    }
+    if (gradientDark.stop3) {
+      backgroundImageStyles[compassHeroGradientStop3Dark.name] = gradientDark.stop3;
+    }
+  }
+
+  return (
+    <div
+      className={css(styles.compassPanel, styles.compassHero, className)}
+      style={{ ...props.style, ...backgroundImageStyles }}
+      {...props}
+    >
+      <div className={css(styles.compassHeroBody)}>{children}</div>
+    </div>
+  );
+};
+
+CompassHero.displayName = 'CompassHero';

package/src/components/Compass/CompassMainHeader.tsx

@@ -0,0 +1,43 @@
+import { Flex, FlexItem } from '../../layouts/Flex';
+import { CompassPanel } from './CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes added to the main header */
+  className?: string;
+  /** Styled title. If title or toolbar is provided, the children will be ignored. */
+  title?: React.ReactNode;
+  /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
+  toolbar?: React.ReactNode;
+  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+  children?: React.ReactNode;
+}
+
+export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
+  className,
+  title,
+  toolbar,
+  children,
+  ...props
+}) => {
+  const _content =
+    title !== undefined || toolbar !== undefined ? (
+      <CompassPanel>
+        <Flex alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
+          {toolbar && <FlexItem>{toolbar}</FlexItem>}
+        </Flex>
+      </CompassPanel>
+    ) : (
+      children
+    );
+
+  return (
+    <div className={css(`${styles.compass}__main-header`, className)} {...props}>
+      {_content}
+    </div>
+  );
+};
+
+CompassMainHeader.displayName = 'CompassMainHeader';