feat(lsg): handleClick for element and icons pattern

meetalva · Dec 7, 2017 · 6fa0dca · 6fa0dca
1 parent 4fefa8b
commit 6fa0dca
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 26 deletions.
diff --git a/src/lsg/patterns/element/demo.tsx b/src/lsg/patterns/element/demo.tsx
@@ -1,3 +1,4 @@
+import { IconName, IconRegistry } from '../icons';
 import Element from './index';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -11,11 +12,30 @@ const StyledTestDiv = styled.div`
 const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 	<div>
 		<StyledTestDiv>
-			<Element title="Element">Child</Element>
+			<Element
+				handleIconClick={() => {
+					console.log('Clicked');
+				}}
+				title="Element"
+			>
+				Child
+			</Element>
+		</StyledTestDiv>
+		<StyledTestDiv>
+			<Element title="Element Open" open>
+				Child
+			</Element>
 		</StyledTestDiv>
 		<StyledTestDiv>
 			<Element active title="Active Element" />
 		</StyledTestDiv>
+		<StyledTestDiv>
+			<Element active open title="Active Element">
+				Child
+			</Element>
+		</StyledTestDiv>
+
+		<IconRegistry names={IconName} />
 	</div>
 );
 

diff --git a/src/lsg/patterns/element/index.tsx b/src/lsg/patterns/element/index.tsx
@@ -1,13 +1,24 @@
 import { colors } from '../colors';
+import { Icon, IconName, Size as IconSize } from '../icons';
 import * as React from 'react';
 import styled from 'styled-components';
 
 export interface ElementProps {
 	active?: boolean;
+	open?: boolean;
 	title: string;
+
+	handleIconClick?: React.MouseEventHandler<SVGSVGElement>;
+}
+
+export interface StyledElementChildProps {
+	open?: boolean;
 }
 
 const StyledElement = styled.div`
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 	padding: 0 15px;
 	line-height: 30px;
 	margin-top: 0;
@@ -25,16 +36,29 @@ const StyledElement = styled.div`
 `;
 
 const StyledElementChild = styled.div`
+	flex-basis: 100%;
 	padding-left: 15px;
+	${(props: StyledElementChildProps) => (props.open ? 'display: block;' : 'display: none;')};
+`;
+
+const StyledIcon = styled(Icon)`
+	margin-right: 20px;
+	fill: ${colors.grey70.toString()};
 `;
 
 const Element: React.StatelessComponent<ElementProps> = props => {
-	const { children, title, active } = props;
+	const { children, title, active, open, handleIconClick } = props;
 
 	return (
 		<StyledElement title={title} active={active}>
+			<StyledIcon
+				handleClick={handleIconClick}
+				name={IconName.Robo}
+				size={IconSize.XS}
+				color={colors.grey70}
+			/>
 			{title}
-			<StyledElementChild>{children}</StyledElementChild>
+			<StyledElementChild open={open}>{children}</StyledElementChild>
 		</StyledElement>
 	);
 };

diff --git a/src/lsg/patterns/icons/index.tsx b/src/lsg/patterns/icons/index.tsx
@@ -14,6 +14,7 @@ export interface IconProps {
 	color?: Color;
 	name: IconName | null;
 	size?: Size;
+	handleClick?: React.MouseEventHandler<SVGSVGElement>;
 }
 
 export enum Size {
@@ -33,9 +34,7 @@ interface IconRegistrySymbolProps {
 
 const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
 	[IconName.Robo]: [
-		[
-			<path key="robo" d="M0 0h24v24H0V0zm15 5v5h5V5h-5zM4 20h16v-1H4v1zM4 5v5h5V5H4z"/>
-		]
+		[<path key="robo" d="M0 0h24v24H0V0zm15 5v5h5V5h-5zM4 20h16v-1H4v1zM4 5v5h5V5H4z" />]
 	]
 };
 
@@ -47,38 +46,31 @@ 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'
-	};
+	color: ${(props: StyledIconProps) => (props.iconColor ? props.iconColor.toString() : 'inherit')};
 	fill: currentColor;
 	stroke: none;
 	stroke-miterlimit: 10;
 
-
-	@media  (max-resolution: 124dpi) {
+	@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>
-	);
+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 =>
-(
+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>
+				<IconRegistrySymbol id={name} key={`${name}`}>
+					{iconReg}
+				</IconRegistrySymbol>
 			];
 		})}
 	</StyledIconRegistry>
@@ -91,13 +83,21 @@ function getIconRef(name: string): string {
 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}>
+		<StyledIcon
+			onClick={props.handleClick}
+			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[] {
+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))) {