feat(lsg): label for enum-item

src/lsg/patterns/property-items/enum-item/demo.tsx

@@ -17,11 +17,7 @@ export class BooleanItemDemo extends React.Component<{}, EnumItemDemoState> {
 	public constructor(props: {}) {
 		super(props);
 
-		const values = [
-			'Medium',
-			'Rare',
-			'Solid Shoe'
-		];
+		const values = ['Medium', 'Rare', 'Solid Shoe'];
 
 		this.state = {
 			values,
@@ -42,6 +38,7 @@ export class BooleanItemDemo extends React.Component<{}, EnumItemDemoState> {
 			<div>
 				<StyledDemo>
 					<EnumItem
+						label="Label"
 						values={this.state.values}
 						selectedValue={this.state.selectedItem}
 						handleChange={this.handleChange}

src/lsg/patterns/property-items/enum-item/index.tsx

@@ -1,21 +1,43 @@
+import { getSpace, Size } from '../../space/index';
+import { fonts } from '../../fonts/index';
+import { colors } from '../../colors/index';
 import * as React from 'react';
+import styled from 'styled-components';
 
 export interface EnumItemProps {
+	label: string;
 	selectedValue: string;
 	values: string[];
 	className?: string;
 	handleChange?: React.ChangeEventHandler<HTMLSelectElement>;
 }
 
+const StyledEnumItem = styled.div`
+	width: 100%;
+`;
+
+const StyledLabel = styled.span`
+	display: block;
+	margin-bottom: ${getSpace(Size.XS)}px;
+	font-size: 14px;
+	font-family: ${fonts().NORMAL_FONT};
+	color: ${colors.grey70.toString()};
+`;
+
 export const EnumItem: React.StatelessComponent<EnumItemProps> = props => {
-	const { className, values, selectedValue, handleChange } = props;
+	const { className, values, selectedValue, handleChange, label } = props;
 
 	return (
-		<select className={className} onChange={handleChange} value={selectedValue}>
-			{values.map(value =>
-				<option value={value} key={value}>{value}</option>
-			)};
-		</select>
+		<StyledEnumItem className={className}>
+			<StyledLabel>{label}</StyledLabel>
+			<select className={className} onChange={handleChange} value={selectedValue}>
+				{values.map(value => (
+					<option value={value} key={value}>
+						{value}
+					</option>
+				))};
+			</select>
+		</StyledEnumItem>
 	);
 };