feat(Compass): add Compass components

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/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';

packages/react-core/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';

packages/react-core/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';

packages/react-core/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';

packages/react-core/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';

packages/react-core/src/components/Compass/CompassMessageBar.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the message bar. Typically a @patternfly/chatbot MessageBar component. */
+  children?: React.ReactNode;
+  /** Additional classes added to the message bar */
+  className?: string;
+}
+
+export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css(styles.compassMessageBar, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMessageBar.displayName = 'CompassMessageBar';

packages/react-core/src/components/Compass/CompassPanel.tsx

@@ -0,0 +1,51 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the panel. */
+  children: React.ReactNode;
+  /** Additional classes added to the panel. */
+  className?: string;
+  /** Indicates the panel should have a pill border radius */
+  isPill?: boolean;
+  /** Indicates the panel should expand to fill the available height */
+  isFullHeight?: boolean;
+  /** Indicates the panel should scroll its overflow */
+  isScrollable?: boolean;
+  /** Indicates the panel should have no border */
+  hasNoBorder?: boolean;
+  /** Indicates the panel should have no padding */
+  hasNoPadding?: boolean;
+  /** Indicates the panel should have a "thinking" animation */
+  isThinking?: boolean;
+}
+
+export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
+  children,
+  className,
+  isPill,
+  hasNoBorder,
+  hasNoPadding,
+  isThinking,
+  isFullHeight,
+  isScrollable,
+  ...props
+}) => (
+  <div
+    className={css(
+      styles.compassPanel,
+      isPill && styles.modifiers.pill,
+      hasNoBorder && styles.modifiers.noBorder,
+      hasNoPadding && styles.modifiers.noPadding,
+      isThinking && 'pf-v6-m-thinking',
+      isFullHeight && styles.modifiers.fullHeight,
+      isScrollable && styles.modifiers.scrollable,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+CompassPanel.displayName = 'CompassPanel';