Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 048ec10

Browse files
mrholekmrholek
committedJan 23, 2023
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>

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

Lines changed: 60 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,7 @@ other_frameworks: alert
88
---
99

1010
import { useState } from 'react'
11-
import {
12-
CAlert,
13-
CAlertHeading,
14-
CAlertLink,
15-
CButton,
16-
CCallout,
17-
} from '@coreui/react/src/index'
11+
import { CAlert, CAlertHeading, CAlertLink, CButton, CCallout } from '@coreui/react/src/index'
1812

1913
import CIcon from '@coreui/icons-react'
2014

@@ -24,34 +18,7 @@ import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
2418

2519
React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
2620

27-
<Example>
28-
<CAlert color="primary">
29-
A simple primary alert—check it out!
30-
</CAlert>
31-
<CAlert color="secondary">
32-
A simple secondary alert—check it out!
33-
</CAlert>
34-
<CAlert color="success">
35-
A simple success alert—check it out!
36-
</CAlert>
37-
<CAlert color="danger">
38-
A simple danger alert—check it out!
39-
</CAlert>
40-
<CAlert color="warning">
41-
A simple warning alert—check it out!
42-
</CAlert>
43-
<CAlert color="info">
44-
A simple info alert—check it out!
45-
</CAlert>
46-
<CAlert color="light">
47-
A simple light alert—check it out!
48-
</CAlert>
49-
<CAlert color="dark">
50-
A simple dark alert—check it out!
51-
</CAlert>
52-
</Example>
53-
54-
```jsx
21+
```jsx preview
5522
<CAlert color="primary">
5623
A simple primary alert—check it out!
5724
</CAlert>
@@ -81,7 +48,10 @@ React Alert is prepared for any length of text, as well as an optional close but
8148
<CCallout color="info">
8249
<h5>Conveying meaning to assistive technologies</h5>
8350
<p>
84-
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
51+
Using color to add meaning only provides a visual indication, which will not be conveyed to
52+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
53+
color is either obvious from the content itself (e.g. the visible text), or is included through
54+
alternative means, such as additional text hidden with the `.visually-hidden` class.
8555
</p>
8656
</CCallout>
8757

