@contentful/f36-accordion 4.0.2 → 4.1.0
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/CHANGELOG.md +11 -0
- package/README.mdx +9 -38
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.1.0](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.0.2...@contentful/f36-accordion@4.1.0) (2022-01-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* implement props list redesign [BAU-535] ([#1756](https://github.com/contentful/forma-36/issues/1756)) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [4.0.2](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.0.1...@contentful/f36-accordion@4.0.2) (2022-01-12)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @contentful/f36-accordion
|
package/README.mdx
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: 'Accordion'
|
|
3
|
+
type: 'component'
|
|
3
4
|
slug: /components/accordion/
|
|
4
5
|
github: 'https://github.com/contentful/forma-36/tree/master/packages/components/accordion'
|
|
5
|
-
storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-accordion'
|
|
6
6
|
typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
import { Heading, Stack, TextLink } from '@contentful/f36-components';
|
|
10
|
-
import { ExternalLinkIcon } from '@contentful/f36-icons';
|
|
11
|
-
import { Props } from '@contentful/f36-docs-utils';
|
|
12
|
-
|
|
13
9
|
Accordions are a good way to deliver a large amount of information. An accordion is a list of headers that after being clicked reveal or hide more content related to them.
|
|
14
10
|
The header gives the user a summary of the content and the user decides if they need to see the extended content or not.
|
|
15
11
|
|
|
@@ -17,6 +13,8 @@ The header gives the user a summary of the content and the user decides if they
|
|
|
17
13
|
|
|
18
14
|
```jsx static=true
|
|
19
15
|
import { Accordion } from '@contentful/f36-components';
|
|
16
|
+
// or
|
|
17
|
+
import { Accordion } from '@contentful/f36-accordion';
|
|
20
18
|
```
|
|
21
19
|
|
|
22
20
|
## Examples
|
|
@@ -25,54 +23,27 @@ The accordion has two variations that define the alignment of the chevron icon:
|
|
|
25
23
|
|
|
26
24
|
### Basic usage
|
|
27
25
|
|
|
28
|
-
```jsx
|
|
29
|
-
|
|
30
|
-
<Accordion.Item title="What payment methods do you accept?">
|
|
31
|
-
<Text>
|
|
32
|
-
Customers on the Team tier can pay with a credit card (American Express,
|
|
33
|
-
MasterCard or Visa). Enterprise customers have the choice of paying with a
|
|
34
|
-
credit card or wire transfer.
|
|
35
|
-
</Text>
|
|
36
|
-
</Accordion.Item>
|
|
37
|
-
</Accordion>
|
|
26
|
+
```jsx file=./examples/AccordionExample.tsx
|
|
27
|
+
|
|
38
28
|
```
|
|
39
29
|
|
|
40
30
|
### Using it with other components
|
|
41
31
|
|
|
42
32
|
Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:
|
|
43
33
|
|
|
44
|
-
```jsx
|
|
45
|
-
|
|
46
|
-
<Accordion.Item
|
|
47
|
-
title={
|
|
48
|
-
<SectionHeading marginBottom="none">
|
|
49
|
-
What payment methods do you accept?
|
|
50
|
-
</SectionHeading>
|
|
51
|
-
}
|
|
52
|
-
>
|
|
53
|
-
<Stack flexDirection="column">
|
|
54
|
-
<Text marginBottom="spacingS">
|
|
55
|
-
Customers on the Team tier can pay with a credit card (American Express,
|
|
56
|
-
MasterCard or Visa). Enterprise customers have the choice of paying with
|
|
57
|
-
a credit card or wire transfer.
|
|
58
|
-
</Text>
|
|
59
|
-
<Button onClick={() => console.log('clicked!')}>
|
|
60
|
-
Accordion’s button
|
|
61
|
-
</Button>
|
|
62
|
-
</Stack>
|
|
63
|
-
</Accordion.Item>
|
|
64
|
-
</Accordion>
|
|
34
|
+
```jsx file=./examples/AccordionWithOtherComponentExample.tsx
|
|
35
|
+
|
|
65
36
|
```
|
|
66
37
|
|
|
67
38
|
## Props (API reference)
|
|
68
39
|
|
|
69
40
|
### Accordion
|
|
70
41
|
|
|
71
|
-
<
|
|
42
|
+
<PropsTable of="Accordion" />
|
|
72
43
|
|
|
73
44
|
### Accordion.Item
|
|
74
45
|
|
|
75
|
-
<
|
|
46
|
+
<PropsTable of="AccordionItem" />
|
|
76
47
|
|
|
77
48
|
## Content guidelines
|
|
78
49
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-accordion",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Forma 36: Accordion React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@babel/runtime": "^7.6.2",
|
|
24
|
-
"@contentful/f36-collapse": "^4.
|
|
24
|
+
"@contentful/f36-collapse": "^4.2.0",
|
|
25
25
|
"@contentful/f36-core": "^4.0.1",
|
|
26
26
|
"@contentful/f36-icons": "^4.0.1",
|
|
27
27
|
"@contentful/f36-tokens": "^4.0.0",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "49546b24c7b0467aded1bff94424672218dd2b68"
|
|
38
38
|
}
|