@patternfly/react-core 5.0.0-alpha.94 → 5.0.0-alpha.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.94",
+  "version": "5.0.0-alpha.96",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "4f593bd8942e59802d2d8e04b776a112c51d2304"
+  "gitHead": "88e143dc1df5a48525453a2038c495f9ee5b8f62"
 }

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -45,10 +45,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: '#004e8a',
-    backgroundColor: '#def3ff',
-    border: '1px solid rgba(0,0,0,.1)',
-    borderRadius: '4px'
+    color: 'var(--pf-v5-global--Color--100)',
+    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
   };
 
   return (

package/src/components/Divider/examples/DividerUsingLi.tsx

@@ -4,7 +4,7 @@ import { Divider } from '@patternfly/react-core';
 export const DividerUsingLi: React.FunctionComponent = () => (
   <ul role="list">
     <li>List item one</li>
-    <Divider component="li" />
+    <Divider component="li" role="none" />
     <li>List item two</li>
   </ul>
 );

package/src/components/Dropdown/Dropdown.tsx

@@ -1,9 +1,27 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+export interface DropdownPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+
+/**
+ * See the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownProps extends MenuProps, OUIAProps {
   /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
@@ -14,7 +32,11 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  onSelect?: (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    itemId?: string | number,
+    toggleRef?: React.RefObject<any>
+  ) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -31,7 +53,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: Partial<PopperProps>;
+  popperProps?: DropdownPopperProps;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -59,10 +81,12 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
       if (
-        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
-        toggleRef.current?.contains(event.target as Node)
+        isOpen &&
+        onOpenChange &&
+        (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node))
       ) {
         if (event.key === 'Escape' || event.key === 'Tab') {
+          event.preventDefault();
           onOpenChange(false);
           toggleRef.current?.focus();
         }
@@ -101,7 +125,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId, toggleRef)}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}

package/src/components/Dropdown/DropdownGroup.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuGroupProps, MenuGroup } from '../Menu';
 
+/**
+ * See the MenuGroup section of the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Anything which can be rendered in a dropdown group. */
   children: React.ReactNode;

package/src/components/Dropdown/DropdownItem.tsx

@@ -3,11 +3,16 @@ import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../Menu';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+/**
+ * See the MenuItem section of the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
   /** Anything which can be rendered in a dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
   /** Description of the dropdown item */
   description?: React.ReactNode;
   /** Render item as disabled option */
@@ -22,7 +27,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaSafe?: boolean;
 }
 
-export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
+const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   description,
@@ -31,11 +36,13 @@ export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   onClick,
   ouiaId,
   ouiaSafe,
+  innerRef,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
     <MenuItem
+      ref={innerRef}
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
@@ -48,4 +55,8 @@ export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
     </MenuItem>
   );
 };
+export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<any>) => (
+  <DropdownItemBase {...props} innerRef={ref} />
+));
+
 DropdownItem.displayName = 'DropdownItem';

package/src/components/Dropdown/examples/Dropdown.md