@@ -93,7 +63,8 @@ export const LiveExample = () => {
9363
const [visible, setVisible] = useState(false)
9464
return (
9565
<>
96-
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!</CAlert>
66+
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!
67+
</CAlert>
9768
<CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
9869
</>
9970
)
@@ -107,8 +78,12 @@ export const LiveExample = () => {
10778
const [visible, setVisible] = useState(false)
10879
return (
10980
<>
110-
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!</CAlert>
111-
<CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
81+
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
82+
A simple primary alert—check it out!
83+
</CAlert>
84+
<CButton color="primary" onClick={() => setVisible(true)}>
85+
Show live alert
86+
</CButton>
11287
</>
11388
)
11489
```
@@ -117,34 +92,7 @@ return (
11792

11893
Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
11994

120-
<Example>
121-
<CAlert color="primary">
122-
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
123-
</CAlert>
124-
<CAlert color="secondary">
125-
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
126-
</CAlert>
127-
<CAlert color="success">
128-
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
129-
</CAlert>
130-
<CAlert color="danger">
131-
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
132-
</CAlert>
133-
<CAlert color="warning">
134-
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
135-
</CAlert>
136-
<CAlert color="info">
137-
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
138-
</CAlert>
139-
<CAlert color="light">
140-
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
141-
</CAlert>
142-
<CAlert color="dark">
143-
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
144-
</CAlert>
145-
</Example>
146-
147-
```jsx
95+
```jsx preview
14896
<CAlert color="primary">
14997
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
15098
</CAlert>
@@ -175,122 +123,79 @@ Use the `<CAlertLink>` component to immediately give matching colored links insi
175123

176124
React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
177125

178-
<Example>
179-
<CAlert color="success">
180-
<CAlertHeading component="h4">Well done!</CAlertHeading>
181-
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
182-
<hr />
183-
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
184-
</CAlert>
185-
</Example>
186-
187-
```jsx
126+
```jsx preview
188127
<CAlert color="success">
189128
<CAlertHeading component="h4">Well done!</CAlertHeading>
190-
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
129+
<p>
130+
Aww yeah, you successfully read this important alert message. This example text is going to run
131+
a bit longer so that you can see how spacing within an alert works with this kind of content.
132+
</p>
191133
<hr />
192-
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
134+
<p className="mb-0">
135+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
136+
</p>
193137
</CAlert>
194138
```
195139

196140
### Icons
197141

198142
Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
199143

200-
<Example>
201-
<CAlert color="primary" className="d-flex align-items-center">
202-
<svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
203-
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" className="ci-primary"></path>
204-
</svg>
205-
<div>
206-
An example alert with an icon
207-
</div>
208-
</CAlert>
209-
</Example>
210-
211-
```jsx
144+
```jsx preview
212145
<CAlert color="primary" className="d-flex align-items-center">
213146
<svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
214-
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" className="ci-primary"></path>
147+
<rect
148+
width="32"
149+
height="176"
150+
x="240"
151+
y="176"
152+
fill="var(--ci-primary-color, currentColor)"
153+
className="ci-primary"
154+
></rect>
155+
<rect
156+
width="32"
157+
height="32"
158+
x="240"
159+
y="384"
160+
fill="var(--ci-primary-color, currentColor)"
161+
className="ci-primary"
162+
></rect>
163+
<path
164+
fill="var(--ci-primary-color, currentColor)"
165+
d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
166+
className="ci-primary"
167+
></path>
215168
</svg>
216-
<div>
217-
An example alert with an icon
218-
</div>
169+
<div>An example alert with an icon</div>
219170
</CAlert>
220171
```
221172

222173
Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
223174

224-
<Example>
225-
<CAlert color="primary" className="d-flex align-items-center">
226-
<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
227-
<div>
228-
An example alert with an icon
229-
</div>
230-
</CAlert>
231-
<CAlert color="success" className="d-flex align-items-center">
232-
<CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
233-
<div>
234-
An example success alert with an icon
235-
</div>
236-
</CAlert>
237-
<CAlert color="warning" className="d-flex align-items-center">
238-
<CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
239-
<div>
240-
An example warning alert with an icon
241-
</div>
242-
</CAlert>
243-
<CAlert color="danger" className="d-flex align-items-center">
244-
<CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
245-
<div>
246-
An example danger alert with an icon
247-
</div>
248-
</CAlert>
249-
</Example>
250-
251-
```jsx
175+
```jsx preview
252176
<CAlert color="primary" className="d-flex align-items-center">
253177
<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
254-
<div>
255-
An example alert with an icon
256-
</div>
178+
<div>An example alert with an icon</div>
257179
</CAlert>
258180
<CAlert color="success" className="d-flex align-items-center">
259181
<CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
260-
<div>
261-
An example success alert with an icon
262-
</div>
182+
<div>An example success alert with an icon</div>
263183
</CAlert>
264184
<CAlert color="warning" className="d-flex align-items-center">
265185
<CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
266-
<div>
267-
An example warning alert with an icon
268-
</div>
186+
<div>An example warning alert with an icon</div>
269187
</CAlert>
270188
<CAlert color="danger" className="d-flex align-items-center">
271189
<CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
272-
<div>
273-
An example danger alert with an icon
274-
</div>
190+
<div>An example danger alert with an icon</div>
275191
</CAlert>
276192
```
277193

278194
### Solid
279195

280196
Use `variant="solid"` to change contextual colors to solid.
281197

282-
<Example>
283-
<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
284-
<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
285-
<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
286-
<CAlert color="danger" variant="solid">A simple solid danger alert—check it out!</CAlert>
287-
<CAlert color="warning" variant="solid">A simple solid warning alert—check it out!</CAlert>
288-
<CAlert color="info" variant="solid">A simple solid info alert—check it out!</CAlert>
289-
<CAlert color="light" variant="solid" className="text-high-emphasis">A simple solid light alert—check it out!</CAlert>
290-
<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
291-
</Example>
292-
293-
```jsx
198+
```jsx preview
294199
<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
295200
<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
296201
<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
@@ -305,24 +210,12 @@ Use `variant="solid"` to change contextual colors to solid.
305210

306211
React Alert component can also be easily dismissed. Just add the `dismissible` prop.
307212

308-
<Example>
309-
<CAlert
310-
color="warning"
311-
dismissible
312-
onClose={() => {
313-
alert("👋 Well, hi there! Thanks for dismissing me.");
314-
}}
315-
>
316-
<strong>Go right ahead</strong> and click that dimiss over there on the right.
317-
</CAlert>
318-
</Example>
319-
320-
```jsx
213+
```jsx preview
321214
<CAlert
322215
color="warning"
323216
dismissible
324217
onClose={() => {
325-
alert("👋 Well, hi there! Thanks for dismissing me.");
218+
alert('👋 Well, hi there! Thanks for dismissing me.')
326219
}}
327220
>
328221
<strong>Go right ahead</strong> and click that dimiss over there on the right.
@@ -331,7 +224,9 @@ React Alert component can also be easily dismissed. Just add the `dismissible` p
331224

332225
<CCallout color="warning">
333226
<p>
334-
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document.
227+
When an alert is dismissed, the element is completely removed from the page structure. If a
228+
keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
229+
depending on the browser, reset to the start of the page/document.
335230
</p>
336231
</CCallout>
337232

@@ -355,9 +250,9 @@ React alerts use local CSS variables on `.alert` for enhanced real-time customiz
355250
#### How to use CSS variables
356251

357252
```jsx
358-
const vars = {
253+
const vars = {
359254
'--my-css-var': 10,
360-
'--my-another-css-var': "red"
255+
'--my-another-css-var': 'red',
361256
}
362257
return <CAlert style={vars}>...</CAlert>
363258
```
@@ -389,4 +284,4 @@ $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x pl
389284

390285
### CAlertLink
391286

392-
`markdown:CAlertLink.api.mdx`
287+
`markdown:CAlertLink.api.mdx`

0 commit comments

Comments
 (0)
Please sign in to comment.