Skip to content

Commit 2dc9d3e

Browse files
mrholekmrholek
committed
feat(CWidgets): add CWidgetA, CWidgetB, CWidgetC 
1 parent e5d0e85 commit 2dc9d3e

File tree

9 files changed

+461
-20
lines changed

9 files changed

+461
-20
lines changed

‎docs/4.0/components/CWidgets.mdx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: React Widgets
3+
name: Widgets
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/widgets
7+
---
8+
9+
import { Playground, Props } from 'docz'
10+
import CIcon from '@coreui/icons-react'
11+
import { cilArrowTop, cilChartPie, cilOptions } from '@coreui/icons'
12+
import { CChartLine } from '@coreui/react-chartjs'
13+
14+
import {
15+
CCol,
16+
CDropdown,
17+
CDropdownItem,
18+
CDropdownMenu,
19+
CDropdownToggle,
20+
CRow,
21+
CWidgetA,
22+
CWidgetB,
23+
CWidgetC,
24+
} from '../../../src/index.ts'
25+
26+
27+
## Examples
28+
29+
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).
30+
31+
## CWidgetA
32+
33+
<Playground>
34+
<CRow>
35+
<CCol sm={6}>
36+
<CWidgetA
37+
className="mb-4"
38+
color="primary"
39+
value={<>$9.000 <span className="fs-6 fw-normal">(40.9% <CIcon icon={cilArrowTop} />)</span></>}
40+
title="Widget title"
41+
action={
42+
<CDropdown alignment="end">
43+
<CDropdownToggle color="transparent" caret={false} className="p-0">
44+
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
45+
</CDropdownToggle>
46+
<CDropdownMenu>
47+
<CDropdownItem>Action</CDropdownItem>
48+
<CDropdownItem>Another action</CDropdownItem>
49+
<CDropdownItem>Something else here...</CDropdownItem>
50+
<CDropdownItem disabled>Disabled action</CDropdownItem>
51+
</CDropdownMenu>
52+
</CDropdown>
53+
}
54+
chart={
55+
<CChartLine
56+
className="mt-3 mx-3"
57+
style={{ height: '70px' }}
58+
data={{
59+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
60+
datasets: [
61+
{
62+
label: 'My First dataset',
63+
backgroundColor: 'transparent',
64+
borderColor: 'rgba(255,255,255,.55)',
65+
pointBackgroundColor: '#321fdb',
66+
data: [65, 59, 84, 84, 51, 55, 40],
67+
},
68+
],
69+
}}
70+
options={{
71+
plugins: {
72+
legend: {
73+
display: false,
74+
},
75+
},
76+
maintainAspectRatio: false,
77+
scales: {
78+
x: {
79+
grid: {
80+
display: false,
81+
drawBorder: false,
82+
},
83+
ticks: {
84+
display: false,
85+
},
86+
},
87+
y: {
88+
min: 30,
89+
max: 89,
90+
display: false,
91+
grid: {
92+
display: false,
93+
},
94+
ticks: {
95+
display: false,
96+
},
97+
},
98+
},
99+
elements: {
100+
line: {
101+
borderWidth: 1,
102+
tension: 0.4,
103+
},
104+
point: {
105+
radius: 4,
106+
hitRadius: 10,
107+
hoverRadius: 4,
108+
},
109+
},
110+
}}
111+
/>
112+
}
113+
/>
114+
</CCol>
115+
</CRow>
116+
</Playground>
117+
118+
## CWidgetB
119+
120+
<Playground>
121+
<CRow>
122+
<CCol xs={6}>
123+
<CWidgetB
124+
className="mb-3"
125+
progress={{ color: 'success', value: 75 }}
126+
text="Widget helper text"
127+
title="Widget title"
128+
value="89.9%"/>
129+
</CCol>
130+
<CCol xs={6}>
131+
<CWidgetB
132+
className="mb-3"
133+
color="primary"
134+
inverse
135+
progress={{ value: 75 }}
136+
text="Widget helper text"
137+
title="Widget title"
138+
value="89.9%"/>
139+
</CCol>
140+
</CRow>
141+
</Playground>
142+
143+
## CWidgetC
144+
145+
<Playground>
146+
<CRow>
147+
<CCol xs={6}>
148+
<CWidgetC
149+
className="mb-3"
150+
icon={<CIcon icon={cilChartPie} height={36} />}
151+
progress={{ color: 'success', value: 75 }}
152+
text="Widget helper text"
153+
title="Widget title"
154+
value="89.9%"/>
155+
</CCol>
156+
<CCol xs={6}>
157+
<CWidgetC
158+
className="mb-3"
159+
icon={<CIcon icon={cilChartPie} height={36} />}
160+
color="primary"
161+
inverse
162+
progress={{ value: 75 }}
163+
text="Widget helper text"
164+
title="Widget title"
165+
value="89.9%"/>
166+
</CCol>
167+
</CRow>
168+
</Playground>
169+
170+
## API
171+
172+
### CWidgetA
173+
174+
<Props of={CWidgetA} />

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
"@babel/preset-react": "^7.14.5",
3434
"@coreui/coreui": "^4.0.1",
3535
"@coreui/icons": "^2.0.1",
36-
"@coreui/icons-react": "^2.0.0-rc.1",
36+
"@coreui/icons-react": "^2.0.0-rc.5",
37+
"@coreui/react-chartjs": "^2.0.0-rc.1",
3738
"@emotion/react": "^11.4.1",
3839
"@emotion/styled": "^11.3.0",
3940
"@popperjs/core": "^2.9.3",

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './widgets'

