diff --git a/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx b/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx index 7c1b79a846e..598f1946154 100644 --- a/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx +++ b/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx @@ -1,128 +1,146 @@ import React from 'react'; -import { SkipToContent } from '@patternfly/react-core'; +import { Content, SkipToContent } from '@patternfly/react-core'; -export const SkipToContentBasic: React.FunctionComponent = () => ( - - Skip to content -

Press tab to skip to content at the bottom of the page.

-
-

Main content

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla - nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel - erat vel, interdum mattis neque. Sub works as well! -

-

Second level

-

- Curabitur accumsan turpis pharetra - augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin - pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at - dignissim dui. Ut et neque nisl. -

- -

Third level

-

- Quisque ante lacus, malesuada ac auctor vitae, congue - non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum - tellus. -

-
    -
  1. Donec blandit a lorem id convallis.
    2. -
  2. Cras gravida arcu at diam gravida gravida.
    3. -
  3. Integer in volutpat libero.
    4. -
  4. Donec a diam tellus.
    5. -
  5. - Etiam auctor nisl et. -
      -
    • Donec blandit a lorem id convallis.
      • -
    • Cras gravida arcu at diam gravida gravida.
      • -
    • - Integer in volutpat libero. -
        -
      1. Donec blandit a lorem id convallis.
        2. -
      2. Cras gravida arcu at diam gravida gravida.
        3. -
      -
      • -
    -
    6. -
  6. Aenean nec tortor orci.
    7. -
  7. Quisque aliquam cursus urna, non bibendum massa viverra eget.
    8. -
  8. Vivamus maximus ultricies pulvinar.
    9. -
-
- Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet - turpis. -
-

- Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et - justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie. -

-
-

- Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas - vestibulum interdum commodo. -

-
-
Web
-
The part of the internet that contains websites and web pages
-
HTML
-
A markup language for creating web pages
-
CSS
-
A technology to make HTML look better
-
-

- Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis - malesuada nulla. Nulla facilisi. Nullam ac erat ante. -

-

Fourth level

-

- Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at - elementum ex efficitur. -

-

- Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. - Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien. -

- Sometimes you need small text to display things like date created -

- Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. - Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, - leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies - nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl - placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus - non pellentesque. -

-
Fifth level
-

- Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent - aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue - laoreet. Sed nec eleifend justo. Nam et sollicitudin odio. -

-
Sixth level
-

- Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros - accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada - ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, - ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus. -

- -); +export const SkipToContentBasic: React.FunctionComponent = () => { + const mainContentId = 'main-content'; + const handleClick = (e) => { + e.preventDefault(); + const mainContentElement = document.getElementById(mainContentId); + if (mainContentElement) { + mainContentElement.focus(); + mainContentElement.scrollIntoView(); + } + }; + + return ( + + + Skip to content + +

Press tab to skip to content at the bottom of the page.

+
+
+ +

Main content

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, + nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, + sollicitudin vel erat vel, interdum mattis neque. Sub works as well! +

+

Second level

+

+ Curabitur accumsan turpis pharetra + augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. + Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus + facilisis. Donec at dignissim dui. Ut et neque nisl. +

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • +
  • + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. +
      +
    • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
      • +
    • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
      • +
    • + Ut venenatis, nisl scelerisque. +
        +
      1. Donec blandit a lorem id convallis.
        2. +
      2. Cras gravida arcu at diam gravida gravida.
        3. +
      3. Integer in volutpat libero.
        4. +
      +
      • +
    +
    • +
  • Ut non enim metus.
    • +
+

Third level

+

+ Quisque ante lacus, malesuada ac auctor vitae, congue + non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu + rutrum tellus. +

+
    +
  1. Donec blandit a lorem id convallis.
    2. +
  2. Cras gravida arcu at diam gravida gravida.
    3. +
  3. Integer in volutpat libero.
    4. +
  4. Donec a diam tellus.
    5. +
  5. + Etiam auctor nisl et. +
      +
    • Donec blandit a lorem id convallis.
      • +
    • Cras gravida arcu at diam gravida gravida.
      • +
    • + Integer in volutpat libero. +
        +
      1. Donec blandit a lorem id convallis.
        2. +
      2. Cras gravida arcu at diam gravida gravida.
        3. +
      +
      • +
    +
    6. +
  6. Aenean nec tortor orci.
    7. +
  7. Quisque aliquam cursus urna, non bibendum massa viverra eget.
    8. +
  8. Vivamus maximus ultricies pulvinar.
    9. +
+
+ Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus + sit amet turpis. +
+

+ Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et + justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie. +

+
+

+ Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas + vestibulum interdum commodo. +

+
+
Web
+
The part of the internet that contains websites and web pages
+
HTML
+
A markup language for creating web pages
+
CSS
+
A technology to make HTML look better
+
+

+ Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis + malesuada nulla. Nulla facilisi. Nullam ac erat ante. +

+

Fourth level

+

+ Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, + at elementum ex efficitur. +

+

+ Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut + vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien. +

+ Sometimes you need small text to display things like date created +

+ Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in + felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. + Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac + posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan + pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel + condimentum. Nam pharetra varius metus non pellentesque. +

+
Fifth level
+

+ Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. + Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a + eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio. +

+
Sixth level
+

+ Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend + eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim + vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit + vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus. +

+ +
+ + ); +}; diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx index 2d3898dbdea..bfc9c34c74b 100644 --- a/packages/react-core/src/demos/DashboardWrapper.tsx +++ b/packages/react-core/src/demos/DashboardWrapper.tsx @@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC = ({ ); + const defaultContainerId = 'main-content-page-layout-default-nav'; + + const handleClick = (event: React.MouseEvent) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + const PageSkipToContent = ( - + Skip to content ); @@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC = ({ skipToContent={PageSkipToContent} banner={banner} breadcrumb={renderedBreadcrumb} - mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'} + mainContainerId={mainContainerId ?? defaultContainerId} notificationDrawer={notificationDrawer} isNotificationDrawerExpanded={isNotificationDrawerExpanded} {...(typeof onPageResize === 'function' && { diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 3a867c8ce3e..aa9814233b2 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const PageBreadcrumb = ( diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index d532a19a055..2d1d41deeb7 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx @@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const PageBreadcrumb = ( diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js deleted file mode 100644 index 3f5cf63976a..00000000000 --- a/packages/react-core/src/demos/examples/DashboardWrapper.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import { - Breadcrumb, - BreadcrumbItem, - Content, - Nav, - NavItem, - NavList, - Page, - PageSection, - PageSidebar, - PageSidebarBody, - SkipToContent -} from '@patternfly/react-core'; -import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader'; - -export const DashboardBreadcrumb = ( - - Section home - Section title - Section title - - Section landing - - -); - -export const PageTemplateTitle = ( - - -

Main title

-

This is a full page demo.

- - -); - -export default class DashboardWrapper extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 1 - }; - - this.onNavSelect = (_event, result) => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - const { - children, - mainContainerId, - breadcrumb, - masthead, - sidebar, - sidebarNavOpen, - onPageResize = () => {}, - hasNoBreadcrumb, - notificationDrawer, - isNotificationDrawerExpanded, - hasPageTemplateTitle, - ...pageProps - } = this.props; - - let renderedBreadcrumb; - if (!hasNoBreadcrumb) { - renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb; - } - - const PageNav = ( - - ); - - const _sidebar = ( - - {PageNav} - - ); - const PageSkipToContent = ( - - Skip to content - - ); - - return ( - } - sidebar={sidebar !== undefined ? sidebar : _sidebar} - isManagedSidebar - skipToContent={PageSkipToContent} - breadcrumb={renderedBreadcrumb} - mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'} - notificationDrawer={notificationDrawer} - isNotificationDrawerExpanded={isNotificationDrawerExpanded} - {...(typeof onPageResize === 'function' && { - onPageResize: (event, resizeObject) => onPageResize(event, resizeObject) - })} - {...pageProps} - > - {hasPageTemplateTitle && PageTemplateTitle} - {children} - - ); - } -} diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx index f1e15d82c78..5c122b74acd 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx @@ -282,7 +282,20 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => { const mainContainerId = 'main-content-page-layout-tertiary-nav'; - const pageSkipToContent = Skip to content; + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(mainContainerId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const pageSkipToContent = ( + + Skip to content + + ); return ( Skip to content; + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(mainContainerId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const pageSkipToContent = ( + + Skip to content + + ); return ( { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( <> diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx index e1526a2b228..115323bf352 100644 --- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx @@ -84,7 +84,21 @@ export const NavExpandableDemo: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-expandable-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx index 36fa4b0268d..e8492ddbd60 100644 --- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx @@ -259,7 +259,21 @@ export const NavFlyout: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-flyout-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( { ); const pageId = 'main-content-page-layout-group-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( <> diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx index 0ecf9507295..f9b9d2b4b99 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx @@ -204,7 +204,21 @@ export const NavHorizontal: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-horizontal-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx index 1cd49e20205..0d261dcc144 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx @@ -258,7 +258,21 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-horizontal-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx index cd660483a43..a6e21b61199 100644 --- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx @@ -234,7 +234,21 @@ export const NavManual: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-manual-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx index e10d9de83ed..a16ff3f045a 100644 --- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx @@ -69,7 +69,21 @@ export const NavWithSubnav: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const SubNav = (