Skip to content

Commit 492a20b

Browse files
mrholekmrholek
committed
docs(CAlert): update content
1 parent 812ffc4 commit 492a20b

11 files changed

+381
-0
lines changed

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: React Alert Component API
3+
name: Alert API
4+
description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.
5+
route: /components/alert/
6+
---
7+
8+
import CAlertAPI from '../../api/CAlert.api.mdx'
9+
import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx'
10+
import CAlertLinkAPI from '../../api/CAlertLink.api.mdx'
11+
12+
## CAlert
13+
14+
<CAlertAPI />
15+
16+
## CAlertHeading
17+
18+
<CAlertHeadingAPI />
19+
20+
## CAlertLink
21+
22+
<CAlertLinkAPI />

‎packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import { CAlert, CAlertHeading } from '@coreui/react'
3+
4+
export const AlertAdditionalContentExample = () => {
5+
return (
6+
<CAlert color="success">
7+
<CAlertHeading as="h4">Well done!</CAlertHeading>
8+
<p>
9+
Aww yeah, you successfully read this important alert message. This example text is going to
10+
run a bit longer so that you can see how spacing within an alert works with this kind of
11+
content.
12+
</p>
13+
<hr />
14+
<p className="mb-0">
15+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
16+
</p>
17+
</CAlert>
18+
)
19+
}

‎packages/docs/content/components/alert/examples/AlertDismissingExample.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { CAlert } from '@coreui/react'
3+
4+
export const AlertDismissingExample = () => {
5+
return (
6+
<CAlert
7+
color="warning"
8+
dismissible
9+
onClose={() => {
10+
alert('👋 Well, hi there! Thanks for dismissing me.')
11+
}}
12+
>
13+
<strong>Go right ahead</strong> and click that dimiss over there on the right.
14+
</CAlert>
15+
)
16+
}

‎packages/docs/content/components/alert/examples/AlertExample.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { CAlert } from '@coreui/react'
3+
4+
export const AlertExample = () => {
5+
return (
6+
<>
7+
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
8+
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
9+
<CAlert color="success">A simple success alert—check it out!</CAlert>
10+
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
11+
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
12+
<CAlert color="info">A simple info alert—check it out!</CAlert>
13+
<CAlert color="light">A simple light alert—check it out!</CAlert>
14+
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
15+
</>
16+
)
17+
}

‎packages/docs/content/components/alert/examples/AlertIcons1Example.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { CAlert } from '@coreui/react'
3+
4+
export const AlertIcons1Example = () => {
5+
return (
6+
<CAlert color="primary" className="d-flex align-items-center">
7+
<svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
8+
<rect
9+
width="32"
10+
height="176"
11+
x="240"
12+
y="176"
13+
fill="var(--ci-primary-color, currentColor)"
14+
className="ci-primary"
15+
></rect>
16+
<rect
17+
width="32"
18+
height="32"
19+
x="240"
20+
y="384"
21+
fill="var(--ci-primary-color, currentColor)"
22+
className="ci-primary"
23+
></rect>
24+
<path
25+
fill="var(--ci-primary-color, currentColor)"
26+
d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
27+
className="ci-primary"
28+
></path>
29+
</svg>
30+
<div>An example alert with an icon</div>
31+
</CAlert>
32+
)
33+
}

‎packages/docs/content/components/alert/examples/AlertIcons2Example.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { CAlert } from '@coreui/react'
3+
import CIcon from '@coreui/icons-react'
4+
import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
5+
6+
export const AlertIcons2Example = () => {
7+
return (
8+
<>
9+
<CAlert color="primary" className="d-flex align-items-center">
10+
<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
11+
<div>An example alert with an icon</div>
12+
</CAlert>
13+
<CAlert color="success" className="d-flex align-items-center">
14+
<CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
15+
<div>An example success alert with an icon</div>
16+
</CAlert>
17+
<CAlert color="warning" className="d-flex align-items-center">
18+
<CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
19+
<div>An example warning alert with an icon</div>
20+
</CAlert>
21+
<CAlert color="danger" className="d-flex align-items-center">
22+
<CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
23+
<div>An example danger alert with an icon</div>
24+
</CAlert>
25+
</>
26+
)
27+
}

