Skip to content

Commit ecda0a8

Browse files
SaraVieiraSaraVieira
authored
integration component (codesandbox#3313)
* integration component * fix build * fix build
1 parent a2ce3f9 commit ecda0a8

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@storybook/addon-knobs": "^5.2.8",
5151
"@storybook/addon-storysource": "^5.2.8",
5252
"@storybook/addon-viewport": "^5.2.8",
53+
"@storybook/csf": "^0.0.1",
5354
"@storybook/react": "^5.2.8",
5455
"@types/color": "3.0.1",
5556
"@types/lodash": "^4.14.149",

‎packages/components/src/components/Integration/index.stories.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { action } from '@storybook/addon-actions';
3+
4+
import { Integration } from '.';
5+
import { Text } from '../Text';
6+
import { Stack } from '../Stack';
7+
import { Button } from '../Button';
8+
9+
export default {
10+
title: 'components/Integration',
11+
component: Integration,
12+
};
13+
14+
const GitHubIcon = props => (
15+
<svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
16+
<path
17+
fill="#fff"
18+
d="M14.927 4.084A8.068 8.068 0 0012.015 1.1 7.678 7.678 0 008 0a7.68 7.68 0 00-4.016 1.1 8.067 8.067 0 00-2.911 2.984A8.177 8.177 0 000 8.2c0 1.787.509 3.394 1.526 4.821 1.017 1.428 2.332 2.415 3.943 2.963.187.036.326.01.416-.074a.422.422 0 00.136-.32l-.006-.577a97.58 97.58 0 01-.005-.95l-.24.042c-.152.029-.345.041-.578.038a4.313 4.313 0 01-.724-.075 1.598 1.598 0 01-.697-.32 1.354 1.354 0 01-.459-.657l-.104-.246a2.68 2.68 0 00-.328-.544c-.15-.2-.3-.335-.453-.406l-.073-.053a.776.776 0 01-.135-.129.588.588 0 01-.094-.149c-.02-.05-.004-.09.052-.123.056-.032.156-.048.302-.048l.208.032c.14.029.311.114.516.256.205.143.373.328.505.555.16.292.352.515.578.668.226.153.453.23.682.23.23 0 .428-.018.594-.054.167-.035.323-.089.469-.16.062-.477.233-.844.51-1.1a6.969 6.969 0 01-1.067-.192 4.194 4.194 0 01-.98-.417 2.821 2.821 0 01-.838-.715c-.222-.285-.405-.659-.547-1.121-.142-.463-.213-.997-.213-1.602 0-.861.274-1.595.823-2.2-.257-.647-.233-1.373.073-2.178.2-.064.5-.016.895.144.396.16.686.298.87.411.184.114.332.21.443.289a7.227 7.227 0 012-.278c.687 0 1.354.093 2 .278l.396-.256c.27-.171.59-.328.958-.47.368-.143.65-.182.844-.118.312.805.34 1.53.083 2.178.549.606.823 1.339.823 2.2 0 .605-.071 1.14-.213 1.607-.143.466-.326.84-.552 1.121a2.927 2.927 0 01-.844.71c-.337.192-.663.331-.98.417-.315.085-.671.15-1.067.192.361.32.542.826.542 1.516v2.253a.43.43 0 00.13.32c.087.086.224.11.411.075 1.611-.548 2.926-1.536 3.943-2.963S16 9.987 16 8.2c0-1.487-.358-2.86-1.073-4.116z"
19+
/>
20+
</svg>
21+
);
22+
const NetlifyIcon = props => (
23+
<svg width={11} height={11} fill="none" viewBox="0 0 11 11" {...props}>
24+
<path
25+
fill="#4CAA9F"
26+
d="M4.536.293a1 1 0 011.414 0l4.242 4.243a1 1 0 010 1.414L5.95 10.192a1 1 0 01-1.414 0L.293 5.95a1 1 0 010-1.414L4.536.293z"
27+
/>
28+
</svg>
29+
);
30+
31+
const ZeitIcon = props => (
32+
<svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
33+
<path fill="#fff" d="M6 0l6 10H0L6 0z" />
34+
</svg>
35+
);
36+
37+
export const IntegrationZeit = () => (
38+
<div style={{ width: 184 }}>
39+
<Integration icon={ZeitIcon} title="ZEIT">
40+
<Stack direction="vertical">
41+
<Text variant="muted">Enables</Text>
42+
<Text>Deployments</Text>
43+
</Stack>
44+
<Button onClick={action('zeit Integration')}>Sign In</Button>
45+
</Integration>
46+
</div>
47+
);
48+
49+
export const IntegrationNetlify = () => (
50+
<div style={{ width: 184 }}>
51+
<Integration icon={NetlifyIcon} title="netlify">
52+
<Stack direction="vertical">
53+
<Text variant="muted">Enables</Text>
54+
<Text>Deployments</Text>
55+
</Stack>
56+
<Button onClick={action('Netlify Integration')}>Deploy</Button>
57+
</Integration>
58+
</div>
59+
);
60+
61+
export const IntegrationGitHub = () => (
62+
<div style={{ width: 184 }}>
63+
<Integration icon={GitHubIcon} title="GitHub">
64+
<Stack direction="vertical">
65+
<Text variant="muted">Enables</Text>
66+
<Text>Commits & PRs</Text>
67+
</Stack>
68+
<Button onClick={action('GitHub Integration')}>Sign In</Button>
69+
</Integration>
70+
</div>
71+
);

‎packages/components/src/components/Integration/index.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import css from '@styled-system/css';
4+
import { Element } from '../Element';
5+
import { Text } from '../Text';
6+
import { Stack } from '../Stack';
7+
8+
export const Header = styled(Stack)(
9+
css({
10+
height: 6,
11+
paddingX: 4,
12+
border: '1px solid',
13+
borderColor: 'sideBar.border',
14+
borderBottom: 0,
15+
cursor: 'pointer',
16+
borderTopLeftRadius: 'small',
17+
borderTopRightRadius: 'small',
18+
fontSize: 3,
19+
})
20+
);
21+
22+
export const Content = styled(Element)(
23+
css({
24+
display: 'grid',
25+
gridTemplateColumns: '1fr 50px',
26+
gridGap: 2,
27+
alignItems: 'center',
28+
paddingX: 2,
29+
paddingY: 4,
30+
border: '1px solid',
31+
borderColor: 'sideBar.border',
32+
cursor: 'pointer',
33+
borderBottomLeftRadius: 'small',
34+
borderBottomRightRadius: 'small',
35+
fontSize: 2,
36+
})
37+
);
38+
39+
export const Integration = ({ icon, title, children }) => (
40+
<div>
41+
<Header gap={1} align="center">
42+
{icon()}
43+
<Text weight="medium">{title}</Text>
44+
</Header>
45+
<Content>{children}</Content>
46+
</div>
47+
);

‎yarn.lock‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4671,6 +4671,13 @@
46714671
webpack-dev-middleware "^3.7.0"
46724672
webpack-hot-middleware "^2.25.0"
46734673

4674+
"@storybook/csf@^0.0.1":
4675+
version "0.0.1"
4676+
resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
4677+
integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
4678+
dependencies:
4679+
lodash "^4.17.15"
4680+
46744681
"@storybook/[email protected]":
46754682
version "5.1.10"
46764683
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.1.10.tgz#92c80b46177687cd8fda1f93a055c22711984154"

0 commit comments

Comments
 (0)