From fed56acb94abab49bf4385041a74cf9c685f3691 Mon Sep 17 00:00:00 2001 From: Tomas Psota Date: Fri, 2 Sep 2022 12:42:27 +0200 Subject: [PATCH 1/5] chore(Page): use DashboardWrapper in React demos --- packages/react-core/src/demos/Page/Page.md | 1017 ++--------------- .../src/demos/examples/DashboardWrapper.js | 4 +- 2 files changed, 124 insertions(+), 897 deletions(-) diff --git a/packages/react-core/src/demos/Page/Page.md b/packages/react-core/src/demos/Page/Page.md index b80d24b2c33..b13a3b27fb3 100644 --- a/packages/react-core/src/demos/Page/Page.md +++ b/packages/react-core/src/demos/Page/Page.md @@ -11,13 +11,13 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava 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 DashboardWrapper from '../examples/DashboardWrapper'; -- All but the last example 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: - 1. Add an onNavToggle callback to PageHeader - 1. Pass a boolean into the isNavOpen prop to PageSidebar +- 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: - The last example demonstrates this. + 1. Add an onNavToggle callback to PageHeader + 2. Pass a boolean into the isNavOpen prop to PageSidebar - To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%` @@ -30,50 +30,16 @@ This demonstrates a variety of navigation patterns in the context of a full page ```js isFullscreen import React from 'react'; import { - Avatar, - Brand, - Breadcrumb, - BreadcrumbItem, - Button, - ButtonVariant, Card, CardBody, - Divider, - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, Gallery, GalleryItem, - KebabToggle, - Masthead, - MastheadBrand, - MastheadContent, - MastheadMain, - MastheadToggle, - Nav, - NavItem, - NavList, - Page, PageSection, PageSectionVariants, - PageSidebar, - PageToggleButton, - SkipToContent, TextContent, Text, - Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, } from '@patternfly/react-core'; +import DashboardWrapper from '../examples/DashboardWrapper'; 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'; @@ -84,500 +50,87 @@ import imgBrand from './imgBrand.svg'; import imgAvatar from './imgAvatar.svg'; class PageLayoutGrouped extends React.Component { - constructor(props) { - super(props); - this.state = { - isDropdownOpen: false, - isKebabDropdownOpen: false, - isFullKebabDropdownOpen: false, - activeItem: 0, - isDrawerExpanded: false - }; - this.onDropdownToggle = isDropdownOpen => { - this.setState({ - isDropdownOpen - }); - }; - - this.onDropdownSelect = event => { - this.setState({ - isDropdownOpen: !this.state.isDropdownOpen - }); - }; - - this.onKebabDropdownToggle = isKebabDropdownOpen => { - this.setState({ - isKebabDropdownOpen - }); - }; - - this.onKebabDropdownSelect = event => { - this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen - }); - }; - - this.onNavSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - - this.onFullKebabToggle = isFullKebabDropdownOpen => { - this.setState({ - isFullKebabDropdownOpen - }); - }; - - this.onFullKebabSelect = () => { - this.setState({ - isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen - }); - }; - - this.onDrawerToggle = () => { - const isDrawerExpanded = !this.state.isDrawerExpanded; - this.setState({ - isDrawerExpanded - }); - }; - - this.onDrawerClose = () => { - this.setState({ - isDrawerExpanded: false - }); - }; - } render() { - const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state; - - const PageNav = ( - - ); - - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; - - const fullKebabItems = [ - - My profile - - User management - - Logout - , - , - - Settings - , - - Help - - ]; - - const headerToolbar = ( - - - - - - - - - - - - - - - - - - - } - isOpen={isKebabDropdownOpen} - dropdownItems={kebabDropdownItems} - /> - - - } - isOpen={isFullKebabDropdownOpen} - dropdownItems={fullKebabItems} - /> - - - - } onToggle={this.onDropdownToggle}> - John Smith - - } - dropdownItems={userDropdownItems} - /> - - - - ); - - const Header = ( - - - - - - - - - - - - {headerToolbar} - - ); - const pageId = 'main-content-page-layout-tertiary-nav'; - const PageSkipToContent = Skip to content; - - const PageBreadcrumb = ( - - Section home - Section title - Section title - - Section landing - - - ); - - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const Sidebar = ; return ( - - - - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - - } - groupProps={{ - stickyOnBreakpoint: { default: 'top' } - }} - > - - - {Array.apply(0, Array(20)).map((x, i) => ( - - - This is a card - - - ))} - - - - - - + + + Main title + + Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5. + + + } + groupProps={{ + stickyOnBreakpoint: { default: 'top' } + }} + > + + + {Array.apply(0, Array(50)).map((x, i) => ( + + + This is a card + + + ))} + + + ); } } ``` -### Sticky section group (using PageHeader) - -This demo 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. +### Sticky section group (alternate syntax) ```js isFullscreen import React from 'react'; import { - Avatar, - Brand, Breadcrumb, BreadcrumbItem, - Button, - ButtonVariant, Card, CardBody, - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, Gallery, GalleryItem, - KebabToggle, - Nav, - NavItem, - NavList, - Page, - PageHeader, PageSection, PageSectionVariants, - SkipToContent, + PageGroup, + PageBreadcrumb, TextContent, - Text, - PageHeaderTools, - PageHeaderToolsGroup, - PageHeaderToolsItem + Text } from '@patternfly/react-core'; -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 './imgBrand.svg'; -import imgAvatar from './imgAvatar.svg'; - -class PageLayoutGrouped extends React.Component { - constructor(props) { - super(props); - this.state = { - isDropdownOpen: false, - isKebabDropdownOpen: false, - activeItem: 0 - }; - this.onDropdownToggle = isDropdownOpen => { - this.setState({ - isDropdownOpen - }); - }; - - this.onDropdownSelect = event => { - this.setState({ - isDropdownOpen: !this.state.isDropdownOpen - }); - }; - - this.onKebabDropdownToggle = isKebabDropdownOpen => { - this.setState({ - isKebabDropdownOpen - }); - }; - - this.onKebabDropdownSelect = event => { - this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen - }); - }; +import DashboardWrapper from '../examples/DashboardWrapper'; - this.onNavSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } +class PageLayoutGroupedAlt extends React.Component { render() { - const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state; - - const PageNav = ( - - ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; - const headerTools = ( - - - - - - - - - - - - - - - - ); - - const Header = ( - } headerTools={headerTools} showNavToggle /> - ); const pageId = 'main-content-page-layout-tertiary-nav'; - const PageSkipToContent = Skip to content; - - const PageBreadcrumb = ( - - Section home - Section title - Section title - - Section landing - - - ); return ( - + + + + Section home + Section title + Section title + + Section landing + + + Main title @@ -586,17 +139,11 @@ class PageLayoutGrouped extends React.Component { of its relative line height of 1.5. - - } - groupProps={{ - stickyOnBreakpoint: { - default: 'top' - } - }} - > + {' '} + - {Array.apply(0, Array(20)).map((x, i) => ( + {Array.apply(0, Array(50)).map((x, i) => ( This is a card @@ -605,24 +152,22 @@ class PageLayoutGrouped extends React.Component { ))} - + ); } } ``` -### Sticky section group (alternate syntax and using PageHeader) +### Sticky section group (using PageHeader) -Please see this note regarding PageHeader. +This demo 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 isFullscreen import React from 'react'; import { Avatar, Brand, - Breadcrumb, - BreadcrumbItem, Button, ButtonVariant, Card, @@ -634,36 +179,28 @@ import { Gallery, GalleryItem, KebabToggle, - Nav, - NavItem, - NavList, - Page, PageHeader, PageSection, PageSectionVariants, - PageGroup, - PageBreadcrumb, - PageNavigation, - SkipToContent, TextContent, Text, PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem } from '@patternfly/react-core'; +import DashboardWrapper from '../examples/DashboardWrapper'; 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 './imgBrand.svg'; import imgAvatar from './imgAvatar.svg'; -class PageLayoutGroupedAlt extends React.Component { +class PageLayoutGrouped extends React.Component { constructor(props) { super(props); this.state = { isDropdownOpen: false, - isKebabDropdownOpen: false, - activeItem: 0 + isKebabDropdownOpen: false }; this.onDropdownToggle = isDropdownOpen => { this.setState({ @@ -688,16 +225,12 @@ class PageLayoutGroupedAlt extends React.Component { isKebabDropdownOpen: !this.state.isKebabDropdownOpen }); }; - - this.onNavSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } + }; render() { - const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state; + const { isDropdownOpen, isKebabDropdownOpen } = this.state; + + const pageId = 'main-content-page-layout-tertiary-nav'; const kebabDropdownItems = [ @@ -707,6 +240,7 @@ class PageLayoutGroupedAlt extends React.Component { Help ]; + const userDropdownItems = [ My profile @@ -716,6 +250,7 @@ class PageLayoutGroupedAlt extends React.Component { Logout ]; + const headerTools = ( ); - const Header = ( + const pageHeader = ( } headerTools={headerTools} showNavToggle /> ); - const pageId = 'main-content-page-layout-tertiary-nav'; - const PageSkipToContent = Skip to content; return ( - - - - - - - - Section home - Section title - Section title - - Section landing - - - + Main title @@ -816,11 +324,16 @@ class PageLayoutGroupedAlt extends React.Component { of its relative line height of 1.5. - {' '} - + } + groupProps={{ + stickyOnBreakpoint: { + default: 'top' + } + }} + > - {Array.apply(0, Array(20)).map((x, i) => ( + {Array.apply(0, Array(50)).map((x, i) => ( This is a card @@ -829,7 +342,7 @@ class PageLayoutGroupedAlt extends React.Component { ))} - + ); } @@ -841,343 +354,55 @@ class PageLayoutGroupedAlt extends React.Component { ```js isFullscreen import React from 'react'; import { - Avatar, - Brand, - Breadcrumb, - BreadcrumbItem, - Button, - ButtonVariant, Card, CardBody, - Divider, - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, Gallery, GalleryItem, - KebabToggle, - Masthead, - MastheadBrand, - MastheadContent, - MastheadMain, - MastheadToggle, - Nav, - NavItem, - NavList, - Page, PageSection, PageSectionVariants, - PageToggleButton, - PageSidebar, - SkipToContent, TextContent, Text, - Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, } from '@patternfly/react-core'; -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 AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon'; -import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon'; -import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; -import imgBrand from './imgBrand.svg'; -import imgAvatar from './imgAvatar.svg'; +import DashboardWrapper from '../examples/DashboardWrapper'; class PageLayoutGrouped extends React.Component { - constructor(props) { - super(props); - this.state = { - isDropdownOpen: false, - isKebabDropdownOpen: false, - isFullKebabDropdownOpen: false, - activeItem: 0, - isDrawerExpanded: false - }; - this.onDropdownToggle = isDropdownOpen => { - this.setState({ - isDropdownOpen - }); - }; - - this.onDropdownSelect = event => { - this.setState({ - isDropdownOpen: !this.state.isDropdownOpen - }); - }; - - this.onKebabDropdownToggle = isKebabDropdownOpen => { - this.setState({ - isKebabDropdownOpen - }); - }; - - this.onKebabDropdownSelect = event => { - this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen - }); - }; - - this.onNavSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - - this.onFullKebabToggle = isFullKebabDropdownOpen => { - this.setState({ - isFullKebabDropdownOpen - }); - }; - - this.onFullKebabSelect = () => { - this.setState({ - isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen - }); - }; - - this.onDrawerToggle = () => { - const isDrawerExpanded = !this.state.isDrawerExpanded; - this.setState({ - isDrawerExpanded - }); - }; - - this.onDrawerClose = () => { - this.setState({ - isDrawerExpanded: false - }); - }; - } render() { - const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state; - - const PageNav = ( - - ); - - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; - - const fullKebabItems = [ - - My profile - - User management - - Logout - , - , - - Settings - , - - Help - - ]; - - const headerToolbar = ( - - - - - - - - - - - - - - - - - - - } - isOpen={isKebabDropdownOpen} - dropdownItems={kebabDropdownItems} - /> - - - } - isOpen={isFullKebabDropdownOpen} - dropdownItems={fullKebabItems} - /> - - - - } onToggle={this.onDropdownToggle}> - John Smith - - } - dropdownItems={userDropdownItems} - /> - - - - ); - - const Header = ( - - - - - - - - - - - - {headerToolbar} - - ); - const pageId = 'main-content-page-layout-tertiary-nav'; - const PageSkipToContent = Skip to content; - - const PageBreadcrumb = ( - - Section home - Section title - Section title - - Section landing - - - ); - - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const Sidebar = ; return ( - - - - - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - - - - {Array.apply(0, Array(50)).map((x, i) => ( - - - This is a card - - - ))} - - - - - - + + + + Main title + + Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5. + + + + + + {Array.apply(0, Array(50)).map((_x, i) => ( + + + This is a card + + + ))} + + + ); } } diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js index a7330240c5d..83efd392223 100644 --- a/packages/react-core/src/demos/examples/DashboardWrapper.js +++ b/packages/react-core/src/demos/examples/DashboardWrapper.js @@ -60,7 +60,8 @@ export default class DashboardWrapper extends React.Component { hasNoBreadcrumb, notificationDrawer, isNotificationDrawerExpanded, - hasPageTemplateTitle + hasPageTemplateTitle, + ...pageProps } = this.props; let renderedBreadcrumb; @@ -108,6 +109,7 @@ export default class DashboardWrapper extends React.Component { notificationDrawer={notificationDrawer} isNotificationDrawerExpanded={isNotificationDrawerExpanded} onPageResize={onPageResize} + {...pageProps} > {hasPageTemplateTitle && PageTemplateTitle} {children} From 2c6a7bbfdab9ea37dcfdb79fe440bb64ad7fc7f9 Mon Sep 17 00:00:00 2001 From: Tomas Psota Date: Fri, 9 Sep 2022 17:37:57 +0200 Subject: [PATCH 2/5] removed DashboardWrapper and changed examples to ts --- packages/react-core/src/demos/Page.md | 47 ++ packages/react-core/src/demos/Page/Page.md | 409 ------------------ .../react-core/src/demos/Page/imgAvatar.svg | 33 -- .../react-core/src/demos/Page/imgBrand.svg | 1 - .../Page/PageStickySectionBreadcrumb.tsx | 273 ++++++++++++ .../examples/Page/PageStickySectionGroup.tsx | 274 ++++++++++++ .../Page/PageStickySectionGroupAlternate.tsx | 267 ++++++++++++ .../PageStickySectionGroupUsingPageHeader.tsx | 266 ++++++++++++ 8 files changed, 1127 insertions(+), 443 deletions(-) create mode 100644 packages/react-core/src/demos/Page.md delete mode 100644 packages/react-core/src/demos/Page/Page.md delete mode 100755 packages/react-core/src/demos/Page/imgAvatar.svg delete mode 100644 packages/react-core/src/demos/Page/imgBrand.svg create mode 100644 packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx create mode 100644 packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx create mode 100644 packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx create mode 100644 packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md new file mode 100644 index 00000000000..200d36df8bc --- /dev/null +++ b/packages/react-core/src/demos/Page.md @@ -0,0 +1,47 @@ +--- +id: Page +section: components +--- + +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'; + +- 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: + + 1. Add an onNavToggle callback to PageHeader + 2. Pass a boolean into the isNavOpen prop to PageSidebar + +- To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%` + +## Layouts + +This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application. + +### Sticky section group + +```ts file='./examples/Page/PageStickySectionGroup.tsx' isFullscreen +``` + +### Sticky section group (alternate syntax) + +```ts file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen +``` + +### Sticky section group (using PageHeader) + +This demo 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. + +```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen +``` + +### Sticky section breadcrumb (with breakpoints) + +```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen +``` diff --git a/packages/react-core/src/demos/Page/Page.md b/packages/react-core/src/demos/Page/Page.md deleted file mode 100644 index b13a3b27fb3..00000000000 --- a/packages/react-core/src/demos/Page/Page.md +++ /dev/null @@ -1,409 +0,0 @@ ---- -id: Page -section: components ---- - -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 DashboardWrapper from '../examples/DashboardWrapper'; - - -- 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: - - 1. Add an onNavToggle callback to PageHeader - 2. Pass a boolean into the isNavOpen prop to PageSidebar - -- To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%` - -## Layouts - -This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application. - -### Sticky section group - -```js isFullscreen -import React from 'react'; -import { - Card, - CardBody, - Gallery, - GalleryItem, - PageSection, - PageSectionVariants, - TextContent, - Text, -} from '@patternfly/react-core'; -import DashboardWrapper from '../examples/DashboardWrapper'; -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 AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon'; -import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon'; -import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; -import imgBrand from './imgBrand.svg'; -import imgAvatar from './imgAvatar.svg'; - -class PageLayoutGrouped extends React.Component { - - render() { - const pageId = 'main-content-page-layout-tertiary-nav'; - - return ( - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - } - groupProps={{ - stickyOnBreakpoint: { default: 'top' } - }} - > - - - {Array.apply(0, Array(50)).map((x, i) => ( - - - This is a card - - - ))} - - - - ); - } -} -``` - -### Sticky section group (alternate syntax) - -```js isFullscreen -import React from 'react'; -import { - Breadcrumb, - BreadcrumbItem, - Card, - CardBody, - Gallery, - GalleryItem, - PageSection, - PageSectionVariants, - PageGroup, - PageBreadcrumb, - TextContent, - Text -} from '@patternfly/react-core'; -import DashboardWrapper from '../examples/DashboardWrapper'; - -class PageLayoutGroupedAlt extends React.Component { - - render() { - const pageId = 'main-content-page-layout-tertiary-nav'; - - return ( - - - - - - Section home - Section title - Section title - - Section landing - - - - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - {' '} - - - - {Array.apply(0, Array(50)).map((x, i) => ( - - - This is a card - - - ))} - - - - - ); - } -} -``` - -### Sticky section group (using PageHeader) - -This demo 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 isFullscreen -import React from 'react'; -import { - Avatar, - Brand, - Button, - ButtonVariant, - Card, - CardBody, - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, - Gallery, - GalleryItem, - KebabToggle, - PageHeader, - PageSection, - PageSectionVariants, - TextContent, - Text, - PageHeaderTools, - PageHeaderToolsGroup, - PageHeaderToolsItem -} from '@patternfly/react-core'; -import DashboardWrapper from '../examples/DashboardWrapper'; -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 './imgBrand.svg'; -import imgAvatar from './imgAvatar.svg'; - -class PageLayoutGrouped extends React.Component { - constructor(props) { - super(props); - this.state = { - isDropdownOpen: false, - isKebabDropdownOpen: false - }; - this.onDropdownToggle = isDropdownOpen => { - this.setState({ - isDropdownOpen - }); - }; - - this.onDropdownSelect = event => { - this.setState({ - isDropdownOpen: !this.state.isDropdownOpen - }); - }; - - this.onKebabDropdownToggle = isKebabDropdownOpen => { - this.setState({ - isKebabDropdownOpen - }); - }; - - this.onKebabDropdownSelect = event => { - this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen - }); - }; - }; - - render() { - const { isDropdownOpen, isKebabDropdownOpen } = this.state; - - const pageId = 'main-content-page-layout-tertiary-nav'; - - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; - - const headerTools = ( - - - - - - - - - - - - - - - - ); - - const pageHeader = ( - } headerTools={headerTools} showNavToggle /> - ); - - return ( - - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - } - groupProps={{ - stickyOnBreakpoint: { - default: 'top' - } - }} - > - - - {Array.apply(0, Array(50)).map((x, i) => ( - - - This is a card - - - ))} - - - - - ); - } -} -``` - -### Sticky section breadcrumb (with breakpoints) - -```js isFullscreen -import React from 'react'; -import { - Card, - CardBody, - Gallery, - GalleryItem, - PageSection, - PageSectionVariants, - TextContent, - Text, -} from '@patternfly/react-core'; -import DashboardWrapper from '../examples/DashboardWrapper'; - -class PageLayoutGrouped extends React.Component { - - render() { - const pageId = 'main-content-page-layout-tertiary-nav'; - - return ( - - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5. - - - - - - {Array.apply(0, Array(50)).map((_x, i) => ( - - - This is a card - - - ))} - - - - ); - } -} -``` diff --git a/packages/react-core/src/demos/Page/imgAvatar.svg b/packages/react-core/src/demos/Page/imgAvatar.svg deleted file mode 100755 index 11c80b85ff6..00000000000 --- a/packages/react-core/src/demos/Page/imgAvatar.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/react-core/src/demos/Page/imgBrand.svg b/packages/react-core/src/demos/Page/imgBrand.svg deleted file mode 100644 index c29cc6c9a89..00000000000 --- a/packages/react-core/src/demos/Page/imgBrand.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx new file mode 100644 index 00000000000..ae81e05fdf3 --- /dev/null +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx @@ -0,0 +1,273 @@ +import React from 'react'; +import { + ApplicationLauncher, + ApplicationLauncherItem, + Avatar, + Brand, + Breadcrumb, + BreadcrumbItem, + Button, + ButtonVariant, + Card, + CardBody, + Dropdown, + DropdownGroup, + DropdownItem, + DropdownToggle, + Gallery, + GalleryItem, + KebabToggle, + Masthead, + MastheadBrand, + MastheadContent, + MastheadMain, + MastheadToggle, + Nav, + NavItem, + NavList, + Page, + PageSection, + PageSectionVariants, + PageSidebar, + PageToggleButton, + SkipToContent, + Text, + TextContent, + Toolbar, + ToolbarContent, + ToolbarGroup, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +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 imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; + +interface NavOnSelectProps { + groupId: number | string; + itemId: number | string; + to: string; + event: React.FormEvent; +} + +export const PageStickySectionBreadcrumb: React.FunctionComponent = () => { + const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); + const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false); + const [activeItem, setActiveItem] = React.useState(1); + + const onNavSelect = (selectedItem: NavOnSelectProps) => { + typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); + }; + + const onDropdownToggle = (isOpen: boolean) => { + setIsDropdownOpen(isOpen); + }; + + const onDropdownSelect = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + const onKebabDropdownToggle = (isOpen: boolean) => { + setIsKebabDropdownOpen(isOpen); + }; + + const onKebabDropdownSelect = () => { + setIsKebabDropdownOpen(!isKebabDropdownOpen); + }; + + const onAppLauncherToggle = (isOpen: boolean) => { + setIsAppLauncherOpen(isOpen); + }; + + const onAppLauncherSelect = () => { + setIsAppLauncherOpen(!isAppLauncherOpen); + }; + + const dashboardBreadcrumb = ( + + Section home + Section title + Section title + + Section landing + + + ); + + const kebabDropdownItems = [ + + Settings + , + + Help + + ]; + + const userDropdownItems = [ + + My profile + + User management + + Logout + + ]; + + const appLauncherItems = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + + ]; + + const headerToolbar = ( + + + + +