‎packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import { CAlert, CAlertLink } from '@coreui/react'
3+
4+
export const AlertLinkColorExample = () => {
5+
return (
6+
<>
7+
<CAlert color="primary">
8+
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
9+
click if you like.
10+
</CAlert>
11+
<CAlert color="secondary">
12+
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
13+
click if you like.
14+
</CAlert>
15+
<CAlert color="success">
16+
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
17+
click if you like.
18+
</CAlert>
19+
<CAlert color="danger">
20+
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
21+
click if you like.
22+
</CAlert>
23+
<CAlert color="warning">
24+
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
25+
click if you like.
26+
</CAlert>
27+
<CAlert color="info">
28+
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
29+
if you like.
30+
</CAlert>
31+
<CAlert color="light">
32+
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
33+
if you like.
34+
</CAlert>
35+
<CAlert color="dark">
36+
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
37+
if you like.
38+
</CAlert>
39+
</>
40+
)
41+
}

‎packages/docs/content/components/alert/examples/AlertLiveExample.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useState } from 'react'
2+
import { CAlert, CButton } from '@coreui/react'
3+
4+
export const AlertLiveExample = () => {
5+
const [visible, setVisible] = useState(false)
6+
return (
7+
<>
8+
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
9+
A simple primary alert—check it out!
10+
</CAlert>
11+
<CButton color="primary" onClick={() => setVisible(true)}>
12+
Show live alert
13+
</CButton>
14+
</>
15+
)
16+
}

