@patternfly/react-core 4.234.0 → 4.234.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.234.0",
+  "version": "4.234.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.85.0",
-    "@patternfly/react-styles": "^4.84.0",
-    "@patternfly/react-tokens": "^4.86.0",
+    "@patternfly/react-icons": "^4.85.3",
+    "@patternfly/react-styles": "^4.84.3",
+    "@patternfly/react-tokens": "^4.86.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.210.1",
+    "@patternfly/patternfly": "4.210.2",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fa6869951efc44e52696e065322c40478aa3fad3"
+  "gitHead": "f996263c7d744850e33d19bacb6fd19d109dc1af"
 }

package/src/components/LoginPage/LoginFooterItem.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 export interface LoginFooterItemProps extends React.HTMLProps<HTMLAnchorElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
-  /** The URL of the Footer Link Item */
+  /** The URL of the footer link item */
   href?: string;
   /** Specifies where to open the linked document */
   target?: string;

package/src/components/LoginPage/LoginForm.tsx

@@ -11,29 +11,29 @@ import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
   /** Flag to indicate if the first dropdown item should not gain initial focus */
   noAutoFocus?: boolean;
-  /** Additional classes added to the Login Main Body's Form */
+  /** Additional classes added to the login main body's form */
   className?: string;
-  /** Flag indicating the Helper Text is visible * */
+  /** Flag indicating the helper text is visible * */
   showHelperText?: boolean;
-  /** Content displayed in the Helper Text component * */
+  /** Content displayed in the helper text component * */
   helperText?: React.ReactNode;
-  /** Icon displayed to the left in the Helper Text */
+  /** Icon displayed to the left in the helper text */
   helperTextIcon?: React.ReactNode;
-  /** Label for the Username Input Field */
+  /** Label for the username input field */
   usernameLabel?: string;
-  /** Value for the Username */
+  /** Value for the username */
   usernameValue?: string;
-  /** Function that handles the onChange event for the Username */
+  /** Function that handles the onChange event for the username */
   onChangeUsername?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Flag indicating if the Username is valid */
+  /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
-  /** Label for the Password Input Field */
+  /** Label for the password input field */
   passwordLabel?: string;
-  /** Value for the Password */
+  /** Value for the password */
   passwordValue?: string;
-  /** Function that handles the onChange event for the Password */
+  /** Function that handles the onChange event for the password */
   onChangePassword?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Flag indicating if the Password is valid */
+  /** Flag indicating if the password is valid */
   isValidPassword?: boolean;
   /** Flag indicating if the user can toggle hiding the password */
   isShowPasswordEnabled?: boolean;
@@ -41,17 +41,17 @@ export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
   showPasswordAriaLabel?: string;
   /** Accessible label for the hide password button */
   hidePasswordAriaLabel?: string;
-  /** Label for the Log in Button Input */
+  /** Label for the log in button input */
   loginButtonLabel?: string;
-  /** Flag indicating if the Login Button is disabled */
+  /** Flag indicating if the login button is disabled */
   isLoginButtonDisabled?: boolean;
-  /** Function that is called when the Login button is clicked */
+  /** Function that is called when the login button is clicked */
   onLoginButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** Label for the Remember Me Checkbox that indicates the user should be kept logged in.  If the label is not provided, the checkbox will not show. */
+  /** Label for the remember me checkbox that indicates the user should be kept logged in.  If the label is not provided, the checkbox will not show. */
   rememberMeLabel?: string;
-  /** Flag indicating if the remember me Checkbox is checked. */
+  /** Flag indicating if the remember me checkbox is checked. */
   isRememberMeChecked?: boolean;
-  /** Function that handles the onChange event for the Remember Me Checkbox */
+  /** Function that handles the onChange event for the remember me checkbox */
   onChangeRememberMe?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
 }
 

package/src/components/LoginPage/LoginHeader.tsx

@@ -7,7 +7,7 @@ export interface LoginHeaderProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the login header */
   className?: string;
-  /** Header Brand component (e.g. <LoginHeader />) */
+  /** Header brand component (e.g. <LoginHeader />) */
   headerBrand?: React.ReactNode;
 }
 

