Skip to content

Commit 92c8b51

Browse files
Anatolii Gorovyijraff
Anatolii Gorovyi
authored and
jraff
committed
feat(community-skeleton-provider): upgrade to styled components
BREAKING CHANGE: styled components now a peer dependency
1 parent 01e0751 commit 92c8b51

File tree

10 files changed

+277
-113
lines changed

10 files changed

+277
-113
lines changed

‎packages/SkeletonProvider/Skeleton.scss‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎packages/SkeletonProvider/__tests__/SkeletonProvider.spec.jsx‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import React from 'react'
2-
import { shallow } from 'enzyme'
2+
import { shallow, mount } from 'enzyme'
33
import Heading from '@tds/core-heading'
44
import Text from '@tds/core-text'
55
import Image from '@tds/core-image'
66
import SkeletonProvider from '../SkeletonProvider'
77

88
const doShallow = props => shallow(<SkeletonProvider {...props} />)
9+
const doMount = props => mount(<SkeletonProvider {...props} />)
910

1011
describe('SkeletonProvider', () => {
1112
it('should render children as skeletons', () => {
12-
const skeleton = doShallow({
13+
const skeleton = doMount({
1314
children: (
1415
<div>
1516
<Heading level="h1" skeleton>
1617
Hello
1718
</Heading>
18-
<Image width={60} height={60} corners="rounded" src="" alt="skeleton image" />
19+
<Image width={60} height={60} rounded="corners" src="" alt="skeleton image" skeleton />
1920
<Text skeleton={{ characters: 4, lines: 2 }}>Hello</Text>
2021
</div>
2122
),
@@ -31,11 +32,94 @@ describe('SkeletonProvider', () => {
3132
<Heading level="h1" skeleton>
3233
Hello
3334
</Heading>
34-
<Image width={60} height={60} corners="rounded" src="" alt="image" />
35+
<Image width={60} height={60} rounded="corners" src="" alt="image" />
3536
<Text skeleton={{ characters: 4, lines: 2 }}>Hello</Text>
3637
</div>
3738
),
3839
})
3940
expect(skeleton.render()).toMatchSnapshot()
4041
})
42+
43+
it('allows additional attributes in skeleton', () => {
44+
const skeleton = doShallow({
45+
id: 'some-additiona-id',
46+
'data-testid': 'some-id-added-for-e2e',
47+
children: (
48+
<div>
49+
<Heading level="h1" skeleton>
50+
Hello
51+
</Heading>
52+
<Image width={60} height={60} rounded="corners" src="" alt="skeleton image" />
53+
<Text skeleton={{ characters: 4, lines: 2 }}>Hello</Text>
54+
</div>
55+
),
56+
})
57+
58+
expect(skeleton).toHaveProp('id', 'some-additiona-id')
59+
expect(skeleton).toHaveProp('data-testid', 'some-id-added-for-e2e')
60+
})
61+
62+
it('does not allow custom CSS', () => {
63+
const skeleton = doMount({
64+
children: (
65+
<div>
66+
<Heading
67+
className="custom-heading-class"
68+
style={{ background: 'red' }}
69+
level="h1"
70+
skeleton
71+
>
72+
Hello
73+
</Heading>
74+
<Image
75+
className="custom-image-class"
76+
style={{ background: 'red' }}
77+
width={60}
78+
height={60}
79+
rounded="corners"
80+
src=""
81+
alt="skeleton image"
82+
skeleton
83+
/>
84+
<Text
85+
className="custom-text-class"
86+
style={{ background: 'red' }}
87+
skeleton={{ characters: 4, lines: 2 }}
88+
>
89+
Hello
90+
</Text>
91+
</div>
92+
),
93+
})
94+
95+
expect(
96+
skeleton
97+
.find('HeadingSkeleton')
98+
.find('div')
99+
.hasClass('custom-heading-class')
100+
).toEqual(false)
101+
expect(skeleton.find('HeadingSkeleton').find('div')).not.toHaveProp('style')
102+
103+
expect(
104+
skeleton
105+
.find('ImageSkeleton')
106+
.find('div')
107+
.hasClass('custom-image-class')
108+
).toEqual(false)
109+
expect(skeleton.find('ImageSkeleton').find('div')).not.toHaveProp('style')
110+
111+
expect(
112+
skeleton
113+
.find('TextSkeleton')
114+
.find('div')
115+
.first()
116+
.hasClass('custom-text-class')
117+
).toEqual(false)
118+
expect(
119+
skeleton
120+
.find('TextSkeleton')
121+
.find('div')
122+
.first()
123+
).not.toHaveProp('style')
124+
})
41125
})

‎packages/SkeletonProvider/__tests__/__snapshots__/SkeletonProvider.spec.jsx.snap‎

Lines changed: 105 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ exports[`SkeletonProvider should render children as is if the show prop == false
99
</h1>
1010
<img
1111
alt="image"
12-
class="TDS_Image-modules__fluid___1qw3M"
13-
corners="rounded"
12+
class="TDS_Image-modules__fluid___1qw3M TDS_Borders-modules__rounded___3df1Q"
1413
height="60"
1514
src=""
1615
width="60"
@@ -24,24 +23,117 @@ exports[`SkeletonProvider should render children as is if the show prop == false
2423
`;
2524

2625
exports[`SkeletonProvider should render children as skeletons 1`] = `
26+
.c1 {
27+
height: 48px;
28+
min-width: 48px;
29+
border-radius: 24px;
30+
width: 100%;
31+
max-width: 100%;
32+
display: inline-block;
33+
overflow: hidden;
34+
background-color: #d8d8d8;
35+
background-repeat: no-repeat;
36+
background-position: 0 0;
37+
background-size: 200% 100%;
38+
background-image: linear-gradient( to right,#d8d8d8,#f7f7f8,#d8d8d8 );
39+
-webkit-animation-name: gaOlHX;
40+
animation-name: gaOlHX;
41+
-webkit-animation-duration: 2s;
42+
animation-duration: 2s;
43+
-webkit-animation-delay: 2s;
44+
animation-delay: 2s;
45+
-webkit-animation-iteration-count: infinite;
46+
animation-iteration-count: infinite;
47+
}
48+
49+
.c4 {
50+
height: 18px;
51+
min-width: 18px;
52+
border-radius: 9px;
53+
width: 72px;
54+
max-width: 100%;
55+
display: inline-block;
56+
overflow: hidden;
57+
background-color: #d8d8d8;
58+
background-repeat: no-repeat;
59+
background-position: 0 0;
60+
background-size: 200% 100%;
61+
background-image: linear-gradient( to right,#d8d8d8,#f7f7f8,#d8d8d8 );
62+
-webkit-animation-name: gaOlHX;
63+
animation-name: gaOlHX;
64+
-webkit-animation-duration: 2s;
65+
animation-duration: 2s;
66+
-webkit-animation-delay: 2s;
67+
animation-delay: 2s;
68+
-webkit-animation-iteration-count: infinite;
69+
animation-iteration-count: infinite;
70+
}
71+
72+
.c0 {
73+
max-width: 100%;
74+
display: inline-block;
75+
overflow: hidden;
76+
}
77+
78+
.c3 {
79+
width: 100%;
80+
display: inline-block;
81+
overflow: hidden;
82+
}
83+
84+
.c2 {
85+
width: 48px;
86+
height: 48px;
87+
display: inline-block;
88+
overflow: hidden;
89+
max-width: 100%;
90+
border-radius: 50%;
91+
background-color: #d8d8d8;
92+
background-repeat: no-repeat;
93+
background-position: 0 0;
94+
background-size: 200% 100%;
95+
background-image: linear-gradient( to right,#d8d8d8,#f7f7f8,#d8d8d8 );
96+
-webkit-animation-name: gaOlHX;
97+
animation-name: gaOlHX;
98+
-webkit-animation-duration: 2s;
99+
animation-duration: 2s;
100+
-webkit-animation-delay: 2s;
101+
animation-delay: 2s;
102+
-webkit-animation-iteration-count: infinite;
103+
animation-iteration-count: infinite;
104+
}
105+
27106
<div>
28-
<h1
29-
class="TDS_Heading-modules__h1___1iaO2 TDS_Heading-modules__wordBreak___UVmND TDS_Spacing-modules__noSpacing___XPYDG TDS_Heading-modules__secondary___3skcz"
107+
<div
108+
class="c0"
30109
>
31-
Hello
32-
</h1>
33-
<img
110+
<span
111+
aria-busy="true"
112+
class="c1"
113+
/>
114+
</div>
115+
<div
34116
alt="skeleton image"
35-
class="TDS_Image-modules__fluid___1qw3M"
36-
corners="rounded"
117+
class="c2"
37118
height="60"
38119
src=""
39120
width="60"
40121
/>
41-
<span
42-
class="TDS_Typography-modules__default___KlcpP TDS_Typography-modules__base___2nkPE TDS_Typography-modules__wordBreak___3OZx_ TDS_Typography-modules__baseFont___2Cfk4 TDS_Typography-modules__color___2CNH8"
122+
<div
123+
class="c3"
43124
>
44-
Hello
45-
</span>
125+
<div>
126+
<span
127+
aria-busy="true"
128+
class="c4"
129+
/>
130+
</div>
131+
<div>
132+
<span
133+
aria-busy="true"
134+
class="c4"
135+
/>
136+
</div>
137+
</div>
46138
</div>
47139
`;

‎packages/SkeletonProvider/index.cjs.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
require('./dist/index.css')
21
const SkeletonProvider = require('./dist/index.cjs')
32

43
module.exports = SkeletonProvider

‎packages/SkeletonProvider/index.es.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import './dist/index.css'
21
import SkeletonProvider from './dist/index.es'
32

43
export default SkeletonProvider

‎packages/SkeletonProvider/package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/SkeletonProvider/package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,20 @@
2121
},
2222
"homepage": "http://tds.telus.com",
2323
"peerDependencies": {
24-
"@tds/core-heading": ">=1.1.5",
25-
"@tds/core-image": ">=1.0.0",
26-
"@tds/core-text": ">=1.0.4",
27-
"react": ">=16.2",
28-
"react-dom": ">=15"
24+
"@tds/core-heading": "^2.2.5",
25+
"@tds/core-image": "^2.0.12",
26+
"@tds/core-text": "^2.0.3",
27+
"react": "^16.8.2",
28+
"react-dom": "^16.8.2",
29+
"styled-components": "^4.1.3"
2930
},
3031
"dependencies": {
32+
"@tds/core-colours": "^2.1.0",
3133
"prop-types": "^15.6.2",
3234
"recompose": "^0.30.0",
3335
"uuid": "^3.3.2"
3436
},
3537
"devDependencies": {
36-
"@tds/core-colours": "^1.1.2"
38+
"@tds/shared-safe-rest": "^1.0.0"
3739
}
3840
}

0 commit comments

Comments
 (0)