Skip to content

Commit d7750f6

Browse files
mrholekmrholek
committed
docs(CAccordion): update documentation
1 parent 29e5aff commit d7750f6

File tree

5 files changed

+145
-122
lines changed

5 files changed

+145
-122
lines changed

‎packages/docs/content/components/accordion/customizing.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const customVars = {
3434
'--cui-accordion-bg': '#f8f9fa',
3535
}
3636

37-
;<CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
37+
return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
3838
```
3939

4040
### SASS variables

‎packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionAlwaysOpenExample = () => {
5+
return (
6+
<CAccordion alwaysOpen activeItemKey={2}>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

‎packages/docs/content/components/accordion/examples/AccordionExample.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionExample = () => {
5+
return (
6+
<CAccordion activeItemKey={2}>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1 TSX</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

‎packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionFlushExample = () => {
5+
return (
6+
<CAccordion flush>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

‎packages/docs/content/components/accordion/index.mdx

Lines changed: 18 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -8,138 +8,35 @@ other_frameworks: accordion
88
pro_component: false
99
---
1010

11-
import { useState } from 'react'
12-
13-
import {
14-
CAccordion,
15-
CAccordionBody,
16-
CAccordionCollapse,
17-
CAccordionHeader,
18-
CAccordionItem,
19-
} from '@coreui/react/src/index'
20-
2111
## How to use React Accordion component.
2212

2313
Click the accordions below to expand/collapse the accordion content.
2414

25-
```jsx preview
26-
<CAccordion activeItemKey={2}>
27-
<CAccordionItem itemKey={1}>
28-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
29-
<CAccordionBody>
30-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
31-
collapse plugin adds the appropriate classes that we use to style each element. These classes
32-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
33-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
34-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
35-
does limit overflow.
36-
</CAccordionBody>
37-
</CAccordionItem>
38-
<CAccordionItem itemKey={2}>
39-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
40-
<CAccordionBody>
41-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
42-
collapse plugin adds the appropriate classes that we use to style each element. These classes
43-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
44-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
45-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
46-
does limit overflow.
47-
</CAccordionBody>
48-
</CAccordionItem>
49-
<CAccordionItem itemKey={3}>
50-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
51-
<CAccordionBody>
52-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
53-
collapse plugin adds the appropriate classes that we use to style each element. These classes
54-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
55-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
56-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
57-
does limit overflow.
58-
</CAccordionBody>
59-
</CAccordionItem>
60-
</CAccordion>
61-
```
15+
import { AccordionExample } from './examples/AccordionExample.tsx'
16+
import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx'
17+
18+
<ExampleSnippet code={AccordionExampleTS} componentName="React Accordion">
19+
<AccordionExample />
20+
</ExampleSnippet>
6221

6322
### Flush
6423

6524
Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
6625

67-
```jsx preview
68-
<CAccordion flush>
69-
<CAccordionItem itemKey={1}>
70-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
71-
<CAccordionBody>
72-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
73-
collapse plugin adds the appropriate classes that we use to style each element. These classes
74-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
75-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
76-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
77-
does limit overflow.
78-
</CAccordionBody>
79-
</CAccordionItem>
80-
<CAccordionItem itemKey={2}>
81-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
82-
<CAccordionBody>
83-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
84-
collapse plugin adds the appropriate classes that we use to style each element. These classes
85-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
86-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
87-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
88-
does limit overflow.
89-
</CAccordionBody>
90-
</CAccordionItem>
91-
<CAccordionItem itemKey={3}>
92-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
93-
<CAccordionBody>
94-
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
95-
collapse plugin adds the appropriate classes that we use to style each element. These classes
96-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
97-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
98-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
99-
does limit overflow.
100-
</CAccordionBody>
101-
</CAccordionItem>
102-
</CAccordion>
103-
```
26+
import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx'
27+
import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx'
28+
29+
<ExampleSnippet code={AccordionFlushExampleTS} componentName="React Accordion">
30+
<AccordionFlushExample />
31+
</ExampleSnippet>
10432

10533
### Always open
10634

10735
Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
10836

109-
```jsx preview
110-
<CAccordion alwaysOpen activeItemKey={2}>
111-
<CAccordionItem itemKey={1}>
112-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
113-
<CAccordionBody>
114-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
115-
collapse plugin adds the appropriate classes that we use to style each element. These classes
116-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
117-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
118-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
119-
does limit overflow.
120-
</CAccordionBody>
121-
</CAccordionItem>
122-
<CAccordionItem itemKey={2}>
123-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
124-
<CAccordionBody>
125-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
126-
collapse plugin adds the appropriate classes that we use to style each element. These classes
127-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
128-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
129-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
130-
does limit overflow.
131-
</CAccordionBody>
132-
</CAccordionItem>
133-
<CAccordionItem itemKey={3}>
134-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
135-
<CAccordionBody>
136-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
137-
collapse plugin adds the appropriate classes that we use to style each element. These classes
138-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
139-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
140-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
141-
does limit overflow.
142-
</CAccordionBody>
143-
</CAccordionItem>
144-
</CAccordion>
145-
```
37+
import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx'
38+
import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx'
39+
40+
<ExampleSnippet code={AccordionAlwaysOpenExampleTS} componentName="React Accordion">
41+
<AccordionAlwaysOpenExample />
42+
</ExampleSnippet>

0 commit comments

Comments
 (0)