From 5c605399e72e4afb82eba8f2233efe1f99bd0d71 Mon Sep 17 00:00:00 2001
From: Alexander Peschel <alexander.peschel@sinnerschrader.com>
Date: Mon, 18 Dec 2017 15:46:21 +0100
Subject: [PATCH] feat(lsg): introduce dropdown component

---
 src/lsg/patterns/dropdown-item/index.tsx    | 99 +++++++++++++++++++++
 src/lsg/patterns/dropdown-item/pattern.json |  7 ++
 src/lsg/patterns/dropdown/index.tsx         | 42 +++++++++
 src/lsg/patterns/dropdown/pattern.json      |  7 ++
 4 files changed, 155 insertions(+)
 create mode 100644 src/lsg/patterns/dropdown-item/index.tsx
 create mode 100644 src/lsg/patterns/dropdown-item/pattern.json
 create mode 100644 src/lsg/patterns/dropdown/index.tsx
 create mode 100644 src/lsg/patterns/dropdown/pattern.json

diff --git a/src/lsg/patterns/dropdown-item/index.tsx b/src/lsg/patterns/dropdown-item/index.tsx
new file mode 100644
index 000000000..fb7dae824
--- /dev/null
+++ b/src/lsg/patterns/dropdown-item/index.tsx
@@ -0,0 +1,99 @@
+import { Color, colors } from '../colors';
+import { Icon, IconName, Size as IconSize } from '../icons';
+import * as React from 'react';
+import { getSpace, Size as SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface DropdownItemProps {
+	// active?: boolean;
+	color?: Color;
+	name: string;
+	icon?: IconName;
+	handleClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export interface StyledDropdownItemLinkProps {
+	color?: Color;
+	handleClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+const StyledDropdownItem = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: ${getSpace(SpaceSize.S)}px;
+
+	:last-child {
+		margin-bottom: 0;
+	}
+`;
+
+const StyledDropdownItemLink = styled.a`
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+	font-size: 12px;
+	cursor: pointer;
+	${(props: StyledDropdownItemLinkProps) =>
+		props.color ? `color: ${props.color.toString()}` : 'color: inherit'};
+
+	:hover {
+		color: ${colors.blueLight.toString()};
+	}
+`;
+
+const StyledDropdownItemIcon = styled(Icon)`
+	margin-right: ${getSpace(SpaceSize.XS)}px;
+`;
+
+const StyledDropdownItemLinkAttribute = styled.div`
+	display: none;
+	${StyledDropdownItem}:hover & {
+		display: flex;
+	}
+`;
+
+const StyledDropdownItemLinkAttributeItem = styled.a`
+	font-size: 10px;
+	color: ${colors.grey70.toString()};
+	margin-right: ${getSpace(SpaceSize.XXS)}px;
+	cursor: pointer;
+
+	:hover {
+		color: ${colors.blueLight.toString()};
+	}
+`;
+
+export default class DropdownItem extends React.Component<DropdownItemProps> {
+	public render(): JSX.Element {
+		return (
+			<StyledDropdownItem>
+				<StyledDropdownItemLink handleClick={this.props.handleClick}>
+					{this.props.icon && (
+						<StyledDropdownItemIcon size={IconSize.XXS} name={this.props.icon} />
+					)}
+					{this.props.name}
+				</StyledDropdownItemLink>
+				{this.props.children}
+			</StyledDropdownItem>
+		);
+	}
+}
+
+export class DropdownItemLinkAttribute extends React.Component<{}> {
+	public render(): JSX.Element {
+		return (
+			<StyledDropdownItemLinkAttribute>{this.props.children}</StyledDropdownItemLinkAttribute>
+		);
+	}
+}
+
+export class DropdownItemLinkAttributeItem extends React.Component<{}> {
+	public render(): JSX.Element {
+		return (
+			<StyledDropdownItemLinkAttributeItem>
+				{this.props.children}
+			</StyledDropdownItemLinkAttributeItem>
+		);
+	}
+}
diff --git a/src/lsg/patterns/dropdown-item/pattern.json b/src/lsg/patterns/dropdown-item/pattern.json
new file mode 100644
index 000000000..86d6fdcee
--- /dev/null
+++ b/src/lsg/patterns/dropdown-item/pattern.json
@@ -0,0 +1,7 @@
+{
+	"name": "dropdown-item",
+	"displayName": "Dropdown Item",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["dropdown-item"]
+}
diff --git a/src/lsg/patterns/dropdown/index.tsx b/src/lsg/patterns/dropdown/index.tsx
new file mode 100644
index 000000000..3b6b55bef
--- /dev/null
+++ b/src/lsg/patterns/dropdown/index.tsx
@@ -0,0 +1,42 @@
+import { colors } from '../colors';
+import * as React from 'react';
+import { getSpace, Size as SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface DropdownProps {
+	chrome?: boolean;
+	visible?: boolean;
+}
+
+export interface StyledDropdownProps {
+	visible?: boolean;
+}
+
+const StyledDropdown = styled.div`
+	${(props: StyledDropdownProps) => (props.visible ? 'display: block' : 'display: none')};
+	padding: ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.L)}px;
+	border: 1px solid ${colors.grey90.toString()};
+	background: ${colors.white.toString()};
+	border-radius: 3px;
+`;
+
+const StyledChromeDropdown = styled(StyledDropdown)`
+	position: absolute;
+	top: 45px;
+	left: 50%;
+	min-width: 200px;
+	transform: translateX(-50%);
+`;
+
+export default class Dropdown extends React.Component<DropdownProps> {
+	public render(): JSX.Element {
+		if (this.props.chrome) {
+			return (
+				<StyledChromeDropdown visible={this.props.visible}>
+					{this.props.children}
+				</StyledChromeDropdown>
+			);
+		}
+		return <StyledDropdown visible={this.props.visible}>{this.props.children}</StyledDropdown>;
+	}
+}
diff --git a/src/lsg/patterns/dropdown/pattern.json b/src/lsg/patterns/dropdown/pattern.json
new file mode 100644
index 000000000..35949d14c
--- /dev/null
+++ b/src/lsg/patterns/dropdown/pattern.json
@@ -0,0 +1,7 @@
+{
+	"name": "dropdown",
+	"displayName": "Dropdown",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["dropdown"]
+}