diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index ef32870a9b2..3ee6a7075e5 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -25,652 +25,47 @@ import './page.css'; ### Vertical nav -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageSectionVariants, - PageToggleButton, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -class VerticalPage extends React.Component { - constructor(props) { - super(props); - this.state = { - isNavOpen: true - }; - this.onNavToggle = () => { - this.setState({ - isNavOpen: !this.state.isNavOpen - }); - }; - } - - render() { - const { isNavOpen } = this.state; - - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - const Sidebar = ; - - return ( - - Section with darker background - Section with dark background - Section with light background - - ); - } -} +```ts file="./PageVerticalNav.tsx" ``` ### Horizontal nav -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSection, - PageSectionVariants, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; - -HorizontalPage = () => { - const headerToolbar = ( - - - Navigation - header-tools - - - ); - - const Header = ( - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - - return ( - - Section with darker background - Section with dark background - Section with light background - - ); -}; +```ts file="./PageHorizontalNav.tsx" ``` ### Tertiary nav -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSection, - PageSectionVariants, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; - -TertiaryPage = () => { - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - - return ( - - Section with darker background - Section with dark background - Section with light background - - ); -}; +```ts file="./PageTertiaryNav.tsx" ``` ### With or without fill -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageToggleButton, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -class FillPage extends React.Component { - constructor(props) { - super(props); - this.state = { - isNavOpen: true - }; - this.onNavToggle = () => { - this.setState({ - isNavOpen: !this.state.isNavOpen - }); - }; - } - - render() { - const { isNavOpen } = this.state; - - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - const Sidebar = ; - - return ( - - A default page section - This section fills the available space. - - This section is set to not fill the available space, since the last page section is set to fill the available - space by default. - - - ); - } -} +```ts file="./PageWithOrWithoutFill.tsx" ``` ### Main section padding -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageSectionVariants, - PageToggleButton, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -class VerticalPage extends React.Component { - constructor(props) { - super(props); - this.state = { - isNavOpen: true - }; - this.onNavToggle = () => { - this.setState({ - isNavOpen: !this.state.isNavOpen - }); - }; - } - - render() { - const { isNavOpen } = this.state; - - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - const Sidebar = ; - - return ( - - Section with default padding - - Section with no padding - - - Section with padding only on medium/large - - - Section with no padding on medium - - - ); - } -} +```ts file="./PageMainSectionPadding.tsx" ``` ### Uncontrolled nav -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageSectionVariants, - PageToggleButton, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -class UncontrolledNavPage extends React.Component { - render() { - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - const Sidebar = ; - - return ( - - Section with darker background - Section with dark background - Section with light background - - ); - } -} +```ts file="./PageUncontrolledNav.tsx" ``` ### Group section -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageGroup, - PageBreadcrumb, - PageNavigation, - PageSectionVariants, - PageToggleButton, - Breadcrumb, - BreadcrumbItem, - Nav, - NavList, - NavItem, - Toolbar, - ToolbarContent, - ToolbarItem -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -class GroupPage extends React.Component { - constructor(props) { - super(props); - this.state = { - isNavOpen: true - }; - this.onNavToggle = () => { - this.setState({ - isNavOpen: !this.state.isNavOpen - }); - }; - } - - render() { - const { isNavOpen } = this.state; - - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - const Sidebar = ; - - return ( - - - - - - - - Section home - Section title - Section title - - Section landing - - - - Grouped section - - Section 1 - Section 2 - - ); - } -} +```ts file="./PageGroupSection.tsx" ``` ### Vertical nav using PageHeader component -This example is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools. - -```js -import React from 'react'; -import { - Page, - PageHeader, - PageHeaderTools, - PageSidebar, - PageSection, - PageSectionVariants -} from '@patternfly/react-core'; - -class VerticalPage extends React.Component { - constructor(props) { - super(props); - this.state = { - isNavOpen: true - }; - this.onNavToggle = () => { - this.setState({ - isNavOpen: !this.state.isNavOpen - }); - }; - } - - render() { - const { isNavOpen } = this.state; +This example is provided because PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools. - const logoProps = { - href: 'https://patternfly.org', - onClick: () => console.log('clicked logo'), - target: '_blank' - }; - const Header = ( - header-tools} - showNavToggle - isNavOpen={isNavOpen} - onNavToggle={this.onNavToggle} - navToggleId="vertical-pageheader-toggle" - /> - ); - const Sidebar = ; - - return ( - - Section with darker background - Section with dark background - Section with light background - - ); - } -} +```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx" ``` ### Centered section -```js -import React from 'react'; -import { - Page, - Masthead, - MastheadToggle, - MastheadMain, - MastheadBrand, - MastheadContent, - PageSidebar, - PageSection, - PageSectionVariants, - PageToggleButton, - Toolbar, - ToolbarContent, - ToolbarItem, - Card, - CardBody -} from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; - -CenterAlignedPageSection = () => { - const headerToolbar = ( - - - header-tools - - - ); - - const Header = ( - - - - - - - - console.log('clicked logo')} target="_blank"> - Logo - - - {headerToolbar} - - ); - - return ( - - - - - When a width limited page section is wider than the value of - --pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section. -
-
- The content in this example is placed in a card to better illustrate how the section behaves when it is - centered. A card is not required to center a page section. - - - - - ); -}; +```ts file="./PageCenteredSection.tsx" ``` diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx new file mode 100644 index 00000000000..e580908555a --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem, + Card, + CardBody +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageCenteredSection: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + + + + When a width limited page section is wider than the value of + --pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main + section. +
+
+ The content in this example is placed in a card to better illustrate how the section behaves when it is + centered. A card is not required to center a page section. + + + + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx new file mode 100644 index 00000000000..5e6a7ceed44 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageGroup, + PageBreadcrumb, + PageNavigation, + PageSectionVariants, + PageToggleButton, + Breadcrumb, + BreadcrumbItem, + Nav, + NavList, + NavItem, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageGroupSection: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + + + + + + + Section home + Section title + Section title + + Section landing + + + + Grouped section + + Section 1 + Section 2 + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx new file mode 100644 index 00000000000..d252e937f01 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSection, + PageSectionVariants, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; + +export const PageHorizontalNav: React.FunctionComponent = () => { + const headerToolbar = ( + + + Navigation + header-tools + + + ); + + const header = ( + + + + Logo + + + {headerToolbar} + + ); + + return ( + + Section with darker background + Section with dark background + Section with light background + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx new file mode 100644 index 00000000000..bbe17978b79 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageSectionVariants, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageMainSectionPadding: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + Section with default padding + + Section with no padding + + + Section with padding only on medium/large + + + Section with no padding on medium + + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx b/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx new file mode 100644 index 00000000000..b5a11180563 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSection, + PageSectionVariants, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; + +export const PageTertiaryNav: React.FunctionComponent = () => { + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + Logo + + + {headerToolbar} + + ); + + return ( + + Section with darker background + Section with dark background + Section with light background + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx new file mode 100644 index 00000000000..b3e589b34a2 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageSectionVariants, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageUncontrolledNav: React.FunctionComponent = () => { + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + Section with darker background + Section with dark background + Section with light background + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx new file mode 100644 index 00000000000..3b8b4d69a8d --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageSectionVariants, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageVerticalNav: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + Section with darker background + Section with dark background + Section with light background + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNavUsingPageHeaderComponent.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNavUsingPageHeaderComponent.tsx new file mode 100644 index 00000000000..8c4c45e8633 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageVerticalNavUsingPageHeaderComponent.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { + Page, + PageHeader, + PageHeaderTools, + PageSidebar, + PageSection, + PageSectionVariants +} from '@patternfly/react-core'; + +export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const logoProps = { + href: 'https://patternfly.org', + target: '_blank' + }; + + const header = ( + header-tools} + showNavToggle + isNavOpen={isNavOpen} + onNavToggle={onNavToggle} + navToggleId="vertical-pageheader-toggle" + /> + ); + + const sidebar = ; + + return ( + + Section with darker background + Section with dark background + Section with light background + + ); +}; diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx new file mode 100644 index 00000000000..1a0ccb8f338 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSection, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageWithOrWithoutFill: React.FunctionComponent = () => { + const [isNavOpen, setIsNavOpen] = React.useState(true); + + const onNavToggle = () => { + setIsNavOpen(!isNavOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ; + + return ( + + A default page section + This section fills the available space. + + This section is set to not fill the available space, since the last page section is set to fill the available + space by default. + + + ); +};