@patternfly/react-core 6.0.0-alpha.92 → 6.0.0-alpha.93

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.91","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.92","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.91","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.92","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.91","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.92","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.92",
+  "version": "6.0.0-alpha.93",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.32",
-    "@patternfly/react-styles": "^6.0.0-alpha.31",
-    "@patternfly/react-tokens": "^6.0.0-alpha.31",
+    "@patternfly/react-icons": "^6.0.0-alpha.33",
+    "@patternfly/react-styles": "^6.0.0-alpha.32",
+    "@patternfly/react-tokens": "^6.0.0-alpha.32",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ec6e789678fbd6d3de0379652c3f5607e081c117"
+  "gitHead": "1b4893f237f016335930dd2bfc72e29a30412fce"
 }

package/src/components/Masthead/MastheadBrand.tsx

@@ -2,34 +2,20 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadBrandProps
-  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface MastheadBrandProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
   /** Content rendered inside of the masthead brand. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead brand. */
   className?: string;
-  /** Component type of the masthead brand. */
-  component?: React.ElementType<any> | React.ComponentType<any>;
 }
 
 export const MastheadBrand: React.FunctionComponent<MastheadBrandProps> = ({
   children,
   className,
-  component,
   ...props
-}: MastheadBrandProps) => {
-  let Component = component as any;
-  if (!component) {
-    if (props?.href !== undefined) {
-      Component = 'a';
-    } else {
-      Component = 'span';
-    }
-  }
-  return (
-    <Component className={css(styles.mastheadBrand, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
-      {children}
-    </Component>
-  );
-};
+}: MastheadBrandProps) => (
+  <div className={css(styles.mastheadBrand, className)} {...props}>
+    {children}
+  </div>
+);
 MastheadBrand.displayName = 'MastheadBrand';

package/src/components/Masthead/MastheadLogo.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadLogoProps
+  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+  /** Content rendered inside of the masthead logo. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead logo. */
+  className?: string;
+  /** Component type of the masthead logo. */
+  component?: React.ElementType<any> | React.ComponentType<any>;
+}
+
+export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
+  children,
+  className,
+  component,
+  ...props
+}: MastheadLogoProps) => {
+  let Component = component as any;
+  if (!component) {
+    if (props?.href !== undefined) {
+      Component = 'a';
+    } else {
+      Component = 'span';
+    }
+  }
+  return (
+    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+      {children}
+    </Component>
+  );
+};
+MastheadLogo.displayName = 'MastheadLogo';

