Skip to content

Commit 14d9d2d

Browse files
mrholekmrholek
committed
refactor: update examples
1 parent e506dd2 commit 14d9d2d

File tree

15 files changed

+66
-61
lines changed

15 files changed

+66
-61
lines changed

‎src/views/base/cards/Cards.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const Cards = () => {
248248
</p>
249249
<DocsExample href="components/card/#header-and-footer">
250250
<CCard>
251-
<CCardHeader component="h5">Header</CCardHeader>
251+
<CCardHeader as="h5">Header</CCardHeader>
252252
<CCardBody>
253253
<CCardTitle>Special title treatment</CCardTitle>
254254
<CCardText>

‎src/views/base/collapses/Collapses.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const Collapses = () => {
1919
<p className="text-body-secondary small">You can use a link or a button component.</p>
2020
<DocsExample href="components/collapse">
2121
<CButton
22+
color="primary"
2223
href="#"
2324
onClick={(e) => {
2425
e.preventDefault()
@@ -53,6 +54,7 @@ const Collapses = () => {
5354
<DocsExample href="components/collapse#horizontal">
5455
<CButton
5556
className="mb-3"
57+
color="primary"
5658
onClick={() => setVisibleHorizontal(!visibleHorizontal)}
5759
aria-expanded={visibleHorizontal}
5860
aria-controls="collapseWidthExample"
@@ -90,6 +92,7 @@ const Collapses = () => {
9092
Toggle second element
9193
</CButton>
9294
<CButton
95+
color="primary"
9396
onClick={() => {
9497
setVisibleA(!visibleA)
9598
setVisibleB(!visibleB)

‎src/views/base/list-groups/ListGroups.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -97,19 +97,19 @@ const ListGroups = () => {
9797
</p>
9898
<DocsExample href="components/list-group/#links-and-buttons">
9999
<CListGroup>
100-
<CListGroupItem component="a" href="#" active>
100+
<CListGroupItem as="a" href="#" active>
101101
Cras justo odio
102102
</CListGroupItem>
103-
<CListGroupItem component="a" href="#">
103+
<CListGroupItem as="a" href="#">
104104
Dapibus ac facilisis in
105105
</CListGroupItem>
106-
<CListGroupItem component="a" href="#">
106+
<CListGroupItem as="a" href="#">
107107
Morbi leo risus
108108
</CListGroupItem>
109-
<CListGroupItem component="a" href="#">
109+
<CListGroupItem as="a" href="#">
110110
Porta ac consectetur ac
111111
</CListGroupItem>
112-
<CListGroupItem component="a" href="#" disabled>
112+
<CListGroupItem as="a" href="#" disabled>
113113
Vestibulum at eros
114114
</CListGroupItem>
115115
</CListGroup>
@@ -201,7 +201,7 @@ const ListGroups = () => {
201201
</p>
202202
<DocsExample href="components/list-group/#contextual-classes">
203203
<CListGroup>
204-
<CListGroupItem component="a" href="#">
204+
<CListGroupItem as="a" href="#">
205205
Dapibus ac facilisis in
206206
</CListGroupItem>
207207
{[
@@ -214,7 +214,7 @@ const ListGroups = () => {
214214
'light',
215215
'dark',
216216
].map((color, index) => (
217-
<CListGroupItem component="a" href="#" color={color} key={index}>
217+
<CListGroupItem as="a" href="#" color={color} key={index}>
218218
A simple {color} list group item
219219
</CListGroupItem>
220220
))}
@@ -269,7 +269,7 @@ const ListGroups = () => {
269269
</p>
270270
<DocsExample href="components/list-group/#custom-content">
271271
<CListGroup>
272-
<CListGroupItem component="a" href="#" active>
272+
<CListGroupItem as="a" href="#" active>
273273
<div className="d-flex w-100 justify-content-between">
274274
<h5 className="mb-1">List group item heading</h5>
275275
<small>3 days ago</small>
@@ -280,7 +280,7 @@ const ListGroups = () => {
280280
</p>
281281
<small>Donec id elit non mi porta.</small>
282282
</CListGroupItem>
283-
<CListGroupItem component="a" href="#">
283+
<CListGroupItem as="a" href="#">
284284
<div className="d-flex w-100 justify-content-between">
285285
<h5 className="mb-1">List group item heading</h5>
286286
<small className="text-body-secondary">3 days ago</small>
@@ -291,7 +291,7 @@ const ListGroups = () => {
291291
</p>
292292
<small className="text-body-secondary">Donec id elit non mi porta.</small>
293293
</CListGroupItem>
294-
<CListGroupItem component="a" href="#">
294+
<CListGroupItem as="a" href="#">
295295
<div className="d-flex w-100 justify-content-between">
296296
<h5 className="mb-1">List group item heading</h5>
297297
<small className="text-body-secondary">3 days ago</small>

‎src/views/base/navs/Navs.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const Navs = () => {
5858
without the extra markup.
5959
</p>
6060
<DocsExample href="components/nav#base-nav">
61-
<CNav component="nav">
61+
<CNav as="nav">
6262
<CNavLink href="#" active>
6363
Active
6464
</CNavLink>
@@ -308,7 +308,7 @@ const Navs = () => {
308308
horizontal layout that fills the available width starting from the small breakpoint.
309309
</p>
310310
<DocsExample href="components/nav#working-with-flex-utilities">
311-
<CNav component="nav" variant="pills" className="flex-column flex-sm-row">
311+
<CNav as="nav" variant="pills" className="flex-column flex-sm-row">
312312
<CNavLink href="#" active>
313313
Active
314314
</CNavLink>

‎src/views/base/placeholders/Placeholders.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const Placeholders = () => {
7171
<CPlaceholder xs={8} />
7272
</CPlaceholder>
7373
<CPlaceholder
74+
color="primary"
7475
component={CButton}
7576
disabled
7677
href="#"
@@ -99,6 +100,7 @@ const Placeholders = () => {
99100
<CPlaceholder xs={6} />
100101
</p>
101102
<CPlaceholder
103+
color="primary"
102104
component={CButton}
103105
aria-hidden="true"
104106
disabled

‎src/views/base/spinners/Spinners.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
33
import { DocsExample } from 'src/components'
44

5-
const Accordion = () => {
5+
const Spinners = () => {
66
return (
77
<CRow>
88
<CCol xs={12}>
@@ -94,19 +94,19 @@ const Accordion = () => {
9494
</p>
9595
<DocsExample href="components/spinner#buttons">
9696
<CButton color="primary" disabled>
97-
<CSpinner component="span" size="sm" aria-hidden="true" />
97+
<CSpinner as="span" size="sm" aria-hidden="true" />
9898
</CButton>
9999
<CButton color="primary" disabled>
100-
<CSpinner component="span" size="sm" aria-hidden="true" />
100+
<CSpinner as="span" size="sm" aria-hidden="true" />
101101
Loading...
102102
</CButton>
103103
</DocsExample>
104104
<DocsExample href="components/spinner#buttons">
105105
<CButton color="primary" disabled>
106-
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
106+
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
107107
</CButton>
108108
<CButton color="primary" disabled>
109-
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
109+
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
110110
Loading...
111111
</CButton>
112112
</DocsExample>
@@ -117,4 +117,4 @@ const Accordion = () => {
117117
)
118118
}
119119

120-
export default Accordion
120+
export default Spinners

‎src/views/base/tables/Tables.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const Tables = () => {
5353
</CTableRow>
5454
<CTableRow>
5555
<CTableHeaderCell scope="row">3</CTableHeaderCell>
56-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
56+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
5757
<CTableDataCell>@twitter</CTableDataCell>
5858
</CTableRow>
5959
</CTableBody>
@@ -167,7 +167,7 @@ const Tables = () => {
167167
</CTableRow>
168168
<CTableRow>
169169
<CTableHeaderCell scope="row">3</CTableHeaderCell>
170-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
170+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
171171
<CTableDataCell>@twitter</CTableDataCell>
172172
</CTableRow>
173173
</CTableBody>
@@ -201,7 +201,7 @@ const Tables = () => {
201201
</CTableRow>
202202
<CTableRow>
203203
<CTableHeaderCell scope="row">3</CTableHeaderCell>
204-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
204+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
205205
<CTableDataCell>@twitter</CTableDataCell>
206206
</CTableRow>
207207
</CTableBody>
@@ -232,7 +232,7 @@ const Tables = () => {
232232
</CTableRow>
233233
<CTableRow>
234234
<CTableHeaderCell scope="row">3</CTableHeaderCell>
235-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
235+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
236236
<CTableDataCell>@twitter</CTableDataCell>
237237
</CTableRow>
238238
</CTableBody>
@@ -276,7 +276,7 @@ const Tables = () => {
276276
</CTableRow>
277277
<CTableRow>
278278
<CTableHeaderCell scope="row">3</CTableHeaderCell>
279-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
279+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
280280
<CTableDataCell>@twitter</CTableDataCell>
281281
</CTableRow>
282282
</CTableBody>
@@ -307,7 +307,7 @@ const Tables = () => {
307307
</CTableRow>
308308
<CTableRow>
309309
<CTableHeaderCell scope="row">3</CTableHeaderCell>
310-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
310+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
311311
<CTableDataCell>@twitter</CTableDataCell>
312312
</CTableRow>
313313
</CTableBody>
@@ -338,7 +338,7 @@ const Tables = () => {
338338
</CTableRow>
339339
<CTableRow>
340340
<CTableHeaderCell scope="row">3</CTableHeaderCell>
341-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
341+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
342342
<CTableDataCell>@twitter</CTableDataCell>
343343
</CTableRow>
344344
</CTableBody>
@@ -378,7 +378,7 @@ const Tables = () => {
378378
</CTableRow>
379379
<CTableRow>
380380
<CTableHeaderCell scope="row">3</CTableHeaderCell>
381-
<CTableDataCell colSpan="2" active>
381+
<CTableDataCell colSpan={2} active>
382382
Larry the Bird
383383
</CTableDataCell>
384384
<CTableDataCell>@twitter</CTableDataCell>
@@ -411,7 +411,7 @@ const Tables = () => {
411411
</CTableRow>
412412
<CTableRow>
413413
<CTableHeaderCell scope="row">3</CTableHeaderCell>
414-
<CTableDataCell colSpan="2" active>
414+
<CTableDataCell colSpan={2} active>
415415
Larry the Bird
416416
</CTableDataCell>
417417
<CTableDataCell>@twitter</CTableDataCell>
@@ -456,7 +456,7 @@ const Tables = () => {
456456
</CTableRow>
457457
<CTableRow>
458458
<CTableHeaderCell scope="row">3</CTableHeaderCell>
459-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
459+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
460460
<CTableDataCell>@twitter</CTableDataCell>
461461
</CTableRow>
462462
</CTableBody>
@@ -493,7 +493,7 @@ const Tables = () => {
493493
</CTableRow>
494494
<CTableRow>
495495
<CTableHeaderCell scope="row">3</CTableHeaderCell>
496-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
496+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
497497
<CTableDataCell>@twitter</CTableDataCell>
498498
</CTableRow>
499499
</CTableBody>
@@ -536,7 +536,7 @@ const Tables = () => {
536536
</CTableRow>
537537
<CTableRow>
538538
<CTableHeaderCell scope="row">3</CTableHeaderCell>
539-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
539+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
540540
<CTableDataCell>@twitter</CTableDataCell>
541541
</CTableRow>
542542
</CTableBody>
@@ -567,7 +567,7 @@ const Tables = () => {
567567
</CTableRow>
568568
<CTableRow>
569569
<CTableHeaderCell scope="row">3</CTableHeaderCell>
570-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
570+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
571571
<CTableDataCell>@twitter</CTableDataCell>
572572
</CTableRow>
573573
</CTableBody>
@@ -611,7 +611,7 @@ const Tables = () => {
611611
</CTableRow>
612612
<CTableRow>
613613
<CTableHeaderCell scope="row">3</CTableHeaderCell>
614-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
614+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
615615
<CTableDataCell>@twitter</CTableDataCell>
616616
</CTableRow>
617617
</CTableBody>
@@ -730,7 +730,7 @@ const Tables = () => {
730730
<CTableDataCell>@mdo</CTableDataCell>
731731
</CTableRow>
732732
<CTableRow>
733-
<CTableHeaderCell colSpan="4">
733+
<CTableHeaderCell colSpan={4}>
734734
<CTable>
735735
<CTableHead>
736736
<CTableRow>
@@ -761,7 +761,7 @@ const Tables = () => {
761761
</CTableRow>
762762
<CTableRow>
763763
<CTableHeaderCell scope="row">3</CTableHeaderCell>
764-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
764+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
765765
<CTableDataCell>@twitter</CTableDataCell>
766766
</CTableRow>
767767
</CTableBody>
@@ -838,7 +838,7 @@ const Tables = () => {
838838
</CTableRow>
839839
<CTableRow>
840840
<CTableHeaderCell scope="row">3</CTableHeaderCell>
841-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
841+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
842842
<CTableDataCell>@twitter</CTableDataCell>
843843
</CTableRow>
844844
</CTableBody>
@@ -878,7 +878,7 @@ const Tables = () => {
878878
</CTableRow>
879879
<CTableRow>
880880
<CTableHeaderCell scope="row">3</CTableHeaderCell>
881-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
881+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
882882
<CTableDataCell>@twitter</CTableDataCell>
883883
</CTableRow>
884884
</CTableBody>

‎src/views/buttons/buttons/Buttons.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,15 @@ const Buttons = () => {
118118
meaning to assistive technologies such as screen readers.
119119
</p>
120120
<DocsExample href="components/buttons#button-components">
121-
<CButton component="a" color="primary" href="#" role="button">
121+
<CButton as="a" color="primary" href="#" role="button">
122122
Link
123123
</CButton>
124124
<CButton type="submit" color="primary">
125125
Button
126126
</CButton>
127-
<CButton component="input" type="button" color="primary" value="Input" />
128-
<CButton component="input" type="submit" color="primary" value="Submit" />
129-
<CButton component="input" type="reset" color="primary" value="Reset" />
127+
<CButton as="input" type="button" color="primary" value="Input" />
128+
<CButton as="input" type="submit" color="primary" value="Submit" />
129+
<CButton as="input" type="reset" color="primary" value="Reset" />
130130
</DocsExample>
131131
</CCardBody>
132132
</CCard>
@@ -329,10 +329,10 @@ const Buttons = () => {
329329
to assistive technologies.
330330
</p>
331331
<DocsExample href="components/buttons#disabled-state">
332-
<CButton component="a" href="#" color="primary" size="lg" disabled>
332+
<CButton as="a" href="#" color="primary" size="lg" disabled>
333333
Primary link
334334
</CButton>
335-
<CButton component="a" href="#" color="secondary" size="lg" disabled>
335+
<CButton as="a" href="#" color="secondary" size="lg" disabled>
336336
Link
337337
</CButton>
338338
</DocsExample>

‎src/views/buttons/dropdowns/Dropdowns.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const Dropdowns = () => {
210210
</button>
211211
<div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
212212
<ul className="navbar-nav">
213-
<CDropdown dark component="li" variant="nav-item">
213+
<CDropdown dark as="li" variant="nav-item">
214214
<CDropdownToggle>Dropdown</CDropdownToggle>
215215
<CDropdownMenu>
216216
<CDropdownItem href="#">Action</CDropdownItem>

‎src/views/dashboard/MainChart.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,16 +98,16 @@ const MainChart = () => {
9898
},
9999
},
100100
y: {
101+
beginAtZero: true,
101102
border: {
102103
color: getStyle('--cui-border-color-translucent'),
103104
},
104105
grid: {
105106
color: getStyle('--cui-border-color-translucent'),
106107
},
108+
max: 250,
107109
ticks: {
108-
beginAtZero: true,
109110
color: getStyle('--cui-body-color'),
110-
max: 250,
111111
maxTicksLimit: 5,
112112
stepSize: Math.ceil(250 / 5),
113113
},

0 commit comments

Comments
 (0)