fix(LoginPage): allow brand props passthrough make brand optional

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

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 
 import { BackgroundImage } from '../BackgroundImage';
-import { Brand } from '../Brand';
+import { Brand, BrandProps } from '../Brand';
 import { List, ListVariant } from '../List';
 
 import { Login } from './Login';
@@ -21,6 +21,8 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   brandImgSrc?: string;
   /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
+  /** Additional props for the brand image for the login page */
+  brandImgProps?: BrandProps;
   /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string;
   /** Content rendered inside of the text component of the login page */
@@ -50,6 +52,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   className = '',
   brandImgSrc = '',
   brandImgAlt = '',
+  brandImgProps,
   backgroundImgSrc = '',
   footerListItems = null,
   textContent = '',
@@ -65,7 +68,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
 }: LoginPageProps) => {
   const HeaderBrand = (
     <Fragment>
-      <Brand src={brandImgSrc} alt={brandImgAlt} />
+      {(brandImgSrc || brandImgProps?.src) && <Brand src={brandImgSrc} alt={brandImgAlt} {...brandImgProps} />}
     </Fragment>
   );
   const Header = <LoginHeader headerBrand={HeaderBrand} />;

packages/react-core/src/components/LoginPage/__tests__/LoginPage.test.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { LoginPage } from '../LoginPage';
 import { ListVariant } from '../../List';
@@ -26,3 +26,40 @@ test('check loginpage example against snapshot', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('brand is absent without brandImgSrc and brandImgProps.src', () => {
+  const { asFragment } = render(<LoginPage loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brand is present with brandImgSrc prop', () => {
+  const { asFragment } = render(<LoginPage brandImgSrc="Brand src" loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brandImgProps successfully renders brand with props', () => {
+  render(
+    <LoginPage
+      brandImgProps={{ src: 'Brand src', alt: 'Pf-logo', 'aria-label': 'PatternFly logo', className: 'custom-class' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'PatternFly logo' });
+  expect(brandImg).toHaveAttribute('src', 'Brand src');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo');
+  expect(brandImg).toHaveAttribute('aria-label', 'PatternFly logo');
+  expect(brandImg).toHaveClass('custom-class');
+});
+
+test('Brand is rendered correctly with both brandImgSrc and brandImgProps, prioritizing brandImgProps.src', () => {
+  render(
+    <LoginPage
+      brandImgSrc="Brand-src-that-should-be-ignored"
+      brandImgProps={{ src: 'Brand-src-from-props', alt: 'Pf-logo from props' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'Pf-logo from props' });
+  expect(brandImg).toHaveAttribute('src', 'Brand-src-from-props');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo from props');
+});

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

@@ -1,5 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      />
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-2"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`brand is present with brandImgSrc prop 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      >
+        <img
+          alt=""
+          class="pf-v6-c-brand"
+          src="Brand src"
+        />
+      </header>
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-3"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div

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

@@ -32,6 +32,8 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 ### Basic
 
 By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
+
+This example uses `brandImgProps` to pass the brand image source, alt text, and an extra class, which will be preferred over `brandImgSrc` when both are provided.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg}
-      brandImgAlt="PatternFly logo"
+      brandImgProps={{ src: brandImg, alt: 'PatternFly logo', className: 'pf-m-hover' }}
       backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."