feat(lsg): introduce icon and pattern-list-item component

src/lsg/patterns/icons/demo.tsx

@@ -0,0 +1,51 @@
+import {Icon, IconName, IconRegistry, reduce, Size as IconSize} from './index';
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledDemoIconList = styled.ul`
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	padding-left: 0;
+	width: 100%;
+	list-style: none;
+`;
+
+const StyledDemoListItem = styled.li`
+	margin-top: 20px;
+	width: 20%;
+	min-width: 51px;
+	text-align: center;
+	`;
+
+const StyledIcon = styled(Icon)`
+	margin-bottom: 20px;
+`;
+
+interface DemoIconsProps {
+	names: typeof IconName;
+	size: IconSize;
+}
+
+const DemoIcons = (props: DemoIconsProps) => (
+	<StyledDemoIconList>
+		{reduce(props.names, (name, id) => [
+			<StyledDemoListItem key={name}>
+				<StyledIcon name={id} size={props.size}/>
+			</StyledDemoListItem>
+		])}
+	</StyledDemoIconList>
+);
+
+const IconRegistryDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<div>
+		<DemoIcons size={IconSize.XS} names={IconName}/>
+		<DemoIcons size={IconSize.S} names={IconName}/>
+		<IconRegistry names={IconName}/>
+	</div>
+);
+
+export default IconRegistryDemo;

src/lsg/patterns/icons/index.tsx

@@ -0,0 +1,109 @@
+import { Color } from '../colors';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export enum IconName {
+	Robo
+}
+export interface IconRegistryProps {
+	names: typeof IconName;
+}
+
+export interface IconProps {
+	className?: string;
+	color?: Color;
+	name: IconName | null;
+	size?: Size;
+}
+
+export enum Size {
+	XS = 24,
+	S = 38
+}
+
+interface StyledIconProps {
+	className?: string;
+	iconColor?: Color;
+	size?: Size;
+}
+
+interface IconRegistrySymbolProps {
+	id: string;
+}
+
+const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
+	[IconName.Robo]: [
+		[
+			<path key="robo" d="M0 0h24v24H0V0zm15 5v5h5V5h-5zM4 20h16v-1H4v1zM4 5v5h5V5H4z"/>
+		]
+	]
+};
+
+const StyledIconRegistry = styled.svg`
+	display: none;
+`;
+
+const StyledIcon = styled.svg`
+	width: ${(props: StyledIconProps) => props.size || Size.S}px;
+	height: ${(props: StyledIconProps) => props.size || Size.S}px;
+
+	color: ${(props: StyledIconProps) => props.iconColor
+		? props.iconColor.toString()
+		: 'inherit'
+	};
+	fill: currentColor;
+	stroke: none;
+	stroke-miterlimit: 10;
+
+
+	@media  (max-resolution: 124dpi) {
+		stroke-width: 1.2px;
+	}
+`;
+
+const IconRegistrySymbol: React.StatelessComponent<IconRegistrySymbolProps> = props =>
+	(
+		<symbol
+			id={`${props.id}`}
+			viewBox="0 0 24 24"
+		>
+			{props.children}
+		</symbol>
+	);
+
+export const IconRegistry: React.StatelessComponent<IconRegistryProps> = (props): JSX.Element =>
+(
+	<StyledIconRegistry>
+		{reduce(props.names, (name, e) => {
+			const iconReg = icons[e];
+
+			return [
+				<IconRegistrySymbol id={name} key={`${name}`}>{iconReg}</IconRegistrySymbol>
+			];
+		})}
+	</StyledIconRegistry>
+);
+
+function getIconRef(name: string): string {
+	return `#${name}`;
+}
+
+export const Icon: React.StatelessComponent<IconProps> = (props): JSX.Element => {
+	const icon = typeof props.name === 'number' ? IconName[props.name] : null;
+	return (
+		<StyledIcon className={props.className} iconColor={props.color} size={props.size}>
+			{icon !== null && <use xlinkHref={getIconRef(icon)} />}
+		</StyledIcon>
+	);
+};
+
+export function reduce(e: typeof IconName, cb: (name: string, e: number) => JSX.Element[]): JSX.Element[] {
+	const results = [];
+	for (const name in e) {
+		if (isNaN(Number(name))) {
+			results.push(...cb(name, Number(e[name])));
+		}
+	}
+
+	return results;
+}

src/lsg/patterns/icons/pattern.json

@@ -0,0 +1,10 @@
+{
+	"name": "icons",
+	"displayName": "Icons",
+	"version": "1.0.0",
+	"tags": ["atoms"],
+	"flag": "alpha",
+	"patterns": {
+	  "colors": "colors"
+	}
+ }

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

@@ -0,0 +1,15 @@
+import { IconName, IconRegistry } from '../icons';
+import PatternListItem from './index';
+import * as React from 'react';
+
+const PatternListItemDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<div>
+		<PatternListItem>
+			Copy
+		</PatternListItem>
+
+		<IconRegistry names={IconName}/>
+	</div>
+);
+
+export default PatternListItemDemo;

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

@@ -0,0 +1,45 @@
+import { colors } from '../colors';
+import { fonts } from '../fonts';
+import { Icon, IconName, Size as IconSize } from '../icons';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export interface PatternListItemProps {
+	className?: string;
+	icon?: string;
+}
+
+const StyledPatternListItem = styled.div`
+	display: flex;
+	align-items: center;
+	padding: 10px;
+	border: 1px solid ${colors.grey90.toString()};
+	border-radius: 3px;
+	background: ${colors.white.toString()};
+	font-family: ${fonts().NORMAL_FONT};
+	font-size: 12px;
+	color: ${colors.black.toString()};
+`;
+
+const StyledSVG = styled.svg`
+	margin-right: 20px;
+	fill: ${colors.grey70.toString()};
+`;
+
+const StyledIcon = styled(Icon)`
+	margin-right: 20px;
+`;
+
+const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => (
+	<StyledPatternListItem className={props.className}>
+		{props.icon
+			? <StyledSVG>
+				<use xlinkHref={props.icon} />
+			</StyledSVG>
+			: <StyledIcon name={IconName.Robo} size={IconSize.XS} color={colors.grey70} />
+		}
+		{props.children}
+	</StyledPatternListItem>
+);
+
+export default PatternListItem;

src/lsg/patterns/pattern-list-item/pattern.json

@@ -0,0 +1,7 @@
+{
+	"name": "pattern-list-item",
+	"displayName": "Pattern List Item",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["pattern-list-item"]
+ }