Skip to content

Commit 13b9859

Browse files
author
Tiko
committed
resolved conflict
1 parent b0d7b9d commit 13b9859

File tree

11 files changed

+149
-163
lines changed

11 files changed

+149
-163
lines changed

‎.gitlab-ci.yml‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,6 @@ lint:
2727
script:
2828
- yarn run lint
2929

30-
# No need to run this since there are no tests
31-
#test_jest:
32-
# stage: test
33-
# before_script:
34-
# - yarn install --frozen-lockfile
35-
# script:
36-
# - yarn run test:ci
37-
3830
release_docker:
3931
stage: release
4032
image: docker:19.03.1

‎.prettierrc‎

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

src/components/Button.tsx renamed to src/components/Button/Button.tsx

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
33
import { Link } from 'gatsby';
4-
import theme from '../styles/theme';
4+
import theme from '../../styles/theme';
55
import { ButtonProps } from './Button.types';
66

7-
const ButtonBase: React.FC<ButtonProps> = ({
7+
const { size, height, spacing, font, weight, color } = theme.typography.button;
8+
9+
const buttonStyle = css<{ disabled?: boolean }>`
10+
display: inline-block;
11+
background: transparent;
12+
padding: 0.66em 2em;
13+
border-color: ${theme.colors.tertiary};
14+
border-style: solid;
15+
border-width: 0.15rem;
16+
border-radius: 10rem;
17+
transition: all 0.2s ease;
18+
font-size: ${size};
19+
line-height: ${height};
20+
letter-spacing: ${spacing};
21+
font-family: ${font};
22+
font-weight: ${weight};
23+
color: ${color};
24+
text-decoration: none;
25+
&:hover {
26+
color: ${(props) =>
27+
props.disabled ? theme.colors.tertiary : theme.colors.white};
28+
background: ${(props) =>
29+
props.disabled ? 'transparant' : theme.colors.primary};
30+
border-color: ${(props) =>
31+
props.disabled ? theme.colors.tertiary : theme.colors.primary};
32+
cursor: pointer;
33+
}
34+
`;
35+
36+
const StyledGatsbyButton = styled(Link)<{ disabled?: boolean }>`
37+
${buttonStyle}
38+
`;
39+
const StyledButton = styled.button<{ disabled?: boolean }>`
40+
${buttonStyle}
41+
`;
42+
const StyledAnchor = styled.a<{ disabled?: boolean }>`
43+
${buttonStyle}
44+
`;
45+
46+
const Button: React.FC<ButtonProps> = ({
847
href,
948
useGatsbyLink = false,
10-
className = '',
1149
rel,
1250
submit,
1351
target,
@@ -18,63 +56,29 @@ const ButtonBase: React.FC<ButtonProps> = ({
1856
if (useGatsbyLink) {
1957
if (href) {
2058
return (
21-
<Link
59+
<StyledGatsbyButton
2260
to={href}
23-
className={`button ${className}`}
2461
rel={rel}
2562
target={target}
2663
onClick={onClick}
2764
>
2865
{children}
29-
</Link>
66+
</StyledGatsbyButton>
3067
);
3168
}
3269
}
3370
if (submit) {
3471
return (
35-
<button
36-
type="button"
37-
className={`button ${className}`}
38-
onClick={onClick}
39-
disabled={disabled}
40-
>
72+
<StyledButton type="button" onClick={onClick} disabled={disabled}>
4173
{children}
42-
</button>
74+
</StyledButton>
4375
);
4476
}
4577
return (
46-
<a
47-
href={href}
48-
className={`button ${className}`}
49-
rel={rel}
50-
target={target}
51-
onClick={onClick}
52-
>
78+
<StyledAnchor href={href} rel={rel} target={target} onClick={onClick}>
5379
{children}
54-
</a>
80+
</StyledAnchor>
5581
);
5682
};
57-
const Button =
58-
styled(ButtonBase) <
59-
ButtonProps >
60-
`
61-
display: inline-block;
62-
background: transparent;
63-
padding: 0.66em 2em;
64-
border-color: ${theme.colors.tertiary};
65-
border-style: solid;
66-
border-width: 0.15rem;
67-
border-radius: 10rem;
68-
transition: all 0.2s ease;
69-
&:hover {
70-
color: ${(props) =>
71-
props.disabled ? theme.colors.tertiary : theme.colors.white};
72-
background: ${(props) =>
73-
props.disabled ? 'transparant' : theme.colors.primary};
74-
border-color: ${(props) =>
75-
props.disabled ? theme.colors.tertiary : theme.colors.primary};
76-
cursor: pointer;
77-
}
78-
`;
7983

8084
export default Button;

src/components/Button.types.ts renamed to src/components/Button/Button.types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
export interface ButtonProps {
44
href?: string;
55
useGatsbyLink?: boolean;
6-
className?: string;
76
rel?: string;
87
submit?: boolean;
98
target?: string;

‎src/containers/ContactForm/ContactForm.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
// TODO: Change class to be const Component = props => <JSX />
66
import React, { useState } from 'react';
77
import axios from 'axios';
8-
import {v4 as uuidv4} from 'uuid';
8+
import { v4 as uuidv4 } from 'uuid';
99
import TextBlock from '../TextBlock/TextBlock';
1010
import InputField from '../../components/InputField';
1111
import {
1212
ContactFormContainer,
1313
InputTextArea,
1414
StyledNotification,
1515
} from './ContactForm.components';
16-
import Button from '../../components/Button';
16+
import Button from '../../components/Button/Button';
1717

1818
interface NotificationProps {
1919
type: string;
@@ -37,7 +37,9 @@ const ContactForm: React.FC<Record<string, never>> = () => {
3737
const [formValues, setFormValues] = useState(initialFormValues);
3838
// eslint-disable-next-line prettier/prettier
3939
const [notifications, setNotifications] = useState<NotificationType[]>([]);
40-
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
40+
const handleChange = (
41+
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
42+
) => {
4143
setFormValues({
4244
...formValues,
4345
[e.target.id]: e.target.value,
@@ -113,13 +115,14 @@ const ContactForm: React.FC<Record<string, never>> = () => {
113115
/>
114116
<Button
115117
submit
116-
onClick={()=>submit()}
117-
disabled={(
118-
formValues.contact==='' ||
119-
formValues.email==='' ||
120-
formValues.phone==='' ||
121-
formValues.contents===''
122-
)}>
118+
onClick={() => submit()}
119+
disabled={
120+
formValues.contact === '' ||
121+
formValues.email === '' ||
122+
formValues.phone === '' ||
123+
formValues.contents === ''
124+
}
125+
>
123126
Verzenden
124127
</Button>
125128
</form>

‎src/containers/Credits/Credits.components.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import theme from '../../styles/theme';
4-
import Button from '../../components/Button';
4+
import Button from '../../components/Button/Button';
55

66
const { mediaQueryMin } = theme;
77
export const CreditsContainer = styled.div`
@@ -27,9 +27,12 @@ export const Container = styled.div`
2727
}
2828
`;
2929

30-
export const Column = styled.div`
31-
display: flex;
32-
flex-direction: column;
30+
interface ColumnProps {
31+
gridTemplateRows: string;
32+
}
33+
export const Column = styled.div<ColumnProps>`
34+
display: grid;
35+
grid-template-rows: ${(props) => props.gridTemplateRows};
3336
`;
3437

3538
export const CreditItemContainer = styled.div`

‎src/containers/Header.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import theme from '../styles/theme';
4-
import Button from '../components/Button';
4+
import Button from '../components/Button/Button';
55

66
const { colors, mediaQueryMin, containerWidth } = theme;
77

@@ -10,10 +10,7 @@ const arrowDown = require('../images/icons/ui/carret-down.svg');
1010
interface HeaderBaseProps {
1111
backgroundImage: string;
1212
}
13-
const HeaderBase =
14-
styled.header <
15-
HeaderBaseProps >
16-
`
13+
const HeaderBase = styled.header<HeaderBaseProps>`
1714
background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent),
1815
url(${(props) => props.backgroundImage});
1916
background-size: cover !important;
@@ -25,7 +22,7 @@ const HeaderBase =
2522
@media (${mediaQueryMin.sm}) {
2623
padding: 3em ${containerWidth.sm};
2724
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 50%),
28-
url(${(props) => props.backgroundImage});
25+
url(${(props) => props.backgroundImage});
2926
}
3027
@media (${mediaQueryMin.md}) {
3128
padding: 2em ${containerWidth.md};

‎src/containers/TextBlock/TextBlock.components.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
import Button from '../../components/Button';
3+
import Button from '../../components/Button/Button';
44

55
interface SubtitleBaseProps {
66
className?: string;
@@ -22,10 +22,7 @@ export const Figure = styled.figure`
2222
interface SubtitleProps {
2323
hasTitle?: string;
2424
}
25-
export const Subtitle =
26-
styled(SubtitleBase) <
27-
SubtitleProps >
28-
`
25+
export const Subtitle = styled(SubtitleBase)<SubtitleProps>`
2926
margin-bottom: ${(props) => (props.hasTitle ? '2rem' : '1.2em')};
3027
`;
3128

‎src/layouts/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import styled, { createGlobalStyle } from 'styled-components';
3-
import Button from '../components/Button';
3+
import Button from '../components/Button/Button';
44
import AllSocials from '../lib/Socials';
55
import theme from '../styles/theme';
66

@@ -25,7 +25,7 @@ const FooterColInnerContainer = styled.div`
2525
`;
2626

2727
type FooterColProps = {
28-
children: React.ReactNode,
28+
children: React.ReactNode;
2929
};
3030

3131
const FooterCol = ({ children }: FooterColProps) => (

‎src/pages/contact.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
import Layout from '../layouts/MainLayout';
44
import ContactForm from '../containers/ContactForm/ContactForm';
55
import { Container, Row, Col } from '../lib/Grid';
6-
import Button from '../components/Button';
6+
import Button from '../components/Button/Button';
77
import Header from '../containers/Header';
88

99
const pageSettings = {

0 commit comments

Comments
 (0)