@@ -3,13 +3,15 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-c-menu
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
+propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle', 'DropdownPopperProps']
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
+`Dropdown` builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Dropdown` to further customize the dropdown menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+
 ### Basic dropdowns
 
 Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -8,10 +8,15 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

package/src/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -8,10 +8,15 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

package/src/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -16,10 +16,15 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -9,10 +9,15 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

package/src/components/{LabelGroup → Label}/LabelGroup.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/LabelGroup/label-gro
 import labelStyles from '@patternfly/react-styles/css/components/Label/label';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Label } from '../Label';
+import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { fillTemplate } from '../../helpers';

package/src/components/Label/examples/Label.md

@@ -2,7 +2,7 @@
 id: Label
 section: components
 cssPrefix: pf-c-label
-propComponents: ['Label']
+propComponents: ['Label', 'LabelGroup']
 ---
 
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
@@ -10,27 +10,27 @@ import { Link } from '@reach/router';
 
 ## Examples
 
-### Filled
+### Filled labels
 
 ```ts file="LabelFilled.tsx"
 ```
 
-### Outline
+### Outlined labels
 
 ```ts file="LabelOutline.tsx"
 ```
 
-### Compact
+### Compact labels
 
 ```ts file="LabelCompact.tsx"
 ```
 
-### Router link
+### Label with router link
 
 ```ts file="LabelRouterLink.tsx"
 ```
 
-### Editable
+### Editable labels
 
 Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape. 
 
@@ -38,3 +38,45 @@ You can also customize any Label's close button aria-label as this example shows
 
 ```ts file="LabelEditable.tsx" isBeta
 ```
+
+
+### Basic label group
+Use a label group when you have multiple labels to display at once. 
+
+```ts file="LabelGroupBasic.tsx"
+```
+
+### Label group with overflow
+An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
+
+```ts file="LabelGroupOverflow.tsx"
+```
+
+### Label group with categories
+Use a category name to organize a set of labels
+
+```ts file="LabelGroupCategory.tsx"
+```
+
+### Label group with removable categories
+
+```ts file="LabelGroupCategoryRemovable.tsx"
+```
+
+### Vertical label group
+Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
+
+```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
+```
+
+### Editable label group
+
+```ts isBeta file="LabelGroupEditableLabels.tsx"
+```
+
+### Editable label group with add button
+
+The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).
+
+```ts isBeta file="LabelGroupEditableAdd.tsx"
+```

package/src/components/Label/index.ts

@@ -1 +1,2 @@
 export * from './Label';
+export * from './LabelGroup';

package/src/components/LoginPage/LoginForm.tsx

@@ -25,7 +25,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Value for the username */
   usernameValue?: string;
   /** Function that handles the onChange event for the username */
-  onChangeUsername?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
   /** Label for the password input field */
@@ -33,7 +33,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Value for the password */
   passwordValue?: string;
   /** Function that handles the onChange event for the password */
-  onChangePassword?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangePassword?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the password is valid */
   isValidPassword?: boolean;
   /** Flag indicating if the user can toggle hiding the password */
@@ -53,7 +53,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Flag indicating if the remember me checkbox is checked. */
   isRememberMeChecked?: boolean;
   /** Function that handles the onChange event for the remember me checkbox */
-  onChangeRememberMe?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangeRememberMe?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
 }
 
 export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
@@ -91,7 +91,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       name="pf-login-password-id"
       validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
       value={passwordValue}
-      onChange={(event, value) => onChangePassword(value, event)}
+      onChange={onChangePassword}
     />
   );
 
@@ -115,7 +115,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           type="text"
           name="pf-login-username-id"
           value={usernameValue}
-          onChange={(event, value) => onChangeUsername(value, event)}
+          onChange={onChangeUsername}
         />
       </FormGroup>
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
@@ -139,7 +139,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
             id="pf-login-remember-me-id"
             label={rememberMeLabel}
             isChecked={isRememberMeChecked}
-            onChange={(event, checked) => onChangeRememberMe(checked, event)}
+            onChange={onChangeRememberMe}
           />
         </FormGroup>
       )}

package/src/components/LoginPage/LoginMainFooterLinksItem.tsx

@@ -20,7 +20,7 @@ export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIEle
 export const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLinksItemProps> = ({
   children = null,
   href = '',
-  target = '',
+  target,
   className = '',
   linkComponent = 'a',
   linkComponentProps,

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`LoginMainFooterLinksItem className is added to the root element 1`] = `
     <a
       class="pf-v5-c-login__main-footer-links-item-link"
       href=""
-      target=""
     />
   </li>
 </DocumentFragment>
@@ -36,7 +35,6 @@ exports[`LoginMainFooterLinksItem with custom node 1`] = `
     <a
       class="pf-v5-c-login__main-footer-links-item-link"
       href=""
-      target=""
     >
       <div>
         My custom node

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

@@ -19,11 +19,11 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
 
-  const handleUsernameChange = (value: string) => {
+  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
   };
 
-  const handlePasswordChange = (value: string) => {
+  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setPassword(value);
   };
 
@@ -40,27 +40,42 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Google' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        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' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        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' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        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' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        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' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        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>
@@ -70,26 +85,26 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
 
   const signUpForAccountMessage = (
     <LoginMainFooterBandItem>
-      Need an account? <a href="#">Sign up.</a>
+      Need an account? <a href="https://www.patternfly.org/">Sign up.</a>
     </LoginMainFooterBandItem>
   );
 
   const forgotCredentials = (
     <LoginMainFooterBandItem>
-      <a href="#">Forgot username or password?</a>
+      <a href="https://www.patternfly.org/">Forgot username or password?</a>
     </LoginMainFooterBandItem>
   );
 
   const listItem = (
     <React.Fragment>
       <ListItem>
-        <LoginFooterItem href="#">Terms of Use </LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Terms of Use </LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Help</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Help</LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Privacy Policy</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Privacy Policy</LoginFooterItem>
       </ListItem>
     </React.Fragment>
   );