@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/login-page/react.js

@@ -0,0 +1,587 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import brandImg from '../../../../../react-core/src/components/LoginPage/examples/../../assets/PF-IconLogo.svg';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
+import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
+import srcImportbasic from './react/basic.png';
+import srcImportshowhidepassword from './react/showhide-password.png';
+import srcImportwithheaderutilities from './react/with-header-utilities.png';
+const pageData = {
+  "id": "Login page",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/login-page/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/LoginPage/examples/LoginPage.md",
+  "relPath": "packages/react-core/src/components/LoginPage/examples/LoginPage.md",
+  "propComponents": [
+    {
+      "name": "LoginPage",
+      "description": "",
+      "props": [
+        {
+          "name": "backgroundImgSrc",
+          "type": "string",
+          "description": "Attribute that specifies the URL of the background image for the login page",
+          "defaultValue": "''"
+        },
+        {
+          "name": "brandImgAlt",
+          "type": "string",
+          "description": "Attribute that specifies the alt text of the brand image for the login page",
+          "defaultValue": "''"
+        },
+        {
+          "name": "brandImgProps",
+          "type": "BrandProps",
+          "description": "Additional props for the brand image for the login page"
+        },
+        {
+          "name": "brandImgSrc",
+          "type": "string",
+          "description": "Attribute that specifies the URL of the brand image for the login page",
+          "defaultValue": "''"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the login page (e.g. <LoginPageForm>)",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login page",
+          "defaultValue": "''"
+        },
+        {
+          "name": "footerListItems",
+          "type": "React.ReactNode",
+          "description": "Items rendered inside of the footer list component of the login page",
+          "defaultValue": "null"
+        },
+        {
+          "name": "footerListVariants",
+          "type": "ListVariant.inline",
+          "description": "Adds list variant styles for the footer list component of the login page. The only current value is'inline'"
+        },
+        {
+          "name": "forgotCredentials",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of login main footer band to display a forgot credentials link.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "headerUtilities",
+          "type": "React.ReactNode",
+          "description": "Header utilities for the login main body header of the login page"
+        },
+        {
+          "name": "loginSubtitle",
+          "type": "string",
+          "description": "Subtitle for the login main body header of the login page"
+        },
+        {
+          "name": "loginTitle",
+          "type": "string",
+          "description": "Title for the login main body header of the login page",
+          "required": true
+        },
+        {
+          "name": "signUpForAccountMessage",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of login main footer band to display a sign up for account message",
+          "defaultValue": "null"
+        },
+        {
+          "name": "socialMediaLoginAriaLabel",
+          "type": "string",
+          "description": "Adds an accessible name to the social media login list."
+        },
+        {
+          "name": "socialMediaLoginContent",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of social media login footer section",
+          "defaultValue": "null"
+        },
+        {
+          "name": "textContent",
+          "type": "string",
+          "description": "Content rendered inside of the text component of the login page",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "Login",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the main section of the login layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login layout",
+          "defaultValue": "''"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Footer component (e.g. <LoginFooter />)",
+          "defaultValue": "null"
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Header component (e.g. <LoginHeader />)",
+          "defaultValue": "null"
+        }
+      ]
+    },
+    {
+      "name": "LoginForm",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login main body's form",
+          "defaultValue": "''"
+        },
+        {
+          "name": "helperText",
+          "type": "React.ReactNode",
+          "description": "Content displayed in the helper text component *",
+          "defaultValue": "null"
+        },
+        {
+          "name": "helperTextIcon",
+          "type": "React.ReactNode",
+          "description": "Icon displayed to the left in the helper text",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hidePasswordAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the hide password button",
+          "defaultValue": "'Hide password'"
+        },
+        {
+          "name": "isLoginButtonDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the login button is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isPasswordRequired",
+          "type": "boolean",
+          "description": "Flag indicating if password is required",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isRememberMeChecked",
+          "type": "boolean",
+          "description": "Flag indicating if the remember me checkbox is checked.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isShowPasswordEnabled",
+          "type": "boolean",
+          "description": "Flag indicating if the user can toggle hiding the password",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isValidPassword",
+          "type": "boolean",
+          "description": "Flag indicating if the password is valid",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isValidUsername",
+          "type": "boolean",
+          "description": "Flag indicating if the username is valid",
+          "defaultValue": "true"
+        },
+        {
+          "name": "loginButtonLabel",
+          "type": "string",
+          "description": "Label for the log in button input",
+          "defaultValue": "'Log In'"
+        },
+        {
+          "name": "noAutoFocus",
+          "type": "boolean",
+          "description": "Flag to indicate if the first dropdown item should not gain initial focus",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onChangePassword",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "Function that handles the onChange event for the password",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "onChangeRememberMe",
+          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
+          "description": "Function that handles the onChange event for the remember me checkbox",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "onChangeUsername",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "Function that handles the onChange event for the username",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "onLoginButtonClick",
+          "type": "(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void",
+          "description": "Function that is called when the login button is clicked",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "passwordLabel",
+          "type": "string",
+          "description": "Label for the password input field",
+          "defaultValue": "'Password'"
+        },
+        {
+          "name": "passwordValue",
+          "type": "string",
+          "description": "Value for the password",
+          "defaultValue": "''"
+        },
+        {
+          "name": "rememberMeLabel",
+          "type": "string",
+          "description": "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.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "showHelperText",
+          "type": "boolean",
+          "description": "Flag indicating the helper text is visible *",
+          "defaultValue": "false"
+        },
+        {
+          "name": "showPasswordAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the show password button",
+          "defaultValue": "'Show password'"
+        },
+        {
+          "name": "usernameLabel",
+          "type": "string",
+          "description": "Label for the username input field",
+          "defaultValue": "'Username'"
+        },
+        {
+          "name": "usernameValue",
+          "type": "string",
+          "description": "Value for the username",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "LoginMainBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the login main body",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login main body",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "LoginMainHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the login main header",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login main header",
+          "defaultValue": "''"
+        },
+        {
+          "name": "headerUtilities",
+          "type": "React.ReactNode",
+          "description": "Actions that render for the login main header",
+          "defaultValue": "null"
+        },
+        {
+          "name": "subtitle",
+          "type": "string",
+          "description": "Subtitle that contains the text, URL, and URL text for the login main header",
+          "defaultValue": "''"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Title for the login main header",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "LoginHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the header of the login layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login header",
+          "defaultValue": "''"
+        },
+        {
+          "name": "headerBrand",
+          "type": "React.ReactNode",
+          "description": "Header brand component (e.g. <LoginHeader />)",
+          "defaultValue": "null"
+        }
+      ]
+    },
+    {
+      "name": "LoginFooter",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the footer of the login layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional props are spread to the container <footer>",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "LoginMainFooter",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the login main footer",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the login main footer",
+          "defaultValue": "''"
+        },
+        {
+          "name": "forgotCredentials",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of login main footer band do display a forgot credentials link*",
+          "defaultValue": "null"
+        },
+        {
+          "name": "signUpForAccountMessage",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside of login main footer band to display a sign up for account message",
+          "defaultValue": "null"
+        },
+        {
+          "name": "socialMediaLoginAriaLabel",
+          "type": "string",
+          "description": "Adds an accessible name to the social media login list."
+        },
+        {
+          "name": "socialMediaLoginContent",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the login main footer as social media links",
+          "defaultValue": "null"
+        }
+      ]
+    },
+    {
+      "name": "LoginFooterItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the footer link item",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the footer link item"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "The URL of the footer link item",
+          "defaultValue": "'#'"
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "Specifies where to open the linked document",
+          "defaultValue": "'_blank'"
+        }
+      ]
+    },
+    {
+      "name": "LoginMainFooterBandItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the footer link item",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the footer link item",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "LoginMainFooterLinksItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the footer link item",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the footer link item",
+          "defaultValue": "''"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-login"
+  ],
+  "fullscreenExamples": [
+    "Basic",
+    "Show/hide password",
+    "With header utilities"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  brandImg,
+  RhUiErrorFillIcon,
+  GoogleIcon,
+  GithubIcon,
+  DropboxIcon,
+  FacebookSquareIcon,
+  GitlabIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { Fragment, useState } from 'react';\nimport brandImg from '../../assets/PF-IconLogo.svg';\nimport {\n  LoginFooterItem,\n  LoginForm,\n  LoginMainFooterBandItem,\n  LoginMainFooterLinksItem,\n  LoginPage,\n  ListItem,\n  ListVariant,\n  Button\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';\nimport GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';\nimport DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';\nimport FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';\nimport GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';\n\nexport const SimpleLoginPage: React.FunctionComponent = () => {\n  const [showHelperText, setShowHelperText] = useState(false);\n  const [username, setUsername] = useState('');\n  const [isValidUsername, setIsValidUsername] = useState(true);\n  const [password, setPassword] = useState('');\n  const [isValidPassword, setIsValidPassword] = useState(true);\n  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);\n\n  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setUsername(value);\n  };\n\n  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setPassword(value);\n  };\n\n  const onRememberMeClick = () => {\n    setIsRememberMeChecked(!isRememberMeChecked);\n  };\n\n  const onLoginButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setIsValidUsername(!!username);\n    setIsValidPassword(!!password);\n    setShowHelperText(!username || !password);\n  };\n\n  const socialMediaLoginContent = (\n    <Fragment>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Google\" icon={<GoogleIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Github\" icon={<GithubIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Dropbox\" icon={<DropboxIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Facebook\" icon={<FacebookSquareIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Gitlab\" icon={<GitlabIcon />} />\n      </LoginMainFooterLinksItem>\n    </Fragment>\n  );\n\n  const signUpForAccountMessage = (\n    <LoginMainFooterBandItem>\n      Need an account? <a href=\"https://www.patternfly.org/\">Sign up.</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const forgotCredentials = (\n    <LoginMainFooterBandItem>\n      <a href=\"https://www.patternfly.org/\">Forgot username or password?</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const listItem = (\n    <Fragment>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Terms of Use </LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Help</LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Privacy Policy</LoginFooterItem>\n      </ListItem>\n    </Fragment>\n  );\n\n  const loginForm = (\n    <LoginForm\n      showHelperText={showHelperText}\n      helperText=\"Invalid login credentials.\"\n      helperTextIcon={<RhUiErrorFillIcon />}\n      usernameLabel=\"Username\"\n      usernameValue={username}\n      onChangeUsername={handleUsernameChange}\n      isValidUsername={isValidUsername}\n      passwordLabel=\"Password\"\n      passwordValue={password}\n      onChangePassword={handlePasswordChange}\n      isValidPassword={isValidPassword}\n      rememberMeLabel=\"Keep me logged in for 30 days.\"\n      isRememberMeChecked={isRememberMeChecked}\n      onChangeRememberMe={onRememberMeClick}\n      onLoginButtonClick={onLoginButtonClick}\n      loginButtonLabel=\"Log in\"\n    />\n  );\n\n  return (\n    <LoginPage\n      footerListVariants={ListVariant.inline}\n      brandImgProps={{ src: brandImg, alt: 'PatternFly logo' }}\n      backgroundImgSrc=\"/assets/images/pf-background.svg\"\n      footerListItems={listItem}\n      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.\"\n      loginTitle=\"Log in to your account\"\n      loginSubtitle=\"Enter your single sign-on LDAP credentials.\"\n      socialMediaLoginContent={socialMediaLoginContent}\n      socialMediaLoginAriaLabel=\"Log in with social media\"\n      signUpForAccountMessage={signUpForAccountMessage}\n      forgotCredentials={forgotCredentials}\n    >\n      {loginForm}\n    </LoginPage>\n  );\n};\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`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 `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isPasswordRequired`}
+        </code>
+        {` property to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<LoginForm>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This example uses `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`brandImgProps`}
+        </code>
+        {` to pass the brand image source, alt text, and an extra class, which will be preferred over `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`brandImgSrc`}
+        </code>
+        {` when both are provided.`}
+      </p>
+    </Example>,
+  'Show/hide password': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportshowhidepassword} {...{"code":"import { Fragment, useState } from 'react';\nimport brandImg from '../../assets/PF-IconLogo.svg';\nimport {\n  LoginFooterItem,\n  LoginForm,\n  LoginMainFooterBandItem,\n  LoginMainFooterLinksItem,\n  LoginPage,\n  ListItem,\n  ListVariant,\n  Button\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';\nimport GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';\nimport DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';\nimport FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';\nimport GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';\n\nexport const LoginPageHideShowPassword: React.FunctionComponent = () => {\n  const [showHelperText, setShowHelperText] = useState(false);\n  const [username, setUsername] = useState('');\n  const [isValidUsername, setIsValidUsername] = useState(true);\n  const [password, setPassword] = useState('');\n  const [isValidPassword, setIsValidPassword] = useState(true);\n  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);\n\n  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setUsername(value);\n  };\n\n  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setPassword(value);\n  };\n\n  const onRememberMeClick = () => {\n    setIsRememberMeChecked(!isRememberMeChecked);\n  };\n\n  const onLoginButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setIsValidUsername(!!username);\n    setIsValidPassword(!!password);\n    setShowHelperText(!username || !password);\n  };\n\n  const socialMediaLoginContent = (\n    <Fragment>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Google\" icon={<GoogleIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Github\" icon={<GithubIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Dropbox\" icon={<DropboxIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Facebook\" icon={<FacebookSquareIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Gitlab\" icon={<GitlabIcon />} />\n      </LoginMainFooterLinksItem>\n    </Fragment>\n  );\n\n  const signUpForAccountMessage = (\n    <LoginMainFooterBandItem>\n      Need an account? <a href=\"https://www.patternfly.org/\">Sign up.</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const forgotCredentials = (\n    <LoginMainFooterBandItem>\n      <a href=\"https://www.patternfly.org/\">Forgot username or password?</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const listItem = (\n    <Fragment>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Terms of Use </LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Help</LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Privacy Policy</LoginFooterItem>\n      </ListItem>\n    </Fragment>\n  );\n\n  const loginForm = (\n    <LoginForm\n      showHelperText={showHelperText}\n      helperText=\"Invalid login credentials.\"\n      helperTextIcon={<RhUiErrorFillIcon />}\n      usernameLabel=\"Username\"\n      usernameValue={username}\n      onChangeUsername={handleUsernameChange}\n      isValidUsername={isValidUsername}\n      passwordLabel=\"Password\"\n      passwordValue={password}\n      isShowPasswordEnabled\n      onChangePassword={handlePasswordChange}\n      isValidPassword={isValidPassword}\n      rememberMeLabel=\"Keep me logged in for 30 days.\"\n      isRememberMeChecked={isRememberMeChecked}\n      onChangeRememberMe={onRememberMeClick}\n      onLoginButtonClick={onLoginButtonClick}\n      loginButtonLabel=\"Log in\"\n    />\n  );\n\n  return (\n    <LoginPage\n      footerListVariants={ListVariant.inline}\n      brandImgSrc={brandImg}\n      brandImgAlt=\"PatternFly logo\"\n      backgroundImgSrc=\"/assets/images/pf-background.svg\"\n      footerListItems={listItem}\n      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.\"\n      loginTitle=\"Log in to your account\"\n      loginSubtitle=\"Enter your single sign-on LDAP credentials.\"\n      socialMediaLoginContent={socialMediaLoginContent}\n      socialMediaLoginAriaLabel=\"Log in with social media\"\n      signUpForAccountMessage={signUpForAccountMessage}\n      forgotCredentials={forgotCredentials}\n    >\n      {loginForm}\n    </LoginPage>\n  );\n};\n","title":"Show/hide password","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'With header utilities': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportwithheaderutilities} {...{"code":"import { Fragment, useState } from 'react';\nimport brandImg from '../../assets/PF-IconLogo.svg';\nimport {\n  LoginFooterItem,\n  LoginForm,\n  LoginMainFooterBandItem,\n  LoginMainFooterLinksItem,\n  LoginPage,\n  ListItem,\n  ListVariant,\n  MenuToggle,\n  MenuToggleElement,\n  Select,\n  SelectList,\n  SelectOption,\n  Button\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';\nimport GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';\nimport DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';\nimport FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';\nimport GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';\n\nexport const LoginPageLanguageSelect: React.FunctionComponent = () => {\n  const [showHelperText, setShowHelperText] = useState(false);\n  const [username, setUsername] = useState('');\n  const [isValidUsername, setIsValidUsername] = useState(true);\n  const [password, setPassword] = useState('');\n  const [isValidPassword, setIsValidPassword] = useState(true);\n  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);\n  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = useState(false);\n  const [selectedHeaderUtils, setSelectedHeaderUtils] = useState('English');\n\n  /** i18n object is used to simulate i18n integration of native language translation */\n  const i18n = {\n    English: 'English',\n    Mandarin: '普通话',\n    Hindi: 'हिन्दी',\n    Spanish: 'Español',\n    Portuguese: 'Português',\n    Arabic: 'عربى',\n    Bengali: 'বাংলা'\n  };\n\n  const headerUtilsOptions = (\n    <SelectList>\n      <SelectOption key={0} value={i18n.English}>\n        {i18n.English}\n      </SelectOption>\n      <SelectOption key={1} value={i18n.Mandarin}>\n        {i18n.Mandarin}\n      </SelectOption>\n      <SelectOption key={2} value={i18n.Hindi}>\n        {i18n.Hindi}\n      </SelectOption>\n      <SelectOption key={3} value={i18n.Spanish}>\n        {i18n.Spanish}\n      </SelectOption>\n      <SelectOption key={4} value={i18n.Portuguese}>\n        {i18n.Portuguese}\n      </SelectOption>\n      <SelectOption key={5} value={i18n.Arabic}>\n        {i18n.Arabic}\n      </SelectOption>\n      <SelectOption key={6} value={i18n.Bengali}>\n        {i18n.Bengali}\n      </SelectOption>\n    </SelectList>\n  );\n\n  const onHeaderUtilsSelect = (\n    _event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,\n    value: string\n  ) => {\n    setSelectedHeaderUtils(value);\n    setIsHeaderUtilsOpen(false);\n  };\n\n  const headerUtils = (\n    <Select\n      aria-label=\"Select Language\"\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          ref={toggleRef}\n          onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}\n          isExpanded={isHeaderUtilsOpen}\n        >\n          {selectedHeaderUtils}\n        </MenuToggle>\n      )}\n      onSelect={onHeaderUtilsSelect}\n      onOpenChange={(isOpen) => setIsHeaderUtilsOpen(isOpen)}\n      selected={selectedHeaderUtils}\n      isOpen={isHeaderUtilsOpen}\n    >\n      {headerUtilsOptions}\n    </Select>\n  );\n\n  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setUsername(value);\n  };\n\n  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setPassword(value);\n  };\n\n  const onRememberMeClick = () => {\n    setIsRememberMeChecked(!isRememberMeChecked);\n  };\n\n  const onLoginButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setIsValidUsername(!!username);\n    setIsValidPassword(!!password);\n    setShowHelperText(!username || !password);\n  };\n\n  const socialMediaLoginContent = (\n    <Fragment>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Google\" icon={<GoogleIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Github\" icon={<GithubIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Dropbox\" icon={<DropboxIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Facebook\" icon={<FacebookSquareIcon />} />\n      </LoginMainFooterLinksItem>\n      <LoginMainFooterLinksItem>\n        <Button variant=\"plain\" aria-label=\"Login with Gitlab\" icon={<GitlabIcon />} />\n      </LoginMainFooterLinksItem>\n    </Fragment>\n  );\n\n  const signUpForAccountMessage = (\n    <LoginMainFooterBandItem>\n      Need an account? <a href=\"https://www.patternfly.org/\">Sign up.</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const forgotCredentials = (\n    <LoginMainFooterBandItem>\n      <a href=\"https://www.patternfly.org/\">Forgot username or password?</a>\n    </LoginMainFooterBandItem>\n  );\n\n  const listItem = (\n    <Fragment>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Terms of Use </LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Help</LoginFooterItem>\n      </ListItem>\n      <ListItem>\n        <LoginFooterItem href=\"https://www.patternfly.org/\">Privacy Policy</LoginFooterItem>\n      </ListItem>\n    </Fragment>\n  );\n\n  const loginForm = (\n    <LoginForm\n      showHelperText={showHelperText}\n      helperText=\"Invalid login credentials.\"\n      helperTextIcon={<RhUiErrorFillIcon />}\n      usernameLabel=\"Username\"\n      usernameValue={username}\n      onChangeUsername={handleUsernameChange}\n      isValidUsername={isValidUsername}\n      passwordLabel=\"Password\"\n      passwordValue={password}\n      onChangePassword={handlePasswordChange}\n      isValidPassword={isValidPassword}\n      rememberMeLabel=\"Keep me logged in for 30 days.\"\n      isRememberMeChecked={isRememberMeChecked}\n      onChangeRememberMe={onRememberMeClick}\n      onLoginButtonClick={onLoginButtonClick}\n      loginButtonLabel=\"Log in\"\n    />\n  );\n\n  return (\n    <LoginPage\n      footerListVariants={ListVariant.inline}\n      brandImgSrc={brandImg}\n      brandImgAlt=\"PatternFly logo\"\n      backgroundImgSrc=\"/assets/images/pf-background.svg\"\n      footerListItems={listItem}\n      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.\"\n      loginTitle=\"Log in to your account\"\n      loginSubtitle=\"Enter your single sign-on LDAP credentials.\"\n      headerUtilities={headerUtils}\n      socialMediaLoginContent={socialMediaLoginContent}\n      socialMediaLoginAriaLabel=\"Log in with social media\"\n      signUpForAccountMessage={signUpForAccountMessage}\n      forgotCredentials={forgotCredentials}\n    >\n      {loginForm}\n    </LoginPage>\n  );\n};\n","title":"With header utilities","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Show/hide password"])}
+    <AutoLinkHeader {...{"id":"customizing-the-header-utilities","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Customizing the header utilities`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      <code {...{"className":"ws-code "}}>
+        {`headerUtilities`}
+      </code>
+      {` 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.`}
+    </p>
+    {React.createElement(pageData.examples["With header utilities"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsLoginPageReactDocs';
+Component.pageData = pageData;
+
+export default Component;