‎packages/docs/content/components/alert/examples/AlertSolidExample.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { CAlert } from '@coreui/react'
3+
4+
export const AlertSolidExample = () => {
5+
return (
6+
<>
7+
<CAlert color="primary" variant="solid">
8+
A simple solid primary alert—check it out!
9+
</CAlert>
10+
<CAlert color="secondary" variant="solid">
11+
A simple solid secondary alert—check it out!
12+
</CAlert>
13+
<CAlert color="success" variant="solid">
14+
A simple solid success alert—check it out!
15+
</CAlert>
16+
<CAlert color="danger" variant="solid">
17+
A simple solid danger alert—check it out!
18+
</CAlert>
19+
<CAlert color="warning" variant="solid">
20+
A simple solid warning alert—check it out!
21+
</CAlert>
22+
<CAlert color="info" variant="solid">
23+
A simple solid info alert—check it out!
24+
</CAlert>
25+
<CAlert color="light" variant="solid" className="text-high-emphasis">
26+
A simple solid light alert—check it out!
27+
</CAlert>
28+
<CAlert color="dark" variant="solid">
29+
A simple solid dark alert—check it out!
30+
</CAlert>
31+
</>
32+
)
33+
}

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

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
title: React Alert Component
3+
name: Alert
4+
description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
5+
menu: Components
6+
route: /components/alert/
7+
other_frameworks: alert
8+
---
9+
10+
## How to use React Alert Component.
11+
12+
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).
13+
14+
import { AlertExample } from './examples/AlertExample.tsx'
15+
import AlertExampleTS from '!!raw-loader!./examples/AlertExample.tsx'
16+
17+
<ExampleSnippet code={AlertExampleTS} componentName="React Alert">
18+
<AlertExample />
19+
</ExampleSnippet>
20+
21+
<Callout color="info" title="Conveying meaning to assistive technologies">
22+
Using color to add meaning only provides a visual indication, which will not be conveyed to
23+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
24+
color is either obvious from the content itself (e.g. the visible text), or is included through
25+
alternative means, such as additional text hidden with the `.visually-hidden` class.
26+
</Callout>
27+
28+
### Live example
29+
30+
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
31+
32+
import { AlertLiveExample } from './examples/AlertLiveExample.tsx'
33+
import AlertLiveExampleTS from '!!raw-loader!./examples/AlertLiveExample.tsx'
34+
35+
<ExampleSnippet code={AlertLiveExampleTS} componentName="React Alert">
36+
<AlertLiveExample />
37+
</ExampleSnippet>
38+
39+
### Link color
40+
41+
Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
42+
43+
import { AlertLinkColorExample } from './examples/AlertLinkColorExample.tsx'
44+
import AlertLinkColorExampleTS from '!!raw-loader!./examples/AlertLinkColorExample.tsx'
45+
46+
<ExampleSnippet code={AlertLinkColorExampleTS} componentName="React Alert">
47+
<AlertLinkColorExample />
48+
</ExampleSnippet>
49+
50+
### Additional content
51+
52+
React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
53+
54+
import { AlertAdditionalContentExample } from './examples/AlertAdditionalContentExample.tsx'
55+
import AlertAdditionalContentExampleTS from '!!raw-loader!./examples/AlertAdditionalContentExample.tsx'
56+
57+
<ExampleSnippet code={AlertAdditionalContentExampleTS} componentName="React Alert">
58+
<AlertAdditionalContentExample />
59+
</ExampleSnippet>
60+
61+
### Icons
62+
63+
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.
64+
65+
import { AlertIcons1Example } from './examples/AlertIcons1Example.tsx'
66+
import AlertIcons1ExampleTS from '!!raw-loader!./examples/AlertIcons1Example.tsx'
67+
68+
<ExampleSnippet code={AlertIcons1ExampleTS} componentName="React Alert">
69+
<AlertIcons1Example />
70+
</ExampleSnippet>
71+
72+
73+
Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
74+
75+
import { AlertIcons2Example } from './examples/AlertIcons2Example.tsx'
76+
import AlertIcons2ExampleTS from '!!raw-loader!./examples/AlertIcons2Example.tsx'
77+
78+
<ExampleSnippet code={AlertIcons2ExampleTS} componentName="React Alert">
79+
<AlertIcons2Example />
80+
</ExampleSnippet>
81+
82+
83+
### Solid
84+
85+
Use `variant="solid"` to change contextual colors to solid.
86+
87+
import { AlertSolidExample } from './examples/AlertSolidExample.tsx'
88+
import AlertSolidExampleTS from '!!raw-loader!./examples/AlertSolidExample.tsx'
89+
90+
<ExampleSnippet code={AlertSolidExampleTS} componentName="React Alert">
91+
<AlertSolidExample />
92+
</ExampleSnippet>
93+
94+
### Dismissing
95+
96+
React Alert component can also be easily dismissed. Just add the `dismissible` prop.
97+
98+
import { AlertDismissingExample } from './examples/AlertDismissingExample.tsx'
99+
import AlertDismissingExampleTS from '!!raw-loader!./examples/AlertDismissingExample.tsx'
100+
101+
<ExampleSnippet code={AlertDismissingExampleTS} componentName="React Alert">
102+
<AlertDismissingExample />
103+
</ExampleSnippet>
104+
105+
106+
<Callout color="warning">
107+
When an alert is dismissed, the element is completely removed from the page structure. If a
108+
keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
109+
depending on the browser, reset to the start of the page/document.
110+
</Callout>
111+
112+
## API
113+
114+
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
115+
116+
- [&lt;CAlert /&gt;](./api/#calert)
117+
- [&lt;CAlertHeading /&gt;](./api/#calertheading)
118+
- [&lt;CAlertLink /&gt;](./api/#calertlink)

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

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: React Alert Component Styling
3+
name: Alert Styling
4+
description: Learn how to customize the React Alert component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
5+
route: /components/alert/
6+
---
7+
8+
### CSS class names
9+
10+
React Alert comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
11+
12+
<ClassNamesDocs
13+
files={[
14+
'components/alert/CAlert.tsx',
15+
'components/alert/CAlertHeading.tsx',
16+
'components/alert/CAlertLink.tsx',
17+
]}
18+
/>
19+
20+
### CSS variables
21+
22+
React Alert supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
23+
24+
<ScssDocs file="_alert.scss" capture="alert-css-vars" />
25+
26+
#### How to use CSS variables
27+
28+
```jsx
29+
const customVars = {
30+
'--cui-alert-color': '#333',
31+
'--cui-alert-bg': '#f8f9fa',
32+
}
33+
34+
return <CAlert style={customVars}>{/* Alert content */}</CAlert>
35+
```
36+
37+
### SASS variables
38+
39+
<ScssDocs file="_variables.scss" capture="alert-variables" />

0 commit comments

Comments
 (0)