From 95f5b4570e650f10540c85b5e02d63c127185c69 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:04:33 -0400
Subject: [PATCH 1/8] Create get short text util

---
 src/storyUtils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/storyUtils.js b/src/storyUtils.js
index c6f0e5d..bf6075a 100644
--- a/src/storyUtils.js
+++ b/src/storyUtils.js
@@ -1,3 +1,5 @@
+export const getShortText = () => `lorem ipsum dolor sir amet`;
+
 export const getLongText = () => `
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
   labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis

From a8791875fb0325d6d50d9972c67dd18776f66669 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:04:45 -0400
Subject: [PATCH 2/8] Implement choice tile

---
 src/Choice Tile/index.js | 65 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/Choice Tile/index.js

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
new file mode 100644
index 0000000..ee48b4d
--- /dev/null
+++ b/src/Choice Tile/index.js	
@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { SIZES } from '../constants';
+import { wcBool } from '../utils';
+
+const ChoiceTile = ({
+  checked,
+  children,
+  className,
+  disabled,
+  icon,
+  id,
+  invalid,
+  onChange,
+  size,
+  subdued,
+  title,
+  ...rest
+}) => {
+  return (
+    <label className="hxChoice">
+      <input
+        checked={wcBool(checked)}
+        disabled={wcBool(disabled)}
+        invalid={wcBool(invalid)?.toString()}
+        name={id}
+        type="radio"
+      />
+      <hx-tile
+        class={classNames({ className, hxSubdued: wcBool(subdued), [SIZES[size]]: true })}
+        {...rest}
+      >
+        <hx-icon type="checkmark"></hx-icon>
+        {icon && (
+          <div className="hx-tile-icon">
+            <hx-icon type={icon}></hx-icon>
+          </div>
+        )}
+        <header>{title}</header>
+        {children}
+      </hx-tile>
+    </label>
+  );
+};
+
+ChoiceTile.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  invalid: PropTypes.bool,
+  size: PropTypes.oneOf(SIZES),
+  subdued: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+};
+
+ChoiceTile.defaultProps = {
+  checked: false,
+};
+
+export default ChoiceTile;

From a3e5dd7904b5d4c311749dca03967b426a3b7ca1 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:04:51 -0400
Subject: [PATCH 3/8] Create demo

---
 src/Choice Tile/stories.js | 63 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/Choice Tile/stories.js

diff --git a/src/Choice Tile/stories.js b/src/Choice Tile/stories.js
new file mode 100644
index 0000000..8673c71
--- /dev/null
+++ b/src/Choice Tile/stories.js	
@@ -0,0 +1,63 @@
+import React from 'react';
+import { optionsKnob as options } from '@storybook/addon-knobs';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import ChoiceTile from './index';
+import { getShortText } from '../storyUtils';
+
+const SIZES = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+};
+
+storiesOf('Choice Tile', module).add('All Knobs', () => {
+  let description = text('description', '');
+  let title = text('title', '');
+  let checked = boolean('checked', false);
+  let disabled = boolean('disabled', false);
+  let invalid = boolean('invalid', false);
+  let subdued = boolean('subdued', false);
+  let size = select('size', SIZES, 'medium');
+  let icon = options(
+    'icon',
+    {
+      account: 'account',
+      bell: 'bell',
+      key: 'key',
+    },
+    'key',
+    { display: 'inline-radio' }
+  );
+
+  const defaultDescription = getShortText();
+  const defaultTitle = 'Title Here';
+
+  return (
+    <React.Fragment>
+      <ChoiceTile
+        {...(checked && { checked })}
+        {...(disabled && { disabled })}
+        {...(invalid && { invalid })}
+        {...(subdued && { subdued })}
+        {...(size && { size })}
+        icon={icon}
+        id="choiceTileDemo"
+        style={{ width: 200 }}
+        title={title || defaultTitle}
+      >
+        {<p>{description || defaultDescription}</p>}
+      </ChoiceTile>
+
+      <ChoiceTile
+        icon="bell"
+        id="choiceTileDemo"
+        style={{ marginLeft: 25, width: 200 }}
+        title="Other Choice"
+      >
+        {<p>{defaultDescription}</p>}
+      </ChoiceTile>
+    </React.Fragment>
+  );
+});

From a3ea1ded46e1f7c522591eeb2c92ef3f48891bdc Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:32:35 -0400
Subject: [PATCH 4/8] Move class name to top level

---
 src/Choice Tile/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
index ee48b4d..2af217b 100644
--- a/src/Choice Tile/index.js	
+++ b/src/Choice Tile/index.js	
@@ -20,7 +20,7 @@ const ChoiceTile = ({
   ...rest
 }) => {
   return (
-    <label className="hxChoice">
+    <label className={classNames({ hxChoice: true, className })}>
       <input
         checked={wcBool(checked)}
         disabled={wcBool(disabled)}
@@ -29,7 +29,7 @@ const ChoiceTile = ({
         type="radio"
       />
       <hx-tile
-        class={classNames({ className, hxSubdued: wcBool(subdued), [SIZES[size]]: true })}
+        class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}
         {...rest}
       >
         <hx-icon type="checkmark"></hx-icon>

From f2d95b5cab4984fea20bcd88927304facd2a9cc5 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:37:45 -0400
Subject: [PATCH 5/8] Remove unneeded wcBool uses

---
 src/Choice Tile/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
index 2af217b..cbcb867 100644
--- a/src/Choice Tile/index.js	
+++ b/src/Choice Tile/index.js	
@@ -23,8 +23,8 @@ const ChoiceTile = ({
     <label className={classNames({ hxChoice: true, className })}>
       <input
         checked={wcBool(checked)}
-        disabled={wcBool(disabled)}
-        invalid={wcBool(invalid)?.toString()}
+        disabled={disabled}
+        invalid={invalid?.toString()}
         name={id}
         type="radio"
       />

From 6bc8bad3abfea616d2fdcb0b264332d48a6e0c23 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 17:37:55 -0400
Subject: [PATCH 6/8] Prettier

---
 src/Choice Tile/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
index cbcb867..b8adc8d 100644
--- a/src/Choice Tile/index.js	
+++ b/src/Choice Tile/index.js	
@@ -28,10 +28,7 @@ const ChoiceTile = ({
         name={id}
         type="radio"
       />
-      <hx-tile
-        class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}
-        {...rest}
-      >
+      <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })} {...rest}>
         <hx-icon type="checkmark"></hx-icon>
         {icon && (
           <div className="hx-tile-icon">

From 34600cc7cf0cfea68e72d806387960a68053fdf7 Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 18:38:06 -0400
Subject: [PATCH 7/8] id --> name

---
 src/Choice Tile/index.js   | 6 +++---
 src/Choice Tile/stories.js | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
index b8adc8d..bc989c2 100644
--- a/src/Choice Tile/index.js	
+++ b/src/Choice Tile/index.js	
@@ -11,8 +11,8 @@ const ChoiceTile = ({
   className,
   disabled,
   icon,
-  id,
   invalid,
+  name,
   onChange,
   size,
   subdued,
@@ -25,7 +25,7 @@ const ChoiceTile = ({
         checked={wcBool(checked)}
         disabled={disabled}
         invalid={invalid?.toString()}
-        name={id}
+        name={name}
         type="radio"
       />
       <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })} {...rest}>
@@ -48,8 +48,8 @@ ChoiceTile.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   icon: PropTypes.string,
-  id: PropTypes.string.isRequired,
   invalid: PropTypes.bool,
+  name: PropTypes.string.isRequired,
   size: PropTypes.oneOf(SIZES),
   subdued: PropTypes.bool,
   title: PropTypes.string.isRequired,
diff --git a/src/Choice Tile/stories.js b/src/Choice Tile/stories.js
index 8673c71..0c4bf1e 100644
--- a/src/Choice Tile/stories.js	
+++ b/src/Choice Tile/stories.js	
@@ -43,7 +43,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         {...(subdued && { subdued })}
         {...(size && { size })}
         icon={icon}
-        id="choiceTileDemo"
+        name="choiceTileDemo"
         style={{ width: 200 }}
         title={title || defaultTitle}
       >
@@ -52,7 +52,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
 
       <ChoiceTile
         icon="bell"
-        id="choiceTileDemo"
+        name="choiceTileDemo"
         style={{ marginLeft: 25, width: 200 }}
         title="Other Choice"
       >

From 2c5553d66b63a615ad3dcb9527e2e4b5076aeb5c Mon Sep 17 00:00:00 2001
From: Mike Mangialardi <mike.mangialardi@rackspace.com>
Date: Mon, 18 May 2020 18:38:19 -0400
Subject: [PATCH 8/8] Expose onChange

---
 src/Choice Tile/index.js   | 2 ++
 src/Choice Tile/stories.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js
index bc989c2..269d45b 100644
--- a/src/Choice Tile/index.js	
+++ b/src/Choice Tile/index.js	
@@ -26,6 +26,7 @@ const ChoiceTile = ({
         disabled={disabled}
         invalid={invalid?.toString()}
         name={name}
+        onChange={onChange}
         type="radio"
       />
       <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })} {...rest}>
@@ -50,6 +51,7 @@ ChoiceTile.propTypes = {
   icon: PropTypes.string,
   invalid: PropTypes.bool,
   name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
   size: PropTypes.oneOf(SIZES),
   subdued: PropTypes.bool,
   title: PropTypes.string.isRequired,
diff --git a/src/Choice Tile/stories.js b/src/Choice Tile/stories.js
index 0c4bf1e..7051c5c 100644
--- a/src/Choice Tile/stories.js	
+++ b/src/Choice Tile/stories.js	
@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { optionsKnob as options } from '@storybook/addon-knobs';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -44,6 +45,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         {...(size && { size })}
         icon={icon}
         name="choiceTileDemo"
+        onChange={action('onChange')}
         style={{ width: 200 }}
         title={title || defaultTitle}
       >