Skip to content

Commit 1a6c3e1

Browse files
mrholekmrholek
committed
refactor: update examples
1 parent 0a4941e commit 1a6c3e1

File tree

5 files changed

+60
-39
lines changed

5 files changed

+60
-39
lines changed

‎src/components/DocsCallout.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,21 @@ import { CCallout, CLink } from '@coreui/react'
55
import packageJson from '../../package.json'
66

77
const DocsCallout = (props) => {
8-
const { href, name } = props
8+
const { content, href, name } = props
99

1010
const plural = name.slice(-1) === 's' ? true : false
1111

1212
const _href = `https://coreui.io/react/docs/${packageJson.config.coreui_library_short_version}/${href}`
1313

1414
return (
1515
<CCallout color="info" className="bg-white">
16-
A React {name} component {plural ? 'have' : 'has'} been created as a native React.js version
17-
of Bootstrap {name}. {name} {plural ? 'are' : 'is'} delivered with some new features,
18-
variants, and unique design that matches CoreUI Design System requirements.
16+
{content
17+
? content
18+
: `A React ${name} component ${
19+
plural ? 'have' : 'has'
20+
} been created as a native React.js version
21+
of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
22+
variants, and unique design that matches CoreUI Design System requirements.`}
1923
<br />
2024
<br />
2125
For more information please visit our official{' '}
@@ -28,6 +32,7 @@ const DocsCallout = (props) => {
2832
}
2933

3034
DocsCallout.propTypes = {
35+
content: PropTypes.string,
3136
href: PropTypes.string,
3237
name: PropTypes.string,
3338
}

‎src/views/charts/Charts.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,23 @@ import {
88
CChartPolarArea,
99
CChartRadar,
1010
} from '@coreui/react-chartjs'
11-
import { DocsLink } from 'src/components'
11+
import { DocsCallout } from 'src/components'
1212

1313
const Charts = () => {
1414
const random = () => Math.round(Math.random() * 100)
1515

1616
return (
1717
<CRow>
18+
<CCol xs={12}>
19+
<DocsCallout
20+
name="Chart"
21+
href="components/chart"
22+
content="React wrapper component for Chart.js 3.0, the most popular charting library."
23+
/>
24+
</CCol>
1825
<CCol xs={6}>
1926
<CCard className="mb-4">
20-
<CCardHeader>
21-
Bar Chart
22-
<DocsLink href="http://www.chartjs.org" />
23-
</CCardHeader>
27+
<CCardHeader>Bar Chart</CCardHeader>
2428
<CCardBody>
2529
<CChartBar
2630
data={{

‎src/views/icons/brands/Brands.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
33
import CIcon from '@coreui/icons-react'
44
import { brandSet } from '@coreui/icons'
5-
import { DocsLink } from 'src/components'
5+
import { DocsCallout } from 'src/components'
66

77
const toKebabCase = (str) => {
88
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@@ -19,15 +19,19 @@ export const getIconsView = (iconset) => {
1919

2020
const CoreUIIcons = () => {
2121
return (
22-
<CCard className="mb-4">
23-
<CCardHeader>
24-
Brand Icons
25-
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
26-
</CCardHeader>
27-
<CCardBody>
28-
<CRow className="text-center">{getIconsView(brandSet)}</CRow>
29-
</CCardBody>
30-
</CCard>
22+
<>
23+
<DocsCallout
24+
name="CoreUI Brand Icons"
25+
href="components/chart"
26+
content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
27+
/>
28+
<CCard className="mb-4">
29+
<CCardHeader>Brand Icons</CCardHeader>
30+
<CCardBody>
31+
<CRow className="text-center">{getIconsView(brandSet)}</CRow>
32+
</CCardBody>
33+
</CCard>
34+
</>
3135
)
3236
}
3337

‎src/views/icons/coreui-icons/CoreUIIcons.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,23 @@ import React from 'react'
22
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
33
import { freeSet } from '@coreui/icons'
44
import { getIconsView } from '../brands/Brands.js'
5-
import { DocsLink } from 'src/components'
5+
import { DocsCallout } from 'src/components'
66

77
const CoreUIIcons = () => {
88
return (
9-
<CCard className="mb-4">
10-
<CCardHeader>
11-
Free Icons / as CIcon{' '}
12-
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
13-
</CCardHeader>
14-
<CCardBody>
15-
<CRow className="text-center">{getIconsView(freeSet)}</CRow>
16-
</CCardBody>
17-
</CCard>
9+
<>
10+
<DocsCallout
11+
name="CoreUI Icons"
12+
href="components/chart"
13+
content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
14+
/>
15+
<CCard className="mb-4">
16+
<CCardHeader>Free Icons</CCardHeader>
17+
<CCardBody>
18+
<CRow className="text-center">{getIconsView(freeSet)}</CRow>
19+
</CCardBody>
20+
</CCard>
21+
</>
1822
)
1923
}
2024

‎src/views/icons/flags/Flags.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,23 @@ import React from 'react'
22
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
33
import { getIconsView } from '../brands/Brands.js'
44
import { flagSet } from '@coreui/icons'
5-
import { DocsLink } from 'src/components'
5+
import { DocsCallout } from 'src/components'
66

77
const CoreUIIcons = () => {
88
return (
9-
<CCard className="mb-4">
10-
<CCardHeader>
11-
Flag Icons
12-
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
13-
</CCardHeader>
14-
<CCardBody>
15-
<CRow className="text-center">{getIconsView(flagSet)}</CRow>
16-
</CCardBody>
17-
</CCard>
9+
<>
10+
<DocsCallout
11+
name="CoreUI Flag Icons"
12+
href="components/chart"
13+
content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
14+
/>
15+
<CCard className="mb-4">
16+
<CCardHeader>Flag Icons</CCardHeader>
17+
<CCardBody>
18+
<CRow className="text-center">{getIconsView(flagSet)}</CRow>
19+
</CCardBody>
20+
</CCard>
21+
</>
1822
)
1923
}
2024

0 commit comments

Comments
 (0)