package/src/components/LoginPage/LoginMainBody.tsx

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainBodyProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Login Main Body */
+  /** Content rendered inside the login main body */
   children?: React.ReactNode;
-  /** Additional classes added to the Login Main Body */
+  /** Additional classes added to the login main body */
   className?: string;
 }
 

package/src/components/LoginPage/LoginMainFooter.tsx

@@ -3,15 +3,15 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainFooterProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the Login Main Footer */
+  /** Additional classes added to the login main footer */
   className?: string;
-  /** Content rendered inside the Login Main Footer */
+  /** Content rendered inside the login main footer */
   children?: React.ReactNode;
-  /** Content rendered inside the Login Main Footer as Social Media Links* */
+  /** Content rendered inside the login main footer as social media links* */
   socialMediaLoginContent?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band to display a sign up for account message */
+  /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band do display a forgot credentials link* */
+  /** Content rendered inside of login main footer band do display a forgot credentials link* */
   forgotCredentials?: React.ReactNode;
 }
 

package/src/components/LoginPage/LoginMainFooterBandItem.tsx

@@ -3,9 +3,9 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
 import { css } from '@patternfly/react-styles';
 
 export interface LoginMainFooterBandItemProps extends React.HTMLProps<HTMLParagraphElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
 }
 

package/src/components/LoginPage/LoginMainFooterLinksItem.tsx

@@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
 import { css } from '@patternfly/react-styles';
 
 export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** HREF for Footer Link Item */
+  /** HREF for footer link item */
   href?: string;
-  /** Target for Footer Link Item */
+  /** Target for footer link item */
   target?: string;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
-  /** Component used to render the Footer Link Item */
+  /** Component used to render the footer link item */
   linkComponent?: React.ReactNode;
   /** Props for the LinkComponent */
   linkComponentProps?: any;

package/src/components/LoginPage/LoginMainHeader.tsx

@@ -4,14 +4,16 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Login Main Header */
+  /** Content rendered inside the login main header */
   children?: React.ReactNode;
-  /** Additional classes added to the Login Main Header */
+  /** Additional classes added to the login main header */
   className?: string;
-  /** Title for the Login Main Header */
+  /** Title for the login main header */
   title?: string;
-  /** Subtitle that contains the Text, URL, and URL Text for the Login Main Header */
+  /** Subtitle that contains the text, URL, and URL text for the login main header */
   subtitle?: string;
+  /** Actions that render for the login main header */
+  headerUtilities?: React.ReactNode;
 }
 
 export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
@@ -19,6 +21,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
   className = '',
   title = '',
   subtitle = '',
+  headerUtilities = null,
   ...props
 }: LoginMainHeaderProps) => (
   <header className={css(styles.loginMainHeader, className)} {...props}>
@@ -28,6 +31,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
       </Title>
     )}
     {subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
+    {headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
     {children}
   </header>
 );

package/src/components/LoginPage/LoginPage.tsx

@@ -13,33 +13,35 @@ import { LoginMainBody } from './LoginMainBody';
 import { LoginMainFooter } from './LoginMainFooter';
 
 export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
-  /** Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>) */
+  /** Anything that can be rendered inside of the login page (e.g. <LoginPageForm>) */
   children?: React.ReactNode;
-  /** Additional classes added to the LoginPage. */
+  /** Additional classes added to the login page */
   className?: string;
-  /** Attribute that specifies the URL of the brand image for the LoginPage */
+  /** Attribute that specifies the URL of the brand image for the login page */
   brandImgSrc?: string;
-  /** Attribute that specifies the alt text of the brand image for the LoginPage. */
+  /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
-  /** Attribute that specifies the URL of the background image for the LoginPage */
+  /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string | BackgroundImageSrcMap;
-  /** Attribute that specifies the alt text of the background image for the LoginPage. */
+  /** Attribute that specifies the alt text of the background image for the login page */
   backgroundImgAlt?: string;
-  /** Content rendered inside of the Text Component of the LoginPage */
+  /** Content rendered inside of the text component of the login page */
   textContent?: string;
-  /** Items rendered inside of the Footer List Component of the LoginPage */
+  /** Items rendered inside of the footer list component of the login page */
   footerListItems?: React.ReactNode;
-  /** Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline' */
+  /** Adds list variant styles for the footer list component of the login page. The only current value is'inline' */
   footerListVariants?: ListVariant.inline;
-  /** Title for the Login Main Body Header of the LoginPage */
+  /** Title for the login main body header of the login page */
   loginTitle: string;
-  /** Subtitle for the Login Main Body Header of the LoginPage */
+  /** Subtitle for the login main body header of the login page */
   loginSubtitle?: string;
-  /** Content rendered inside of Login Main Footer Band to display a sign up for account message */
+  /** @beta Header utilities for the login main body header of the login page */
+  headerUtilities?: React.ReactNode;
+  /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band to display a forgot credentials link* */
+  /** Content rendered inside of login main footer band to display a forgot credentials link. */
   forgotCredentials?: React.ReactNode;
-  /** Content rendered inside of Social Media Login footer section . */
+  /** Content rendered inside of social media login footer section */
   socialMediaLoginContent?: React.ReactNode;
 }
 
