working session updates

Author: kmcfaul

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

@@ -1,4 +1,6 @@
 import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
+import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
 import { css } from '@patternfly/react-styles';
 
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
@@ -9,15 +11,15 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   /** Flag indicating if the header is expanded */
   isHeaderExpanded?: boolean;
   /** Content placed at the start of the layout */
-  panelStart?: React.ReactNode;
+  sidebarStart?: React.ReactNode;
   /** Flag indicating if the start panel is expanded */
-  isPanelStartExpanded?: boolean;
+  isSidebarStartExpanded?: boolean;
   /** Content placed at the center of the layout */
   main?: React.ReactNode;
   /** Content placed at the end of the layout */
-  panelEnd?: React.ReactNode;
+  sidebarEnd?: React.ReactNode;
   /** Flag indicating if the end panel is expanded */
-  isPanelEndExpanded?: boolean;
+  isSidebarEndExpanded?: boolean;
   /** Content placed at the bottom of the layout */
   footer?: React.ReactNode;
   /** Flag indicating if the footer is expanded */
@@ -26,60 +28,59 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   drawerContent?: React.ReactNode;
   /** Props for the drawer */
   drawerProps?: DrawerProps;
-  /** Light background image path for the compass */
-  lightBackgroundSrc?: string;
-  /** Dark background image path for the compass */
-  darkBackgroundSrc?: string;
+  /** Light theme background image path for the compass */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path for the compass */
+  backgroundSrcDark?: string;
 }
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
   header,
   isHeaderExpanded = true,
-  panelStart,
-  isPanelStartExpanded = true,
+  sidebarStart,
+  isSidebarStartExpanded = true,
   main,
-  panelEnd,
-  isPanelEndExpanded = true,
+  sidebarEnd,
+  isSidebarEndExpanded = true,
   footer,
   isFooterExpanded = true,
   drawerContent,
   drawerProps,
-  lightBackgroundSrc,
-  darkBackgroundSrc,
+  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('pf-v6-c-compass', className)}
-      style={
-        {
-          '[cssLightName.name]': `url(${lightBackgroundSrc})`,
-          '[cssDarkName.name]': `url(${darkBackgroundSrc})`
-        } as React.CSSProperties
-      }
-      {...props}
-    >
+    <div className={css('pf-v6-c-compass', className)} style={{ ...props.style, ...backgroundImageStyles }} {...props}>
       <div
         className={css('pf-v6-c-compass__header', isHeaderExpanded && 'pf-m-expanded')}
         {...(!isHeaderExpanded && { inert: true })}
       >
         {header}
       </div>
       <div
-        className={css('pf-v6-c-compass__panel pf-m-start', isPanelStartExpanded && 'pf-m-expanded')}
-        {...(!isPanelStartExpanded && { inert: true })}
+        className={css('pf-v6-c-compass__sidebar pf-m-start', isSidebarStartExpanded && 'pf-m-expanded')}
+        {...(!isSidebarStartExpanded && { inert: true })}
       >
-        {panelStart}
+        {sidebarStart}
       </div>
       <div className={css('pf-v6-c-compass__main')}>{main}</div>
       <div
-        className={css('pf-v6-c-compass__panel pf-m-end', isPanelEndExpanded && 'pf-m-expanded')}
-        {...(!isPanelEndExpanded && { inert: true })}
+        className={css('pf-v6-c-compass__sidebar pf-m-end', isSidebarEndExpanded && 'pf-m-expanded')}
+        {...(!isSidebarEndExpanded && { inert: true })}
       >
-        {panelEnd}
+        {sidebarEnd}
       </div>
       <div
         className={css('pf-v6-c-compass__footer', isFooterExpanded && 'pf-m-expanded')}

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

@@ -1,48 +1,83 @@
-import { Flex, FlexItem } from '../../layouts/Flex';
+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';
 import { css } from '@patternfly/react-styles';
 
 interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
   /** Additional classes added to the hero. */
   className?: string;
-  /** Styled hero content. If provided, the children prop will be ignored. */
-  content?: React.ReactNode;
-  /** Custom hero content. To opt into a default set of styling, use the content prop instead. */
+  /** Content of the hero. */
   children?: React.ReactNode;
