Merge pull request #110 from HelixDesignSystem/fixes01

Choice Tile Updates

Author: nicko-winner

src/Checkbox/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
 
-const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
+const Checkbox = ({ id, label, indeterminate, className, style, ...rest }) => {
   const inputRef = useRef();
   useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
@@ -20,6 +20,7 @@ const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
 
 Checkbox.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,

src/ChoiceTile/index.js

@@ -17,19 +17,21 @@ const ChoiceTile = ({
   size,
   subdued,
   title,
+  style,
   ...rest
 }) => {
   return (
-    <label className={classNames({ hxChoice: true, className })}>
+    <label className={classNames({ hxChoice: true }, className)} style={style}>
       <input
         checked={wcBool(checked)}
         disabled={disabled}
         invalid={invalid?.toString()}
         name={name}
         onChange={onChange}
         type="radio"
+        {...rest}
       />
-      <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })} {...rest}>
+      <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}>
         <hx-icon type="checkmark"></hx-icon>
         {icon && (
           <div className="hx-tile-icon">
@@ -47,6 +49,7 @@ ChoiceTile.propTypes = {
   checked: PropTypes.bool.isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
+  style: PropTypes.object,
   disabled: PropTypes.bool,
   icon: PropTypes.string,
   invalid: PropTypes.bool,

src/ChoiceTile/stories.js

@@ -46,7 +46,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         icon={icon}
         name="choiceTileDemo"
         onChange={action('onChange')}
-        style={{ width: 200 }}
+        style={{ width: 200, float: 'left' }}
         title={title || defaultTitle}
       >
         {<p>{description || defaultDescription}</p>}
@@ -55,7 +55,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
       <ChoiceTile
         icon="bell"
         name="choiceTileDemo"
-        style={{ marginLeft: 25, width: 200 }}
+        style={{ marginLeft: 25, width: 200, float: 'left' }}
         title="Other Choice"
       >
         {<p>{defaultDescription}</p>}

src/Radio/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Radio = ({ id, label, className, ...rest }) => {
+const Radio = ({ id, label, className, style, ...rest }) => {
   return (
-    <hx-radio-control class={className}>
+    <hx-radio-control class={className} style={style}>
       <input {...rest} id={id} type="radio" />
       <label htmlFor={id}>
         <hx-radio></hx-radio>
@@ -16,6 +16,7 @@ const Radio = ({ id, label, className, ...rest }) => {
 Radio.propTypes = {
   label: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,

src/Search/index.js

@@ -20,6 +20,7 @@ const Search = ({
   required,
   containerId,
   value,
+  style,
   ...rest
 }) => {
   /**
@@ -39,7 +40,7 @@ const Search = ({
   }, [value]);
 
   return (
-    <hx-search-control class={className} id={containerId}>
+    <hx-search-control class={className} id={containerId} style={style}>
       <input
         id={id}
         value={value}
@@ -69,6 +70,7 @@ const Search = ({
 
 Search.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,

src/Select/index.js

@@ -11,10 +11,11 @@ const Select = ({
   onChange,
   optional,
   required,
+  style,
   ...rest
 }) => {
   return (
-    <hx-select-control class={className}>
+    <hx-select-control class={className} style={style}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
         {children}
       </select>
@@ -37,6 +38,7 @@ const Select = ({
 Select.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,

src/Text/index.js

@@ -2,9 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Text = ({ id, label, className, required, optional, children, prefix, suffix, ...rest }) => {
+const Text = ({
+  id,
+  label,
+  className,
+  required,
+  optional,
+  children,
+  prefix,
+  suffix,
+  style,
+  ...rest
+}) => {
   return (
-    <hx-text-control class={className}>
+    <hx-text-control class={className} style={style}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
@@ -26,6 +37,7 @@ const Text = ({ id, label, className, required, optional, children, prefix, suff
 Text.propTypes = {
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,

src/TextArea/index.js

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({ id, label, className, required, optional, children, ...rest }) => {
+const TextArea = ({ id, label, className, required, optional, children, style, ...rest }) => {
   return (
-    <hx-textarea-control class={className}>
+    <hx-textarea-control class={className} style={style}>
       <textarea {...rest} id={id} required={required} />
       <label
         className={classnames({
@@ -23,6 +23,7 @@ const TextArea = ({ id, label, className, required, optional, children, ...rest
 TextArea.propTypes = {
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,