fix(lsg): adjust list styles, fix demo

src/lsg/patterns/list/demo.tsx

@@ -1,24 +1,25 @@
 import DemoContainer from '../demo-container';
 import { IconName, IconRegistry } from '../icons';
-import List, {ListItemProps} from './index';
+import List, {Li, Ul} from './index';
 import PatternListItem from '../pattern-list-item';
 import * as React from 'react';
 
-const ListItems: ListItemProps[] = [
-	{
-		active: true,
-		value: 'A'
-	},
-	{
-		value: 'B'
-	}
-];
-
 const ListDemo: React.StatelessComponent<{}> = (): JSX.Element => (
 	<DemoContainer title="List Demo">
-		<List items={ListItems} headline="Default List" />
+		<List headline="Default List">
+			<Ul>
+				<Li>
+					Item1
+				</Li>
+				<Li>
+					Item2
+				</Li>
+			</Ul>
+		</List>
 		<List headline="Pattern List">
-			<PatternListItem>Item1</PatternListItem>
+			<Ul>
+				<PatternListItem>Item1</PatternListItem>
+			</Ul>
 		</List>
 		<IconRegistry names={IconName}/>
 	</DemoContainer>

src/lsg/patterns/list/index.tsx

@@ -27,14 +27,13 @@ interface StyledListItemProps {
 }
 
 export const Ul = styledComponents.ul`
-	padding: 0;
+	box-sizing: border-box;
+	padding: 0 0 0 15px;
 	margin: 0;
 	width: 100%;
 `;
 
 export const Li = styledComponents.li`
-	margin: 0 0 0 15px;
-	padding: 0;
 	line-height: 25px;
 	list-style: none;
 	${(props: StyledListItemProps) => (props.onClick ? 'cursor: pointer;' : '')}

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

@@ -10,7 +10,7 @@ export interface PatternListItemProps {
 	icon?: string;
 }
 
-const StyledPatternListItem = styled.div`
+const StyledPatternListItem = styled.li`
 	display: flex;
 	align-items: center;
 	cursor: default;