Skip to content

Commit 01325e4

Browse files
rebeccaalpertrebeccaalpert
committed
chore(SkipToContent): Update demo
Use refs in demo to match other demos.
1 parent a574b5f commit 01325e4

File tree

1 file changed

+144
-126
lines changed

1 file changed

+144
-126
lines changed

‎packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx‎

Lines changed: 144 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,146 @@
11
import React from 'react';
2-
import { SkipToContent } from '@patternfly/react-core';
2+
import { Content, SkipToContent } from '@patternfly/react-core';
33

4-
export const SkipToContentBasic: React.FunctionComponent = () => (
5-
<React.Fragment>
6-
<SkipToContent href="#main-content">Skip to content</SkipToContent>
7-
<p>Press tab to skip to content at the bottom of the page.</p>
8-
<div style={{ height: '2000px' }}></div>
9-
<h1 id="main-content">Main content</h1>
10-
<p>
11-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
12-
nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
13-
erat vel, interdum mattis neque. Sub works as well!
14-
</p>
15-
<h2>Second level</h2>
16-
<p>
17-
Curabitur accumsan turpis pharetra
18-
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
19-
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at
20-
dignissim dui. Ut et neque nisl.
21-
</p>
22-
<ul>
23-
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
24-
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
25-
<li>
26-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
27-
<ul>
28-
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
29-
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
30-
<li>
31-
Ut venenatis, nisl scelerisque.
32-
<ol>
33-
<li>Donec blandit a lorem id convallis.</li>
34-
<li>Cras gravida arcu at diam gravida gravida.</li>
35-
<li>Integer in volutpat libero.</li>
36-
</ol>
37-
</li>
38-
</ul>
39-
</li>
40-
<li>Ut non enim metus.</li>
41-
</ul>
42-
<h3>Third level</h3>
43-
<p>
44-
Quisque ante lacus, malesuada ac auctor vitae, congue
45-
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum
46-
tellus.
47-
</p>
48-
<ol>
49-
<li>Donec blandit a lorem id convallis.</li>
50-
<li>Cras gravida arcu at diam gravida gravida.</li>
51-
<li>Integer in volutpat libero.</li>
52-
<li>Donec a diam tellus.</li>
53-
<li>
54-
Etiam auctor nisl et.
55-
<ul>
56-
<li>Donec blandit a lorem id convallis.</li>
57-
<li>Cras gravida arcu at diam gravida gravida.</li>
58-
<li>
59-
Integer in volutpat libero.
60-
<ol>
61-
<li>Donec blandit a lorem id convallis.</li>
62-
<li>Cras gravida arcu at diam gravida gravida.</li>
63-
</ol>
64-
</li>
65-
</ul>
66-
</li>
67-
<li>Aenean nec tortor orci.</li>
68-
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
69-
<li>Vivamus maximus ultricies pulvinar.</li>
70-
</ol>
71-
<blockquote>
72-
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
73-
turpis.
74-
</blockquote>
75-
<p>
76-
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
77-
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
78-
</p>
79-
<hr />
80-
<p>
81-
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
82-
vestibulum interdum commodo.
83-
</p>
84-
<dl>
85-
<dt>Web</dt>
86-
<dd>The part of the internet that contains websites and web pages</dd>
87-
<dt>HTML</dt>
88-
<dd>A markup language for creating web pages</dd>
89-
<dt>CSS</dt>
90-
<dd>A technology to make HTML look better</dd>
91-
</dl>
92-
<p>
93-
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
94-
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
95-
</p>
96-
<h4>Fourth level</h4>
97-
<p>
98-
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
99-
elementum ex efficitur.
100-
</p>
101-
<p>
102-
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula.
103-
Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
104-
</p>
105-
<small>Sometimes you need small text to display things like date created</small>
106-
<p>
107-
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
108-
Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique,
109-
leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies
110-
nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl
111-
placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus
112-
non pellentesque.
113-
</p>
114-
<h5>Fifth level</h5>
115-
<p>
116-
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
117-
aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
118-
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
119-
</p>
120-
<h6>Sixth level</h6>
121-
<p>
122-
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
123-
accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
124-
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo,
125-
ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
126-
</p>
127-
</React.Fragment>
128-
);
4+
export const SkipToContentBasic: React.FunctionComponent = () => {
5+
const mainContentId = 'main-content';
6+
const handleClick = (e) => {
7+
e.preventDefault();
8+
const mainContentElement = document.getElementById(mainContentId);
9+
if (mainContentElement) {
10+
mainContentElement.focus();
11+
mainContentElement.scrollIntoView();
12+
}
13+
};
14+
15+
return (
16+
<React.Fragment>
17+
<SkipToContent onClick={handleClick} href={`#${mainContentId}`}>
18+
Skip to content
19+
</SkipToContent>
20+
<p>Press tab to skip to content at the bottom of the page.</p>
21+
<div style={{ height: '2000px' }}></div>
22+
<div tabIndex={-1} id={mainContentId}>
23+
<Content>
24+
<h1>Main content</h1>
25+
<p>
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida,
27+
nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio,
28+
sollicitudin vel erat vel, interdum mattis neque. Sub works as well!
29+
</p>
30+
<h2>Second level</h2>
31+
<p>
32+
Curabitur accumsan turpis pharetra
33+
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id.
34+
Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
35+
facilisis. Donec at dignissim dui. Ut et neque nisl.
36+
</p>
37+
<ul>
38+
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
39+
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
40+
<li>
41+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
42+
<ul>
43+
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
44+
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
45+
<li>
46+
Ut venenatis, nisl scelerisque.
47+
<ol>
48+
<li>Donec blandit a lorem id convallis.</li>
49+
<li>Cras gravida arcu at diam gravida gravida.</li>
50+
<li>Integer in volutpat libero.</li>
51+
</ol>
52+
</li>
53+
</ul>
54+
</li>
55+
<li>Ut non enim metus.</li>
56+
</ul>
57+
<h3>Third level</h3>
58+
<p>
59+
Quisque ante lacus, malesuada ac auctor vitae, congue
60+
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
61+
rutrum tellus.
62+
</p>
63+
<ol>
64+
<li>Donec blandit a lorem id convallis.</li>
65+
<li>Cras gravida arcu at diam gravida gravida.</li>
66+
<li>Integer in volutpat libero.</li>
67+
<li>Donec a diam tellus.</li>
68+
<li>
69+
Etiam auctor nisl et.
70+
<ul>
71+
<li>Donec blandit a lorem id convallis.</li>
72+
<li>Cras gravida arcu at diam gravida gravida.</li>
73+
<li>
74+
Integer in volutpat libero.
75+
<ol>
76+
<li>Donec blandit a lorem id convallis.</li>
77+
<li>Cras gravida arcu at diam gravida gravida.</li>
78+
</ol>
79+
</li>
80+
</ul>
81+
</li>
82+
<li>Aenean nec tortor orci.</li>
83+
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
84+
<li>Vivamus maximus ultricies pulvinar.</li>
85+
</ol>
86+
<blockquote>
87+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus
88+
sit amet turpis.
89+
</blockquote>
90+
<p>
91+
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
92+
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
93+
</p>
94+
<hr />
95+
<p>
96+
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
97+
vestibulum interdum commodo.
98+
</p>
99+
<dl>
100+
<dt>Web</dt>
101+
<dd>The part of the internet that contains websites and web pages</dd>
102+
<dt>HTML</dt>
103+
<dd>A markup language for creating web pages</dd>
104+
<dt>CSS</dt>
105+
<dd>A technology to make HTML look better</dd>
106+
</dl>
107+
<p>
108+
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
109+
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
110+
</p>
111+
<h4>Fourth level</h4>
112+
<p>
113+
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet,
114+
at elementum ex efficitur.
115+
</p>
116+
<p>
117+
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
118+
vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
119+
</p>
120+
<small>Sometimes you need small text to display things like date created</small>
121+
<p>
122+
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in
123+
felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper.
124+
Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac
125+
posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan
126+
pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel
127+
condimentum. Nam pharetra varius metus non pellentesque.
128+
</p>
129+
<h5>Fifth level</h5>
130+
<p>
131+
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit.
132+
Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a
133+
eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
134+
</p>
135+
<h6>Sixth level</h6>
136+
<p>
137+
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend
138+
eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim
139+
vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit
140+
vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
141+
</p>
142+
</Content>
143+
</div>
144+
</React.Fragment>
145+
);
146+
};

0 commit comments

Comments
 (0)