feat: move list to lsg

src/component/container/element_list.tsx

@@ -1,5 +1,5 @@
 import { ElementWrapper } from './elementWrapper';
-import { ListPropsListItem } from '../presentation/list';
+import { ListItemProps } from '../../lsg/patterns/list';
 import { observer } from 'mobx-react';
 import { Page } from '../../store/page';
 import { PageElement } from '../../store/page/page_element';
@@ -29,7 +29,7 @@ export class ElementList extends React.Component<ElementListProps> {
 		}
 	}
 
-	public renderList(item: ListPropsListItem, key?: number): JSX.Element {
+	public renderList(item: ListItemProps, key?: number): JSX.Element {
 		return (
 			<ElementWrapper
 				title={item.value}
@@ -48,7 +48,7 @@ export class ElementList extends React.Component<ElementListProps> {
 		key: string,
 		element: PageElement,
 		selectedElement?: PageElement
-	): ListPropsListItem {
+	): ListItemProps {
 		if (!element.getPattern()) {
 			return {
 				label: key,
@@ -57,7 +57,7 @@ export class ElementList extends React.Component<ElementListProps> {
 			};
 		}
 
-		const items: ListPropsListItem[] = [];
+		const items: ListItemProps[] = [];
 		const children: PageElement[] = element.getChildren() || [];
 		children.forEach((value: PageElement, index: number) => {
 			items.push(
@@ -94,9 +94,9 @@ export class ElementList extends React.Component<ElementListProps> {
 		key: string,
 		value: PropertyValue,
 		selectedElement?: PageElement
-	): ListPropsListItem {
+	): ListItemProps {
 		if (value instanceof Array) {
-			const items: ListPropsListItem[] = [];
+			const items: ListItemProps[] = [];
 			(value as (string | number)[]).forEach((child, index: number) => {
 				items.push(this.createItemFromProperty(String(index + 1), child));
 			});
@@ -110,7 +110,7 @@ export class ElementList extends React.Component<ElementListProps> {
 		if (value instanceof PageElement) {
 			return this.createItemFromElement(key, value as PageElement, selectedElement);
 		} else {
-			const items: ListPropsListItem[] = [];
+			const items: ListItemProps[] = [];
 			Object.keys(value).forEach((childKey: string) => {
 				// tslint:disable-next-line:no-any
 				items.push(this.createItemFromProperty(childKey, (value as any)[childKey]));

src/component/container/pattern_list.tsx

@@ -1,6 +1,6 @@
 import Input from '../../lsg/patterns/input/';
 import { PatternFolder } from '../../store/pattern/folder';
-import { List, ListPropsListItem } from '../presentation/list';
+import List, {ListItemProps} from '../../lsg/patterns/list';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { Pattern } from '../../store/pattern';
@@ -13,7 +13,7 @@ export interface PatternListProps {
 
 @observer
 export class PatternList extends React.Component<PatternListProps> {
-	public items: ListPropsListItem[] = [];
+	public items: ListItemProps[] = [];
 	public constructor(props: PatternListProps) {
 		super(props);
 
@@ -36,12 +36,12 @@ export class PatternList extends React.Component<PatternListProps> {
 		);
 	}
 
-	public createItemsFromFolder(folder: PatternFolder): ListPropsListItem[] {
-		const result: ListPropsListItem[] = [];
+	public createItemsFromFolder(folder: PatternFolder): ListItemProps[] {
+		const result: ListItemProps[] = [];
 
 		if (folder) {
 			folder.getChildren().forEach((child: PatternFolder) => {
-				const childItem: ListPropsListItem = { value: child.getName() };
+				const childItem: ListItemProps = { value: child.getName() };
 				childItem.children = this.createItemsFromFolder(child);
 				result.push(childItem);
 			});

src/component/container/project_list.tsx

@@ -1,4 +1,4 @@
-import { List, ListPropsListItem } from '../presentation/list';
+import List, { ListItemProps } from '../../lsg/patterns/list';
 import { observer } from 'mobx-react';
 import { PageRef } from '../../store/page/page_ref';
 import { Project } from '../../store/project';
@@ -16,7 +16,7 @@ export class ProjectList extends React.Component<ProjectListProps> {
 	}
 
 	public render(): JSX.Element {
-		const items: ListPropsListItem[] = this.props.store.getProjects().map((project: Project) => ({
+		const items: ListItemProps[] = this.props.store.getProjects().map((project: Project) => ({
 			label: 'Project',
 			value: project.getName(),
 			children: project.getPages().map((page: PageRef) => ({

src/lsg/patterns/list/demo.tsx

@@ -0,0 +1,16 @@
+import List, {ListItemProps} from './index';
+import * as React from 'react';
+
+const ListItems: ListItemProps[] = [
+	{
+		active: true,
+		value: 'A'
+	},
+	{value: 'B'}
+];
+
+const ListDemo: React.StatelessComponent<{}> = (): JSX.Element => (
+	<List items={ListItems} headline="List Demo" />
+);
+
+export default ListDemo;

src/component/presentation/list.tsx → src/lsg/patterns/list/index.tsx

@@ -1,8 +1,27 @@
-import { colors } from '../../lsg/patterns/colors';
-import { Headline } from '../../lsg/patterns/headline';
+import { colors } from '../colors';
+import { Headline } from '../headline';
 import * as React from 'react';
 import styledComponents from 'styled-components';
 
+export interface ListProps {
+	items: ListItemProps[];
+	headline: string;
+}
+
+export interface ListItemProps {
+	active?: boolean;
+	children?: ListItemProps[];
+	label?: string;
+	value: string;
+
+	onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+interface StyledListItemProps {
+	active?: boolean;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
 const Ul = styledComponents.ul`
 	padding: 0;
 	margin: 0;
@@ -14,10 +33,13 @@ const Li = styledComponents.li`
 	padding: 0;
 	line-height: 25px;
 	list-style: none;
-	cursor: pointer;
-
-	&.active {
-		background: #def;
+	${(props: StyledListItemProps) => props.onClick
+		? 'cursor: pointer;'
+		: ''
+	}
+	${(props: StyledListItemProps) => props.active
+		? 'background: #def'
+		: ''
 	}
 `;
 
@@ -30,21 +52,7 @@ const Value = styledComponents.span`
 	color: ${colors.black.toString()};
 `;
 
-export interface ListProps {
-	items: ListPropsListItem[];
-	headline: string;
-}
-
-export interface ListPropsListItem {
-	active?: boolean;
-	children?: ListPropsListItem[];
-	label?: string;
-	value: string;
-
-	onClick?: React.MouseEventHandler<HTMLElement>;
-}
-
-export class List extends React.Component<ListProps> {
+export default class List extends React.Component<ListProps> {
 	public constructor(props: ListProps) {
 		super(props);
 	}
@@ -60,17 +68,17 @@ export class List extends React.Component<ListProps> {
 		);
 	}
 
-	public createList(items: ListPropsListItem[]): JSX.Element {
+	public createList(items: ListItemProps[]): JSX.Element {
 		return (
 			<Ul>
-				{items.map((item: ListPropsListItem, index: number) => {
-					const labelComponent = item.label ? <Label>{item.label}:</Label> : null;
-					const nextLevel = item.children ? this.createList(item.children) : null;
+				{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 key={index} className={item.active ? 'active' : ''} onClick={item.onClick}>
+						<Li key={index} active={props.active} onClick={props.onClick}>
 							{labelComponent}
-							<Value>{item.value}</Value>
+							<Value>{props.value}</Value>
 							{nextLevel}
 						</Li>
 					);

src/lsg/patterns/list/pattern.json

@@ -0,0 +1,11 @@
+{
+	"name": "list",
+	"displayName": "List",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["list"],
+	"patterns": {
+		"colors": "colors",
+		"headline": "headline"
+	}
+ }