Skip to content

Commit e961eb3

Browse files
author
Tiko
committed
created folder for components with .types or .components files and remove interfaces from styled components
1 parent 153a513 commit e961eb3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+691
-675
lines changed

src/components/ImageBlock.tsx renamed to src/components/ImageBlock/ImageBlock.components.tsx

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React from 'react';
21
import styled from 'styled-components';
3-
import theme from '../styles/theme';
2+
import theme from '../../styles/theme';
43

54
const { mediaQueryMin, colors } = theme;
65

@@ -38,19 +37,4 @@ const ImageBlockFigure = styled.figure`
3837
}
3938
`;
4039

41-
interface Props {
42-
src: string;
43-
alt: string;
44-
}
45-
46-
const ImageBlock: React.FC<Props> = ({ src, alt }) => {
47-
return (
48-
<section>
49-
<ImageBlockFigure>
50-
<img src={src} alt={alt} />
51-
</ImageBlockFigure>
52-
</section>
53-
);
54-
};
55-
56-
export default ImageBlock;
40+
export default ImageBlockFigure;

‎src/components/ImageBlock/ImageBlock.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import ImageBlockProps from './ImageBlock.types';
3+
import ImageBlockFigure from './ImageBlock.components';
4+
5+
const ImageBlock: React.FC<ImageBlockProps> = ({ src, alt }) => {
6+
return (
7+
<section>
8+
<ImageBlockFigure>
9+
<img src={src} alt={alt} />
10+
</ImageBlockFigure>
11+
</section>
12+
);
13+
};
14+
15+
export default ImageBlock;

‎src/components/ImageBlock/ImageBlock.types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default interface ImageBlockProps {
2+
src: string;
3+
alt: string;
4+
}

src/components/Typography.tsx renamed to src/components/Typography/Typography.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import styled, { css } from 'styled-components';
3-
import theme from '../styles/theme';
3+
import theme from '../../styles/theme';
44
import { QuoteProps } from './Typography.types';
55

66
const { fontWeights, fonts, typography } = theme;

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

File renamed without changes.

‎src/containers/Container.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import theme from '../styles/theme';
33

44
const { mediaQueryMin, containerWidth } = theme;
55

6-
interface ContainerProps {
7-
align?: string;
8-
}
9-
const Container = styled.section<ContainerProps>`
6+
const Container = styled.section<{ align?: string }>`
107
padding: 1em ${containerWidth.xs};
118
display: flex;
129
flex-direction: column;

‎src/containers/ContentBlocks/ContentBlocks.components.ts‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import styled from 'styled-components';
22
import theme from '../../styles/theme';
33

44
const { mediaQueryMin, containerWidth } = theme;
5+
const reversed = '1 / 3 / 1 / 4';
6+
const normal = '1 / 2 / 1 / 3';
7+
const introPadding = '5em';
58

