-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #282 from springload/feature/code-examples-in-demo…
…-page Add code examples to demo page
- Loading branch information
Showing
10 changed files
with
429 additions
and
1,149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,43 +5,43 @@ | |
| In the interest of fostering an open and welcoming environment, we as | ||
| contributors and maintainers pledge to making participation in our project and | ||
| our community a harassment-free experience for everyone, regardless of age, body | ||
| size, disability, ethnicity, sex characteristics, gender identity and expression, | ||
| level of experience, education, socio-economic status, nationality, personal | ||
| appearance, race, religion, or sexual identity and orientation. | ||
| size, disability, ethnicity, sex characteristics, gender identity and | ||
| expression, level of experience, education, socio-economic status, nationality, | ||
| personal appearance, race, religion, or sexual identity and orientation. | ||
|
|
||
| ## Our Standards | ||
|
|
||
| Examples of behavior that contributes to creating a positive environment | ||
| include: | ||
|
|
||
| * Using welcoming and inclusive language | ||
| * Being respectful of differing viewpoints and experiences | ||
| * Gracefully accepting constructive criticism | ||
| * Focusing on what is best for the community | ||
| * Showing empathy towards other community members | ||
| - Using welcoming and inclusive language | ||
| - Being respectful of differing viewpoints and experiences | ||
| - Gracefully accepting constructive criticism | ||
| - Focusing on what is best for the community | ||
| - Showing empathy towards other community members | ||
|
|
||
| Examples of unacceptable behavior by participants include: | ||
|
|
||
| * The use of sexualized language or imagery and unwelcome sexual attention or | ||
| advances | ||
| * Trolling, insulting/derogatory comments, and personal or political attacks | ||
| * Public or private harassment | ||
| * Publishing others' private information, such as a physical or electronic | ||
| address, without explicit permission | ||
| * Other conduct which could reasonably be considered inappropriate in a | ||
| professional setting | ||
| - The use of sexualized language or imagery and unwelcome sexual attention or | ||
| advances | ||
| - Trolling, insulting/derogatory comments, and personal or political attacks | ||
| - Public or private harassment | ||
| - Publishing others' private information, such as a physical or electronic | ||
| address, without explicit permission | ||
| - Other conduct which could reasonably be considered inappropriate in a | ||
| professional setting | ||
|
|
||
| ## Our Responsibilities | ||
|
|
||
| Project maintainers are responsible for clarifying the standards of acceptable | ||
| behavior and are expected to take appropriate and fair corrective action in | ||
| response to any instances of unacceptable behavior. | ||
|
|
||
| Project maintainers have the right and responsibility to remove, edit, or | ||
| reject comments, commits, code, wiki edits, issues, and other contributions | ||
| that are not aligned to this Code of Conduct, or to ban temporarily or | ||
| permanently any contributor for other behaviors that they deem inappropriate, | ||
| threatening, offensive, or harmful. | ||
| Project maintainers have the right and responsibility to remove, edit, or reject | ||
| comments, commits, code, wiki edits, issues, and other contributions that are | ||
| not aligned to this Code of Conduct, or to ban temporarily or permanently any | ||
| contributor for other behaviors that they deem inappropriate, threatening, | ||
| offensive, or harmful. | ||
|
|
||
| ## Scope | ||
|
|
||
|
|
@@ -58,17 +58,19 @@ Instances of abusive, harassing, or otherwise unacceptable behavior may be | |
| reported by contacting the project team at [email protected]. All | ||
| complaints will be reviewed and investigated and will result in a response that | ||
| is deemed necessary and appropriate to the circumstances. The project team is | ||
| obligated to maintain confidentiality with regard to the reporter of an incident. | ||
| Further details of specific enforcement policies may be posted separately. | ||
| obligated to maintain confidentiality with regard to the reporter of an | ||
| incident. Further details of specific enforcement policies may be posted | ||
| separately. | ||
|
|
||
| Project maintainers who do not follow or enforce the Code of Conduct in good | ||
| faith may face temporary or permanent repercussions as determined by other | ||
| members of the project's leadership. | ||
|
|
||
| ## Attribution | ||
|
|
||
| This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, | ||
| available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html | ||
| This Code of Conduct is adapted from the [Contributor Covenant][homepage], | ||
| version 1.4, available at | ||
| https://www.contributor-covenant.org/version/1/4/code-of-conduct.html | ||
|
|
||
| [homepage]: https://www.contributor-covenant.org | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| module.exports = api => { | ||
| module.exports = (api) => { | ||
| api.cache(true); | ||
|
|
||
| const presets = [ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| export const ExampleDefault = `import { | ||
| Accordion, | ||
| AccordionItem, | ||
| AccordionItemButton, | ||
| AccordionItemHeading, | ||
| AccordionItemPanel, | ||
| } from 'react-accessible-accordion'; | ||
| <Accordion> | ||
| {items.map((item) => ( | ||
| <AccordionItem key={item.uuid}> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| {item.heading} | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| {item.content} | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| ))} | ||
| </Accordion>`; | ||
|
|
||
| export const ExampleAllowMultipleExpanded = `<Accordion allowMultipleExpanded> | ||
| {items.map((item) => ( | ||
| <AccordionItem key={item.uuid}> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| {item.heading} | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| {item.content} | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| ))} | ||
| </Accordion>`; | ||
|
|
||
| export const ExampleAllowZeroExpanded = `<Accordion allowZeroExpanded> | ||
| {items.map((item) => ( | ||
| <AccordionItem key={item.uuid}> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| {item.heading} | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| {item.content} | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| ))} | ||
| </Accordion>`; | ||
|
|
||
| export const ExamplePreExpanded = `<Accordion preExpanded={['a', 'c']}> | ||
| <AccordionItem uuid="a" /> // Will be expanded by default | ||
| <AccordionItem uuid="b" /> | ||
| <AccordionItem uuid="c" /> // Will be expanded by default | ||
| <AccordionItem uuid="d" /> | ||
| </Accordion>`; | ||
|
|
||
| export const ExampleOnChange = `<Accordion onChange={() => console.log('Hello world')}> | ||
| {items.map((item) => ( | ||
| <AccordionItem key={item.uuid}> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| {item.heading} | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| {item.content} | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| ))} | ||
| </Accordion>`; | ||
|
|
||
| export const ExampleAccordionItemState = `<Accordion> | ||
| <AccordionItem> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| This item is | ||
| <AccordionItemState> | ||
| {({ expanded }) => (expanded ? 'expanded' : 'collapsed')} | ||
| </AccordionItemState> | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| <p>I am the content</p> | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| </Accordion>`; | ||
|
|
||
| export const ExampleDangerouslySetExpanded = `<Accordion> | ||
| {items.map((item, i) => { | ||
| const isExpanded = i < 2; | ||
| return ( | ||
| <AccordionItem | ||
| key={item.heading} | ||
| uuid={item.uuid} | ||
| dangerouslySetExpanded={isExpanded} | ||
| > | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton> | ||
| {item.heading} | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel> | ||
| {item.panel} | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| ); | ||
| })} | ||
| </Accordion>`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| // tslint:disable-next-line no-implicit-dependencies no-import-side-effect | ||
| import * as React from 'react'; | ||
| // tslint:disable-next-line no-implicit-dependencies no-import-side-effect | ||
| import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; | ||
| // tslint:disable-next-line no-implicit-dependencies no-import-side-effect no-submodule-imports | ||
| import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'; | ||
| // tslint:disable-next-line no-implicit-dependencies no-import-side-effect no-submodule-imports | ||
| import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'; | ||
|
|
||
| SyntaxHighlighter.registerLanguage('jsx', jsx); | ||
|
|
||
| import { | ||
| Accordion, | ||
| AccordionItem, | ||
| AccordionItemButton, | ||
| AccordionItemHeading, | ||
| AccordionItemPanel, | ||
| AccordionItemState, | ||
| } from '../../../src'; | ||
|
|
||
| type Props = { | ||
| code: string; | ||
| }; | ||
|
|
||
| type AccordionItemState = { | ||
| expanded: boolean; | ||
| }; | ||
|
|
||
| const Code = ({ code }: Props) => { | ||
| return ( | ||
| <Accordion allowZeroExpanded={true} className="code"> | ||
| <AccordionItem> | ||
| <AccordionItemHeading> | ||
| <AccordionItemButton className="code__button"> | ||
| <AccordionItemState> | ||
| {({ expanded }: AccordionItemState) => | ||
| expanded ? 'Hide' : 'Show' | ||
| } | ||
| </AccordionItemState>{' '} | ||
| code | ||
| </AccordionItemButton> | ||
| </AccordionItemHeading> | ||
| <AccordionItemPanel className="code__panel"> | ||
| {/* tslint:disable-next-line no-unsafe-any */} | ||
| <SyntaxHighlighter language="jsx" style={prism}> | ||
| {code} | ||
| </SyntaxHighlighter> | ||
| </AccordionItemPanel> | ||
| </AccordionItem> | ||
| </Accordion> | ||
| ); | ||
| }; | ||
|
|
||
| export default Code; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.