Skip to content

Commit cdb0a5a

Browse files
vforgevforge
authored
Merge pull request #74 from Wikia/cake-4662
CAKE-4662 | ✨ Add useInerval hook and Countdown component
2 parents 95a4260 + 8b94ff6 commit cdb0a5a

20 files changed

Lines changed: 4255 additions & 25 deletions

File tree

‎.eslintrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"jest"
8989
],
9090
"globals": {
91-
"mockComponent": true
91+
"mockComponent": true,
92+
"mountWithThemeProvider": true
9293
}
9394
}

‎config/jest.setup.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React from 'react';
22
import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
33
import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
4+
import { ThemeProvider } from 'styled-components';
5+
6+
import theme from '../source/theme';
47

58
Enzyme.configure({ adapter: new Adapter() });
69

710
global.mockComponent = name => props => <mocked-component name={name} {...props} />;
11+
12+
global.mountWithThemeProvider = child => Enzyme.mount(<ThemeProvider theme={theme}>{child}</ThemeProvider>);

‎config/styleguide.ExampleWrapper.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import styled from 'styled-components';
3+
import styled, { ThemeProvider } from 'styled-components';
44

55
import i18n from 'i18next';
66
import { initReactI18next } from "react-i18next";
77
import translation from 'design-system/i18n/en/design-system.json';
88

99
import ButtonGroup from '../source/components/ButtonGroup';
1010
import Button from '../source/components/Button';
11+
import theme from '../source/theme';
1112

1213
i18n
1314
.use(initReactI18next) // passes i18n down to react-i18next
@@ -101,16 +102,18 @@ class StyleguideExampleWrapper extends React.Component {
101102

102103
render() {
103104
return (
104-
<Wrapper>
105-
<Header>
106-
<ButtonGroup>
107-
{this.renderButton('transparent', this.setTransparentColor)}
108-
{this.renderButton('white', this.setWhiteColor)}
109-
{this.renderButton('black', this.setBlackColor)}
110-
</ButtonGroup>
111-
</Header>
112-
{this.renderExample()}
113-
</Wrapper>
105+
<ThemeProvider theme={theme}>
106+
<Wrapper>
107+
<Header>
108+
<ButtonGroup>
109+
{this.renderButton('transparent', this.setTransparentColor)}
110+
{this.renderButton('white', this.setWhiteColor)}
111+
{this.renderButton('black', this.setBlackColor)}
112+
</ButtonGroup>
113+
</Header>
114+
{this.renderExample()}
115+
</Wrapper>
116+
</ThemeProvider>
114117
);
115118
}
116119
}

‎config/styleguide.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
"ButtonGroup",
5151
"Checkbox",
5252
"ContentWell",
53+
"Countdown",
54+
"StyledCountdown",
5355
"Dropdown",
5456
"ExpandableText",
5557
"FandomBackgroundImage",
@@ -90,6 +92,7 @@
9092
"name": "Hooks",
9193
"directory": "hooks",
9294
"items": [
95+
"useInterval",
9396
"useLazyLoad"
9497
]
9598
},

docs/build/1.632b9c4b.js renamed to docs/build/1.7afce2f4.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/build/bundle.92379eec.js renamed to docs/build/bundle.76d7890b.js

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

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.92379eec.js"></script></body></html>
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.76d7890b.js"></script></body></html>

‎source/components/Countdown/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Click the theme buttons to re-initialize examples.
2+
3+
```js
4+
<Countdown onTick={(value) => console.log('Countdown: ', value)} />
5+
```