-  /** Light background image path for the hero */
-  lightBackgroundSrc?: string;
-  /** Dark background image path for the hero */
-  darkBackgroundSrc?: string;
+  /** Light theme background image path for the hero */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path for the hero */
+  backgroundSrcDark?: string;
+  /** Light theme gradient for the hero */
+  gradientLight?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Dark theme gradient for the hero */
+  gradientDark?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
 }
 
 export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
   className,
   children,
-  content,
-  lightBackgroundSrc,
-  darkBackgroundSrc,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  gradientLight,
+  gradientDark,
   ...props
 }) => {
-  const _content =
-    content !== undefined ? (
-      <Flex>
-        <FlexItem grow={{ default: 'grow' }}>{content}</FlexItem>
-      </Flex>
-    ) : (
-      children
-    );
+  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('pf-v6-c-compass__hero', className)}
-      style={
-        {
-          '[cssLightName.name]': `url(${lightBackgroundSrc})`,
-          '[cssDarkName.name]': `url(${darkBackgroundSrc})`
-        } as React.CSSProperties
-      }
+      className={css('pf-v6-c-compass__panel pf-v6-c-compass__hero', className)}
+      style={{ ...props.style, ...backgroundImageStyles }}
       {...props}
     >
-      {_content}
+      <div className={css('pf-v6-c-compass__hero-body')}>{children}</div>
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import { Flex, FlexItem } from '../../layouts/Flex';
-import { CompassSection } from './CompassSection';
+import { CompassPanel } from './CompassPanel';
 import { css } from '@patternfly/react-styles';
 
 interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -22,12 +22,12 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
 }) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <CompassSection>
+      <CompassPanel>
         <Flex alignItems={{ default: 'alignItemsCenter' }}>
           <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
           <FlexItem>{toolbar}</FlexItem>
         </Flex>
-      </CompassSection>
+      </CompassPanel>
     ) : (
       children
     );

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

@@ -0,0 +1,12 @@
+import { css } from '@patternfly/react-styles';
+
+interface CompassMessageBarProps {
+  /** Content for the message bar */
+  children?: React.ReactNode;
+}
+
+export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps> = ({ children }) => (
+  <div className={css('pf-v6-c-compass__message-bar')}>{children}</div>
+);
+
+CompassMessageBar.displayName = 'CompassMessageBar';

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

@@ -0,0 +1,54 @@
+import { css } from '@patternfly/react-styles';
+
+interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the panel. */
+  className?: string;
+  /** Content of the panel. */
+  children: React.ReactNode;
+  /** Applies a pill border radius to the panel. */
+  isPill?: boolean;
+  /** Applies a gradient border to the panel. */
+  hasGradientBorder?: boolean;
+  /** Applies a thinking style to the panel. */
+  isThinking?: boolean;
+  /** Indicates the panel should expand to fill the available height. */
+  isFullHeight?: boolean;
+  /** Indicates the panel should scroll its overflow. */
+  isScrollable?: boolean;
+  /** Removes the border of the panel. */
+  hasNoBorder?: boolean;
+  /** Removes the padding of the panel. */
+  hasNoPadding?: boolean;
+}
+
+export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
+  children,
+  className,
+  isPill,
+  hasNoBorder,
+  hasNoPadding,
+  hasGradientBorder,
+  isThinking,
+  isFullHeight,
+  isScrollable,
+  ...props
+}) => (
+  <div
+    className={css(
+      'pf-v6-c-compass__panel',
+      isPill && 'pf-m-pill',
+      hasNoBorder && 'pf-m-no-border',
+      hasNoPadding && 'pf-m-no-padding',
+      hasGradientBorder && 'pf-m-gradient-border',
+      isThinking && 'pf-m-thinking',
+      isFullHeight && 'pf-m-full-height',
+      isScrollable && 'pf-m-scrollable',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+CompassPanel.displayName = 'CompassPanel';

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

@@ -1,11 +1,13 @@
 ---
 id: Compass
 cssPrefix: pf-v6-c-compass
-section: layouts
-propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassSection']
+section: components
+isBeta: true
+propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
 ---
 
 import './compass.css';
+import { useRef, useState } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';