diff --git a/packages/react-core/src/components/LoginPage/LoginPage.tsx b/packages/react-core/src/components/LoginPage/LoginPage.tsx index e0fa868a096..5ebba9325eb 100644 --- a/packages/react-core/src/components/LoginPage/LoginPage.tsx +++ b/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 { 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 = ({ className = '', brandImgSrc = '', brandImgAlt = '', + brandImgProps, backgroundImgSrc = '', footerListItems = null, textContent = '', @@ -65,7 +68,7 @@ export const LoginPage: React.FunctionComponent = ({ }: LoginPageProps) => { const HeaderBrand = ( - + {(brandImgSrc || brandImgProps?.src) && } ); const Header = ; diff --git a/packages/react-core/src/components/LoginPage/__tests__/LoginPage.test.tsx b/packages/react-core/src/components/LoginPage/__tests__/LoginPage.test.tsx index e76f7589645..479cd14bfb0 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/LoginPage.test.tsx +++ b/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(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('brand is present with brandImgSrc prop', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('brandImgProps successfully renders brand with props', () => { + render( + + ); + 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( + + ); + 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'); +}); diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap index 2ff29357dc3..f17fadf07a7 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap +++ b/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`] = ` + + + +`; + +exports[`brand is present with brandImgSrc prop 1`] = ` + + + +`; + exports[`check loginpage example against snapshot 1`] = `
`. + +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 ``` diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx index 8d8ee40e7bf..a518ff41ff1 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx @@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => { return (