Implement Choice Tile

src/Choice Tile/index.js

@@ -0,0 +1,64 @@
+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,
+  invalid,
+  name,
+  onChange,
+  size,
+  subdued,
+  title,
+  ...rest
+}) => {
+  return (
+    <label className={classNames({ hxChoice: true, className })}>
+      <input
+        checked={wcBool(checked)}
+        disabled={disabled}
+        invalid={invalid?.toString()}
+        name={name}
+        onChange={onChange}
+        type="radio"
+      />
+      <hx-tile class={classNames({ hxSubdued: 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,
+  invalid: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(SIZES),
+  subdued: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+};
+
+ChoiceTile.defaultProps = {
+  checked: false,
+};
+
+export default ChoiceTile;

src/Choice Tile/stories.js

@@ -0,0 +1,65 @@
+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';
+
+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}
+        name="choiceTileDemo"
+        onChange={action('onChange')}
+        style={{ width: 200 }}
+        title={title || defaultTitle}
+      >
+        {<p>{description || defaultDescription}</p>}
+      </ChoiceTile>
+
+      <ChoiceTile
+        icon="bell"
+        name="choiceTileDemo"
+        style={{ marginLeft: 25, width: 200 }}
+        title="Other Choice"
+      >
+        {<p>{defaultDescription}</p>}
+      </ChoiceTile>
+    </React.Fragment>
+  );
+});

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