feat(components): update styling of connect library

src/components/button/index.tsx

@@ -1,55 +1,92 @@
 import { Color, colors } from '../colors';
 import * as React from 'react';
+import { getSpace, SpaceSize } from '../space';
 import styled, { css } from 'styled-components';
 
 export interface ButtonProps {
-	color?: Color;
+	textColor?: Color;
 	onClick?: React.MouseEventHandler<HTMLElement>;
 	order?: ButtonOrder;
-}
-
-export interface StyledButtonProps {
-	color?: Color;
+	size?: ButtonSize;
+	inverted?: boolean;
 }
 
 export enum ButtonOrder {
 	Primary,
 	Secondary
 }
 
+export enum ButtonSize {
+	Medium,
+	Small
+}
+
 const StyledButton = styled.button`
-	padding: 15px 42px;
 	border: none;
-	border-radius: 4px;
-	font-size: 15px;
-	cursor: pointer;
+	border-radius: 3px;
+
+	&:hover {
+		opacity: 0.9;
+	}
+
 	${(props: ButtonProps) => {
 		switch (props.order) {
 			case ButtonOrder.Secondary:
 				return css`
 					background: ${colors.black.toString()};
 					color: ${colors.white.toString()};
-
-					:hover {
-						background: ${colors.grey20.toString()};
-					}
 				`;
 			case ButtonOrder.Primary:
 			default:
 				return css`
 					background: ${colors.blue.toString()};
 					color: ${colors.white.toString()};
+				`;
+		}
+	}};
 
-					:hover {
-						background: ${colors.blue20.toString()};
-					}
+	${(props: ButtonProps) => {
+		switch (props.size) {
+			case ButtonSize.Small:
+				return css`
+					font-size: 12px;
+					padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.L)}px;
+				`;
+
+			case ButtonSize.Medium:
+			default:
+				return css`
+					font-size: 15px;
+					padding: ${getSpace(SpaceSize.M)}px ${getSpace(SpaceSize.XXXL)}px;
 				`;
 		}
 	}};
+
+	${(props: ButtonProps) =>
+		props.inverted
+			? `
+				background: ${colors.white.toString()};
+			`
+			: ''};
+
+	${(props: ButtonProps) =>
+		typeof props.textColor !== 'undefined'
+			? `
+				color: ${props.textColor.toString()};
+			`
+			: ''};
 `;
 
 export const Button: React.StatelessComponent<ButtonProps> = props => (
-	<StyledButton onClick={props.onClick}>{props.children}</StyledButton>
+	<StyledButton
+		onClick={props.onClick}
+		textColor={props.textColor}
+		order={props.order}
+		size={props.size}
+		inverted={props.inverted}
+	>
+		{props.children}
+	</StyledButton>
 );
 
 export default Button;

src/components/colors/index.tsx

@@ -103,6 +103,14 @@ export const colors = {
 		displayName: 'Grey 97',
 		rgb: [247, 247, 247]
 	}),
