Skip to content

Commit b96f0db

Browse files
liamjohnstonliamjohnston
committed
Add code examples to demo page
1 parent 9d7e7b3 commit b96f0db

File tree

7 files changed

+383
-1105
lines changed

7 files changed

+383
-1105
lines changed

‎demo/src/code-examples.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
export const ExampleDefault = `import {
2+
Accordion,
3+
AccordionItem,
4+
AccordionItemButton,
5+
AccordionItemHeading,
6+
AccordionItemPanel,
7+
} from 'react-accessible-accordion';
8+
9+
<Accordion>
10+
{items.map((item) => (
11+
<AccordionItem key={item.uuid}>
12+
<AccordionItemHeading>
13+
<AccordionItemButton>
14+
{item.heading}
15+
</AccordionItemButton>
16+
</AccordionItemHeading>
17+
<AccordionItemPanel>
18+
{item.content}
19+
</AccordionItemPanel>
20+
</AccordionItem>
21+
))}
22+
</Accordion>`;
23+
24+
export const ExampleAllowMultipleExpanded = `<Accordion allowMultipleExpanded>
25+
{items.map((item) => (
26+
<AccordionItem key={item.uuid}>
27+
<AccordionItemHeading>
28+
<AccordionItemButton>
29+
{item.heading}
30+
</AccordionItemButton>
31+
</AccordionItemHeading>
32+
<AccordionItemPanel>
33+
{item.content}
34+
</AccordionItemPanel>
35+
</AccordionItem>
36+
))}
37+
</Accordion>`;
38+
39+
export const ExampleAllowZeroExpanded = `<Accordion allowZeroExpanded>
40+
{items.map((item) => (
41+
<AccordionItem key={item.uuid}>
42+
<AccordionItemHeading>
43+
<AccordionItemButton>
44+
{item.heading}
45+
</AccordionItemButton>
46+
</AccordionItemHeading>
47+
<AccordionItemPanel>
48+
{item.content}
49+
</AccordionItemPanel>
50+
</AccordionItem>
51+
))}
52+
</Accordion>`;
53+
54+
export const ExamplePreExpanded = `<Accordion preExpanded={['a', 'c']}>
55+
<AccordionItem uuid="a" /> // Will be expanded by default
56+
<AccordionItem uuid="b" />
57+
<AccordionItem uuid="c" /> // Will be expanded by default
58+
<AccordionItem uuid="d" />
59+
</Accordion>`;
60+
61+
export const ExampleOnChange = `<Accordion onChange={() => console.log('Hello world')}>
62+
{items.map((item) => (
63+
<AccordionItem key={item.uuid}>
64+
<AccordionItemHeading>
65+
<AccordionItemButton>
66+
{item.heading}
67+
</AccordionItemButton>
68+
</AccordionItemHeading>
69+
<AccordionItemPanel>
70+
{item.content}
71+
</AccordionItemPanel>
72+
</AccordionItem>
73+
))}
74+
</Accordion>`;
75+
76+
export const ExampleAccordionItemState = `<Accordion>
77+
<AccordionItem>
78+
<AccordionItemHeading>
79+
<AccordionItemButton>
80+
This item is
81+
<AccordionItemState>
82+
{({ expanded }) => (expanded ? 'expanded' : 'collapsed')}
83+
</AccordionItemState>
84+
</AccordionItemButton>
85+
</AccordionItemHeading>
86+
<AccordionItemPanel>
87+
<p>I am the content</p>
88+
</AccordionItemPanel>
89+
</AccordionItem>
90+
</Accordion>`;
91+
92+
export const ExampleDangerouslySetExpanded = `<Accordion>
93+
{items.map((item, i) => {
94+
const isExpanded = i < 2;
95+
96+
return (
97+
<AccordionItem
98+
key={item.heading}
99+
uuid={item.uuid}
100+
dangerouslySetExpanded={isExpanded}
101+
>
102+
<AccordionItemHeading>
103+
<AccordionItemButton>
104+
{item.heading}
105+
</AccordionItemButton>
106+
</AccordionItemHeading>
107+
<AccordionItemPanel>
108+
{item.panel}
109+
</AccordionItemPanel>
110+
</AccordionItem>
111+
);
112+
})}
113+
</Accordion>`;

