@ausbom/accordion 0.6.9 → 0.6.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,6 +1,43 @@
|
|
|
1
1
|
# @ausbom/accordion
|
|
2
2
|
|
|
3
|
-
> Accordions
|
|
3
|
+
> Accordions are a list of sections that allow users to show or hide related content.
|
|
4
|
+
|
|
5
|
+
<AccordionDemo />
|
|
6
|
+
|
|
7
|
+
<a href="/components/accordion__test" target="_blank"><strong>Try Accordion</strong></a>
|
|
8
|
+
|
|
9
|
+
## Why
|
|
10
|
+
Accordions give quick access to options of content that are relevant to them.
|
|
11
|
+
|
|
12
|
+
## When
|
|
13
|
+
Use accordions when you want to:
|
|
14
|
+
- Give users options from a list of related items.
|
|
15
|
+
- To shorten the page by condensing content into collapsable sections.
|
|
16
|
+
- Choose between information in one place rather than on seperate pages.
|
|
17
|
+
|
|
18
|
+
## How
|
|
19
|
+
|
|
20
|
+
### Behaviour
|
|
21
|
+
Accordions should start with all sections closed. To open a section, select anywhere in the item button.
|
|
22
|
+
|
|
23
|
+
Users should be in control of the accordion state. If an accordion item is open when another accordion item is selected, then the original accordion item stays open.
|
|
24
|
+
|
|
25
|
+
### Do
|
|
26
|
+
- Always use an accordion for a list of related items.
|
|
27
|
+
- Indicate an open accordion by changing the direction of the chevron (to point up) and the borders of the open accordion are blue.
|
|
28
|
+
- Use the same text style for all accordion headings on a page or in a list.
|
|
29
|
+
- Consider if there are there more appropriate alternatives, such as using [In page anchor](/components/in-page-anchor) or showing the content on different pages or [tabs](/components/tabs).
|
|
30
|
+
|
|
31
|
+
### Do not
|
|
32
|
+
- Use an accordion for a single item.
|
|
33
|
+
- Use accordions for short sections of content. Use simple headings to seperate this content instead.
|
|
34
|
+
- Avoid using accordions to contain complex content such as graphs, tables or anything that might require horizontal scrolling.
|
|
35
|
+
|
|
36
|
+
### Accessibility
|
|
37
|
+
Accordions need to be keyboard accessible as list items with a visible focus state.
|
|
38
|
+
|
|
39
|
+
Screen readers should read aloud all the text in the button as a single statement. There's also some visually hidden content in the heading text to help announce the call-to-action as "collapsed, button" or "expanded, button".
|
|
40
|
+
|
|
4
41
|
|
|
5
42
|
### Installation
|
|
6
43
|
|
|
@@ -8,7 +45,7 @@
|
|
|
8
45
|
npm install @ausbom/accordion
|
|
9
46
|
```
|
|
10
47
|
|
|
11
|
-
###
|
|
48
|
+
### API Docs
|
|
12
49
|
|
|
13
50
|
```jsx
|
|
14
51
|
import Accordion, { AccordionItem } from '@ausbom/accordion'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/accordion",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
"react": ">= 16.3.x"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@ausbom/body": "^0.3.
|
|
41
|
-
"@ausbom/icon": "^0.16.
|
|
42
|
-
"@ausbom/styles": "^0.
|
|
40
|
+
"@ausbom/body": "^0.3.3",
|
|
41
|
+
"@ausbom/icon": "^0.16.3",
|
|
42
|
+
"@ausbom/styles": "^0.10.0"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "d87405ddb170ded80d71979b6f9e5d628ba07dc5"
|
|
45
45
|
}
|