9 |
12 | );
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/src/components/App.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 |
4 | import App from './App';
5 |
6 | test('Snapshot', () => {
7 | const component = renderer.create(
8 |
5 |
8 |
22 |
131 | `;
132 |
--------------------------------------------------------------------------------
/src/components/card-item/CardItem.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/no-static-element-interactions */
2 |
3 | import React from 'react';
4 | import cx from 'classnames';
5 |
6 | import logo from '../../images/svgs/logo.svg';
7 | import back from '../../images/svgs/back.svg';
8 | import styles from './styles.scss';
9 |
10 | const onClick = (value, openedCard, toggleCard) => {
11 | if (openedCard) {
12 | return toggleCard(null);
13 | }
14 | return toggleCard(value);
15 | };
16 |
17 | const getContainerStyles = (openedCard) => {
18 | if (openedCard) {
19 | return cx(styles.container, styles.opened);
20 | }
21 | return styles.container;
22 | };
23 |
24 | const renderBrandLogo = (openedCard) => {
25 | if (openedCard) {
26 | return (
27 |
11 |
12 | 
16 |
17 |
21 | 18 | AgilePoker 19 |
20 |
25 |
130 |
28 |
129 |
31 |
128 |
35 |
36 | ?
37 |
38 |
39 |
43 |
44 | 0
45 |
46 |
47 |
51 |
52 | 1/2
53 |
54 |
55 |
59 |
60 | 1
61 |
62 |
63 |
67 |
68 | 2
69 |
70 |
71 |
75 |
76 | 3
77 |
78 |
79 |
83 |
84 | 5
85 |
86 |
87 |
91 |
92 | 8
93 |
94 |
95 |
99 |
100 | 13
101 |
102 |
103 |
107 |
108 | 21
109 |
110 |
111 |
115 |
116 | 34
117 |
118 |
119 |
123 |
124 | 55
125 |
126 |
127 | onClick(value, openedCard, toggleCard)}
49 | className={getContainerStyles(openedCard)}
50 | >
51 | {value}
52 | {renderBrandLogo(openedCard)}
53 | {renderBackButton(openedCard)}
54 |
55 | );
56 |
57 | CardItem.defaultProps = {
58 | openedCard: null,
59 | };
60 |
61 | CardItem.propTypes = {
62 | value: React.PropTypes.string.isRequired,
63 | openedCard: React.PropTypes.string,
64 | toggleCard: React.PropTypes.func.isRequired,
65 | };
66 |
67 | export default CardItem;
68 |
--------------------------------------------------------------------------------
/src/components/card-item/CardItem.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 |
4 | import CardItem from './CardItem';
5 |
6 | const props = {
7 | value: 'value',
8 | toggleCard: () => {},
9 | };
10 |
11 | test('Snapshot', () => {
12 | const component = renderer.create(
13 |
8 |
9 | value
10 |
11 |
12 | `;
13 |
--------------------------------------------------------------------------------
/src/components/card-item/styles.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | display: inline-block;
4 | background-color: #fafafa;
5 | border-radius: 4px;
6 | width: 5em;
7 | height: 8em;
8 | cursor: pointer;
9 | margin: .4em;
10 | border: solid 1px rgba(41, 0, 68, 0.7);
11 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
12 | }
13 |
14 | .container:hover {
15 | opacity: 0.75;
16 | }
17 |
18 | .opened {
19 | width: 9.5em;
20 | height: 15em;
21 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
22 | }
23 |
24 | .container > span {
25 | position: absolute;
26 | font-size: 2.5em;
27 | color: #2a0044;
28 | top: 50%;
29 | left: 50%;
30 | transform: translate(-50%, -60%);
31 | }
32 |
33 | .backButton {
34 | position: absolute;
35 | bottom: 0;
36 | left: -1.5em;
37 | }
38 |
39 | .brandLogo {
40 | position: absolute;
41 | margin: 0 auto;
42 | left: 0;
43 | right: 0;
44 | top: 11em;
45 | }
46 |
47 | .opened > span {
48 | font-size: 5.5em;
49 | font-weight: 300;
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/cards/Cards.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import CardItem from '../card-item/CardItem';
4 | import styles from './styles.scss';
5 |
6 | class Cards extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | openedCard: null,
12 | };
13 |
14 | this.cards = [
15 | '?', '0', '1/2', '1', '2', '3', '5', '8', '13', '21', '34', '55',
16 | ];
17 |
18 | this.toggleCard = this.toggleCard.bind(this);
19 | this.renderCards = this.renderCards.bind(this);
20 | }
21 |
22 | toggleCard(card) {
23 | this.setState({ openedCard: card });
24 | }
25 |
26 | renderCards() {
27 | if (this.state.openedCard) {
28 | return (
29 |
30 |
40 | );
41 | }
42 | return this.cards.map(card =>
43 |
36 |
39 | If there is no struggle,
37 |there is no progress.
38 |
58 |
64 | );
65 | }
66 | }
67 |
68 | export default Cards;
69 |
--------------------------------------------------------------------------------
/src/components/cards/Cards.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 |
4 | import Cards from './Cards';
5 |
6 | test('Snapshot', () => {
7 | const component = renderer.create(
8 |
59 |
63 |
60 | {this.renderCards()}
61 |
62 |
7 |
112 | `;
113 |
--------------------------------------------------------------------------------
/src/components/cards/styles.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-flow: row wrap;
4 | max-width: 28em;
5 | padding: 3em 0;
6 | margin: 0 auto;
7 | animation: show .7s ease-in-out;
8 | }
9 |
10 | .content {
11 | margin: 2em;
12 | text-align: center;
13 | }
14 |
15 | .opened {
16 | animation: show 1s ease-in-out;
17 | }
18 |
19 | .closed {
20 | animation: hide 1s ease-in-out;
21 | }
22 |
23 | .card {
24 | position: absolute;
25 | top: 50%;
26 | left: 50%;
27 | transform: translate(-50%, -50%);
28 | }
29 |
30 | .quotes {
31 | position: relative;
32 | line-height: 0.5;
33 | width: 165px;
34 | margin: 0 auto;
35 | }
36 |
37 | .quotes > p {
38 | font-size: 14px;
39 | font-weight: bold;
40 | font-style: oblique;
41 | color: #2a0044;
42 | }
43 |
44 | .firstText {
45 | padding-top: 2em;
46 | }
47 |
48 | .firstText::before{
49 | position: absolute;
50 | left: -0.5em;
51 | top: 0.2em;
52 | content: "\201C";
53 | font-size: 60px;
54 | font-weight: bold;
55 | color: #999;
56 | }
57 |
58 | .firstText::after{
59 | content: "";
60 | }
61 |
62 | @keyframes show {
63 | 0% { opacity: 0; }
64 | 100% { opacity: 1; }
65 | }
66 |
67 | @keyframes hide {
68 | 0% { opacity: 0; }
69 | 100% { opacity: 1; }
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/header/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import logo from '../../images/svgs/logo-white.svg';
4 | import styles from './styles.scss';
5 |
6 | const Header = () => (
7 |
10 |
111 |
13 |
110 |
17 |
18 | ?
19 |
20 |
21 |
25 |
26 | 0
27 |
28 |
29 |
33 |
34 | 1/2
35 |
36 |
37 |
41 |
42 | 1
43 |
44 |
45 |
49 |
50 | 2
51 |
52 |
53 |
57 |
58 | 3
59 |
60 |
61 |
65 |
66 | 5
67 |
68 |
69 |
73 |
74 | 8
75 |
76 |
77 |
81 |
82 | 13
83 |
84 |
85 |
89 |
90 | 21
91 |
92 |
93 |
97 |
98 | 34
99 |
100 |
101 |
105 |
106 | 55
107 |
108 |
109 |
9 |
10 | 
11 |
12 |
14 | AgilePoker
13 |
10 |
11 |
15 |
16 |
20 |