‎src/components/widgets/CWidgetA.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
2+
import PropTypes from 'prop-types'
3+
import classNames from 'classnames'
4+
5+
import { Colors, colorPropType } from '../Types'
6+
7+
import { CCard } from '../card/CCard'
8+
import { CCardBody } from '../card/CCardBody'
9+
10+
export interface CWidgetAProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
11+
/**
12+
* Action node for your component. [docs]
13+
*/
14+
action?: ReactNode
15+
/**
16+
* Chart node for your component. [docs]
17+
*/
18+
chart?: string | ReactNode
19+
/**
20+
* A string of all className you want applied to the base component. [docs]
21+
*/
22+
className?: string
23+
/**
24+
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
25+
*
26+
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
27+
*/
28+
color?: Colors
29+
/**
30+
* Title node for your component. [docs]
31+
*/
32+
title?: string | ReactNode
33+
/**
34+
* Value node for your component. [docs]
35+
*/
36+
value?: string | number | ReactNode
37+
}
38+
39+
export const CWidgetA = forwardRef<HTMLDivElement, CWidgetAProps>(
40+
({ action, chart, className, color, title, value, ...rest }, ref) => {
41+
const _className = classNames(
42+
{ [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
43+
className,
44+
)
45+
46+
return (
47+
<CCard className={_className} {...rest} ref={ref}>
48+
<CCardBody className="pb-0 d-flex justify-content-between align-items-start">
49+
<div>
50+
{value && <div className="fs-4 fw-semibold">{value}</div>}
51+
{title && <div>{title}</div>}
52+
</div>
53+
{action}
54+
</CCardBody>
55+
{chart}
56+
</CCard>
57+
)
58+
},
59+
)
60+
61+
CWidgetA.propTypes = {
62+
action: PropTypes.node,
63+
chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
64+
className: PropTypes.string,
65+
color: colorPropType,
66+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
67+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
68+
}
69+
70+
CWidgetA.displayName = 'CWidgetA'

‎src/components/widgets/CWidgetB.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
2+
import PropTypes from 'prop-types'
3+
4+
import { Colors, colorPropType } from '../Types'
5+
6+
import { CCard } from '../card/CCard'
7+
import { CCardBody } from '../card/CCardBody'
8+
import { CProgress, CProgressProps } from '../progress/CProgress'
9+
10+
export interface CWidgetBProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
11+
/**
12+
* A string of all className you want applied to the base component. [docs]
13+
*/
14+
className?: string
15+
/**
16+
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
17+
*
18+
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
19+
*/
20+
color?: Colors
21+
inverse?: boolean
22+
/**
23+
* Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
24+
*
25+
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
26+
*/
27+
progress?: CProgressProps
28+
/**
29+
* Title node for your component. [docs]
30+
*/
31+
title?: string | ReactNode
32+
text?: string
33+
/**
34+
* Value node for your component. [docs]
35+
*/
36+
value?: string | number | ReactNode
37+
}
38+
39+
export const CWidgetB = forwardRef<HTMLDivElement, CWidgetBProps>(
40+
({ className, color, inverse, progress, text, title, value, ...rest }, ref) => {
41+
return (
42+
<CCard
43+
className={className}
44+
color={color}
45+
{...(inverse && { textColor: 'high-emphasis-inverse' })}
46+
{...rest}
47+
ref={ref}
48+
>
49+
<CCardBody>
50+
{value && <div className="fs-4 fw-semibold">{value}</div>}
51+
{title && <div>{title}</div>}
52+
<CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
53+
{text && (
54+
<small className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
55+
{text}
56+
</small>
57+
)}
58+
</CCardBody>
59+
</CCard>
60+
)
61+
},
62+
)
63+
64+
CWidgetB.propTypes = {
65+
className: PropTypes.string,
66+
color: colorPropType,
67+
inverse: PropTypes.bool,
68+
progress: PropTypes.object,
69+
text: PropTypes.string,
70+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
71+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
72+
}
73+
74+
CWidgetB.displayName = 'CWidgetCWidgetB'

0 commit comments

Comments
 (0)