package/src/components/Masthead/__tests__/Masthead.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Masthead, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle } from '../index';
+import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
 
 describe('Masthead', () => {
   test('verify basic', () => {
@@ -12,9 +12,11 @@ describe('Masthead', () => {
   test('verify full structure', () => {
     const { asFragment } = render(
       <Masthead>
-        <MastheadToggle>Toggle</MastheadToggle>
         <MastheadMain>
-          <MastheadBrand>Logo</MastheadBrand>
+          <MastheadToggle>Toggle</MastheadToggle>
+          <MastheadBrand>
+            <MastheadLogo>Logo</MastheadLogo>
+          </MastheadBrand>
         </MastheadMain>
         <MastheadContent>
           <span>Content</span>
@@ -72,33 +74,33 @@ describe('Masthead', () => {
   });
 });
 
-describe('MastheadBrand', () => {
+describe('MastheadLogo', () => {
   test('verify basic', () => {
-    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo>test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const { asFragment } = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo className="custom-css">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify default component', () => {
-    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo>test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom component', () => {
-    const { asFragment } = render(<MastheadBrand component="div">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo component="div">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify anchor component with href', () => {
-    const { asFragment } = render(<MastheadBrand href="#">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo href="#">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -118,15 +120,15 @@ describe('MastheadContent', () => {
   });
 });
 
-describe('MastheadMain', () => {
+describe('MastheadBrand', () => {
   test('verify basic', () => {
-    const { asFragment } = render(<MastheadMain>test</MastheadMain>);
+    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const { asFragment } = render(<MastheadMain className="custom-css">test</MastheadMain>);
+    const { asFragment } = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
 
     expect(asFragment()).toMatchSnapshot();
   });

package/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap

@@ -25,19 +25,23 @@ exports[`Masthead verify full structure 1`] = `
   <header
     class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
-    <span
-      class="pf-v6-c-masthead__toggle"
-    >
-      Toggle
-    </span>
     <div
       class="pf-v6-c-masthead__main"
     >
       <span
-        class="pf-v6-c-masthead__brand"
+        class="pf-v6-c-masthead__toggle"
       >
-        Logo
+        Toggle
       </span>
+      <div
+        class="pf-v6-c-masthead__brand"
+      >
+        <span
+          class="pf-v6-c-masthead__logo"
+        >
+          Logo
+        </span>
+      </div>
     </div>
     <div
       class="pf-v6-c-masthead__content"
@@ -150,95 +154,95 @@ exports[`Masthead verify stack display breakpoints 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify anchor component with href 1`] = `
+exports[`MastheadBrand verify basic 1`] = `
 <DocumentFragment>
-  <a
+  <div
     class="pf-v6-c-masthead__brand"
-    href="#"
-    tabindex="0"
   >
     test
-  </a>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify basic 1`] = `
+exports[`MastheadBrand verify custom class 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand"
+  <div
+    class="pf-v6-c-masthead__brand custom-css"
   >
     test
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify custom class 1`] = `
+exports[`MastheadContent verify basic 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand custom-css"
+  <div
+    class="pf-v6-c-masthead__content"
   >
     test
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify custom component 1`] = `
+exports[`MastheadContent verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-masthead__brand"
+    class="pf-v6-c-masthead__content custom-css"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify default component 1`] = `
+exports[`MastheadLogo verify anchor component with href 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand"
+  <a
+    class="pf-v6-c-masthead__logo"
+    href="#"
+    tabindex="0"
   >
     test
-  </span>
+  </a>
 </DocumentFragment>
 `;
 
-exports[`MastheadContent verify basic 1`] = `
+exports[`MastheadLogo verify basic 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__content"
+  <span
+    class="pf-v6-c-masthead__logo"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
-exports[`MastheadContent verify custom class 1`] = `
+exports[`MastheadLogo verify custom class 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__content custom-css"
+  <span
+    class="pf-v6-c-masthead__logo custom-css"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
-exports[`MastheadMain verify basic 1`] = `
+exports[`MastheadLogo verify custom component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-masthead__main"
+    class="pf-v6-c-masthead__logo"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadMain verify custom class 1`] = `
+exports[`MastheadLogo verify default component 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__main custom-css"
+  <span
+    class="pf-v6-c-masthead__logo"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 

package/src/components/Masthead/examples/Masthead.md

@@ -2,16 +2,16 @@
 id: Masthead
 section: components
 cssPrefix: pf-v5-c-masthead
-propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
+propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent']
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
-`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
+To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.
 
-`MastheadMain` represents the smaller area taken up by a logo, and will typically contain a `MastheadBrand`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`.
+ Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains  the page's header toolbar within `<MastheadContent>`.
 
 ## Examples
 

package/src/components/Masthead/examples/MastheadBasic.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasic: React.FunctionComponent = () => (
   <Masthead id="basic-example">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import {
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   Button,
   Flex,
@@ -13,11 +14,13 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasicMixedContent: React.FunctionComponent = () => (
   <Masthead id="basic-mixed">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <Flex>

package/src/components/Masthead/examples/MastheadDisplayInline.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayInline: React.FunctionComponent = () => (
   <Masthead id="inline-masthead" display={{ default: 'inline' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/examples/MastheadDisplayStack.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStack: React.FunctionComponent = () => (
   <Masthead id="stack-masthead" display={{ default: 'stack' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
   <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/examples/MastheadIconRouterLink.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import {
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   Button,
   Brand
@@ -14,12 +15,14 @@ import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const MastheadIconRouterLink: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component={(props) => <Link {...props} to="#" />}>
-        <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component={(props) => <Link {...props} to="#" />}>
+          <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadLogo>
       </MastheadBrand>
     </MastheadMain>
     <MastheadContent>

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/index.ts

@@ -1,5 +1,6 @@
 export * from './Masthead';
 export * from './MastheadBrand';
 export * from './MastheadContent';
+export * from './MastheadLogo';
 export * from './MastheadMain';
 export * from './MastheadToggle';

package/src/components/Page/examples/Page.md

@@ -16,7 +16,10 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 A page will typically contain the following components:
 
 - A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
+
+The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
+
+  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components