Skip to content

Commit 67b5e5f

Browse files
minheqminheq
committed
feat: add components
1 parent e09c1c2 commit 67b5e5f

File tree

7 files changed

+141
-13
lines changed

7 files changed

+141
-13
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"publishConfig": {
44
"access": "public"
55
},
6-
"version": "0.0.1",
6+
"version": "0.0.3",
77
"description": "WeTrust UI Components",
88
"main": "cjs/index.js",
99
"module": "esm/index.js",

‎src/BlogSection.stories.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
4+
import { BlogSection } from './BlogSection';
5+
6+
storiesOf('BlogSection', module).add('Default', () => <BlogSection />);

‎src/BlogSection.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -165,17 +165,7 @@ export const BlogSection = (): JSX.Element => {
165165
if (!blogPosts.length) return <Text>Loading...</Text>;
166166

167167
return (
168-
<Box paddingVertical={60}>
169-
<Box paddingBottom={60}>
170-
<Heading
171-
align="center"
172-
size="xxxlarge"
173-
color="secondary"
174-
accessibilityLevel={2}
175-
>
176-
Our Blog
177-
</Heading>
178-
</Box>
168+
<Box>
179169
<Container>
180170
<Row>
181171
<Column large={8} xlarge={8}>

‎src/CTAButton.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,21 @@ export const CTAButton = (props: ButtonProps): JSX.Element => {
66
return (
77
<Button
88
color="primary"
9+
appearance="primary"
910
overrides={{
1011
Touchable: {
1112
style: ({ appearance }): ViewStyle => ({
1213
minWidth: 280,
1314
backgroundColor:
1415
appearance === 'primary' ? '#e98100' : 'transparent',
1516
borderWidth: appearance === 'outline' ? 1 : 0,
17+
borderColor: '#e98100',
1618
}),
1719
},
1820
Title: {
19-
style: (): TextStyle => ({
21+
style: ({ appearance }: any): TextStyle => ({
2022
fontSize: 18,
23+
color: appearance === 'primary' ? 'white' : '#e98100',
2124
}),
2225
},
2326
}}

‎src/TeamMember.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
4+
import { TeamMember } from './TeamMember';
5+
6+
storiesOf('TeamMember', module).add('Default', () => (
7+
<TeamMember
8+
avatarUrl="https://picsum.photos/200/200"
9+
fullName="Full Name"
10+
linkedInUrl="https://www.linkedin.com/in/abc/"
11+
twitterUrl="https://twitter.com/abc"
12+
bio="Bio put whatever you want here"
13+
/>
14+
));

‎src/TeamMember.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { Box, Heading, Divider, Text, Avatar, Visible } from 'paramount-ui';
2+
import React from 'react';
3+
4+
import { Link } from './Link';
5+
6+
const LinkedInIcon = (): JSX.Element => {
7+
return (
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width="24"
11+
height="24"
12+
viewBox="0 0 24 24"
13+
>
14+
<path
15+
fill="#909090"
16+
fillRule="evenodd"
17+
d="M19.102 18.122h-2.837v-4.425c0-.728-.061-1.253-.183-1.577-.224-.545-.661-.818-1.312-.818-.65 0-1.108.243-1.373.728-.203.363-.305.899-.305 1.606v4.486h-2.806V9.06H13v1.243h.03c.204-.404.529-.738.976-1 .489-.324 1.058-.486 1.709-.486 1.322 0 2.247.415 2.776 1.243.407.667.61 1.698.61 3.092v4.971zM8.308 7.33c-.338.339-.74.508-1.206.508-.465 0-.868-.17-1.206-.508a1.648 1.648 0 0 1-.508-1.207c0-.465.17-.867.508-1.206.338-.338.74-.508 1.206-.508.466 0 .868.17 1.206.508.34.339.508.741.508 1.206 0 .466-.169.868-.508 1.207zm-2.43 10.793h2.938V8.816H5.878v9.306zm14.63-14.63C18.253 1.24 15.417.077 12 0 8.582.076 5.746 1.24 3.493 3.493 1.239 5.746.075 8.583 0 12c.075 3.418 1.24 6.254 3.493 8.507C5.746 22.761 8.582 23.924 12 24c3.417-.076 6.254-1.24 8.507-3.493C22.761 18.254 23.924 15.418 24 12c-.076-3.417-1.24-6.254-3.493-8.507z"
18+
/>
19+
</svg>
20+
);
21+
};
22+
23+
const TwitterIcon = () => {
24+
return (
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
width="25"
28+
height="24"
29+
viewBox="0 0 25 24"
30+
>
31+
<path
32+
fill="#909090"
33+
fillRule="evenodd"
34+
d="M19.123 8.789c.3-.226.592-.488.873-.789.282-.3.498-.6.648-.901-.488.263-1.052.432-1.69.507.6-.413 1.051-1.014 1.352-1.803-.601.376-1.295.639-2.084.789-1.09-1.09-2.338-1.305-3.747-.648-1.408.657-2 1.85-1.774 3.577-1.54-.113-2.837-.479-3.888-1.099a11.845 11.845 0 0 1-2.76-2.225 3.247 3.247 0 0 0-.254 2.48c.244.863.648 1.464 1.212 1.802-.527-.037-.978-.17-1.353-.395.037.902.282 1.606.733 2.113.45.507 1.032.873 1.746 1.099-.45.112-.901.132-1.352.056.413 1.315 1.39 2.066 2.93 2.254-.564.45-1.278.808-2.141 1.07a5.889 5.889 0 0 1-2.535.225c.676.451 1.427.817 2.253 1.099.826.282 1.784.404 2.873.366 2.705-.15 4.854-1.08 6.451-2.789 1.596-1.708 2.431-3.971 2.507-6.788M12.25 0c3.417.076 6.253 1.24 8.507 3.493 2.254 2.254 3.417 5.09 3.493 8.507-.076 3.418-1.24 6.253-3.493 8.507-2.254 2.254-5.09 3.417-8.507 3.493-3.418-.076-6.254-1.24-8.507-3.493C1.489 18.253.325 15.418.25 12c.075-3.417 1.24-6.253 3.493-8.507C5.996 1.239 8.832.076 12.25 0"
35+
/>
36+
</svg>
37+
);
38+
};
39+
40+
export interface TeamMemberProps {
41+
avatarUrl: string;
42+
fullName: string;
43+
linkedInUrl: string;
44+
twitterUrl: string;
45+
bio: string;
46+
fullNameColorCode?: string;
47+
}
48+
49+
export const TeamMember = (props: TeamMemberProps): JSX.Element => {
50+
const {
51+
avatarUrl,
52+
fullName,
53+
linkedInUrl,
54+
twitterUrl,
55+
bio,
56+
fullNameColorCode,
57+
} = props;
58+
59+
return (
60+
<Box
61+
paddingHorizontal={32}
62+
paddingTop={48}
63+
paddingBottom={48}
64+
borderRadius={8}
65+
backgroundColor="#fff"
66+
height="100%"
67+
>
68+
<Box flexDirection="row" paddingBottom={24} alignItems="center">
69+
<Box width={96} alignItems="center">
70+
<Avatar
71+
source={{ uri: avatarUrl }}
72+
size={94}
73+
overrides={{
74+
Root: {
75+
style: {
76+
borderColor: fullNameColorCode,
77+
},
78+
},
79+
}}
80+
/>
81+
</Box>
82+
<Box marginLeft={16} marginTop={32}>
83+
<Visible xsmall small medium xlarge>
84+
<Heading size="xlarge" color={fullNameColorCode}>
85+
{fullName}
86+
</Heading>
87+
</Visible>
88+
<Visible large>
89+
<Heading size={22} weight="bold" color={fullNameColorCode}>
90+
{fullName}
91+
</Heading>
92+
</Visible>
93+
<Box flexDirection="row" marginTop={16}>
94+
<Box>
95+
<Link to={linkedInUrl} isExternal>
96+
<LinkedInIcon />
97+
</Link>
98+
</Box>
99+
<Box marginLeft={8}>
100+
<Link to={twitterUrl} isExternal>
101+
<TwitterIcon />
102+
</Link>
103+
</Box>
104+
</Box>
105+
</Box>
106+
</Box>
107+
<Divider color="#e1e1e1" />
108+
<Box marginTop={24}>
109+
<Text size="large">{bio}</Text>
110+
</Box>
111+
</Box>
112+
);
113+
};

‎src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export * from './NavigationBar';
1111
export * from './RequireEthereumNetwork';
1212
export * from './RequireMetamaskSetup';
1313
export * from './RequireWalletSignIn';
14+
export * from './BlogSection';
15+
export * from './TeamMember';
1416
export * from './Tooltip';
1517
export * from './useBalanceQuery';
1618
export * from './useBlockQuery';

0 commit comments

Comments
 (0)