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. +

+ +
+ + ); +};