+	orange: new Color({
+		displayName: 'Orange',
+		rgb: [255, 127, 115]
+	}),
+	red: new Color({
+		displayName: 'Red',
+		rgb: [187, 50, 94]
+	}),
 	white: new Color({
 		displayName: 'White',
 		rgb: [255, 255, 255]

src/components/connect-library/index.tsx

@@ -0,0 +1,53 @@
+import Button, { ButtonOrder, ButtonSize } from '../button';
+import { colors } from '../colors';
+import { getSpace, SpaceSize } from '../space';
+import { Headline } from '../headline';
+import { Copy } from '../copy';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export interface ConnectLibraryProps {
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	headline?: string;
+	description?: string;
+	primaryButton?: string;
+	secondaryButton?: string;
+	onPrimaryButtonClick?: React.MouseEventHandler<HTMLElement>;
+	onSecondaryButtonClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+const StyledConnectLibrary = styled.div`
+	background: linear-gradient(
+		to bottom right,
+		${colors.orange.toString()},
+		${colors.red.toString()}
+	);
+	box-sizing: border-box;
+	padding: ${getSpace(SpaceSize.XL)}px ${getSpace(SpaceSize.L)}px;
+	color: ${colors.white.toString()};
+`;
+
+const StyledHeadline = styled(Headline)`
+	margin-bottom: ${getSpace(SpaceSize.M)}px;
+`;
+
+const StyledButton = styled(Button)`
+	margin: ${getSpace(SpaceSize.M)}px 0;
+`;
+
+export const ConnectLibrary: React.SFC<ConnectLibraryProps> = props => (
+	<StyledConnectLibrary>
+		<StyledHeadline order={3}>{props.headline}</StyledHeadline>
+		<Copy>{props.description}</Copy>
+		<StyledButton
+			textColor={colors.red}
+			order={ButtonOrder.Primary}
+			size={ButtonSize.Small}
+			onClick={props.onPrimaryButtonClick}
+			inverted={true}
+		>
+			{props.primaryButton}
+		</StyledButton>
+		<Copy>{props.secondaryButton}</Copy>
+	</StyledConnectLibrary>
+);

src/components/connect-library/pattern.json

@@ -0,0 +1,7 @@
+{
+	"name": "connect-library",
+	"displayName": "Connect Library",
+	"version": "1.0.0",
+	"tags": ["molecule", "connect", "library", "status"],
+	"flag": "alpha"
+}

src/components/copy/index.tsx

@@ -19,14 +19,14 @@ export enum CopySize {
 
 const StyledCopy = styled.p`
 	margin: 0;
+	line-height: 1.5;
 	${(props: StyledCopyProps) =>
-		typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : ''};
+		typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : `font-size: 12px`};
 	${(props: StyledCopyProps) =>
 		typeof props.textColor !== 'undefined' ? `color: ${props.textColor.toString()};` : ''};
-	line-height: 22px;
 `;
 
-export const Copy: React.SFC<CopyProps> = props => (
+export const Copy: React.StatelessComponent<CopyProps> = props => (
 	<StyledCopy textColor={props.textColor} size={props.size}>
 		{props.children}
 	</StyledCopy>

src/components/headline/index.tsx

@@ -29,6 +29,8 @@ const StyledHeadline = styled.div`
 				return css`
 					font-size: 24px;
 					line-height: 30px;
+					font-weight: 700;
+					margin-bottom: 0.2em;
 				`;
 			case 2:
 				return css`

src/container/connect-pane-container.tsx

@@ -1,4 +1,4 @@
-import * as Components from '../components';
+import { ConnectLibrary } from '../components/connect-library';
 import * as React from 'react';
 
 export interface ConnectPaneProps {
@@ -7,28 +7,14 @@ export interface ConnectPaneProps {
 }
 
 export const ConnectPaneContainer: React.SFC<ConnectPaneProps> = props => (
-	<div>
-		<Components.Space sizeBottom={Components.SpaceSize.L}>
-			<Components.Headline textColor={Components.colors.grey20} order={2}>
-				Connect to a Library
-			</Components.Headline>
-		</Components.Space>
-		<Components.Space sizeBottom={Components.SpaceSize.XXXL}>
-			<Components.Copy size={Components.CopySize.M} textColor={Components.colors.grey20}>
-				To build prototypes with already existing components, connect to your React component
-				library first.
-			</Components.Copy>
-		</Components.Space>
-		<Components.Space sizeBottom={Components.SpaceSize.S}>
-			<Components.Button
-				onClick={props.onPrimaryButtonClick}
-				order={Components.ButtonOrder.Primary}
-			>
-				Connect
-			</Components.Button>
-		</Components.Space>
-		<Components.Link color={Components.colors.grey50} onClick={props.onSecondaryButtonClick}>
-			<Components.Copy size={Components.CopySize.S}>Open Alva Example</Components.Copy>
-		</Components.Link>
-	</div>
+	<ConnectLibrary
+		headline={'Connect to a Library'}
+		description={
+			'To build prototypes with already existing components, connect to your React component	library first.'
+		}
+		primaryButton={'Connect'}
+		secondaryButton={'Download Alva Example'}
+		onPrimaryButtonClick={props.onPrimaryButtonClick}
+		onSecondaryButtonClick={props.onSecondaryButtonClick}
+	/>
 );