@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/demos/Nav.md

@@ -11,7 +11,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 ## Demos
@@ -406,7 +406,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class PageLayoutHorizontalNav extends React.Component {
@@ -829,7 +829,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class HorizontalNavWithSubnav extends React.Component {
@@ -1359,7 +1359,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class PageLayoutManualNav extends React.Component {

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -9,7 +9,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
@@ -80,7 +80,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
@@ -686,7 +686,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class GroupedNotificationDrawer extends React.Component {

package/src/demos/Page.md

@@ -7,7 +7,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';

package/src/demos/PasswordStrength.md

@@ -14,158 +14,6 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 Note, the validation and password strength rules are only examples, demonstrating the changes in the UI when certain conditions are met. We expect consumers will substitute their own, more robust, validation algorithm. In this demo the password strength is determined by how often validation rules are met. A good open-source password strength estimator, recommended by InfoSec, can be found here: https://github.com/dropbox/zxcvbn
 
-```js
-import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  HelperText,
-  Popover,
-  HelperTextItem,
-  TextInput
-} from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-
-class PasswordStrengthDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      password: '',
-      ruleLength: 'indeterminate',
-      ruleContent: 'indeterminate',
-      ruleCharacters: 'indeterminate',
-      passStrength: { variant: 'error', icon: <ExclamationCircleIcon />, text: 'Weak' }
-    };
-
-    this.handlePasswordInput = (_event, password) => {
-      this.setState({ password });
-      this.validate(password);
-    };
-
-    this.validate = (password) => {
-      if (password === '') {
-        this.setState({
-          ruleLength: 'indeterminate',
-          ruleContent: 'indeterminate',
-          ruleCharacters: 'indeterminate'
-        });
-        return;
-      }
-
-      if (password.length < 14) {
-        this.setState({ ruleLength: 'error' });
-      } else {
-        this.setState({ ruleLength: 'success' });
-      }
-
-      if (/redhat/gi.test(password)) {
-        this.setState({ ruleContent: 'error' });
-      } else {
-        this.setState({ ruleContent: 'success' });
-      }
-
-      let rulesCount = 0;
-      let strCount = 0;
-      if (/[a-z]/g.test(password)) {
-        rulesCount++;
-      }
-      if (/[A-Z]/g.test(password)) {
-        strCount += password.match(/[A-Z]/g).length;
-        rulesCount++;
-      }
-      if (/\d/g.test(password)) {
-        strCount += password.match(/\d/g).length;
-        rulesCount++;
-      }
-      if (/\W/g.test(password)) {
-        strCount += password.match(/\W/g).length;
-        rulesCount++;
-      }
-
-      if (rulesCount < 3) {
-        this.setState({ ruleCharacters: 'error' });
-      } else {
-        this.setState({ ruleCharacters: 'success' });
-      }
-
-      if (strCount < 3) {
-        this.setState({ passStrength: { variant: 'error', icon: <ExclamationCircleIcon />, text: 'Weak' } });
-      } else if (strCount < 5) {
-        this.setState({ passStrength: { variant: 'warning', icon: <ExclamationTriangleIcon />, text: 'Medium' } });
-      } else {
-        this.setState({ passStrength: { variant: 'success', icon: <CheckCircleIcon />, text: 'Strong' } });
-      }
-    };
-  }
-
-  render() {
-    const { password, ruleLength, ruleContent, ruleCharacters, passStrength } = this.state;
-
-    const iconPopover = (
-      <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-        <button
-          type="button"
-          aria-label="More info for name field"
-          onClick={(e) => e.preventDefault()}
-          aria-describedby="password-field"
-          className="pf-v5-c-form__group-label-help"
-        >
-          <HelpIcon />
-        </button>
-      </Popover>
-    );
-
-    let passStrLabel = (
-      <HelperText>
-        <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
-          {passStrength.text}
-        </HelperTextItem>
-      </HelperText>
-    );
+```ts file="./examples/PasswordStrength/PasswordStrengthDemo.tsx"
 
-    return (
-      <Form>
-        <FormGroup
-          label="Password"
-          labelIcon={iconPopover}
-          isRequired
-          fieldId="password-field"
-          {...(ruleLength === 'success' &&
-            ruleContent === 'success' &&
-            ruleCharacters === 'success' && {
-              labelInfo: passStrLabel
-            })}
-        >
-          <TextInput
-            isRequired
-            type="text"
-            id="password-field"
-            name="password-field"
-            aria-describedby="password-field-helper"
-            aria-invalid={ruleLength === 'error' || ruleContent === 'error' || ruleCharacters === 'error'}
-            value={password}
-            onChange={this.handlePasswordInput}
-          />
-          <FormHelperText component="div">
-            <HelperText component="ul" aria-live="polite" id="password-field-helper">
-              <HelperTextItem isDynamic variant={ruleLength} component="li">
-                Must be at least 14 characters
-              </HelperTextItem>
-              <HelperTextItem isDynamic variant={ruleContent} component="li">
-                Cannot contain the word "redhat"
-              </HelperTextItem>
-              <HelperTextItem isDynamic variant={ruleCharacters} component="li">
-                Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
-              </HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
 ```

package/src/demos/PrimaryDetail.md

@@ -12,16 +12,16 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import pfIcon from './Card/pf-logo-small.svg';
-import activeMQIcon from './Card/activemq-core_200x150.png';
-import avroIcon from './Card/camel-avro_200x150.png';
-import dropBoxIcon from './Card/camel-dropbox_200x150.png';
-import infinispanIcon from './Card/camel-infinispan_200x150.png';
-import saxonIcon from './Card/camel-saxon_200x150.png';
-import sparkIcon from './Card/camel-spark_200x150.png';
-import swaggerIcon from './Card/camel-swagger-java_200x150.png';
-import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
-import restIcon from './Card/FuseConnector_Icons_REST.png';
+import pfIcon from './assets/pf-logo-small.svg';
+import activeMQIcon from './assets/activemq-core_200x150.png';
+import avroIcon from './assets/camel-avro_200x150.png';
+import dropBoxIcon from './assets/camel-dropbox_200x150.png';
+import infinispanIcon from './assets/camel-infinispan_200x150.png';
+import saxonIcon from './assets/camel-saxon_200x150.png';
+import sparkIcon from './assets/camel-spark_200x150.png';
+import swaggerIcon from './assets/camel-swagger-java_200x150.png';
+import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 import DashboardWrapper from './examples/DashboardWrapper';
@@ -50,7 +50,6 @@ import {
   CardHeader,
   CardBody,
   CardTitle,
-  Checkbox,
   Divider,
   Drawer,
   DrawerActions,
@@ -72,28 +71,25 @@ import {
   PageSectionVariants,
   Pagination,
   Progress,
-  Select,
-  SelectOption,
   TextContent,
   Text,
   Title,
   Toolbar,
   ToolbarItem,
-  ToolbarContent,
-  ToolbarFilter
+  ToolbarContent
 } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import pfIcon from './pf-logo-small.svg';
-import activeMQIcon from './activemq-core_200x150.png';
-import avroIcon from './camel-avro_200x150.png';
-import dropBoxIcon from './camel-dropbox_200x150.png';
-import infinispanIcon from './camel-infinispan_200x150.png';
-import saxonIcon from './camel-saxon_200x150.png';
-import sparkIcon from './camel-spark_200x150.png';
-import swaggerIcon from './camel-swagger-java_200x150.png';
-import azureIcon from './FuseConnector_Icons_AzureServices.png';
-import restIcon from './FuseConnector_Icons_REST.png';
+import pfIcon from './assets/pf-logo-small.svg';
+import activeMQIcon from './assets/activemq-core_200x150.png';
+import avroIcon from './assets/camel-avro_200x150.png';
+import dropBoxIcon from './assets/camel-dropbox_200x150.png';
+import infinispanIcon from './assets/camel-infinispan_200x150.png';
+import saxonIcon from './assets/camel-saxon_200x150.png';
+import sparkIcon from './assets/camel-spark_200x150.png';
+import swaggerIcon from './assets/camel-swagger-java_200x150.png';
+import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
@@ -194,7 +190,6 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onCheckboxClick = (event, productId) => {
-      event.stopPropagation();
       this.setState((prevState) =>
         prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
           ? {
@@ -208,8 +203,23 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onCardClick = (event) => {
-      if (event.currentTarget.id === this.state.activeCard) {
+    this.onClick = (productId) => {
+      this.setState((prevState) =>
+        prevState.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 !== id)],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
+            }
+      );
+    };
+
+    this.onCardClick = (productId) => {
+
+      if (productId === this.state.activeCard) {
         this.setState({
           isDrawerExpanded: !this.state.isDrawerExpanded,
           activeCard: null
@@ -217,10 +227,8 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
 
-      const newSelected = event.currentTarget.id;
-
       this.setState({
-        activeCard: newSelected,
+        activeCard: productId,
         isDrawerExpanded: true
       });
     };
@@ -312,7 +320,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onSplitButtonSelect = () => {
-      this.setState((prevState) => ({
+      this.setState(() => ({
         splitButtonDropdownIsOpen: false,
         isDrawerExpanded: false,
         activeCard: null
@@ -338,7 +346,6 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.deleteItem = (event, item) => {
-      event.stopPropagation();
       const filter = (getter) => (val) => getter(val) !== item.id;
       const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
       this.setState({
@@ -349,28 +356,6 @@ class PrimaryDetailCardView extends React.Component {
         activeCard: null
       });
     };
-
-    this.onKeyDown = (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-
-      if (['Enter', ' '].includes(event.key)) {
-        if (event.currentTarget.id === this.state.activeCard) {
-          this.setState({
-            isDrawerExpanded: !this.state.isDrawerExpanded,
-            activeCard: null
-          });
-          return;
-        }
-        event.preventDefault();
-        const newSelected = event.currentTarget.id;
-        this.setState({
-          activeCard: newSelected,
-          isDrawerExpanded: true
-        });
-      }
-    };
   }
 
   getAllItems() {
@@ -532,12 +517,9 @@ class PrimaryDetailCardView extends React.Component {
           <Card
             key={product.name}
             id={'card-view-' + key}
-            onKeyDown={this.onKeyDown}
-            onClick={this.onCardClick}
-            onSelectableInputChange={this.onChange}
-            isSelectableRaised
-            isSelected={activeCard === 'card-view-' + key}
-            hasSelectableInput
+            isClickable
+            isSelectable
+            isSelected={activeCard === product.id}
           >
             <CardHeader
               actions={{
@@ -567,21 +549,18 @@ class PrimaryDetailCardView extends React.Component {
                         </DropdownItem>
                       </DropdownList>
                     </Dropdown>
-                    <Checkbox
-                      checked={isChecked}
-                      onClick={(event) => this.onCheckboxClick(event, product.id)}
-                      value={product.id}
-                      isChecked={selectedItems.includes(product.id)}
-                      aria-label="card checkbox example"
-                      id={`check-${product.id}`}
-                    />
                   </>
                 )
               }}
+              selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }}
             >
               <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
-            <CardTitle>{product.name}</CardTitle>
+            <CardTitle>
+              <Button variant="link" isInline onClick={() => this.onCardClick(product.id)} aria-expanded={activeCard === product.id}>
+                {product.name}
+              </Button>
+            </CardTitle>
             <CardBody>{product.description}</CardBody>
           </Card>
         ))}
@@ -592,7 +571,7 @@ class PrimaryDetailCardView extends React.Component {
       <DrawerPanelContent>
         <DrawerHead>
           <Title headingLevel="h2" size="xl">
-            node-{activeCard && activeCard.charAt(activeCard.length - 1)}
+            node-{activeCard}
           </Title>
           <DrawerActions>
             <DrawerCloseButton onClick={this.onCloseDrawerClick} />
@@ -608,10 +587,10 @@ class PrimaryDetailCardView extends React.Component {
               </p>
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 10} title="Title" />
+              <Progress value={activeCard * 10} title="Title" />
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 5} title="Title" />
+              <Progress value={activeCard * 5} title="Title" />
             </FlexItem>
           </Flex>
         </DrawerPanelBody>
@@ -634,7 +613,7 @@ class PrimaryDetailCardView extends React.Component {
         </PageSection>
         <PageSection isFilled padding={{ default: 'noPadding' }}>
           <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
-            <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
+            <DrawerContent panelContent={panelContent} colorVariant="no-background">
               <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
             </DrawerContent>
           </Drawer>

package/src/demos/Toolbar.md

@@ -236,7 +236,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onPageResize = ({ windowSize }) => {
+    this.onPageResize = (_event, { windowSize }) => {
       if (windowSize >= 1450) {
         this.setState({
           mobileView: false

package/src/demos/examples/DashboardHeader.js

@@ -27,7 +27,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 export default class DashboardHeader extends React.Component {
@@ -208,11 +208,7 @@ export default class DashboardHeader extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand
-              src={pfLogo}
-              alt="PatternFly"
-              heights={{ default: '36px' }}
-            />
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/examples/DashboardWrapper.js

@@ -114,7 +114,9 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         notificationDrawer={notificationDrawer}
         isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        {...(typeof onPageResize === 'function' && { onPageResize: (event) => onPageResize(event) })}
+        {...(typeof onPageResize === 'function' && {
+          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
+        })}
         {...pageProps}
       >
         {hasPageTemplateTitle && PageTemplateTitle}

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -77,7 +77,7 @@ export const JumpLinksWithDrawer = () => {
                     offset={offsetHeight}
                     expandable={{ default: 'expandable', md: 'nonExpandable' }}
                   >
-                    {headings.map(heading => (
+                    {headings.map((heading) => (
                       <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
                         {`${heading} section`}
                         <JumpLinksList></JumpLinksList>
@@ -92,7 +92,7 @@ export const JumpLinksWithDrawer = () => {
                 </PageSection>
                 <PageSection variant={PageSectionVariants.light}>
                   <TextContent>
-                    {headings.map(heading => (
+                    {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
                         <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
                           {`${heading} section`}

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -56,8 +56,8 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import pfIcon from './pf-logo-small.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 interface NavOnSelectProps {

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -45,7 +45,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 interface NavOnSelectProps {
   groupId: number | string;
@@ -216,11 +216,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-        <Brand
-            src={pfLogo}
-            alt="PatternFly"
-            heights={{ default: '36px' }}
-          />
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -45,7 +45,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 interface NavOnSelectProps {
   groupId: number | string;
@@ -216,11 +216,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-        <Brand
-            src={pfLogo}
-            alt="PatternFly"
-            heights={{ default: '36px' }}
-          />
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -47,7 +47,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 interface NavOnSelectProps {
@@ -208,11 +208,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-        <Brand
-            src={pfLogo}
-            alt="PatternFly"
-            heights={{ default: '36px' }}
-          />
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>