‎demo/src/components/Code.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// tslint:disable-next-line no-implicit-dependencies no-import-side-effect
2+
import * as React from 'react';
3+
// tslint:disable-next-line no-implicit-dependencies no-import-side-effect
4+
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
5+
// tslint:disable-next-line no-implicit-dependencies no-import-side-effect no-submodule-imports
6+
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
7+
// tslint:disable-next-line no-implicit-dependencies no-import-side-effect no-submodule-imports
8+
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
9+
10+
SyntaxHighlighter.registerLanguage('jsx', jsx);
11+
12+
import {
13+
Accordion,
14+
AccordionItem,
15+
AccordionItemButton,
16+
AccordionItemHeading,
17+
AccordionItemPanel,
18+
AccordionItemState,
19+
} from '../../../src';
20+
21+
type Props = {
22+
code: string;
23+
};
24+
25+
type AccordionItemState = {
26+
expanded: boolean;
27+
};
28+
29+
const Code = ({ code }: Props) => {
30+
return (
31+
<Accordion allowZeroExpanded={true} className="code">
32+
<AccordionItem>
33+
<AccordionItemHeading>
34+
<AccordionItemButton className="code__button">
35+
<AccordionItemState>
36+
{({ expanded }: AccordionItemState) =>
37+
expanded ? 'Hide' : 'Show'
38+
}
39+
</AccordionItemState>{' '}
40+
code
41+
</AccordionItemButton>
42+
</AccordionItemHeading>
43+
<AccordionItemPanel className="code__panel">
44+
{/* tslint:disable-next-line no-unsafe-any */}
45+
<SyntaxHighlighter language="jsx" style={prism}>
46+
{code}
47+
</SyntaxHighlighter>
48+
</AccordionItemPanel>
49+
</AccordionItem>
50+
</Accordion>
51+
);
52+
};
53+
54+
export default Code;

‎demo/src/index.tsx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,19 @@ import {
1313
AccordionItemState,
1414
} from '../../src';
1515

16+
import Code from './components/Code';
17+
18+
// tslint:disable-next-line no-import-side-effect ordered-imports
19+
import {
20+
ExampleDefault,
21+
ExampleAllowMultipleExpanded,
22+
ExampleAllowZeroExpanded,
23+
ExamplePreExpanded,
24+
ExampleOnChange,
25+
ExampleAccordionItemState,
26+
ExampleDangerouslySetExpanded,
27+
} from './code-examples';
28+
1629
// tslint:disable-next-line no-import-side-effect
1730
import './main.css';
1831

@@ -28,8 +41,8 @@ const App = (): JSX.Element => (
2841
React Component for creating an 'Accordion' that adheres to the{' '}
2942
<a
3043
href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion"
31-
target="_BLANK"
32-
rel="noreferrer, nofollow"
44+
target="_blank"
45+
rel="noreferrer nofollow"
3346
>
3447
WAI ARIA spec
3548
</a>{' '}
@@ -56,6 +69,8 @@ const App = (): JSX.Element => (
5669
))}
5770
</Accordion>
5871

72+
<Code code={ExampleDefault} />
73+
5974
<h2 className="u-margin-top">Expanding multiple items at once</h2>
6075

6176
<p>
@@ -77,6 +92,8 @@ const App = (): JSX.Element => (
7792
))}
7893
</Accordion>
7994

95+
<Code code={ExampleAllowMultipleExpanded} />
96+
8097
<h2 className="u-margin-top">Collapsing the last expanded item</h2>
8198

8299
<p>
@@ -98,6 +115,8 @@ const App = (): JSX.Element => (
98115
))}
99116
</Accordion>
100117

118+
<Code code={ExampleAllowZeroExpanded} />
119+
101120
<h2 className="u-margin-top">Pre-expanded items</h2>
102121