@@ -55,6 +57,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   footerListVariants,
   loginTitle,
   loginSubtitle,
+  headerUtilities,
   signUpForAccountMessage = null,
   forgotCredentials = null,
   socialMediaLoginContent = null,
@@ -77,7 +80,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
     <React.Fragment>
       {backgroundImgSrc && <BackgroundImage src={backgroundImgSrc} alt={backgroundImgAlt} />}
       <Login header={Header} footer={Footer} className={css(className)} {...props}>
-        <LoginMainHeader title={loginTitle} subtitle={loginSubtitle} />
+        <LoginMainHeader title={loginTitle} subtitle={loginSubtitle} headerUtilities={headerUtilities} />
         <LoginMainBody>{children}</LoginMainBody>
         {(socialMediaLoginContent || forgotCredentials || signUpForAccountMessage) && (
           <LoginMainFooter

package/src/components/LoginPage/examples/LoginPage.md

@@ -29,3 +29,11 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 ### Show/hide password
 ```ts file='./LoginPageShowHidePassword.tsx' isFullscreen
 ```
+
+### Customizing the header utilities
+
+`headerUtilities` is a prop that can be customized to allow components to be placed into the header of the login page, likely for the user to take an action. The following example demonstrates the use of a Select component to display a list a languages.
+
+### With header utilities
+```ts file='./LoginPageLanguageSelect.tsx' isFullscreen
+```

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -129,7 +129,6 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc={images}
-      backgroundImgAlt="Images"
       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."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import brandImg2 from './brandImgColor2.svg';
+import {
+  LoginFooterItem,
+  LoginForm,
+  LoginMainFooterBandItem,
+  LoginMainFooterLinksItem,
+  LoginPage,
+  ListItem,
+  ListVariant,
+  Select,
+  SelectOption,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const LoginPageLanguageSelect: React.FunctionComponent = () => {
+  const [showHelperText, setShowHelperText] = React.useState(false);
+  const [username, setUsername] = React.useState('');
+  const [isValidUsername, setIsValidUsername] = React.useState(true);
+  const [password, setPassword] = React.useState('');
+  const [isValidPassword, setIsValidPassword] = React.useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState<string | SelectOptionObject>('English');
+
+  /** i18n object is used to simulate i18n integration of native language translation */
+  const i18n = {
+    English: 'English',
+    Mandarin: '普通话',
+    Hindi: 'हिन्दी',
+    Spanish: 'Español',
+    Portuguese: 'Português',
+    Arabic: 'عربى',
+    Bengali: 'বাংলা'
+  };
+
+  const headerUtilsOptions = [
+    <SelectOption key={0} value={i18n.English} />,
+    <SelectOption key={1} value={i18n.Mandarin} />,
+    <SelectOption key={2} value={i18n.Hindi} />,
+    <SelectOption key={3} value={i18n.Spanish} />,
+    <SelectOption key={4} value={i18n.Portuguese} />,
+    <SelectOption key={5} value={i18n.Arabic} />,
+    <SelectOption key={6} value={i18n.Bengali} />
+  ];
+
+  const onHeaderUtilsToggle = (isExpanded: boolean) => {
+    setIsHeaderUtilsOpen(isExpanded);
+  };
+
+  const onHeaderUtilsSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject
+  ) => {
+    setSelectedHeaderUtils(value);
+    setIsHeaderUtilsOpen(false);
+  };
+
+  const headerUtils = (
+    <Select
+      aria-label="Select Language"
+      onToggle={onHeaderUtilsToggle}
+      onSelect={onHeaderUtilsSelect}
+      selections={selectedHeaderUtils}
+      isOpen={isHeaderUtilsOpen}
+    >
+      {headerUtilsOptions}
+    </Select>
+  );
+
+  const handleUsernameChange = (value: string) => {
+    setUsername(value);
+  };
+
+  const handlePasswordChange = (value: string) => {
+    setPassword(value);
+  };
+
+  const onRememberMeClick = () => {
+    setIsRememberMeChecked(!isRememberMeChecked);
+  };
+
+  const onLoginButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.preventDefault();
+    setIsValidUsername(!!username);
+    setIsValidPassword(!!password);
+    setShowHelperText(!username || !password);
+  };
+
+  const socialMediaLoginContent = (
+    <React.Fragment>
+      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Google' }}>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
+          <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
+        </svg>
+      </LoginMainFooterLinksItem>
+      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Github' }}>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+          <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+        </svg>
+      </LoginMainFooterLinksItem>
+      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
+          <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
+        </svg>
+      </LoginMainFooterLinksItem>
+      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+          <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
+        </svg>
+      </LoginMainFooterLinksItem>
+      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
+        </svg>
+      </LoginMainFooterLinksItem>
+    </React.Fragment>
+  );
+
+  const signUpForAccountMessage = (
+    <LoginMainFooterBandItem>
+      Need an account? <a href="#">Sign up.</a>
+    </LoginMainFooterBandItem>
+  );
+
+  const forgotCredentials = (
+    <LoginMainFooterBandItem>
+      <a href="#">Forgot username or password?</a>
+    </LoginMainFooterBandItem>
+  );
+
+  const listItem = (
+    <React.Fragment>
+      <ListItem>
+        <LoginFooterItem href="#">Terms of Use </LoginFooterItem>
+      </ListItem>
+      <ListItem>
+        <LoginFooterItem href="#">Help</LoginFooterItem>
+      </ListItem>
+      <ListItem>
+        <LoginFooterItem href="#">Privacy Policy</LoginFooterItem>
+      </ListItem>
+    </React.Fragment>
+  );
+
+  const loginForm = (
+    <LoginForm
+      showHelperText={showHelperText}
+      helperText="Invalid login credentials."
+      helperTextIcon={<ExclamationCircleIcon />}
+      usernameLabel="Username"
+      usernameValue={username}
+      onChangeUsername={handleUsernameChange}
+      isValidUsername={isValidUsername}
+      passwordLabel="Password"
+      passwordValue={password}
+      onChangePassword={handlePasswordChange}
+      isValidPassword={isValidPassword}
+      rememberMeLabel="Keep me logged in for 30 days."
+      isRememberMeChecked={isRememberMeChecked}
+      onChangeRememberMe={onRememberMeClick}
+      onLoginButtonClick={onLoginButtonClick}
+      loginButtonLabel="Log in"
+    />
+  );
+
+  const images = {
+    lg: '/assets/images/pfbg_1200.jpg',
+    sm: '/assets/images/pfbg_768.jpg',
+    sm2x: '/assets/images/pfbg_768@2x.jpg',
+    xs: '/assets/images/pfbg_576.jpg',
+    xs2x: '/assets/images/pfbg_576@2x.jpg'
+  };
+
+  return (
+    <LoginPage
+      footerListVariants={ListVariant.inline}
+      brandImgSrc={brandImg2}
+      brandImgAlt="PatternFly logo"
+      backgroundImgSrc={images}
+      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."
+      loginTitle="Log in to your account"
+      loginSubtitle="Enter your single sign-on LDAP credentials."
+      headerUtilities={headerUtils}
+      socialMediaLoginContent={socialMediaLoginContent}
+      signUpForAccountMessage={signUpForAccountMessage}
+      forgotCredentials={forgotCredentials}
+    >
+      {loginForm}
+    </LoginPage>
+  );
+};

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -130,7 +130,6 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc={images}
-      backgroundImgAlt="Images"
       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."
       loginTitle="Log in to your account"