diff --git a/packages/react-core/src/components/SkipToContent/examples/SkipToContent.md b/packages/react-core/src/components/SkipToContent/examples/SkipToContent.md index 49252f8fbe0..a212e1587e5 100644 --- a/packages/react-core/src/components/SkipToContent/examples/SkipToContent.md +++ b/packages/react-core/src/components/SkipToContent/examples/SkipToContent.md @@ -7,107 +7,5 @@ propComponents: ['SkipToContent'] ## Examples ### Basic -```js isFullscreen -import React from 'react'; -import { SkipToContent } from '@patternfly/react-core'; - -class SimpleSkipToContent extends React.Component { - render() { - 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.

- -

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.

- - ); - } -} +```ts isFullscreen file="./SkipToContentBasic.tsx" ``` diff --git a/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx b/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx new file mode 100644 index 00000000000..7c1b79a846e --- /dev/null +++ b/packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import { 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. +

+ +);