@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.10

package/src/components/Compass/Compass.tsx

@@ -0,0 +1,109 @@
+import { Drawer, DrawerContent, DrawerContentBody, 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}>
+          <DrawerContentBody>{compassContent}</DrawerContentBody>
+        </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';

package/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';

package/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';

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

@@ -0,0 +1,172 @@
+import { render, screen } from '@testing-library/react';
+import { Compass } from '../Compass';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-compass">
+      <Compass />
+    </div>
+  );
+  expect(screen.getByTestId('test-compass').firstChild).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Compass className="custom-class" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass('custom-class');
+});
+
+test('Renders with default compass class', () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.compass);
+});
+
+test('Renders header content when provided', () => {
+  render(<Compass header={<div>Header content</div>} />);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test('Renders sidebar start content when provided', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} />);
+  expect(screen.getByText('Sidebar start')).toBeVisible();
+});
+
+test('Renders main content when provided', () => {
+  render(<Compass main={<div>Main content</div>} />);
+  expect(screen.getByText('Main content')).toBeVisible();
+});
+
+test('Renders sidebar end content when provided', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} />);
+  expect(screen.getByText('Sidebar end')).toBeVisible();
+});
+
+test('Renders footer content when provided', () => {
+  render(<Compass footer={<div>Footer content</div>} />);
+  expect(screen.getByText('Footer content')).toBeVisible();
+});
+
+test('Renders header with expanded class when isHeaderExpanded is true', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded />);
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders header without expanded class and with inert when isHeaderExpanded is false', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded={false} />);
+  const headerElement = screen.getByText('Header').parentElement;
+  expect(headerElement).not.toHaveClass('pf-m-expanded');
+  expect(headerElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar start with expanded class when isSidebarStartExpanded is true', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded />);
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar start without expanded class and with inert when isSidebarStartExpanded is false', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar start').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar end with expanded class when isSidebarEndExpanded is true', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded />);
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar end without expanded class and with inert when isSidebarEndExpanded is false', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar end').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders footer with expanded class when isFooterExpanded is true', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded />);
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders footer without expanded class and with inert when isFooterExpanded is false', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded={false} />);
+  const footerElement = screen.getByText('Footer').parentElement;
+  expect(footerElement).not.toHaveClass('pf-m-expanded');
+  expect(footerElement).toHaveAttribute('inert');
+});
+
+test('Renders with drawer when drawerContent is provided', () => {
+  render(<Compass drawerContent={<div>Drawer content</div>} />);
+  expect(screen.getByText('Drawer content')).toBeVisible();
+});
+
+test('Renders with light background image when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Compass backgroundSrcLight={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${backgroundSrc})`);
+});
+
+test('Renders with dark background image when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcDark={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${backgroundSrc})`);
+});
+
+test('Renders with both light and dark background images when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc} data-testid="compass" />);
+  const compassElement = screen.getByTestId('compass');
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${lightSrc})`);
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<Compass aria-label="Test label" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with default expansion states', () => {
+  render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    >
+      Test
+    </Compass>
+  );
+
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Matches the snapshot with basic layout', () => {
+  const { asFragment } = render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with drawer', () => {
+  const { asFragment } = render(
+    <Compass
+      drawerContent={<div>Drawer content</div>}
+      drawerProps={{ isExpanded: true }}
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassContent.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { CompassContent } from '../CompassContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassContent>Test content</CompassContent>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassContent className="custom-class">Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassContent} class`, () => {
+  render(<CompassContent>Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassContent);
+});
+
+test('Renders with drawer when drawerContent is provided', () => {
+  render(<CompassContent drawerContent={<div>Drawer content</div>}>Test</CompassContent>);
+  expect(screen.getByText('Drawer content')).toBeVisible();
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassContent aria-label="Test label">Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot without drawer', () => {
+  const { asFragment } = render(
+    <CompassContent>
+      <div>Test content</div>
+    </CompassContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with drawer', () => {
+  const { asFragment } = render(
+    <CompassContent drawerContent={<div>Drawer content</div>} drawerProps={{ isExpanded: true }}>
+      <div>Test content</div>
+    </CompassContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassHeader.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHeader } from '../CompassHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-header">
+      <CompassHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-header').firstChild).toBeVisible();
+});
+
+test('Renders logo content when provided', () => {
+  render(<CompassHeader logo={<div>Logo content</div>} />);
+  expect(screen.getByText('Logo content')).toBeVisible();
+});
+
+test('Renders nav content when provided', () => {
+  render(<CompassHeader nav={<div>Nav content</div>} />);
+  expect(screen.getByText('Nav content')).toBeVisible();
+});
+
+test('Renders profile content when provided', () => {
+  render(<CompassHeader profile={<div>Profile content</div>} />);
+  expect(screen.getByText('Profile content')).toBeVisible();
+});
+
+test('Renders all content when all props are provided', () => {
+  render(<CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />);
+  expect(screen.getByText('Logo')).toBeVisible();
+  expect(screen.getByText('Nav')).toBeVisible();
+  expect(screen.getByText('Profile')).toBeVisible();
+});
+
+test(`Renders logo with ${styles.compass}__logo class`, () => {
+  render(<CompassHeader logo={<div>Logo</div>} />);
+  expect(screen.getByText('Logo').parentElement).toHaveClass(`${styles.compass}__logo`);
+});
+
+test(`Renders nav with ${styles.compassNav} class`, () => {
+  render(<CompassHeader nav={<div>Nav</div>} />);
+  expect(screen.getByText('Nav').parentElement).toHaveClass(styles.compassNav);
+});
+
+test(`Renders profile with ${styles.compassProfile} class`, () => {
+  render(<CompassHeader profile={<div>Profile</div>} />);
+  expect(screen.getByText('Profile').parentElement).toHaveClass(styles.compassProfile);
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});