feat(Compass): add CompassMainFooter (#12137)

* feat(Compass): add CompassMainFooter

* add tests

* add isExpanded to CompassMainFooter

* add max height to examples

Author: kmcfaul

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

@@ -0,0 +1,24 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainFooterProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes added to the main footer */
+  className?: string;
+  /** Main footer content */
+  children?: React.ReactNode;
+  /** Indicates if the main footer is expanded */
+  isExpanded?: boolean;
+}
+
+export const CompassMainFooter: React.FunctionComponent<CompassMainFooterProps> = ({
+  className,
+  children,
+  isExpanded = true,
+  ...props
+}) => (
+  <div className={css(styles.compassMainFooter, isExpanded && 'pf-m-expanded', className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainFooter.displayName = 'CompassMainFooter';

packages/react-core/src/components/Compass/__tests__/CompassMainFooter.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainFooter } from '../CompassMainFooter';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-main-footer">
+      <CompassMainFooter />
+    </div>
+  );
+  expect(screen.getByTestId('test-main-footer').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMainFooter>Custom content</CompassMainFooter>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainFooter className="custom-class">Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMainFooter} class`, () => {
+  render(<CompassMainFooter>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassMainFooter);
+});
+
+test(`Renders with pf-m-expanded class by default`, () => {
+  render(<CompassMainFooter>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders with pf-m-expanded class when isExpanded is true`, () => {
+  render(<CompassMainFooter isExpanded>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders without pf-m-expanded class when isExpanded is false`, () => {
+  render(<CompassMainFooter isExpanded={false}>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainFooter aria-label="Test label">Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainFooter>Custom children content</CompassMainFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-footer pf-m-expanded"
+  >
+    Custom children content
+  </div>
+</DocumentFragment>
+`;

packages/react-core/src/components/Compass/examples/Compass.md

@@ -16,13 +16,14 @@ propComponents:
   ]
 ---
 
-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';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
+import './compass.css';
+
 ## Examples
 
 ### Basic
@@ -41,6 +42,14 @@ The background image of the `Compass` and `CompassHero` may be customized by usi
 
 ```
 
+### With alternate footer
+
+When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page.
+
+```ts file="CompassMainFooterDemo.tsx"
+
+```
+
 ### Demo
 
 ```ts isFullscreen file="CompassDemo.tsx"

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

@@ -40,6 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {
       main={mainContent}
       sidebarEnd={sidebarEndContent}
       footer={footerContent}
+      style={{ height: '600px' }}
     />
   );
 };

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

@@ -0,0 +1,43 @@
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassMainFooter
+} from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassMainFooterDemo: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+      <CompassMainFooter>
+        <div>Footer</div>
+      </CompassMainFooter>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      isFooterExpanded={false}
+      style={{ height: '600px' }}
+    />
+  );
+};

packages/react-core/src/components/Compass/examples/compass.css

@@ -1,8 +1,20 @@
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
   content: "";
   position: absolute;
   inset: 0;

packages/react-core/src/components/Compass/index.ts

@@ -6,6 +6,7 @@ export * from './CompassMainHeader';
 export * from './CompassMainHeaderContent';
 export * from './CompassMainHeaderTitle';
 export * from './CompassMainHeaderToolbar';
+export * from './CompassMainFooter';
 export * from './CompassMessageBar';
 export * from './CompassNavContent';
 export * from './CompassNavHome';