From 0b41d173397d8ec0fc4f43ba0d2a9960a4e362e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Thu, 21 Jul 2022 15:45:20 +0200 Subject: [PATCH 1/2] chore(Page): convert examples to TypeScript --- .../Page/examples/CenteredSection.tsx | 73 ++ .../components/Page/examples/GroupSection.tsx | 105 +++ .../Page/examples/HorizontalNav.tsx | 42 ++ .../Page/examples/MainSectionPadding.tsx | 70 ++ .../src/components/Page/examples/Page.md | 623 +----------------- .../components/Page/examples/TertiaryNav.tsx | 42 ++ .../Page/examples/UncontrolledNav.tsx | 51 ++ .../components/Page/examples/VerticalNav.tsx | 64 ++ .../VerticalNavUsingPageHeaderComponent.tsx | 41 ++ .../Page/examples/WithOrWithoutFill.tsx | 65 ++ 10 files changed, 562 insertions(+), 614 deletions(-) create mode 100644 packages/react-core/src/components/Page/examples/CenteredSection.tsx create mode 100644 packages/react-core/src/components/Page/examples/GroupSection.tsx create mode 100644 packages/react-core/src/components/Page/examples/HorizontalNav.tsx create mode 100644 packages/react-core/src/components/Page/examples/MainSectionPadding.tsx create mode 100644 packages/react-core/src/components/Page/examples/TertiaryNav.tsx create mode 100644 packages/react-core/src/components/Page/examples/UncontrolledNav.tsx create mode 100644 packages/react-core/src/components/Page/examples/VerticalNav.tsx create mode 100644 packages/react-core/src/components/Page/examples/VerticalNavUsingPageHeaderComponent.tsx create mode 100644 packages/react-core/src/components/Page/examples/WithOrWithoutFill.tsx diff --git a/packages/react-core/src/components/Page/examples/CenteredSection.tsx b/packages/react-core/src/components/Page/examples/CenteredSection.tsx new file mode 100644 index 00000000000..6867bade5ac --- /dev/null +++ b/packages/react-core/src/components/Page/examples/CenteredSection.tsx @@ -0,0 +1,73 @@ +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 CenterAlignedPageSection: 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/GroupSection.tsx b/packages/react-core/src/components/Page/examples/GroupSection.tsx new file mode 100644 index 00000000000..53a56af0bac --- /dev/null +++ b/packages/react-core/src/components/Page/examples/GroupSection.tsx @@ -0,0 +1,105 @@ +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 GroupPage: 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/HorizontalNav.tsx b/packages/react-core/src/components/Page/examples/HorizontalNav.tsx new file mode 100644 index 00000000000..0f14f7d5f1e --- /dev/null +++ b/packages/react-core/src/components/Page/examples/HorizontalNav.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 HorizontalPage: 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/MainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/MainSectionPadding.tsx new file mode 100644 index 00000000000..8b57b2ad141 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/MainSectionPadding.tsx @@ -0,0 +1,70 @@ +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 VerticalPage: 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/Page.md b/packages/react-core/src/components/Page/examples/Page.md index ef32870a9b2..a38c674170e 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="./VerticalNav.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="./HorizontalNav.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="./TertiaryNav.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="./WithOrWithoutFill.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="./MainSectionPadding.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="./UncontrolledNav.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="./GroupSection.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; - - 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="./VerticalNavUsingPageHeaderComponent.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="./CenteredSection.tsx" ``` diff --git a/packages/react-core/src/components/Page/examples/TertiaryNav.tsx b/packages/react-core/src/components/Page/examples/TertiaryNav.tsx new file mode 100644 index 00000000000..3aa24405091 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/TertiaryNav.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 TertiaryPage: 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/UncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/UncontrolledNav.tsx new file mode 100644 index 00000000000..10d57c7cc71 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/UncontrolledNav.tsx @@ -0,0 +1,51 @@ +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 UncontrolledNavPage: 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/VerticalNav.tsx b/packages/react-core/src/components/Page/examples/VerticalNav.tsx new file mode 100644 index 00000000000..cea6fded934 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/VerticalNav.tsx @@ -0,0 +1,64 @@ +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 VerticalPage: 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/VerticalNavUsingPageHeaderComponent.tsx b/packages/react-core/src/components/Page/examples/VerticalNavUsingPageHeaderComponent.tsx new file mode 100644 index 00000000000..004945c7661 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/VerticalNavUsingPageHeaderComponent.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { + Page, + PageHeader, + PageHeaderTools, + PageSidebar, + PageSection, + PageSectionVariants +} from '@patternfly/react-core'; + +export const VerticalPage: 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/WithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/WithOrWithoutFill.tsx new file mode 100644 index 00000000000..ded6df1cfed --- /dev/null +++ b/packages/react-core/src/components/Page/examples/WithOrWithoutFill.tsx @@ -0,0 +1,65 @@ +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 FillPage: 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. + + + ); +}; From 8f1e3d7d333844ef0b02c84f72e7076acd8d6211 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Wed, 27 Jul 2022 18:33:16 +0200 Subject: [PATCH 2/2] chore(Page) fix typos, file names, formatting --- .../src/components/Page/examples/Page.md | 20 +++++++++---------- ...redSection.tsx => PageCenteredSection.tsx} | 11 ++++++---- ...{GroupSection.tsx => PageGroupSection.tsx} | 9 +++++---- ...orizontalNav.tsx => PageHorizontalNav.tsx} | 7 ++++--- ...Padding.tsx => PageMainSectionPadding.tsx} | 10 ++++++---- .../{TertiaryNav.tsx => PageTertiaryNav.tsx} | 6 +++--- ...trolledNav.tsx => PageUncontrolledNav.tsx} | 10 ++++++---- .../{VerticalNav.tsx => PageVerticalNav.tsx} | 9 +++++---- ...geVerticalNavUsingPageHeaderComponent.tsx} | 11 ++++++---- ...houtFill.tsx => PageWithOrWithoutFill.tsx} | 10 ++++++---- 10 files changed, 59 insertions(+), 44 deletions(-) rename packages/react-core/src/components/Page/examples/{CenteredSection.tsx => PageCenteredSection.tsx} (90%) rename packages/react-core/src/components/Page/examples/{GroupSection.tsx => PageGroupSection.tsx} (93%) rename packages/react-core/src/components/Page/examples/{HorizontalNav.tsx => PageHorizontalNav.tsx} (90%) rename packages/react-core/src/components/Page/examples/{MainSectionPadding.tsx => PageMainSectionPadding.tsx} (89%) rename packages/react-core/src/components/Page/examples/{TertiaryNav.tsx => PageTertiaryNav.tsx} (88%) rename packages/react-core/src/components/Page/examples/{UncontrolledNav.tsx => PageUncontrolledNav.tsx} (86%) rename packages/react-core/src/components/Page/examples/{VerticalNav.tsx => PageVerticalNav.tsx} (89%) rename packages/react-core/src/components/Page/examples/{VerticalNavUsingPageHeaderComponent.tsx => PageVerticalNavUsingPageHeaderComponent.tsx} (82%) rename packages/react-core/src/components/Page/examples/{WithOrWithoutFill.tsx => PageWithOrWithoutFill.tsx} (88%) diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index a38c674170e..3ee6a7075e5 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -25,47 +25,47 @@ import './page.css'; ### Vertical nav -```ts file="./VerticalNav.tsx" +```ts file="./PageVerticalNav.tsx" ``` ### Horizontal nav -```ts file="./HorizontalNav.tsx" +```ts file="./PageHorizontalNav.tsx" ``` ### Tertiary nav -```ts file="./TertiaryNav.tsx" +```ts file="./PageTertiaryNav.tsx" ``` ### With or without fill -```ts file="./WithOrWithoutFill.tsx" +```ts file="./PageWithOrWithoutFill.tsx" ``` ### Main section padding -```ts file="./MainSectionPadding.tsx" +```ts file="./PageMainSectionPadding.tsx" ``` ### Uncontrolled nav -```ts file="./UncontrolledNav.tsx" +```ts file="./PageUncontrolledNav.tsx" ``` ### Group section -```ts file="./GroupSection.tsx" +```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. +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. -```ts file="./VerticalNavUsingPageHeaderComponent.tsx" +```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx" ``` ### Centered section -```ts file="./CenteredSection.tsx" +```ts file="./PageCenteredSection.tsx" ``` diff --git a/packages/react-core/src/components/Page/examples/CenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx similarity index 90% rename from packages/react-core/src/components/Page/examples/CenteredSection.tsx rename to packages/react-core/src/components/Page/examples/PageCenteredSection.tsx index 6867bade5ac..e580908555a 100644 --- a/packages/react-core/src/components/Page/examples/CenteredSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx @@ -17,12 +17,13 @@ import { } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; -export const CenterAlignedPageSection: React.FunctionComponent = () => { +export const PageCenteredSection: React.FunctionComponent = () => { const [isNavOpen, setIsNavOpen] = React.useState(true); const onNavToggle = () => { setIsNavOpen(!isNavOpen); }; + const headerToolbar = ( @@ -31,7 +32,7 @@ export const CenterAlignedPageSection: React.FunctionComponent = () => { ); - const Header = ( + const header = ( { {headerToolbar} ); - const Sidebar = ; + + const sidebar = ; + return ( - + diff --git a/packages/react-core/src/components/Page/examples/GroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx similarity index 93% rename from packages/react-core/src/components/Page/examples/GroupSection.tsx rename to packages/react-core/src/components/Page/examples/PageGroupSection.tsx index 53a56af0bac..5e6a7ceed44 100644 --- a/packages/react-core/src/components/Page/examples/GroupSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx @@ -24,7 +24,7 @@ import { } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; -export const GroupPage: React.FunctionComponent = () => { +export const PageGroupSection: React.FunctionComponent = () => { const [isNavOpen, setIsNavOpen] = React.useState(true); const onNavToggle = () => { @@ -39,7 +39,7 @@ export const GroupPage: React.FunctionComponent = () => { ); - const Header = ( + const header = ( { {headerToolbar} ); - const Sidebar = ; + + const sidebar = ; return ( - +