Skip to content

Commit

Permalink
feat(Page): rename 'header' prop to 'masthead'
Browse files Browse the repository at this point in the history
  • Loading branch information
adamviktora committed May 28, 2024
1 parent a104a4b commit b9c76e2
Show file tree
Hide file tree
Showing 38 changed files with 95 additions and 90 deletions.
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Page/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
children?: React.ReactNode;
/** Additional classes added to the page layout */
className?: string;
/** Header component (e.g. <Masthead />) */
header?: React.ReactNode;
/** Masthead component (e.g. <Masthead />) */
masthead?: React.ReactNode;
/** Sidebar component for a side nav (e.g. <PageSidebar />) */
sidebar?: React.ReactNode;
/** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
Expand Down Expand Up @@ -214,7 +214,7 @@ class Page extends React.Component<PageProps, PageState> {
isBreadcrumbWidthLimited,
className,
children,
header,
masthead,
sidebar,
notificationDrawer,
isNotificationDrawerExpanded,
Expand Down Expand Up @@ -328,7 +328,7 @@ class Page extends React.Component<PageProps, PageState> {
)}
>
{skipToContent}
{header}
{masthead}
{sidebar}
{notificationDrawer && (
<div className={css(styles.pageDrawer)}>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/PageSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
children?: React.ReactNode;
/**
* If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
* the sidebar component or add a callback onSidebarToggle function into the PageHeader component
* the sidebar component or add a callback onSidebarToggle function into the Masthead component
*/
isManagedSidebar?: boolean;
/** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
Expand Down
52 changes: 26 additions & 26 deletions packages/react-core/src/components/Page/__tests__/Page.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ const props = {

describe('Page', () => {
test('Check page vertical layout example against snapshot', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = (
<PageSidebar isSidebarOpen>
<PageSidebarBody>Navigation</PageSidebarBody>
</PageSidebar>
);

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -39,15 +39,15 @@ describe('Page', () => {
});

test('Check dark page against snapshot', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = (
<PageSidebar isSidebarOpen>
<PageSidebarBody>Navigation</PageSidebarBody>
</PageSidebar>
);

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -56,11 +56,11 @@ describe('Page', () => {
});

test('Check page horizontal layout example against snapshot', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -69,7 +69,7 @@ describe('Page', () => {
});

test('Check page to verify breadcrumb is created', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;
const PageBreadcrumb = () => (
<Breadcrumb>
Expand All @@ -83,7 +83,7 @@ describe('Page', () => {
);

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
<Page {...props} masthead={masthead} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -93,7 +93,7 @@ describe('Page', () => {
});

test('Verify sticky top breadcrumb on all height breakpoints', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;
const PageBreadcrumb = () => (
<Breadcrumb>
Expand All @@ -109,7 +109,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={<PageBreadcrumb />}
breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
Expand All @@ -123,7 +123,7 @@ describe('Page', () => {
});

test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;
const PageBreadcrumb = () => (
<Breadcrumb>
Expand All @@ -139,7 +139,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={<PageBreadcrumb />}
breadcrumbProps={{
Expand All @@ -155,11 +155,11 @@ describe('Page', () => {
});

test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageBreadcrumb>
<Breadcrumb>
<BreadcrumbItem>Section Home</BreadcrumbItem>
Expand All @@ -179,11 +179,11 @@ describe('Page', () => {
});

test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
<Breadcrumb>
<BreadcrumbItem>Section Home</BreadcrumbItem>
Expand All @@ -203,11 +203,11 @@ describe('Page', () => {
});

test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageBreadcrumb
stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
>
Expand All @@ -229,11 +229,11 @@ describe('Page', () => {
});

test('Check page to verify nav is created - PageNavigation syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageNavigation>
<Nav aria-label="Nav" variant="horizontal-subnav">
<NavList>
Expand All @@ -256,11 +256,11 @@ describe('Page', () => {
});

test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
<PageBreadcrumb>
<Breadcrumb>
Expand Down Expand Up @@ -295,7 +295,7 @@ describe('Page', () => {
});

test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;
const crumb = (
<PageBreadcrumb>
Expand Down Expand Up @@ -326,7 +326,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={crumb}
horizontalSubnav={nav}
Expand All @@ -349,7 +349,7 @@ describe('Page', () => {
});

test('Check page to verify skip to content points to main content region', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = <PageSidebar isSidebarOpen />;
const PageBreadcrumb = (
<Breadcrumb>
Expand All @@ -367,7 +367,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={PageBreadcrumb}
skipToContent={PageSkipToContent}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/examples/Page.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ 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 `header` that often contains a [masthead](/components/masthead)
- 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>`.
- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
- 1 or more `<PageSection>` components
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -64,7 +64,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
);

return (
<Page header={header} sidebar={sidebar}>
<Page masthead={masthead} sidebar={sidebar}>
<PageSection isWidthLimited isCenterAligned>
<Card>
<CardBody>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -68,7 +68,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
);

return (
<Page header={header} sidebar={sidebar}>
<Page masthead={masthead} sidebar={sidebar}>
<PageGroup>
<PageNavigation>
<Nav aria-label="Group section navigation" variant="horizontal-subnav">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead inset={{ default: 'insetXs' }}>
<MastheadMain>
<MastheadBrand href="https://patternfly.org" target="_blank">
Expand All @@ -33,7 +33,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
);

return (
<Page header={header}>
<Page masthead={masthead}>
<PageSection>Section 1</PageSection>
<PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
<PageSection>Section 3</PageSection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -60,7 +60,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
);

return (
<Page header={header} sidebar={sidebar}>
<Page masthead={masthead} sidebar={sidebar}>
<PageSection>Section with default padding</PageSection>
<PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
<PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -64,7 +64,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
);

return (
<Page header={header} sidebar={sidebar}>
<Page masthead={masthead} sidebar={sidebar}>
<PageSection>Section 1</PageSection>
<PageSection>Section 2</PageSection>
<PageSection>Section 3</PageSection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
Expand All @@ -48,7 +48,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
);

return (
<Page isManagedSidebar header={header} sidebar={sidebar}>
<Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
<PageSection>Section 1</PageSection>
<PageSection>Section 2</PageSection>
<PageSection>Section 3</PageSection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -60,7 +60,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
);

return (
<Page header={header} sidebar={sidebar}>
<Page masthead={masthead} sidebar={sidebar}>
<PageSection>Section 1</PageSection>
<PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
<PageSection>Section 3</PageSection>
Expand Down
Loading

0 comments on commit b9c76e2

Please sign in to comment.