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

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

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHero } from '../CompassHero';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <CompassHero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassHero>Test content</CompassHero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassHero className="custom-class">Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassPanel} and ${styles.compassHero} classes on the hero and ${styles.compassHeroBody} class on the hero body`, () => {
+  render(<CompassHero>Test</CompassHero>);
+  const heroBodyElement = screen.getByText('Test');
+  expect(heroBodyElement).toHaveClass(styles.compassHeroBody);
+
+  const heroElement = heroBodyElement.parentElement;
+  expect(heroElement).toHaveClass(styles.compassPanel);
+  expect(heroElement).toHaveClass(styles.compassHero);
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<CompassHero backgroundSrcLight={backgroundSrc}>Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-compass__hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<CompassHero backgroundSrcDark={backgroundSrc}>Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-compass__hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <CompassHero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<CompassHero gradientLight={gradient}>Test</CompassHero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<CompassHero gradientDark={gradient}>Test</CompassHero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <CompassHero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <CompassHero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassHero aria-label="Test label">Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassHero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      <div>Hero content</div>
+    </CompassHero>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeader } from '../CompassMainHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-main-header">
+      <CompassMainHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-main-header').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMainHeader>Custom content</CompassMainHeader>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeader className="custom-class">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compass}__main-header class`, () => {
+  render(<CompassMainHeader>Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header`);
+});
+
+test('Renders title when provided', () => {
+  render(<CompassMainHeader title={<div>Title content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Title content')).toBeVisible();
+});
+
+test('Renders toolbar when provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Toolbar content')).toBeVisible();
+});
+
+test('Renders both title and toolbar when provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Test
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+});
+
+test('Ignores children when title is provided', () => {
+  render(<CompassMainHeader title={<div>Title</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when toolbar is provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when both title and toolbar are provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Ignored children
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Renders children when neither title nor toolbar are provided', () => {
+  render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(screen.getByText('Custom children content')).toBeVisible();
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with both title and toolbar', () => {
+  const { asFragment } = render(<CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with children', () => {
+  const { asFragment } = render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMessageBar } from '../CompassMessageBar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-message-bar">
+      <CompassMessageBar />
+    </div>
+  );
+  expect(screen.getByTestId('test-message-bar').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMessageBar>Test content</CompassMessageBar>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMessageBar className="custom-class">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMessageBar} class`, () => {
+  render(<CompassMessageBar>Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassMessageBar);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMessageBar aria-label="Test label">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassMessageBar>
+      <div>Message bar content</div>
+    </CompassMessageBar>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import { CompassPanel } from '../CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassPanel>Test content</CompassPanel>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassPanel className="custom-class">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassPanel} class`, () => {
+  render(<CompassPanel>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassPanel);
+});
+
+test(`Renders with ${styles.modifiers.pill} when isPill is true`, () => {
+  render(<CompassPanel isPill>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
+  render(<CompassPanel hasNoBorder>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => {
+  render(<CompassPanel hasNoPadding>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding);
+});
+
+test('Renders with pf-v6-m-thinking when isThinking is true', () => {
+  render(<CompassPanel isThinking>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking');
+});
+
+test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
+  render(<CompassPanel isFullHeight>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => {
+  render(<CompassPanel isScrollable>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with multiple modifier classes when multiple props are true', () => {
+  render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      Test
+    </CompassPanel>
+  );
+  const panelElement = screen.getByText('Test');
+  expect(panelElement).toHaveClass(styles.modifiers.pill);
+  expect(panelElement).toHaveClass(styles.modifiers.noBorder);
+  expect(panelElement).toHaveClass(styles.modifiers.noPadding);
+  expect(panelElement).toHaveClass('pf-v6-m-thinking');
+  expect(panelElement).toHaveClass(styles.modifiers.fullHeight);
+  expect(panelElement).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassPanel aria-label="Test label">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with all modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      <div>Panel with all modifiers</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with no modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel>
+      <div>Basic panel</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with basic layout 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass"
+  >
+    <div
+      class="pf-v6-c-compass__header pf-m-expanded"
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+    >
+      <div>
+        Sidebar start
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__main"
+    >
+      <div>
+        Main content
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+    >
+      <div>
+        Sidebar end
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__footer pf-m-expanded"
+    >
+      <div>
+        Footer
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-drawer__body"
+        >
+          <div
+            class="pf-v6-c-compass"
+          >
+            <div
+              class="pf-v6-c-compass__header pf-m-expanded"
+            >
+              <div>
+                Header
+              </div>
+            </div>
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+            >
+              <div>
+                Sidebar start
+              </div>
+            </div>
+            <div
+              class="pf-v6-c-compass__main"
+            >
+              <div>
+                Main content
+              </div>
+            </div>
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+            >
+              <div>
+                Sidebar end
+              </div>
+            </div>
+            <div
+              class="pf-v6-c-compass__footer pf-m-expanded"
+            >
+              <div>
+                Footer
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-compass__content"
+        >
+          <div>
+            Test content
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__content"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__logo"
+  >
+    <div>
+      Logo
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__nav"
+  >
+    <div>
+      Nav
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__profile"
+  >
+    <div>
+      Profile
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
+    style="--pf-v6-c-compass__hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-compass__hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-compass__hero--gradient--stop-1--light: #ff0000; --pf-v6-c-compass__hero--gradient--stop-2--light: #00ff00; --pf-v6-c-compass__hero--gradient--stop-3--light: #0000ff; --pf-v6-c-compass__hero--gradient--stop-1--dark: #000000; --pf-v6-c-compass__hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-compass__hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-compass__hero-body"
+    >
+      <div>
+        Hero content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with both title and toolbar 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    <div
+      class="pf-v6-c-compass__panel"
+    >
+      <div
+        class="pf-v6-l-flex pf-m-align-items-center"
+      >
+        <div
+          class="pf-m-grow"
+        >
+          <div>
+            Title
+          </div>
+        </div>
+        <div
+          class=""
+        >
+          <div>
+            Toolbar
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    Custom children content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMessageBar.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__message-bar"
+  >
+    <div>
+      Message bar content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with all modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-v6-m-thinking pf-m-full-height pf-m-scrollable"
+  >
+    <div>
+      Panel with all modifiers
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with no modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel"
+  >
+    <div>
+      Basic panel
+    </div>
+  </div>
+</DocumentFragment>
+`;