Skip to content

Commit f1db8c3

Browse files
liamjohnstonliamjohnston
authored
Merge pull request #282 from springload/feature/code-examples-in-demo-page
Add code examples to demo page
2 parents 9d7e7b3 + 5248c8a commit f1db8c3

File tree

10 files changed

+429
-1149
lines changed

10 files changed

+429
-1149
lines changed

‎CODE_OF_CONDUCT.md

+27-25
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,43 @@
55
In the interest of fostering an open and welcoming environment, we as
66
contributors and maintainers pledge to making participation in our project and
77
our community a harassment-free experience for everyone, regardless of age, body
8-
size, disability, ethnicity, sex characteristics, gender identity and expression,
9-
level of experience, education, socio-economic status, nationality, personal
10-
appearance, race, religion, or sexual identity and orientation.
8+
size, disability, ethnicity, sex characteristics, gender identity and
9+
expression, level of experience, education, socio-economic status, nationality,
10+
personal appearance, race, religion, or sexual identity and orientation.
1111

1212
## Our Standards
1313

1414
Examples of behavior that contributes to creating a positive environment
1515
include:
1616

17-
* Using welcoming and inclusive language
18-
* Being respectful of differing viewpoints and experiences
19-
* Gracefully accepting constructive criticism
20-
* Focusing on what is best for the community
21-
* Showing empathy towards other community members
17+
- Using welcoming and inclusive language
18+
- Being respectful of differing viewpoints and experiences
19+
- Gracefully accepting constructive criticism
20+
- Focusing on what is best for the community
21+
- Showing empathy towards other community members
2222

2323
Examples of unacceptable behavior by participants include:
2424

25-
* The use of sexualized language or imagery and unwelcome sexual attention or
26-
advances
27-
* Trolling, insulting/derogatory comments, and personal or political attacks
28-
* Public or private harassment
29-
* Publishing others' private information, such as a physical or electronic
30-
address, without explicit permission
31-
* Other conduct which could reasonably be considered inappropriate in a
32-
professional setting
25+
- The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
- Trolling, insulting/derogatory comments, and personal or political attacks
28+
- Public or private harassment
29+
- Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
- Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
3333

3434
## Our Responsibilities
3535

3636
Project maintainers are responsible for clarifying the standards of acceptable
3737
behavior and are expected to take appropriate and fair corrective action in
3838
response to any instances of unacceptable behavior.
3939

40-
Project maintainers have the right and responsibility to remove, edit, or
41-
reject comments, commits, code, wiki edits, issues, and other contributions
42-
that are not aligned to this Code of Conduct, or to ban temporarily or
43-
permanently any contributor for other behaviors that they deem inappropriate,
44-
threatening, offensive, or harmful.
40+
Project maintainers have the right and responsibility to remove, edit, or reject
41+
comments, commits, code, wiki edits, issues, and other contributions that are
42+
not aligned to this Code of Conduct, or to ban temporarily or permanently any
43+
contributor for other behaviors that they deem inappropriate, threatening,
44+
offensive, or harmful.
4545

4646
## Scope
4747

@@ -58,17 +58,19 @@ Instances of abusive, harassing, or otherwise unacceptable behavior may be
5858
reported by contacting the project team at [email protected]. All
5959
complaints will be reviewed and investigated and will result in a response that
6060
is deemed necessary and appropriate to the circumstances. The project team is
61-
obligated to maintain confidentiality with regard to the reporter of an incident.
62-
Further details of specific enforcement policies may be posted separately.
61+
obligated to maintain confidentiality with regard to the reporter of an
62+
incident. Further details of specific enforcement policies may be posted
63+
separately.
6364

6465
Project maintainers who do not follow or enforce the Code of Conduct in good
6566
faith may face temporary or permanent repercussions as determined by other
6667
members of the project's leadership.
6768

6869
## Attribution
6970

70-
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71-
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
71+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
72+
version 1.4, available at
73+
https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
7274

7375
[homepage]: https://www.contributor-covenant.org
7476

‎babel.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = api => {
1+
module.exports = (api) => {
22
api.cache(true);
33

44
const presets = [

‎demo/src/code-examples.tsx

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

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

+33-8
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>
@@ -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>
@@ -162,6 +183,8 @@ const App = (): JSX.Element => (
162183
))}
163184
</Accordion>
164185

186+
<Code code={ExampleOnChange} />
187+
165188
<h2 className="u-margin-top">Accessing Item State</h2>
166189

167190
<p>
@@ -194,17 +217,18 @@ 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
226+
can manually override whether an <strong>AccordionItem</strong> is
227+
expanded.
202228
</p>
203229

204230
<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.
231+
<strong>Warning: This can impact accessibility negatively.</strong>
208232
</p>
209233

210234
<Accordion>
@@ -215,7 +239,6 @@ const App = (): JSX.Element => (
215239
<AccordionItem
216240
key={placeholder.heading}
217241
uuid={placeholder.uuid}
218-
// Warning: This can impact accessibility negatively
219242
dangerouslySetExpanded={isExpanded}
220243
>
221244
<AccordionItemHeading>
@@ -230,6 +253,8 @@ const App = (): JSX.Element => (
230253
);
231254
})}
232255
</Accordion>
256+
257+
<Code code={ExampleDangerouslySetExpanded} />
233258
</>
234259
);
235260

0 commit comments

Comments
 (0)