103122
<p>
@@ -114,8 +133,8 @@ const App = (): JSX.Element => (
114133
<Accordion preExpanded={[placeholders[0].uuid]}>
115134
{placeholders.map((placeholder: Placeholder) => (
116135
<AccordionItem
117-
key={placeholder.heading}
118-
uuid={placeholder.uuid}
136+
key={placeholder.heading}
137+
uuid={placeholder.uuid}
119138
>
120139
<AccordionItemHeading>
121140
<AccordionItemButton>
@@ -127,6 +146,8 @@ const App = (): JSX.Element => (
127146
))}
128147
</Accordion>
129148

149+
<Code code={ExamplePreExpanded} />
150+
130151
<h2 className="u-margin-top">Informative onChange</h2>
131152

132153
<p>
@@ -149,8 +170,8 @@ const App = (): JSX.Element => (
149170
>
150171
{placeholders.map((placeholder: Placeholder) => (
151172
<AccordionItem
152-
key={placeholder.heading}
153-
uuid={placeholder.uuid}
173+
key={placeholder.heading}
174+
uuid={placeholder.uuid}
154175
>
155176
<AccordionItemHeading>
156177
<AccordionItemButton>
@@ -161,6 +182,8 @@ const App = (): JSX.Element => (
161182
</AccordionItem>
162183
))}
163184
</Accordion>
185+
186+
<Code code={ExampleOnChange} />
164187

165188
<h2 className="u-margin-top">Accessing Item State</h2>
166189

@@ -194,17 +217,17 @@ const App = (): JSX.Element => (
194217
))}
195218
</Accordion>
196219

220+
<Code code={ExampleAccordionItemState} />
221+
197222
<h2 className="u-margin-top">Manual state</h2>
198223

199224
<p>
200-
When you use the <strong>onChange</strong> prop, you can get
201-
feedback about which items are expanded.
225+
When you use the <strong>dangerouslySetExpanded</strong> prop, you can
226+
manually override whether an <strong>AccordionItem</strong> is expanded.
202227
</p>
203228

204229
<p>
205-
In this example, we are simply logging the uuids of the expanded
206-
items to the console. Have a click around then check your console to
207-
see this in action.
230+
<strong>Warning: This can impact accessibility negatively.</strong>
208231
</p>
209232

210233
<Accordion>
@@ -230,6 +253,8 @@ const App = (): JSX.Element => (
230253
);
231254
})}
232255
</Accordion>
256+
257+
<Code code={ExampleDangerouslySetExpanded} />
233258
</>
234259
);
235260

‎demo/src/main.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,21 @@ footer {
130130
}
131131
}
132132

133+
.code {
134+
margin-top: 10px;
135+
}
136+
.code__button {
137+
font-weight: bold;
138+
cursor: pointer;
139+
display: inline-block;
140+
padding: 10px 0;
141+
color: var(--colorPageLinks);
142+
text-decoration: underline solid var(--colorGreenShadow);
143+
}
144+
.code__button:hover {
145+
color: var(--colorGreen);
146+
}
147+
133148
@media print {
134149
body {
135150
padding: 0.4in;

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"@types/jest": "^24.0.15",
9494
"@types/react": "^16.8.22",
9595
"@types/react-dom": "^16.8.4",
96+
"@types/react-syntax-highlighter": "^11.0.4",
9697
"@types/react-test-renderer": "^16.8.2",
9798
"@types/uuid": "^3.4.4",
9899
"babel-core": "^7.0.0-bridge.0",
@@ -111,6 +112,7 @@
111112
"puppeteer": "2.0.0",
112113
"react": "16.3.2",
113114
"react-dom": "16.3.3",
115+
"react-syntax-highlighter": "^12.2.1",
114116
"react-test-renderer": "^16.8.6",
115117
"rimraf": "^2.6.3",
116118
"rollup": "^1.7.4",

‎tslint.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"member-access": false,
1414
"interface-over-type-literal": false,
1515
"no-relative-imports": false,
16+
"ordered-imports": false,
1617
"typedef": [
1718
true,
1819
"call-signature",

0 commit comments

Comments
 (0)