feat: integrate pattern list items

src/component/container/pattern_list.tsx

@@ -5,6 +5,7 @@ import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { PageElement } from '../../store/page/page_element';
 import { Pattern } from '../../store/pattern';
+import PatternListItem from '../../lsg/patterns/pattern-list-item';
 import * as React from 'react';
 import { Store } from '../../store';
 
@@ -36,7 +37,7 @@ export class PatternList extends React.Component<PatternListProps> {
 		const list = this.createList(this.items);
 		return (
 			<div>
-				<Input handleChange={this.handleSearchInputChange} />
+				<Input handleChange={this.handleSearchInputChange} placeholder="Search"/>
 				<List headline="Patterns">{list}</List>
 			</div>
 		);
@@ -75,20 +76,29 @@ export class PatternList extends React.Component<PatternListProps> {
 				{items.map((props: ListItemProps, index: number) => {
 					const labelComponent = props.label ? <Label>{props.label}:</Label> : null;
 					const nextLevel = props.children ? this.createList(props.children) : null;
-
-					return (
-						<Li
-							draggable={props.draggable}
-							handleDragStart={props.handleDragStart}
-							key={index}
-							active={props.active}
-							onClick={props.onClick}
-						>
-							{labelComponent}
-							<Value>{props.value}</Value>
-							{nextLevel}
-						</Li>
-					);
+					if (nextLevel) {
+						return (
+							<Li key={index}>
+								{labelComponent}
+								<Value>{props.value}</Value>
+								{nextLevel}
+							</Li>
+						);
+					} else {
+						return (
+							<PatternListItem
+								draggable={props.draggable}
+								handleDragStart={props.handleDragStart}
+								key={index}
+								active={props.active}
+								onClick={props.onClick}
+							>
+								{labelComponent}
+								<Value>{props.value}</Value>
+								{nextLevel}
+							</PatternListItem>
+						);
+					}
 				})}
 			</Ul>
 		);

src/lsg/patterns/list/index.tsx

@@ -37,7 +37,7 @@ export interface LiProps {
 
 const StyledUl = styledComponents.ul`
 	box-sizing: border-box;
-	padding: 0 0 0 15px;
+	padding: 0;
 	margin: 0;
 	width: 100%;
 `;

src/lsg/patterns/pattern-list-item/index.tsx

@@ -1,11 +1,12 @@
 import { colors } from '../colors';
 import { fonts } from '../fonts';
 import { Icon, IconName, Size as IconSize } from '../icons';
+import { LiProps } from '../list';
 import * as React from 'react';
 import { getSpace, Size } from '../space';
 import styled from 'styled-components';
 
-export interface PatternListItemProps {
+export interface PatternListItemProps extends LiProps {
 	className?: string;
 	icon?: string;
 }
@@ -16,6 +17,7 @@ const StyledPatternListItem = styled.li`
 	cursor: default;
 	padding: ${getSpace(Size.S)}px;
 	border: 1px solid ${colors.grey90.toString()};
+	margin: 0 0 ${getSpace(Size.S)}px 0;
 	border-radius: 3px;
 	background: ${colors.white.toString()};
 	font-family: ${fonts().NORMAL_FONT};
@@ -33,10 +35,10 @@ const StyledIcon = styled(Icon)`
 `;
 
 const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => (
-	<StyledPatternListItem className={props.className}>
+	<StyledPatternListItem {...props}>
 		{props.icon
 			? <StyledSVG>
-				<use xlinkHref={props.icon} />
+				{props.icon}
 			</StyledSVG>
 			: <StyledIcon name={IconName.Robo} size={IconSize.XS} color={colors.grey70} />
 		}