Skip to content

Commit 49975ea

Browse files
mrholekmrholek
committed
docs: allow showing images on StackBlitz and CodeSandbox examples
1 parent 81a62bb commit 49975ea

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+155
-268
lines changed

‎packages/docs/content/components/avatar/examples/AvatarImage.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react'
22
import { CAvatar } from '@coreui/react'
33

4-
import Avatar1 from '@assets/images/avatars/1.jpg'
5-
import Avatar2 from '@assets/images/avatars/2.jpg'
6-
import Avatar3 from '@assets/images/avatars/3.jpg'
7-
84
export const AvatarImage = () => {
95
return (
106
<>
11-
<CAvatar src={Avatar1} />
12-
<CAvatar src={Avatar2} />
13-
<CAvatar src={Avatar3} />
7+
<CAvatar src="../../images/avatars/1.jpg" />
8+
<CAvatar src="../../images/avatars/2.jpg" />
9+
<CAvatar src="../../images/avatars/3.jpg" />
1410
</>
1511
)
1612
}

‎packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CAvatar } from '@coreui/react'
33

4-
import Avatar1 from '@assets/images/avatars/1.jpg'
5-
64
export const AvatarWithStatus = () => {
75
return (
86
<>
9-
<CAvatar src={Avatar1} status="success" />
7+
<CAvatar src="../../images/avatars/1.jpg" status="success" />
108
<CAvatar color="secondary" status="danger">
119
CUI
1210
</CAvatar>

‎packages/docs/content/components/card/examples/CardExample.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardExample = () => {
75
return (
86
<CCard style={{ width: '18rem' }}>
9-
<CCardImage orientation="top" src={ReactImg} />
7+
<CCardImage orientation="top" src="../../images/react.jpg" />
108
<CCardBody>
119
<CCardTitle>Card title</CCardTitle>
1210
<CCardText>

‎packages/docs/content/components/card/examples/CardGrid2Example.tsx

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
import React from 'react'
2-
import { CCard, CCardBody, CCardFooter, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
3-
4-
import ReactImg from '@assets/images/react.jpg'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardImage,
7+
CCardText,
8+
CCardTitle,
9+
CCol,
10+
CRow,
11+
} from '@coreui/react'
512

613
export const CardGrid2Example = () => {
714
return (
815
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
916
<CCol xs>
1017
<CCard>
11-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
1219
<CCardBody>
1320
<CCardTitle>Card title</CCardTitle>
1421
<CCardText>
15-
This is a wider card with supporting text below as a natural lead-in to additional content. This
16-
content is a little bit longer.
22+
This is a wider card with supporting text below as a natural lead-in to additional
23+
content. This content is a little bit longer.
1724
</CCardText>
1825
</CCardBody>
1926
<CCardFooter>
@@ -23,12 +30,12 @@ export const CardGrid2Example = () => {
2330
</CCol>
2431
<CCol xs>
2532
<CCard>
26-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
2734
<CCardBody>
2835
<CCardTitle>Card title</CCardTitle>
2936
<CCardText>
30-
This is a wider card with supporting text below as a natural lead-in to additional content. This
31-
content is a little bit longer.
37+
This is a wider card with supporting text below as a natural lead-in to additional
38+
content. This content is a little bit longer.
3239
</CCardText>
3340
</CCardBody>
3441
<CCardFooter>
@@ -38,12 +45,12 @@ export const CardGrid2Example = () => {
3845
</CCol>
3946
<CCol xs>
4047
<CCard>
41-
<CCardImage orientation="top" src={ReactImg} />
48+
<CCardImage orientation="top" src="../../images/react.jpg" />
4249
<CCardBody>
4350
<CCardTitle>Card title</CCardTitle>
4451
<CCardText>
45-
This is a wider card with supporting text below as a natural lead-in to additional content. This
46-
content is a little bit longer.
52+
This is a wider card with supporting text below as a natural lead-in to additional
53+
content. This content is a little bit longer.
4754
</CCardText>
4855
</CCardBody>
4956
<CCardFooter>
@@ -53,12 +60,12 @@ export const CardGrid2Example = () => {
5360
</CCol>
5461
<CCol xs>
5562
<CCard>
56-
<CCardImage orientation="top" src={ReactImg} />
63+
<CCardImage orientation="top" src="../../images/react.jpg" />
5764
<CCardBody>
5865
<CCardTitle>Card title</CCardTitle>
5966
<CCardText>
60-
This is a wider card with supporting text below as a natural lead-in to additional content. This
61-
content is a little bit longer.
67+
This is a wider card with supporting text below as a natural lead-in to additional
68+
content. This content is a little bit longer.
6269
</CCardText>
6370
</CCardBody>
6471
<CCardFooter>

‎packages/docs/content/components/card/examples/CardGrid3Example.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardGrid3Example = () => {
75
return (
86
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
97
<CCol xs>
108
<CCard className="h-100">
11-
<CCardImage orientation="top" src={ReactImg} />
9+
<CCardImage orientation="top" src="../../images/react.jpg" />
1210
<CCardBody>
1311
<CCardTitle>Card title</CCardTitle>
1412
<CCardText>
@@ -20,7 +18,7 @@ export const CardGrid3Example = () => {
2018
</CCol>
2119
<CCol xs>
2220
<CCard className="h-100">
23-
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardImage orientation="top" src="../../images/react.jpg" />
2422
<CCardBody>
2523
<CCardTitle>Card title</CCardTitle>
2624
<CCardText>
@@ -31,7 +29,7 @@ export const CardGrid3Example = () => {
3129
</CCol>
3230
<CCol xs>
3331
<CCard className="h-100">
34-
<CCardImage orientation="top" src={ReactImg} />
32+
<CCardImage orientation="top" src="../../images/react.jpg" />
3533
<CCardBody>
3634
<CCardTitle>Card title</CCardTitle>
3735
<CCardText>
@@ -44,7 +42,7 @@ export const CardGrid3Example = () => {
4442
</CCol>
4543
<CCol xs>
4644
<CCard className="h-100">
47-
<CCardImage orientation="top" src={ReactImg} />
45+
<CCardImage orientation="top" src="../../images/react.jpg" />
4846
<CCardBody>
4947
<CCardTitle>Card title</CCardTitle>
5048
<CCardText>

‎packages/docs/content/components/card/examples/CardGrid4Example.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@ import {
1010
CRow,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardGrid4Example = () => {
1614
return (
1715
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
1816
<CCol xs>
1917
<CCard className="h-100">
20-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGrid4Example = () => {
3230
</CCol>
3331
<CCol xs>
3432
<CCard className="h-100">
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -46,7 +44,7 @@ export const CardGrid4Example = () => {
4644
</CCol>
4745
<CCol xs>
4846
<CCard className="h-100">
49-
<CCardImage orientation="top" src={ReactImg} />
47+
<CCardImage orientation="top" src="../../images/react.jpg" />
5048
<CCardBody>
5149
<CCardTitle>Card title</CCardTitle>
5250
<CCardText>

‎packages/docs/content/components/card/examples/CardGridExample.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@ import {
1010
CRow,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardGridExample = () => {
1614
return (
1715
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
1816
<CCol xs>
1917
<CCard>
20-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGridExample = () => {
3230
</CCol>
3331
<CCol xs>
3432
<CCard>
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -47,7 +45,7 @@ export const CardGridExample = () => {
4745
</CCol>
4846
<CCol xs>
4947
<CCard>
50-
<CCardImage orientation="top" src={ReactImg} />
48+
<CCardImage orientation="top" src="../../images/react.jpg" />
5149
<CCardBody>
5250
<CCardTitle>Card title</CCardTitle>
5351
<CCardText>
@@ -62,7 +60,7 @@ export const CardGridExample = () => {
6260
</CCol>
6361
<CCol xs>
6462
<CCard>
65-
<CCardImage orientation="top" src={ReactImg} />
63+
<CCardImage orientation="top" src="../../images/react.jpg" />
6664
<CCardBody>
6765
<CCardTitle>Card title</CCardTitle>
6866
<CCardText>

‎packages/docs/content/components/card/examples/CardGroups2Example.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import {
99
CCardTitle,
1010
} from '@coreui/react'
1111

12-
import ReactImg from '@assets/images/react.jpg'
13-
1412
export const CardGroups2Example = () => {
1513
return (
1614
<CCardGroup>
1715
<CCard>
18-
<CCardImage orientation="top" src={ReactImg} />
16+
<CCardImage orientation="top" src="../../images/react.jpg" />
1917
<CCardBody>
2018
<CCardTitle>Card title</CCardTitle>
2119
<CCardText>
@@ -28,7 +26,7 @@ export const CardGroups2Example = () => {
2826
</CCardFooter>
2927
</CCard>
3028
<CCard>
31-
<CCardImage orientation="top" src={ReactImg} />
29+
<CCardImage orientation="top" src="../../images/react.jpg" />
3230
<CCardBody>
3331
<CCardTitle>Card title</CCardTitle>
3432
<CCardText>
@@ -40,7 +38,7 @@ export const CardGroups2Example = () => {
4038
</CCardFooter>
4139
</CCard>
4240
<CCard>
43-
<CCardImage orientation="top" src={ReactImg} />
41+
<CCardImage orientation="top" src="../../images/react.jpg" />
4442
<CCardBody>
4543
<CCardTitle>Card title</CCardTitle>
4644
<CCardText>

‎packages/docs/content/components/card/examples/CardGroupsExample.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardGroupsExample = () => {
75
return (
86
<CCardGroup>
97
<CCard>
10-
<CCardImage orientation="top" src={ReactImg} />
8+
<CCardImage orientation="top" src="../../images/react.jpg" />
119
<CCardBody>
1210
<CCardTitle>Card title</CCardTitle>
1311
<CCardText>
@@ -20,7 +18,7 @@ export const CardGroupsExample = () => {
2018
</CCardBody>
2119
</CCard>
2220
<CCard>
23-
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardImage orientation="top" src="../../images/react.jpg" />
2422
<CCardBody>
2523
<CCardTitle>Card title</CCardTitle>
2624
<CCardText>
@@ -32,7 +30,7 @@ export const CardGroupsExample = () => {
3230
</CCardBody>
3331
</CCard>
3432
<CCard>
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>

‎packages/docs/content/components/card/examples/CardImageCapsExample.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImageCapsExample = () => {
75
return (
86
<>
97
<CCard className="mb-3">
10-
<CCardImage orientation="top" src={ReactImg} />
8+
<CCardImage orientation="top" src="../../images/react.jpg" />
119
<CCardBody>
1210
<CCardTitle>Card title</CCardTitle>
1311
<CCardText>
@@ -30,7 +28,7 @@ export const CardImageCapsExample = () => {
3028
<small className="text-body-secondary">Last updated 3 mins ago</small>
3129
</CCardText>
3230
</CCardBody>
33-
<CCardImage orientation="bottom" src={ReactImg} />
31+
<CCardImage orientation="bottom" src="../../images/react.jpg" />
3432
</CCard>
3533
</>
3634
)

‎packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
33

4-
import React400Img from '@assets/images/react400.jpg'
5-
64
export const CardImageHorizontalExample = () => {
75
return (
86
<CCard className="mb-3" style={{ maxWidth: '540px' }}>
97
<CRow className="g-0">
108
<CCol md={4}>
11-
<CCardImage src={React400Img} />
9+
<CCardImage src="../../images/react400.jpg" />
1210
</CCol>
1311
<CCol md={8}>
1412
<CCardBody>

‎packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImageOverlaysExample = () => {
75
return (
86
<CCard className="mb-3 bg-dark text-white">
9-
<CCardImage src={ReactImg} />
7+
<CCardImage src="../../images/react.jpg" />
108
<CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
119
<CCardTitle>Card title</CCardTitle>
1210
<CCardText>

‎packages/docs/content/components/card/examples/CardImagesExample.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImagesExample = () => {
75
return (
86
<CCard style={{ width: '18rem' }}>
9-
<CCardImage orientation="top" src={ReactImg} />
7+
<CCardImage orientation="top" src="../../images/react.jpg" />
108
<CCardBody>
119
<CCardText>
1210
Some quick example text to build on the card title and make up the bulk of the card's

‎packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@ import {
1010
CListGroupItem,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardKitchenSinkExample = () => {
1614
return (
1715
<CCard style={{ width: '18rem' }}>
18-
<CCardImage orientation="top" src={ReactImg} />
16+
<CCardImage orientation="top" src="../../images/react.jpg" />
1917
<CCardBody>
2018
<CCardTitle>Card title</CCardTitle>
2119
<CCardText>

0 commit comments

Comments
 (0)