Skip to content

Commit d76366d

Browse files
WesCossickWesCossick
authored
Merge pull request #46 from sparksuite/build-out-demo-site
Build out the demo website
2 parents 80594a3 + c5e625b commit d76366d

File tree

4 files changed

+207
-13
lines changed

4 files changed

+207
-13
lines changed

‎demo/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<title>React Accessible Dropdown Menu Hook</title>
8+
<script src="https://kit.fontawesome.com/c7369e5365.js" crossorigin="anonymous"></script>
89
</head>
910

1011
<body>

‎demo/src/app.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,161 @@ body {
1414
.app {
1515
text-align: center;
1616
}
17+
18+
h1 {
19+
margin: 0;
20+
padding: 0 2rem;
21+
margin-top: 4rem;
22+
line-height: 1;
23+
color: #333;
24+
font-weight: 500;
25+
font-size: 3rem;
26+
}
27+
28+
h2 {
29+
margin: 0;
30+
padding: 0 2rem;
31+
margin-top: 0.5rem;
32+
line-height: 1;
33+
color: #555;
34+
font-weight: 300;
35+
font-size: 1.5rem;
36+
font-style: italic;
37+
}
38+
39+
#menu-button {
40+
appearance: none;
41+
width: 10rem;
42+
margin: 3rem auto 0;
43+
padding: 1rem 0;
44+
background: #eee;
45+
outline: none;
46+
border: 1px solid #ddd;
47+
border-radius: 0.2rem;
48+
font-size: 1.5rem;
49+
color: #000;
50+
font-weight: 300;
51+
cursor: pointer;
52+
position: relative;
53+
line-height: 1;
54+
transition: all 0.2s ease 0.05s;
55+
display: flex;
56+
}
57+
58+
#menu-button:hover {
59+
background: #fafafa;
60+
}
61+
62+
#menu-button:focus {
63+
box-shadow: 0 0 0 0.15rem #fff, 0 0 0 0.3rem #bbb;
64+
}
65+
66+
#menu-button span {
67+
flex-grow: 1;
68+
text-align: center;
69+
}
70+
71+
#menu-button svg {
72+
margin-right: 1rem;
73+
color: #999;
74+
}
75+
76+
#menu {
77+
background: #fff;
78+
margin: auto;
79+
margin-top: 0.8rem;
80+
padding: 0.8rem 1rem;
81+
border: 1px solid #ddd;
82+
border-radius: 0.25rem;
83+
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
84+
opacity: 0;
85+
visibility: hidden;
86+
transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
87+
will-change: transform;
88+
text-align: left;
89+
position: absolute;
90+
width: fit-content;
91+
left: 0;
92+
right: 0;
93+
margin-left: auto;
94+
margin-right: auto;
95+
z-index: 2;
96+
}
97+
98+
#menu.visible {
99+
transform: translateY(-0.3rem);
100+
transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
101+
visibility: visible;
102+
opacity: 1;
103+
}
104+
105+
#menu a {
106+
display: block;
107+
font-size: 1.2rem;
108+
padding: 0.25rem;
109+
}
110+
111+
#menu a {
112+
color: #3a8eb8;
113+
text-decoration: none;
114+
cursor: pointer;
115+
outline: none;
116+
border: 0.1rem solid transparent;
117+
border-radius: 0.2rem;
118+
}
119+
120+
#menu a:hover {
121+
text-decoration: underline;
122+
}
123+
124+
#menu a:focus {
125+
border-color: #3a8eb8;
126+
}
127+
128+
#menu a svg {
129+
color: #777;
130+
margin-right: 0.5rem;
131+
}
132+
133+
h3 {
134+
margin: 10rem 0 1rem;
135+
font-weight: 300;
136+
font-size: 2rem;
137+
}
138+
139+
ul {
140+
width: fit-content;
141+
max-width: 40rem;
142+
margin: auto;
143+
text-align: left;
144+
line-height: 1.3;
145+
}
146+
147+
ul li {
148+
padding: 0.25rem 0;
149+
}
150+
151+
.footer {
152+
margin-top: 10rem;
153+
color: #999;
154+
font-size: 0.8rem;
155+
}
156+
157+
.footer a {
158+
color: #3a8eb8;
159+
text-decoration: none;
160+
}
161+
162+
.footer a:hover {
163+
text-decoration: underline;
164+
}
165+
166+
.footer a svg {
167+
font-size: 80%;
168+
color: #777;
169+
margin-left: 0.1rem;
170+
}
171+
172+
.footer a:not(:last-child) {
173+
margin-right: 2rem;
174+
}

