feat: improve user experience (#607)

* feat: update styling of bug report button

* fix: remove non functioning menu items

* feat: rename builtin component library

* feat: restructure project settings

* feat: add empty state for element pane

* fix: make preview pane non-selectable

* fix: remove unneeded element list scroll area

* feat: add export button

* fix: restore element list spacing

* fix: simplify code

* fix: restore user selection

* fix: remove unneeded text property

src/components/add-button/demo.tsx

@@ -0,0 +1,11 @@
+import DemoContainer from '../demo-container';
+import * as React from 'react';
+import { AddButton } from '.';
+
+const AddButtonDemo: React.StatelessComponent = (): JSX.Element => (
+	<DemoContainer title="Add Page Button">
+		<AddButton>Add Page</AddButton>
+	</DemoContainer>
+);
+
+export default AddButtonDemo;

src/components/add-page-button/index.tsx → src/components/add-button/index.tsx

@@ -3,44 +3,54 @@ import { Copy } from '../copy';
 import { IconSize } from '../icons';
 import * as React from 'react';
 import { Plus } from 'react-feather';
-import { getSpace, SpaceSize } from '../space';
+import { Space, getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
-export interface AddPageButtonProps {
+export interface AddButtonProps {
 	onClick?: React.MouseEventHandler<HTMLElement>;
+	margin?: boolean;
 }
 
-const StyledAddPageButton = styled.button`
+const StyledSpace = styled(Space)`
+	width: 100%;
+`;
+
+const StyledAddButton = styled.button`
 	position: relative;
 	box-sizing: border-box;
 	height: 60px;
 	width: 100%;
-	border: 1px solid ${Color.Grey80};
+	border: 1px solid ${Color.Grey90};
 	border-radius: 6px;
 	background-color: transparent;
-	margin: ${getSpace(SpaceSize.XS)}px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	transition: border 0.2s;
 	user-select: none;
 
+	&:hover {
+		border: 1px solid ${Color.Grey60};
+	}
+
 	&:focus {
 		outline: none;
 	}
 
-	&:hover {
-		border: 1px solid ${Color.Grey60};
+	&:active {
+		background-color: ${Color.Grey90};
 	}
 `;
 
 const StyledIcon = styled(Plus)`
 	margin-right: ${getSpace(SpaceSize.XS)}px;
 `;
 
-export const AddPageButton: React.SFC<AddPageButtonProps> = props => (
-	<StyledAddPageButton onClick={props.onClick}>
-		<StyledIcon size={IconSize.XS} color={Color.Grey50} />
-		<Copy textColor={Color.Grey50}>Add Page</Copy>
-	</StyledAddPageButton>
+export const AddButton: React.SFC<AddButtonProps> = props => (
+	<StyledSpace size={props.margin ? SpaceSize.XS : 0} {...props}>
+		<StyledAddButton onClick={props.onClick}>
+			<StyledIcon size={IconSize.XS} color={Color.Grey50} />
+			<Copy textColor={Color.Grey50}>{props.children}</Copy>
+		</StyledAddButton>
+	</StyledSpace>
 );

src/components/add-button/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "add-button",
+	"description": "Button to add a page or library",
+	"displayName": "Add Button",
+	"version": "1.0.0",
+	"tags": ["atom", "button"],
+	"flag": "alpha"
+}

src/components/button-group/index.tsx

@@ -10,6 +10,10 @@ const StyledButtonGroup = styled.div`
 	margin-top: ${getSpace(SpaceSize.XS)}px;
 	border-top: 1px solid ${Color.Grey90};
 
+	&:active {
+		background: ${Color.Grey97};
+	}
+
 	@media screen and (-webkit-min-device-pixel-ratio: 2) {
 		border-top-width: 0.5px;
 	}

src/components/chrome-button/demo.tsx

@@ -0,0 +1,8 @@
+import { ChromeButton } from './index';
+import * as React from 'react';
+
+const ChromeButtonDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<ChromeButton title="Found a bug?" />
+);
+
+export default ChromeButtonDemo;

src/components/chrome-button/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Color } from '../colors';
+import { getSpace, SpaceSize } from '../space';
+
+export interface ChromeButtonProps {
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+	title: string;
+	icon?: React.ReactNode;
+}
+
+const StyledChromeButton = styled.div`
+	display: flex;
+	padding: 0 ${getSpace(SpaceSize.S)}px;
+	align-items: center;
+	-webkit-app-region: no-drag;
+	box-sizing: border-box;
+	border-radius: 3px;
+	margin-left: ${getSpace(SpaceSize.S)}px;
+	background: linear-gradient(to bottom, ${Color.White} 0%, ${Color.Grey97});
+	height: 21px;
+	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 0.5px 2px 0 rgba(0, 0, 0, 0.3);
+	color: ${Color.Grey50};
+
+	&:active {
+		background: ${Color.Grey90};
+	}
+`;
+
+const StyledIcon = styled.div`
+	margin-right: 6px;
+`;
+
+export const ChromeButton: React.StatelessComponent<ChromeButtonProps> = props => (
+	<StyledChromeButton {...props}>
+		{props.icon && <StyledIcon>{props.icon}</StyledIcon>}
+		<div>{props.title}</div>
+	</StyledChromeButton>
+);

src/components/chrome-button/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "chrome-button",
+	"displayName": "Chrome Button",
+	"description": "Button in the chrome",
+	"version": "1.0.0",
+	"tags": ["chrome-button"],
+	"flag": "alpha"
+}

src/components/copy/index.tsx

@@ -21,6 +21,7 @@ export enum CopySize {
 const StyledCopy = styled.p`
 	margin: 0;
 	line-height: 1.5;
+	cursor: default;
 	${(props: StyledCopyProps) =>
 		typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : 'font-size: 12px'};
 	${(props: StyledCopyProps) =>

src/components/empty-state/demo.tsx

@@ -0,0 +1,8 @@
+import { EmptyState } from './index';
+import * as React from 'react';
+
+const EmptyStateDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<EmptyState headline="Elements" copy="Drop them here" />
+);
+
+export default EmptyStateDemo;

src/components/empty-state/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Color } from '../colors';
+import { Space, getSpace, SpaceSize } from '../space';
+import { Headline } from '../headline';
+import { Copy } from '../copy';
+
+export interface EmptyStateProps {
+	headline: string;
+	copy: string;
+	image?: React.ReactNode;
+	highlighted?: boolean;
+}
+
+const StyledEmptyState = styled.div`
+	text-align: center;
+	padding: ${getSpace(SpaceSize.XXXL)}px;
+`;
+
+export const EmptyState: React.StatelessComponent<EmptyStateProps> = props => (
+	<StyledEmptyState>
+		<Headline order={4} textColor={props.highlighted ? Color.Blue : Color.Black}>
+			{props.headline}
+		</Headline>
+		<Space sizeTop={getSpace(SpaceSize.XS)} sizeBottom={getSpace(SpaceSize.L)}>
+			<Copy textColor={props.highlighted ? Color.Blue : Color.Grey50}>{props.copy}</Copy>
+		</Space>
+		{props.image}
+	</StyledEmptyState>
+);

src/components/empty-state/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "empty-state",
+	"displayName": "Empty State",
+	"description": "Explanation of todos in case of an empty state",
+	"version": "1.0.0",
+	"tags": ["empty-state"],
+	"flag": "alpha"
+}

src/components/headline/index.tsx

@@ -21,6 +21,7 @@ const StyledHeadline = styled.div`
 	margin-top: 0;
 	font-family: ${fonts().NORMAL_FONT};
 	font-weight: 500;
+	cursor: default;
 	${(props: StyledHeadlineProps) => (props.textColor ? `color: ${props.textColor};` : '')};
 
 	${(props: HeadlineProps) => {

src/components/icons/index.tsx

@@ -87,6 +87,50 @@ const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
 	]
 };
 
+export const Images: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
+	EmptyElements: [
+		[
+			<svg width="66" height="65">
+				<defs>
+					<rect id="b" width="60" height="22" rx="3" />
+					<filter
+						x="-8.3%"
+						y="-18.2%"
+						width="116.7%"
+						height="145.5%"
+						filterUnits="objectBoundingBox"
+						id="a"
+					>
+						<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+						<feGaussianBlur
+							stdDeviation="1.5"
+							in="shadowOffsetOuter1"
+							result="shadowBlurOuter1"
+						/>
+						<feColorMatrix
+							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+							in="shadowBlurOuter1"
+						/>
+					</filter>
+				</defs>
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M37.44.36l-8.43 5.48 7.76 4.56.67-10.04zm-5.5 32.6c-1.74-7.89-1.05-17.85 1.67-25.1l-.93-.35c-2.8 7.43-3.5 17.6-1.7 25.67l.97-.21z"
+						fill="#000"
+						opacity=".5"
+					/>
+					<g transform="translate(3 39)">
+						<use fill="#000" filter="url(#a)" href="#b" />
+						<use fill="#FFF" href="#b" />
+						<path fill="#000" opacity=".5" d="M18 6h33v3H18zM18 10h12v3H18z" />
+						<circle fill="#000" opacity=".5" cx="9" cy="9" r="3" />
+					</g>
+				</g>
+			</svg>
+		]
+	]
+};
+
 const StyledIconRegistry = styled.svg`
 	display: none;
 `;

src/components/index.ts

@@ -1,15 +1,16 @@
-export * from './add-page-button';
-export * from './bug-report';
+export * from './add-button';
 export * from './button';
 export * from './button-group';
 export * from './chrome';
+export * from './chrome-button';
 export * from './colors';
 export * from './copy';
 export * from './create-select';
 export * from './drag-area';
 export * from './editable-title';
 export * from './element';
 export * from './element-slot';
+export * from './empty-state';
 export * from './fonts';
 export * from './global-styles';
 export * from './headline';

src/components/link/index.tsx

@@ -10,14 +10,16 @@ export interface LinkProps {
 	disabled?: boolean;
 	onClick?: React.MouseEventHandler<HTMLElement>;
 	uppercase?: boolean;
+	underline?: boolean;
 }
 
 const StyledLink: StyledComponentClass<LinkProps, {}> = styled.a`
 	font-family: ${fonts().NORMAL_FONT};
 	${(props: LinkProps) => (props.color ? `color: ${props.color}` : 'color: inherit')};
-	${(props: LinkProps) => (props.onClick ? 'cursor: pointer;' : 'cursor: auto;')} ${(
-		props: LinkProps
-	) => (props.uppercase ? 'text-transform: uppercase;' : '')};
+	${(props: LinkProps) =>
+		props.underline ? 'text-decoration: underline' : 'text-decoration: none'};
+	${(props: LinkProps) => (props.onClick ? 'cursor: pointer' : 'cursor: auto')};
+	${(props: LinkProps) => (props.uppercase ? 'text-transform: uppercase' : '')};
 `;
 
 export const Link: React.StatelessComponent<LinkProps> = props => (
@@ -27,6 +29,7 @@ export const Link: React.StatelessComponent<LinkProps> = props => (
 		disabled={props.disabled}
 		onClick={props.onClick}
 		uppercase={props.uppercase}
+		underline={props.underline}
 	>
 		{props.children}
 	</StyledLink>

src/components/panes/preview-pane/index.tsx

@@ -7,6 +7,7 @@ const StyledPreviewWrapper = styled.div`
 	justify-content: center;
 	flex-grow: 1;
 	flex-shrink: 0;
+	user-select: none;
 `;
 
 const StyledPreviewPane = styled.div`