6-
interface TextAndImageBaseProps {
9+
export const TextAndImageBase = styled.div<{
710
padded?: boolean;
811
gutter?: string;
912
grid?: string;
1013
fluid?: boolean;
11-
}
12-
export const TextAndImageBase = styled.div<TextAndImageBaseProps>`
14+
}>`
1315
max-width: 100% !important;
1416
display: flex;
1517
flex-direction: column;
@@ -32,12 +34,11 @@ export const TextAndImageBase = styled.div<TextAndImageBaseProps>`
3234
}
3335
`;
3436

35-
interface ImageWrapperProps {
37+
export const ImageWrapper = styled.figure<{
3638
pos?: string;
3739
small?: boolean;
3840
transform?: string;
39-
}
40-
export const ImageWrapper = styled.figure<ImageWrapperProps>`
41+
}>`
4142
grid-area: ${(props) => props.pos};
4243
width: ${(props) => (props.small ? '70%' : '100%')};
4344
margin: 1em 1em;
@@ -50,14 +51,10 @@ export const ImageWrapper = styled.figure<ImageWrapperProps>`
5051
}
5152
`;
5253

53-
const reversed = '1 / 3 / 1 / 4';
54-
const normal = '1 / 2 / 1 / 3';
55-
56-
interface ContentWrapperProps {
54+
export const ContentWrapper = styled.div<{
5755
reverse?: boolean;
5856
fluid?: boolean;
59-
}
60-
export const ContentWrapper = styled.div<ContentWrapperProps>`
57+
}>`
6158
margin: 2em 1em;
6259
max-width: 100vw;
6360
@media (${mediaQueryMin.xs}) {
@@ -72,19 +69,16 @@ export const ContentWrapper = styled.div<ContentWrapperProps>`
7269
}
7370
`;
7471

75-
interface GalleryWrapperProps {
72+
export const GalleryWrapper = styled.section<{
7673
width?: number;
77-
}
78-
export const GalleryWrapper = styled.section<GalleryWrapperProps>`
74+
}>`
7975
display: flex;
8076
& > * {
8177
width: ${(props) => props.width || 100}%;
8278
padding: 0.5em;
8379
}
8480
`;
8581

86-
const introPadding = '5em';
87-
8882
export const IntroductionBase = styled.div`
8983
padding: 10vh ${containerWidth.sm};
9084
@media (${mediaQueryMin.sm}) {

‎src/containers/ContentPageHeader/ContentPageHeader.components.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import theme from '../../styles/theme';
33

44
const { mediaQueryMin, containerWidth } = theme;
55

6-
interface MainHeaderProps {
6+
export const MainHeader = styled.header<{
77
img: string;
88
shadow?: boolean;
99
align?: string;
@@ -12,8 +12,7 @@ interface MainHeaderProps {
1212
bgY?: string;
1313
hero?: boolean;
1414
blendMode?: string;
15-
}
16-
export const MainHeader = styled.header<MainHeaderProps>`
15+
}>`
1716
background: url(${(props) => props.img})
1817
${(props) =>
1918
props.shadow &&

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React from 'react';
22
import styled from 'styled-components';
33
import theme from '../../styles/theme';
44
import Button from '../../components/Button/Button';
5-
import { Subtitle } from '../../components/Typography';
5+
import { Subtitle } from '../../components/Typography/Typography';
6+
import { CreditItemProps, CreditItemWithLinksProps } from './Credits.types';
67

78
const { mediaQueryMin } = theme;
89
export const CreditsContainer = styled.div`
@@ -28,12 +29,9 @@ export const Container = styled.div`
2829
}
2930
`;
3031

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

3937
export const CreditItemContainer = styled.div`
@@ -46,10 +44,6 @@ export const CreditText = styled.p`
4644
margin-bottom: 0.5em;
4745
`;
4846

49-
interface CreditItemProps {
50-
title: string;
51-
credits: string[];
52-
}
5347
export const CreditItem: React.FC<CreditItemProps> = ({ title, credits }) => (
5448
<CreditItemContainer>
5549
<Subtitle>{title}</Subtitle>
@@ -59,12 +53,6 @@ export const CreditItem: React.FC<CreditItemProps> = ({ title, credits }) => (
5953
</CreditItemContainer>
6054
);
6155

62-
interface CreditItemWithLinksProps {
63-
title: string;
64-
credits: string[];
65-
links: string[];
66-
}
67-
6856
export const CreditItemWithLinks: React.FC<CreditItemWithLinksProps> = ({
6957
title,
7058
credits,

‎src/containers/Credits/Credits.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,9 @@ import {
77
CreditsContainer,
88
TitleContainer,
99
} from './Credits.components';
10+
import CreditsProps from './Credits.types';
1011

11-
type ColumnData = {
12-
title: string;
13-
content: string[];
14-
};
15-
16-
interface Props {
17-
special: string[];
18-
resources: string[];
19-
resourceLinks: string[];
20-
columnOne: ColumnData[];
21-
columnTwo: ColumnData[];
22-
}
23-
24-
const Credits: React.FC<Props> = ({
12+
const Credits: React.FC<CreditsProps> = ({
2513
special,
2614
resources,
2715
resourceLinks,

0 commit comments

Comments
 (0)