‎demo/src/app.tsx‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,66 @@ import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
55

66
// Functional component
77
const App: React.FC = () => {
8+
// Use the Hook
89
const [buttonProps, itemProps, isOpen] = useDropdownMenu(3);
910

11+
// Return JSX
1012
return (
1113
<div className='app'>
12-
<button type='button' {...buttonProps} id='menu-button' tabIndex={0}>
13-
Primary
14+
<h1>React Accessible Dropdown Menu Hook</h1>
15+
<h2>A simple Hook for creating fully accessible dropdown menus in React</h2>
16+
17+
<button {...buttonProps} type='button' id='menu-button'>
18+
<span>Try me!</span>
19+
<i className='fal fa-angle-down' />
1420
</button>
1521

16-
<div style={{ display: isOpen ? 'block' : 'none' }} role='menu' id='menu'>
17-
<a style={{ display: 'block' }} {...itemProps[0]} onClick={() => null} id='menu-item-1'>
18-
Item 1
22+
<div className={isOpen ? 'visible' : ''} role='menu' id='menu'>
23+
<a {...itemProps[0]} href='https://github.com/sparksuite/react-accessible-dropdown-menu-hook' id='menu-item-1'>
24+
<i className='fab fa-github fa-fw' />
25+
View on GitHub
1926
</a>
2027

21-
<a style={{ display: 'block' }} href='https://example.com' {...itemProps[1]} id='menu-item-2'>
22-
Item 2
28+
<a {...itemProps[1]} href='https://www.npmjs.com/package/react-accessible-dropdown-menu-hook' id='menu-item-2'>
29+
<i className='fab fa-npm fa-fw' />
30+
View on npm
2331
</a>
2432

25-
<a style={{ display: 'block' }} href='https://example.com' {...itemProps[2]} id='menu-item-3'>
26-
Item 3
33+
<a {...itemProps[2]} onClick={() => alert('Click!')} id='menu-item-3'>
34+
<i className='fas fa-mouse fa-fw' />
35+
Item with click handler
2736
</a>
2837
</div>
2938

30-
<button type='button' id='second-button' tabIndex={0}>
31-
Another Button
32-
</button>
39+
<h3>Behavior:</h3>
40+
41+
<ul>
42+
<li>The menu can be revealed by clicking the button, or by focusing the button and pressing enter / space</li>
43+
<li>When the menu is revealed, the first menu item is automatically focused</li>
44+
<li>
45+
<em>Once focus is in the menu…</em>
46+
47+
<ul>
48+
<li>The up / down arrow keys allow for navigation through the menu items</li>
49+
<li>Pressing tab will close the menu and move the focus to the next focusable element</li>
50+
<li>Pressing escape will close the menu and return the focus to the button</li>
51+
<li>Pressing enter will trigger that item (whether itʼs a link or has a click handler attached)</li>
52+
</ul>
53+
</li>
54+
</ul>
55+
56+
<div className='footer'>
57+
<a href='https://github.com/sparksuite/react-accessible-dropdown-menu-hook' id='first-footer-link'>
58+
View on GitHub <i className='fad fa-external-link' />
59+
</a>
60+
<a href='https://www.npmjs.com/package/react-accessible-dropdown-menu-hook'>
61+
View on npm <i className='fad fa-external-link' />
62+
</a>
63+
Built by&nbsp;
64+
<a href='https://www.sparksuite.com' target='_blank' rel='noopener noreferrer'>
65+
Sparksuite <i className='fad fa-external-link' />
66+
</a>
67+
</div>
3368
</div>
3469
);
3570
};

‎test/puppeteer/demo.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ it('focuses on the next item in the tab order after pressing tab', async () => {
3838
await keyboard.down('Enter');
3939
await keyboard.down('Tab');
4040

41-
expect(await currentFocusID()).toBe('second-button');
41+
expect(await currentFocusID()).toBe('first-footer-link');
4242
});
4343

4444
it('focuses on the previous item in the tab order after pressing shift-tab', async () => {

0 commit comments

Comments
 (0)