Skip to content

Commit 048ec10

Browse files
mrholekmrholek
committed
docs: update examples
1 parent 501bbc4 commit 048ec10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+596
-5885
lines changed

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

Lines changed: 3 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -22,45 +22,7 @@ import {
2222

2323
Click the accordions below to expand/collapse the accordion content.
2424

25-
<Example>
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
32-
classes control the overall appearance, as well as the showing and hiding via CSS
33-
transitions. You can modify any of this with custom CSS or overriding our default variables.
34-
It's also worth noting that just about any HTML can go within the{' '}
35-
<code>.accordion-body</code>, though the transition 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
42-
the collapse plugin adds the appropriate classes that we use to style each element. These
43-
classes control the overall appearance, as well as the showing and hiding via CSS
44-
transitions. You can modify any of this with custom CSS or overriding our default variables.
45-
It's also worth noting that just about any HTML can go within the{' '}
46-
<code>.accordion-body</code>, though the transition 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
53-
the collapse plugin adds the appropriate classes that we use to style each element. These
54-
classes control the overall appearance, as well as the showing and hiding via CSS
55-
transitions. You can modify any of this with custom CSS or overriding our default variables.
56-
It's also worth noting that just about any HTML can go within the{' '}
57-
<code>.accordion-body</code>, though the transition does limit overflow.
58-
</CAccordionBody>
59-
</CAccordionItem>
60-
</CAccordion>
61-
</Example>
62-
63-
```jsx
25+
```jsx preview
6426
<CAccordion activeItemKey={2}>
6527
<CAccordionItem itemKey={1}>
6628
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
@@ -102,45 +64,7 @@ Click the accordions below to expand/collapse the accordion content.
10264

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

105-
<Example>
106-
<CAccordion flush>
107-
<CAccordionItem itemKey={1}>
108-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
109-
<CAccordionBody>
110-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
111-
collapse plugin adds the appropriate classes that we use to style each element. These
112-
classes control the overall appearance, as well as the showing and hiding via CSS
113-
transitions. You can modify any of this with custom CSS or overriding our default variables.
114-
It's also worth noting that just about any HTML can go within the{' '}
115-
<code>.accordion-body</code>, though the transition does limit overflow.
116-
</CAccordionBody>
117-
</CAccordionItem>
118-
<CAccordionItem itemKey={2}>
119-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
120-
<CAccordionBody>
121-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until
122-
the collapse plugin adds the appropriate classes that we use to style each element. These
123-
classes control the overall appearance, as well as the showing and hiding via CSS
124-
transitions. You can modify any of this with custom CSS or overriding our default variables.
125-
It's also worth noting that just about any HTML can go within the{' '}
126-
<code>.accordion-body</code>, though the transition does limit overflow.
127-
</CAccordionBody>
128-
</CAccordionItem>
129-
<CAccordionItem itemKey={3}>
130-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
131-
<CAccordionBody>
132-
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
133-
collapse plugin adds the appropriate classes that we use to style each element. These
134-
classes control the overall appearance, as well as the showing and hiding via CSS
135-
transitions. You can modify any of this with custom CSS or overriding our default variables.
136-
It's also worth noting that just about any HTML can go within the{' '}
137-
<code>.accordion-body</code>, though the transition does limit overflow.
138-
</CAccordionBody>
139-
</CAccordionItem>
140-
</CAccordion>
141-
</Example>
142-
143-
```jsx
67+
```jsx preview
14468
<CAccordion flush>
14569
<CAccordionItem itemKey={1}>
14670
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
@@ -182,45 +106,7 @@ Add `flush` to remove the default `background-color`, some borders, and some rou
182106

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

185-
<Example>
186-
<CAccordion alwaysOpen activeItemKey={2}>
187-
<CAccordionItem itemKey={1}>
188-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
189-
<CAccordionBody>
190-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
191-
collapse plugin adds the appropriate classes that we use to style each element. These
192-
classes control the overall appearance, as well as the showing and hiding via CSS
193-
transitions. You can modify any of this with custom CSS or overriding our default variables.
194-
It's also worth noting that just about any HTML can go within the{' '}
195-
<code>.accordion-body</code>, though the transition does limit overflow.
196-
</CAccordionBody>
197-
</CAccordionItem>
198-
<CAccordionItem itemKey={2}>
199-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
200-
<CAccordionBody>
201-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until
202-
the collapse plugin adds the appropriate classes that we use to style each element. These
203-
classes control the overall appearance, as well as the showing and hiding via CSS
204-
transitions. You can modify any of this with custom CSS or overriding our default variables.
205-
It's also worth noting that just about any HTML can go within the{' '}
206-
<code>.accordion-body</code>, though the transition does limit overflow.
207-
</CAccordionBody>
208-
</CAccordionItem>
209-
<CAccordionItem itemKey={3}>
210-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
211-
<CAccordionBody>
212-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until
213-
the collapse plugin adds the appropriate classes that we use to style each element. These
214-
classes control the overall appearance, as well as the showing and hiding via CSS
215-
transitions. You can modify any of this with custom CSS or overriding our default variables.
216-
It's also worth noting that just about any HTML can go within the{' '}
217-
<code>.accordion-body</code>, though the transition does limit overflow.
218-
</CAccordionBody>
219-
</CAccordionItem>
220-
</CAccordion>
221-
</Example>
222-
223-
```jsx
109+
```jsx preview
224110
<CAccordion alwaysOpen activeItemKey={2}>
225111
<CAccordionItem itemKey={1}>
226112
<CAccordionHeader>Accordion Item #1</CAccordionHeader>

0 commit comments

Comments
 (0)