Skip to content
This repository was archived by the owner on Jul 14, 2020. It is now read-only.

Commit 7c62ca1

Browse files
jorgelainfiestajorgelainfiesta
committed
Refactor index styles
Rename component to use capital with git Fix issues raised by Min
1 parent d59b327 commit 7c62ca1

File tree

16 files changed

+457
-345
lines changed

16 files changed

+457
-345
lines changed

‎packages/website/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"react-dom": "^16.12.0",
2424
"react-helmet": "^5.2.1",
2525
"styled-components": "^5.0.0",
26-
"styled-reset-advanced": "^1.0.3"
26+
"styled-reset-advanced": "^1.0.3",
27+
"styled-system": "^5.1.4"
2728
},
2829
"devDependencies": {
2930
"prettier": "^1.19.1"

‎packages/website/src/components/Box.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import styled from 'styled-components';
2+
import {
3+
compose,
4+
space,
5+
layout,
6+
flexbox,
7+
} from 'styled-system';
8+
9+
const Box = styled.div`
10+
box-sizing: border-box;
11+
${compose(
12+
space,
13+
layout,
14+
flexbox,
15+
)}
16+
`;
17+
18+
export default Box;

‎packages/website/src/components/Flex.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Box from './Box';
2+
import styled from 'styled-components';
3+
4+
const Flex = styled(Box)`
5+
display: flex;
6+
`;
7+
8+
export default Flex;

‎packages/website/src/components/Hero.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Section from './Section';
4+
5+
const HeroLine = styled.section`
6+
border-left: 9px solid ${({ theme }) => theme.colors.brand.darkBlue};
7+
padding: ${({ theme }) => theme.space.medium} 0;
8+
`;
9+
10+
const Hero = ({ children }) => (
11+
(
12+
<HeroLine>
13+
<Section as='div'>
14+
{children}
15+
</Section>
16+
</HeroLine>
17+
)
18+
);
19+
20+
export default Hero;

‎packages/website/src/components/Image.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styled from 'styled-components';
2+
import {
3+
compose,
4+
space,
5+
layout
6+
} from 'styled-system';
7+
8+
const Picture = styled.img`
9+
display: block;
10+
width: 100%;
11+
${compose(
12+
space,
13+
layout
14+
)}
15+
`;
16+
17+
export default Picture;

‎packages/website/src/components/Section.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components';
2+
3+
const Section = styled.section`
4+
padding: ${({ theme }) => theme.space.large} ${({ theme }) => theme.space.medium};
5+
max-width: ${({ theme }) => theme.breakpoints.xLarge};
6+
margin: 0 auto;
7+
`;
8+
9+
export default Section;

‎packages/website/src/components/Text.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styled from 'styled-components';
2+
3+
const Text = styled.p`
4+
margin-bottom: ${({ theme }) => theme.space.medium};
5+
`;
6+
7+
export const Strong = styled.strong`
8+
font-weight: ${({ theme }) => theme.fontWeights.bold};
9+
`;
10+
11+
export default Text;

‎packages/website/src/components/WhyBigTest.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Section from '../components/Section';
4+
import { H2, H4 } from '../components/heading';
5+
6+
const List = styled.ul`
7+
list-style: none;
8+
display: flex;
9+
flex-flow: row wrap;
10+
width: 100%;
11+
`;
12+
13+
const Item = styled.li`
14+
display: block;
15+
box-sizing: border-box;
16+
padding-bottom: ${({ theme }) => theme.space.large};
17+
width: 100%;
18+
19+
@media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
20+
width: 50%;
21+
padding-right: ${({ theme }) => theme.space.large};
22+
}
23+
24+
@media (min-width: ${({ theme }) => theme.breakpoints.large}) {
25+
width: ${(1/3)*100}%;
26+
padding-right: ${({ theme }) => theme.space.xLarge};
27+
order: ${({ largeOrder }) => largeOrder};
28+
}
29+
`;
30+
31+
const WhyBigTest = () => (
32+
<Section>
33+
<H2 color='secondary'>Why BigTest?</H2>
34+
<List>
35+
<Item largeOrder='0'>
36+
<H4>
37+
Seriously fast
38+
</H4>
39+
<p>
40+
Designed and implemented for speed.
41+
</p>
42+
</Item>
43+
<Item largeOrder='3'>
44+
<H4>
45+
Experienced-centered
46+
</H4>
47+
<p>
48+
Test what matters to users through a refined developer experience.
49+
</p>
50+
</Item>
51+
<Item largeOrder='1'>
52+
<H4>
53+
Cross-Browser
54+
</H4>
55+
<p>
56+
Chrome, Safari, Firefox, Opera, etc.
57+
</p>
58+
</Item>
59+
<Item largeOrder='4'>
60+
<H4>
61+
Cross-Device
62+
</H4>
63+
<p>
64+
Windows, macOS, iOS, Android, etc.
65+
</p>
66+
</Item>
67+
<Item largeOrder='2'>
68+
<H4>
69+
Cross-Framework
70+
</H4>
71+
<p>
72+
React, Vue, Ember, Angular, etc.
73+
</p>
74+
</Item>
75+
<Item largeOrder='5'>
76+
<H4>
77+
Cross-Test Framework
78+
</H4>
79+
<p>
80+
Mocha, Jasmine, Jest, etc.
81+
</p>
82+
</Item>
83+
</List>
84+
</Section>
85+
);
86+
87+
export default WhyBigTest;

‎packages/website/src/components/content.js

-49
This file was deleted.

‎packages/website/src/components/heading.js

+26-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
11
import styled from 'styled-components';
22

33
const H1 = styled.h1`
4-
color: var(--color-pink);
5-
font-weight: 200;
6-
line-height: var(--space-triple);
4+
font-family: ${({ theme }) => theme.fonts.heading};
5+
color: ${({ theme }) => theme.colors.primary};
6+
font-weight: ${({ theme }) => theme.fontWeights.light};
7+
font-size: ${({ theme }) => theme.fontSizes.xxxLarge};
8+
line-height: ${({ theme }) => theme.lineHeights.heading};
9+
margin-bottom: ${({ theme }) => theme.space.large};
710
`;
811

912
const H2 = styled.h2`
10-
color: ${props => {
11-
if (props.color === "light-blue") {
12-
return 'var(--color-light-blue)';
13-
} else if (props.color === "dark-blue") {
14-
return 'var(--color-dark-blue)';
15-
} else if (props.color === "pink") {
16-
return 'var(--color-pink)';
17-
} else {
18-
return 'var(--input-color)';
19-
}
20-
}};
13+
color: ${({ color, theme }) => ((color) ? theme.colors[color] : theme.colors.primary)};
14+
font-family: ${({ theme }) => theme.fonts.heading};
15+
font-weight: ${({ theme }) => theme.fontWeights.body};
16+
font-size: ${({ theme }) => theme.fontSizes.xLarge};
17+
line-height: ${({ theme }) => theme.lineHeights.heading};
18+
margin-bottom: ${({ theme }) => theme.space.large};
2119
`;
2220

2321
const H3 = styled.h3`
24-
color: var(--color-light-blue);
22+
color: ${({ color, theme }) => (color) ? theme.colors[color] : theme.colors.primary};
23+
font-family: ${({ theme }) => theme.fonts.heading};
24+
font-weight: ${({ theme }) => theme.fontWeights.bold};
25+
font-size: ${({ theme }) => theme.fontSizes.medium};
26+
line-height: ${({ theme }) => theme.lineHeights.heading};
27+
margin-bottom: ${({ theme }) => theme.space.medium};
2528
`;
2629

2730
const H4 = styled.h4`
28-
color: var(--color-dark-blue);
29-
margin-bottom: var(--space-half);
31+
color: ${({ color, theme }) => (color) ? theme.colors[color] : theme.colors.primary};
32+
font-family: ${({ theme }) => theme.fonts.heading};
33+
font-weight: ${({ theme }) => theme.fontWeights.bold};
34+
font-size: ${({ theme }) => theme.fontSizes.small};
35+
line-height: ${({ theme }) => theme.lineHeights.heading};
36+
margin-bottom: ${({ theme }) => theme.space.small};
37+
text-transform: uppercase;
38+
letter-spacing: 1px;
3039
`;
3140

3241
export { H1, H2, H3, H4 };

‎packages/website/src/components/image.js

-9
This file was deleted.

‎packages/website/src/components/row.js

-35
This file was deleted.

0 commit comments

Comments
 (0)