‎source/components/Countdown/__snapshots__/index.spec.js.snap‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Countdown calls callback 10 times with proper values Callback #0 1`] = `
4+
<Countdown
5+
onTick={[Function]}
6+
>
7+
<div
8+
className="countdown__wrapper"
9+
>
10+
<span
11+
className="countdown__value"
12+
>
13+
9
14+
</span>
15+
<svg
16+
className="countdown__animation is-high"
17+
>
18+
<circle
19+
cx="17"
20+
cy="17"
21+
r="15"
22+
/>
23+
</svg>
24+
</div>
25+
</Countdown>
26+
`;
27+
28+
exports[`Countdown calls callback 10 times with proper values Callback #1 1`] = `
29+
<Countdown
30+
onTick={[Function]}
31+
>
32+
<div
33+
className="countdown__wrapper"
34+
>
35+
<span
36+
className="countdown__value"
37+
>
38+
8
39+
</span>
40+
<svg
41+
className="countdown__animation is-high"
42+
>
43+
<circle
44+
cx="17"
45+
cy="17"
46+
r="15"
47+
/>
48+
</svg>
49+
</div>
50+
</Countdown>
51+
`;
52+
53+
exports[`Countdown calls callback 10 times with proper values Callback #2 1`] = `
54+
<Countdown
55+
onTick={[Function]}
56+
>
57+
<div
58+
className="countdown__wrapper"
59+
>
60+
<span
61+
className="countdown__value"
62+
>
63+
7
64+
</span>
65+
<svg
66+
className="countdown__animation is-medium"
67+
>
68+
<circle
69+
cx="17"
70+
cy="17"
71+
r="15"
72+
/>
73+
</svg>
74+
</div>
75+
</Countdown>
76+
`;
77+
78+
exports[`Countdown calls callback 10 times with proper values Callback #3 1`] = `
79+
<Countdown
80+
onTick={[Function]}
81+
>
82+
<div
83+
className="countdown__wrapper"
84+
>
85+
<span
86+
className="countdown__value"
87+
>
88+
6
89+
</span>
90+
<svg
91+
className="countdown__animation is-medium"
92+
>
93+
<circle
94+
cx="17"
95+
cy="17"
96+
r="15"
97+
/>
98+
</svg>
99+
</div>
100+
</Countdown>
101+
`;
102+
103+
exports[`Countdown calls callback 10 times with proper values Callback #4 1`] = `
104+
<Countdown
105+
onTick={[Function]}
106+
>
107+
<div
108+
className="countdown__wrapper"
109+
>
110+
<span
111+
className="countdown__value"
112+
>
113+
5
114+
</span>
115+
<svg
116+
className="countdown__animation is-medium"
117+
>
118+
<circle
119+
cx="17"
120+
cy="17"
121+
r="15"
122+
/>
123+
</svg>
124+
</div>
125+
</Countdown>
126+
`;
127+
128+
exports[`Countdown calls callback 10 times with proper values Callback #5 1`] = `
129+
<Countdown
130+
onTick={[Function]}
131+
>
132+
<div
133+
className="countdown__wrapper"
134+
>
135+
<span
136+
className="countdown__value"
137+
>
138+
4
139+
</span>
140+
<svg
141+
className="countdown__animation is-medium"
142+
>
143+
<circle
144+
cx="17"
145+
cy="17"
146+
r="15"
147+
/>
148+
</svg>
149+
</div>
150+
</Countdown>
151+
`;
152+
153+
exports[`Countdown calls callback 10 times with proper values Callback #6 1`] = `
154+
<Countdown
155+
onTick={[Function]}
156+
>
157+
<div
158+
className="countdown__wrapper"
159+
>
160+
<span
161+
className="countdown__value"
162+
>
163+
3
164+
</span>
165+
<svg
166+
className="countdown__animation is-low"
167+
>
168+
<circle
169+
cx="17"
170+
cy="17"
171+
r="15"
172+
/>
173+
</svg>
174+
</div>
175+
</Countdown>
176+
`;
177+
178+
exports[`Countdown calls callback 10 times with proper values Callback #7 1`] = `
179+
<Countdown
180+
onTick={[Function]}
181+
>
182+
<div
183+
className="countdown__wrapper"
184+
>
185+
<span
186+
className="countdown__value"
187+
>
188+
2
189+
</span>
190+
<svg
191+
className="countdown__animation is-low"
192+
>
193+
<circle
194+
cx="17"
195+
cy="17"
196+
r="15"
197+
/>
198+
</svg>
199+
</div>
200+
</Countdown>
201+
`;
202+
203+
exports[`Countdown calls callback 10 times with proper values Callback #8 1`] = `
204+
<Countdown
205+
onTick={[Function]}
206+
>
207+
<div
208+
className="countdown__wrapper"
209+
>
210+
<span
211+
className="countdown__value"
212+
>
213+
1
214+
</span>
215+
<svg
216+
className="countdown__animation is-low"
217+
>
218+
<circle
219+
cx="17"
220+
cy="17"
221+
r="15"
222+
/>
223+
</svg>
224+
</div>
225+
</Countdown>
226+
`;
227+
228+
exports[`Countdown calls callback 10 times with proper values Callback #9 1`] = `
229+
<Countdown
230+
onTick={[Function]}
231+
>
232+
<div
233+
className="countdown__wrapper"
234+
>
235+
<span
236+
className="countdown__value"
237+
>
238+
0
239+
</span>
240+
</div>
241+
</Countdown>
242+
`;
243+
244+
exports[`Countdown renders correctly 1`] = `
245+
<Countdown
246+
onTick={[Function]}
247+
>
248+
<div
249+
className="countdown__wrapper"
250+
>
251+
<span
252+
className="countdown__value"
253+
>
254+
10
255+
</span>
256+
<svg
257+
className="countdown__animation is-high"
258+
>
259+
<circle
260+
cx="17"
261+
cy="17"
262+
r="15"
263+
/>
264+
</svg>
265+
</div>
266+
</Countdown>
267+
`;

0 commit comments

Comments
 (0)