From 0063eaec5006c7f6a218b57983420c1d4e6d3452 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Tue, 11 Jul 2023 15:47:49 -0400
Subject: [PATCH 1/2] chore(docs): Update pf logos in masthead and full page
 demos

---
 .../components/Masthead/examples/Masthead.md  |  8 +-
 .../Masthead/examples/pf-logo-small.svg       | 23 -----
 .../components/Masthead/examples/pf-logo.svg  | 28 ++++++
 packages/react-core/src/demos/Masthead.md     |  1 +
 packages/react-core/src/demos/Nav.md          | 87 ++++++-------------
 .../NotificationDrawer/NotificationDrawer.md  | 10 +--
 packages/react-core/src/demos/Page.md         |  3 +-
 .../react-core/src/demos/Wizard/WizardDemo.md | 10 +--
 .../react-core/src/demos/Wizard/imgBrand.svg  |  1 -
 .../react-core/src/demos/assets/pf-logo.svg   | 28 ++++++
 .../src/demos/examples/DashboardHeader.js     | 13 ++-
 ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 10 +--
 .../Page/PageStickySectionBreadcrumb.tsx      | 15 ++--
 .../examples/Page/PageStickySectionGroup.tsx  | 15 ++--
 .../Page/PageStickySectionGroupAlternate.tsx  | 14 ++-
 .../src/demos/examples/pfColorLogo.svg        | 33 -------
 16 files changed, 124 insertions(+), 175 deletions(-)
 delete mode 100644 packages/react-core/src/components/Masthead/examples/pf-logo-small.svg
 create mode 100644 packages/react-core/src/components/Masthead/examples/pf-logo.svg
 delete mode 100644 packages/react-core/src/demos/Wizard/imgBrand.svg
 create mode 100644 packages/react-core/src/demos/assets/pf-logo.svg
 delete mode 100644 packages/react-core/src/demos/examples/pfColorLogo.svg

diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
index 0f3460d8d12..cfba75f1f9c 100644
--- a/packages/react-core/src/components/Masthead/examples/Masthead.md
+++ b/packages/react-core/src/components/Masthead/examples/Masthead.md
@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -210,10 +210,10 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 ```ts
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
 
 <Masthead id="icon-router-link">
   <MastheadToggle>
@@ -223,7 +223,7 @@ import pfIcon from './pf-logo-small.svg';
   </MastheadToggle>
   <MastheadMain>
     <MastheadBrand component={props => <Link {...props} to="#" />}>
-      <img src={pfIcon} alt="Patterfly Logo" />
+      <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
     </MastheadBrand>
   </MastheadMain>
   <MastheadContent>
diff --git a/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg b/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg
deleted file mode 100644
index 44c092431cb..00000000000
--- a/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="27px" viewBox="0 0 30 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 54 (76480) - https://sketchapp.com -->
-    <title>Group 12</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#7DC3E8" stop-opacity="0.600169362" offset="0%"></stop>
-            <stop stop-color="#007BBA" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Toolbar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Toolbar-in-Card-View-w-Pagination-Example" transform="translate(-351.000000, -422.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
-            <g id="Group-22" transform="translate(322.000000, 395.000000)">
-                <g id="Group-12" transform="translate(29.000000, 27.000000)">
-                    <g id="PF3-logomark-bold">
-                        <path d="M29.3047523,13.6067281 L14.8028311,0.0924998513 L14.6960566,0 L14.5601618,0.0924998513 L0.0873609707,13.6067281 L0,13.689978 L0.0679474216,13.7824778 L5.82406471,21.5709653 L5.88230536,21.6449652 L5.9793731,21.6449652 L10.2794742,20.7199667 L14.5601618,26.4364575 L14.6766431,26.5937073 L14.7931244,26.4364575 L19.0932255,20.6829668 L23.3836198,21.6079653 L23.4806876,21.6079653 L23.5389282,21.5339654 L29.3047523,13.7454779 L29.3726997,13.6529781 L29.3047523,13.6067281 Z M20.9957533,15.1699756 L21.5005056,16.2522239 L18.7826087,19.878218 L17.5789687,19.6192185 L20.9957533,15.1699756 Z M21.1607685,13.7454779 L16.0841254,2.77499554 L23.2186047,11.0999822 L21.1607685,13.7454779 Z M22.3255814,16.4002236 L22.3741153,16.3354737 L22.3741153,16.2614739 L21.5587462,14.5039767 L24.1116279,11.0999822 L24.1698686,11.0999822 L24.1019211,11.0167323 L18.9573306,5.01349194 L28.411729,13.8194778 L26.4703741,16.4002236 L23.1506572,20.8864664 L19.5494439,20.1002177 L22.3255814,16.4002236 Z M12.269363,20.2482175 L14.6669363,23.3747124 L14.7931244,23.5412122 L14.9096057,23.3747124 L17.1227503,20.2482175 L18.3166835,20.516467 L14.6960566,25.3634592 L11.0754297,20.516467 L12.269363,20.2482175 Z M12.871183,19.8227181 L14.6960566,2.88599536 L16.5015167,19.8227181 L14.7542973,22.2924642 L12.871183,19.8227181 Z M13.8418605,3.34849462 L12.1237614,18.8144698 L8.73609707,14.4207268 L13.8418605,3.34849462 Z M6.17350859,11.0999822 L13.3176946,2.77499554 L8.23134479,13.7454779 L6.17350859,11.0999822 Z M10.4347826,4.99499197 L5.29019211,10.9982323 L5.22224469,11.0999822 L5.29019211,11.183232 L7.88190091,14.5502266 L7.06653185,16.3077238 L7.06653185,16.3817237 L7.06653185,16.4464736 L9.79413549,20.1002177 L6.20262892,20.8864664 L0.970677452,13.7732279 L10.4347826,4.99499197 Z M11.8131446,19.6469684 L10.6095046,19.905968 L7.90131446,16.2522239 L8.39635996,15.1699756 L11.8131446,19.6469684 Z M15.5308392,3.34849462 L20.6463094,14.4484768 L17.2683519,18.8422197 L15.5308392,3.34849462 Z" id="Shape"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/react-core/src/components/Masthead/examples/pf-logo.svg b/packages/react-core/src/components/Masthead/examples/pf-logo.svg
new file mode 100644
index 00000000000..a47a3cb740b
--- /dev/null
+++ b/packages/react-core/src/components/Masthead/examples/pf-logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
index f3001b14af2..e6cfe3c948a 100644
--- a/packages/react-core/src/demos/Masthead.md
+++ b/packages/react-core/src/demos/Masthead.md
@@ -12,6 +12,7 @@ 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 './Card/pf-logo-small.svg';
+import pfLogo from './assets/pf-logo.svg';
 import { Link } from '@reach/router';
 
 ## Demos
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 6480dc67c23..84d96460733 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -12,7 +12,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 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 imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 ## Demos
 
@@ -406,8 +406,8 @@ 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 imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class PageLayoutHorizontalNav extends React.Component {
   constructor(props) {
@@ -497,25 +497,18 @@ class PageLayoutHorizontalNav extends React.Component {
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
       </>
     );
-    
+
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
-          <ToolbarItem isOverflowContainer>
-            {PageNav}
-          </ToolbarItem>
+          <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
           <ToolbarGroup
             variant="icon-button-group"
             align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             <ToolbarItem>
-              <Button
-                aria-label="Notifications"
-                variant={ButtonVariant.plain}
-                icon={<BellIcon />}
-                onClick={() => {}}
-              />
+              <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
             </ToolbarItem>
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
               <ToolbarItem>
@@ -600,14 +593,7 @@ class PageLayoutHorizontalNav extends React.Component {
       <Masthead>
         <MastheadMain>
           <MastheadBrand>
-            <Brand
-              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-              src={imgColorBrand}
-              alt="Fallback patternFly default logo"
-            >
-              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
-              <source srcSet={imgColorBrand} />
-            </Brand>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
@@ -835,7 +821,7 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem
-  } from '@patternfly/react-core';
+} from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -843,8 +829,8 @@ 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 imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class HorizontalNavWithSubnav extends React.Component {
   constructor(props) {
@@ -948,7 +934,7 @@ class HorizontalNavWithSubnav extends React.Component {
       </>
     );
 
-     const SubNav = (
+    const SubNav = (
       <Nav onSelect={this.onSubNavSelect} aria-label="Nav" variant="horizontal-subnav">
         <NavList>
           <NavItem itemId={7} isActive={activeSubNavItem === 7} to="#">
@@ -979,21 +965,14 @@ class HorizontalNavWithSubnav extends React.Component {
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
-          <ToolbarItem isOverflowContainer>
-            {PageNav}
-          </ToolbarItem>
+          <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
           <ToolbarGroup
             variant="icon-button-group"
             align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             <ToolbarItem>
-              <Button
-                aria-label="Notifications"
-                variant={ButtonVariant.plain}
-                icon={<BellIcon />}
-                onClick={() => {}}
-              />
+              <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
             </ToolbarItem>
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
               <ToolbarItem>
@@ -1083,21 +1062,13 @@ class HorizontalNavWithSubnav extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand
-              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-              src={imgColorBrand}
-              alt="Fallback patternFly default logo"
-            >
-              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
-              <source srcSet={imgColorBrand} />
-            </Brand>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
 
-
     const pageId = 'main-content-page-layout-horizontal-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -1389,8 +1360,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 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 imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class PageLayoutManualNav extends React.Component {
   constructor(props) {
@@ -1461,8 +1431,15 @@ class PageLayoutManualNav extends React.Component {
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
-      this.state;
+    const {
+      isDropdownOpen,
+      isKebabDropdownOpen,
+      isFullKebabDropdownOpen,
+      activeItem,
+      isNavOpenDesktop,
+      isNavOpenMobile,
+      isMobileView
+    } = this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
@@ -1502,8 +1479,8 @@ class PageLayoutManualNav extends React.Component {
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
       </>
     );
-    
-     const headerToolbar = (
+
+    const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
           <ToolbarGroup
@@ -1512,12 +1489,7 @@ class PageLayoutManualNav extends React.Component {
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             <ToolbarItem>
-              <Button
-                aria-label="Notifications"
-                variant={ButtonVariant.plain}
-                icon={<BellIcon />}
-                onClick={() => {}}
-              />
+              <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
             </ToolbarItem>
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
               <ToolbarItem>
@@ -1607,14 +1579,7 @@ class PageLayoutManualNav extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand
-              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-              src={imgColorBrand}
-              alt="Fallback patternFly default logo"
-            >
-              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
-              <source srcSet={imgColorBrand} />
-            </Brand>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 9970af749f8..871e20c3e1a 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -9,9 +9,9 @@ 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 imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/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';
 
 ## Demos
 
@@ -80,9 +80,9 @@ 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 imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/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';
 
 class BasicNotificationDrawer extends React.Component {
   constructor(props) {
@@ -335,7 +335,7 @@ class BasicNotificationDrawer extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
@@ -686,8 +686,8 @@ 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 imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 class GroupedNotificationDrawer extends React.Component {
   constructor(props) {
@@ -993,7 +993,7 @@ class GroupedNotificationDrawer extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
index de06ee9ea52..caf911d1c31 100644
--- a/packages/react-core/src/demos/Page.md
+++ b/packages/react-core/src/demos/Page.md
@@ -7,12 +7,13 @@ 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 imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/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';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 9457ae374fb..2082fdadce7 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -4,7 +4,7 @@ section: components
 source: react-demos
 ---
 
-import imgBrand from './imgBrand.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -430,7 +430,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import imgBrand from './imgBrand.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 class WizardFullPageWithDrawerDemo extends React.Component {
@@ -496,7 +496,7 @@ class WizardFullPageWithDrawerDemo extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
       </Masthead>
@@ -628,7 +628,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import imgBrand from './imgBrand.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
@@ -694,7 +694,7 @@ class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
       </Masthead>
diff --git a/packages/react-core/src/demos/Wizard/imgBrand.svg b/packages/react-core/src/demos/Wizard/imgBrand.svg
deleted file mode 100644
index c29cc6c9a89..00000000000
--- a/packages/react-core/src/demos/Wizard/imgBrand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 225 35" viewBox="0 0 225 35" width="225" height="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="17.4799" x2="17.4799" y1="2.0369" y2="34.1113"><stop offset="0" stop-color="#00f1ff"/><stop offset="1" stop-color="#0076c1"/></linearGradient><path d="m12.3 26.7-5.2 1.2-7-9.9 17-16.6.4-.4.4.4 17 16.6-7 9.9-5.2-1.2-5.2 7.3zm5.2 5.6 4.2-5.8-1.3-.3-2.8 4.1-3-4.1-1.3.3zm.1-3.8 2-3-2.1-20.3-2.1 20.3zm9.8-1.8 6.1-8.6-10.3-10.1 5.5 6.7-3.1 4.3 1 2.3-3.2 4.5zm-19.9 0 4.1-.9-3.2-4.5 1-2.3-3.1-4.3 5.4-6.7-10.3 10.1zm5.2-1.2 1.3-.3-3.9-5.3-.5 1.2zm9.6 0 3.1-4.4-.5-1.2-3.9 5.3zm-1.8-1.4 3.9-5.3-5.8-13.2zm-6.1 0 2-18.5-5.8 13.3zm-4.5-6.2 5.8-13.1-8.1 9.9zm15.2 0 2.3-3.2-8.1-9.9z" fill="url(#a)"/><g fill="#fff"><path d="m50.8 24v-12.1h5.2c.8 0 1.4.1 1.9.3s.9.5 1.3.9c.3.4.6.8.7 1.2.1.5.2.9.2 1.4 0 .3 0 .6-.1.9s-.2.6-.3.9-.3.5-.5.8c-.2.2-.5.5-.8.7s-.7.3-1.1.4-.8.2-1.3.2h-2.9v4.4zm5.3-6.7c.3 0 .5 0 .8-.1.2-.1.4-.2.5-.4s.2-.3.3-.5.1-.4.1-.6 0-.4-.1-.5c0-.2-.1-.4-.3-.5-.1-.2-.3-.3-.5-.4s-.5-.2-.8-.2h-3v3.2z"/><path d="m76.2 24-.9-2.5h-4.7l-.9 2.5h-2.5l4.6-12.1h2.3l4.6 12.1zm-2.9-7.8c-.1-.1-.1-.3-.2-.5s-.1-.4-.2-.6c0 .2-.1.4-.2.6s-.1.4-.2.5l-1.2 3.1h3.2z"/><path d="m91.9 14.2v9.8h-2.3v-9.8h-3.5v-2.3h9.3v2.3z"/><path d="m110 14.2v9.8h-2.3v-9.8h-3.5v-2.3h9.3v2.3z"/><path d="m123.1 24v-12.1h8.3v2.2h-5.9v2.5h3.5v2.2h-3.5v2.9h6.3v2.3z"/><path d="m141.5 24v-12.1h5.6c.8 0 1.4.1 1.9.3s.9.5 1.2.8.5.8.7 1.2c.1.5.2.9.2 1.4 0 .3-.1.7-.1 1-.1.4-.2.7-.4 1s-.4.6-.7.9-.6.5-1 .6l2.3 4.8h-2.6l-2.3-4.5h-2.4v4.6zm5.7-6.7c.3 0 .5 0 .8-.1.2-.1.4-.2.5-.4.1-.1.2-.3.3-.5s.1-.4.1-.6 0-.4-.1-.6c0-.2-.1-.4-.2-.5s-.3-.3-.5-.4-.5-.1-.8-.1h-3.3v3.2z"/><path d="m168.8 24-4.8-7.1c-.1-.1-.2-.3-.3-.4-.1-.2-.2-.3-.2-.5v.5.5 7h-2.3v-12.1h2.2l4.7 7c.1.1.2.3.3.4.1.2.2.3.3.5 0-.2 0-.3 0-.5s0-.3 0-.4v-7h2.3v12.1z"/><path d="m181.3 24v-12.1h8.1v2.2h-5.8v2.5h3.7v2.2h-3.7v5.2z"/><path d="m198.8 24v-12.1h2.3v9.9h5.8v2.2z"/><path d="m218.2 24v-4.7l-4.5-7.4h2.6l3 4.9 3-4.9h2.7l-4.5 7.4v4.7z"/></g></svg>
diff --git a/packages/react-core/src/demos/assets/pf-logo.svg b/packages/react-core/src/demos/assets/pf-logo.svg
new file mode 100644
index 00000000000..a47a3cb740b
--- /dev/null
+++ b/packages/react-core/src/demos/assets/pf-logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index 2fbca51b188..1af6bd72857 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -28,7 +28,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 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 pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 export default class DashboardHeader extends React.Component {
   constructor(props) {
@@ -209,13 +209,10 @@ export default class DashboardHeader extends React.Component {
         <MastheadMain>
           <MastheadBrand>
             <Brand
-              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-              src={pfColorLogo}
-              alt="Fallback patternFly default logo"
-            >
-              <source media="(min-width: 768px)" srcSet={pfColorLogo} />
-              <source srcSet={pfColorLogo} />
-            </Brand>
+              src={pfLogo}
+              alt="PatternFly"
+              heights={{ default: '36px' }}
+            />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index e8122718002..1cbee9cec0b 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -58,6 +58,7 @@ 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 pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -480,14 +481,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-          <Brand
-            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          >
-            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
-            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
-          </Brand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 4086eb8c9c0..31c00c4b73d 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -46,7 +46,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 imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -216,14 +216,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-          <Brand
-            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          >
-            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
-            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
-          </Brand>
+        <Brand
+            src={pfLogo}
+            alt="PatternFly"
+            heights={{ default: '36px' }}
+          />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 7c9a7b156ff..887dd442b8d 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -46,7 +46,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 imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -216,14 +216,11 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-          <Brand
-            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          >
-            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
-            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
-          </Brand>
+        <Brand
+            src={pfLogo}
+            alt="PatternFly"
+            heights={{ default: '36px' }}
+          />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 9c5eda24572..935084be46a 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -48,6 +48,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 imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -207,14 +208,11 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       </MastheadToggle>
       <MastheadMain>
         <MastheadBrand>
-          <Brand
-            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          >
-            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
-            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
-          </Brand>
+        <Brand
+            src={pfLogo}
+            alt="PatternFly"
+            heights={{ default: '36px' }}
+          />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/pfColorLogo.svg b/packages/react-core/src/demos/examples/pfColorLogo.svg
deleted file mode 100644
index 232a493d1c2..00000000000
--- a/packages/react-core/src/demos/examples/pfColorLogo.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="175px" height="32px" viewBox="0 0 175 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
-    <title>PatternFly Logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50.0004769%" y1="3.02475509%" x2="50.0004769%" y2="95.3620086%" id="linearGradient-1">
-            <stop stop-color="#60EFFF" offset="0%"></stop>
-            <stop stop-color="#1F89C7" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Nav-bar-(desktop)" transform="translate(-150.000000, -16.000000)" fill-rule="nonzero">
-            <g id="PatternFly-Logo">
-                <g transform="translate(150.000000, 16.000000)">
-                    <g id="Group" transform="translate(44.748858, 11.200000)" fill="#FFFFFF">
-                        <path d="M0.302054795,9.3488 L0.302054795,0.3264 L4.16883562,0.3264 C4.73858447,0.3264 5.21723744,0.4096 5.60719178,0.5744 C5.99714612,0.7408 6.31358447,0.9576 6.55650685,1.2296 C6.79942922,1.5008 6.97442922,1.8048 7.08150685,2.1456 C7.18778539,2.4856 7.24212329,2.8288 7.24212329,3.1768 C7.24212329,3.3936 7.2173516,3.616 7.16541096,3.8408 C7.11506849,4.064 7.03835616,4.284 6.9336758,4.496 C6.82819635,4.708 6.69474886,4.9048 6.53093607,5.0912 C6.36712329,5.2752 6.17054795,5.4384 5.94280822,5.5784 C5.71426941,5.7184 5.45376712,5.828 5.15810502,5.908 C4.86164384,5.988 4.53242009,6.0272 4.16803653,6.0272 L2.04246575,6.0272 L2.04246575,9.3472 L0.302054795,9.3488 L0.302054795,9.3488 Z M4.24315068,4.372 C4.4652968,4.372 4.65308219,4.3368 4.8033105,4.2664 C4.95353881,4.1936 5.07579909,4.1024 5.17089041,3.988 C5.26598174,3.8744 5.33310502,3.7464 5.37465753,3.6048 C5.41700913,3.4616 5.43938356,3.32 5.43938356,3.176 C5.43938356,3.0464 5.42100457,2.9112 5.38424658,2.7688 C5.34908676,2.6304 5.2859589,2.5024 5.19646119,2.3832 C5.10616438,2.2664 4.98230594,2.1696 4.82888128,2.0952 C4.67305936,2.0192 4.47888128,1.9808 4.24394977,1.9808 L2.04406393,1.9808 L2.04406393,4.3712 L4.24315068,4.372 L4.24315068,4.372 Z" id="Shape"></path>
-                        <path d="M19.2555936,9.3488 L18.5571918,7.4816 L15.0803653,7.4816 L14.3899543,9.3488 L12.5216895,9.3488 L15.9737443,0.3264 L17.6694064,0.3264 L21.1214612,9.3488 L19.2555936,9.3488 Z M17.1052511,3.548 C17.0589041,3.44 17.0093607,3.3088 16.956621,3.1584 C16.9062785,3.0056 16.8599315,2.8664 16.8223744,2.7352 C16.7880137,2.8672 16.7440639,3.0056 16.689726,3.1584 C16.6361872,3.3088 16.5858447,3.44 16.5386986,3.548 L15.6461187,5.8952 L17.9922374,5.8952 L17.1052511,3.548 Z" id="Shape"></path>
-                        <polygon id="Path" points="30.9038813 2.0064 30.9038813 9.3488 29.169863 9.3488 29.169863 2.0064 26.5920091 2.0064 26.5920091 0.3264 33.4809361 0.3264 33.4809361 2.0064"></polygon>
-                        <polygon id="Path" points="44.3932648 2.0064 44.3932648 9.3488 42.6584475 9.3488 42.6584475 2.0064 40.0805936 2.0064 40.0805936 0.3264 46.9695205 0.3264 46.9695205 2.0064"></polygon>
-                        <polygon id="Path" points="54.1509132 9.3488 54.1509132 0.3264 60.3022831 0.3264 60.3022831 1.9816 55.8905251 1.9816 55.8905251 3.8752 58.4859589 3.8752 58.4859589 5.5232 55.8905251 5.5232 55.8905251 7.7016 60.5715753 7.7016 60.5715753 9.3512"></polygon>
-                        <path d="M67.8848174,9.3488 L67.8848174,0.3264 L72.0704338,0.3264 C72.6401826,0.3264 73.1172374,0.4032 73.5,0.5624 C73.8827626,0.7192 74.1928082,0.928 74.4269406,1.188 C74.6594749,1.4488 74.8296804,1.7488 74.9295662,2.088 C75.0278539,2.428 75.0805936,2.7832 75.0805936,3.152 C75.0805936,3.4072 75.0422374,3.6664 74.9679224,3.928 C74.8928082,4.1904 74.7849315,4.4392 74.6394977,4.6744 C74.4900685,4.9096 74.310274,5.1216 74.0905251,5.3128 C73.8739726,5.504 73.6190639,5.6536 73.3305936,5.756 L75.0789954,9.3488 L73.122032,9.3488 L71.4375571,5.984 L69.6228311,5.984 L69.6228311,9.3488 L67.8848174,9.3488 L67.8848174,9.3488 Z M72.0960046,4.3344 C72.3165525,4.3344 72.5067352,4.3016 72.6545662,4.236 C72.8047945,4.1704 72.9278539,4.084 73.0181507,3.9752 C73.1108447,3.8656 73.1787671,3.74 73.2179224,3.596 C73.2586758,3.4536 73.2754566,3.3056 73.2754566,3.1504 C73.2754566,3.008 73.2586758,2.8648 73.2243151,2.724 C73.186758,2.5832 73.1260274,2.4584 73.0413242,2.3456 C72.9542237,2.236 72.8295662,2.1464 72.6793379,2.0792 C72.5291096,2.012 72.3317352,1.9792 72.0968037,1.9792 L69.6260274,1.9792 L69.6260274,4.3328 L72.0968037,4.3328 L72.0968037,4.3344 L72.0960046,4.3344 Z" id="Shape"></path>
-                        <path d="M88.1552511,9.3488 L84.5793379,4.0888 C84.5202055,4.0016 84.4578767,3.892 84.3875571,3.7648 C84.3172374,3.6376 84.2597032,3.5192 84.2061644,3.4104 C84.2221461,3.5056 84.2277397,3.6184 84.2341324,3.7496 C84.2413242,3.8792 84.2469178,3.9936 84.2469178,4.0888 L84.2469178,9.3488 L82.5176941,9.3488 L82.5176941,0.3264 L84.1502283,0.3264 L87.6390411,5.5216 C87.693379,5.6056 87.7565068,5.7136 87.8252283,5.8384 C87.8979452,5.9632 87.9610731,6.0856 88.0122146,6.2024 C88.0002283,6.0824 87.9938356,5.9568 87.9858447,5.8352 C87.9778539,5.7112 87.9746575,5.6056 87.9746575,5.52 L87.9746575,0.3248 L89.6958904,0.3248 L89.6958904,9.3472 L88.1552511,9.3488 L88.1552511,9.3488 Z" id="Path"></path>
-                        <polygon id="Path" points="97.4590183 9.3488 97.4590183 0.3264 103.501712 0.3264 103.501712 1.9816 99.2002283 1.9816 99.2002283 3.8752 101.926712 3.8752 101.926712 5.5232 99.2002283 5.5232 99.2002283 9.3496"></polygon>
-                        <polygon id="Path" points="110.555251 9.3488 110.555251 0.3264 112.298059 0.3264 112.298059 7.6752 116.646689 7.6752 116.646689 9.3488"></polygon>
-                        <polygon id="Path" points="124.973973 9.3488 124.973973 5.832 121.634589 0.3264 123.608333 0.3264 125.835388 4.0144 128.058447 0.3264 130.03379 0.3264 126.695205 5.832 126.695205 9.3488"></polygon>
-                    </g>
-                    <path d="M33.5144977,16.5608 L16.7584475,0.1536 L0,16.5608 L6.6803653,26.036 L11.7769406,24.864 L16.790411,31.9208 L21.7942922,24.8768 L26.8341324,26.0352 L33.5144977,16.5608 Z M16.0624429,3.196 L13.8921233,23.2768 L9.74805936,17.6176 L16.0624429,3.196 Z M9.293379,16.9968 L6.71232877,13.472 L15.5877854,2.68 L9.293379,16.9968 Z M13.2041096,23.464 L13.2041096,23.464 L13.4454338,23.7968 L12.0614155,24.1144 L8.86666667,19.6184 L9.43721461,18.3208 L13.2041096,23.464 Z M16.7576484,2.9296 L18.9391553,24.2184 L16.7528539,27.2176 L14.5745434,24.2184 L16.7576484,2.9296 Z M20.309589,23.4648 L24.1180365,18.2648 L24.7141553,19.6184 L21.5106164,24.128 L20.0714612,23.7968 L20.3119863,23.4664 L20.309589,23.4648 Z M19.6223744,23.2768 L17.4800228,3.1792 L23.8079909,17.5608 L19.6223744,23.2768 Z M17.9850457,2.6768 L26.8021689,13.472 L24.2626712,16.94 L17.9850457,2.6768 Z M6.96643836,25.2856 L0.870205479,16.6408 L12.7989726,4.9672 L5.87089041,13.4504 L8.98413242,17.7008 L8.10593607,19.696 L11.3598174,24.2768 L6.96643836,25.2856 Z M16.790411,30.7712 L12.4785388,24.7032 L13.8705479,24.3824 L16.7512557,28.3496 L19.6415525,24.3824 L21.0910959,24.7168 L16.790411,30.7712 Z M22.2114155,24.2896 L25.4740868,19.696 L24.5719178,17.6448 L27.6436073,13.4504 L20.7155251,4.9672 L32.6434932,16.6408 L26.5480594,25.2864 L22.2114155,24.2896 Z" id="Shape" fill="url(#linearGradient-1)"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file

From 2bb5d91fd3b4999d2c6f9e85dbd72e9eec7dd1e8 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Tue, 11 Jul 2023 16:55:21 -0400
Subject: [PATCH 2/2] fix demo app

---
 .../src/components/demos/MastheadDemo/MastheadDemo.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index f700251f212..98811621aa3 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -17,7 +17,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import imgBrand from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';