From 914a47a29ae3283380fe14e2d416f9a822558388 Mon Sep 17 00:00:00 2001
From: Tako Schotanus <tako@ceylon-lang.org>
Date: Fri, 13 Jul 2018 20:37:18 +0200
Subject: [PATCH] feat(component): Made `SelectBox.Item` selectable

---
 src/components/SelectBox.css | 5 ++++-
 src/components/SelectBox.js  | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectBox.css b/src/components/SelectBox.css
index eb108fc..e11a167 100644
--- a/src/components/SelectBox.css
+++ b/src/components/SelectBox.css
@@ -1,5 +1,4 @@
 
-
 .template-item.dummy {
   font-family: 'Redacted Script' !important;
 }
@@ -8,6 +7,10 @@
   font-family: 'Redacted Script Bold' !important;
 }
 
+.template-item.selected {
+  background-color: gainsboro !important;
+}
+
 .template-item .picture {
   display: inline-block;
   width: 90px;
diff --git a/src/components/SelectBox.js b/src/components/SelectBox.js
index db19591..ed396e0 100644
--- a/src/components/SelectBox.js
+++ b/src/components/SelectBox.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './SelectBox.css';
+import classNames from 'classnames';
 
 import { Card, Label } from 'semantic-ui-react'
 import Picture from './Picture';
 
 const Item = (props) => (
-  <Card as="a" className={`template-item ${props.dummy && 'dummy'}`} onClick={props.onClick} raised>
+  <Card as="a" className={classNames('template-item', {'dummy': props.dummy, 'selected': props.selected})} onClick={props.onClick} raised>
     <div className="main-content">
       <Picture value={props.picture} />
       <Card.Content>