support and proxy native component attributes (fixes #53)

ui/src/components/avatar/index.js

@@ -5,10 +5,15 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Avatar = ({
-  color,
-  src,
-  name = '',
+  alt,
   className,
+  color,
+  crossorigin,
+  longdesc,
+  name = '',
+  sizes,
+  src,
+  srcset,
   style
 }) => {
 
@@ -25,9 +30,13 @@ const Avatar = ({
   const letter = name.split('')[0];
   const av = src ? (
     <img
-      alt={name}
+      alt={alt || name}
       className={styles.picture}
+      crossOrigin={crossorigin}
+      longdesc={longdesc}
+      sizes={sizes}
       src={src}
+      srcSet={srcset}
       style={style}
     />
   ) : (
@@ -47,11 +56,18 @@ const Avatar = ({
 };
 
 Avatar.propTypes = {
+  alt: React.PropTypes.string,
   className: React.PropTypes.string,
   color: React.PropTypes.string,
+  crossorigin: React.PropTypes.string,
+  longdesc: React.PropTypes.string,
   name: React.PropTypes.string,
+  sizes: React.PropTypes.string,
   src: React.PropTypes.string,
+  srcset: React.PropTypes.string,
   style: React.PropTypes.object
 };
 
 module.exports = Avatar;
+
+

ui/src/components/button/index.js

@@ -3,11 +3,21 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Button = ({
-  disabled = false,
-  secondary = false,
+  autoFocus,
+  children,
   className,
+  disabled = false,
+  form,
+  formAction,
+  formEncType,
+  formMethod,
+  formNoValidate,
+  formTarget,
+  name,
+  secondary = false,
   style,
-  children
+  type,
+  value
 }) => {
   const cn = classNames(
     className,
@@ -18,9 +28,19 @@ const Button = ({
 
   return (
     <button
+      autoFocus={autoFocus}
       className={cn}
       disabled={disabled}
+      form={form}
+      formAction={formAction}
+      formEncType={formEncType}
+      formMethod={formMethod}
+      formNoValidate={formNoValidate}
+      formTarget={formTarget}
+      name={name}
       style={style}
+      type={type}
+      value={value}
     >
       {children}
     </button>
@@ -28,11 +48,21 @@ const Button = ({
 };
 
 Button.propTypes = {
+  autoFocus: React.PropTypes.string,
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
+  formAction: React.PropTypes.string,
+  formEncType: React.PropTypes.string,
+  formMethod: React.PropTypes.string,
+  formNoValidate: React.PropTypes.bool,
+  formTarget: React.PropTypes.string,
+  name: React.PropTypes.string,
   secondary: React.PropTypes.bool,
-  style: React.PropTypes.object
+  style: React.PropTypes.object,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
 };
 
 module.exports = Button;

ui/src/components/checkbox/index.js

@@ -4,12 +4,18 @@ const styles = require('./style.css');
 
 const Checkbox = ({
   checked = false,
-  className,
   children,
+  className,
   disabled = false,
+  form,
   id,
+  name,
   onChange,
-  style
+  readOnly,
+  required,
+  selectionDirection,
+  style,
+  tabIndex
 }) => {
   const cn = classNames(
     className,
@@ -24,9 +30,15 @@ const Checkbox = ({
         checked={checked}
         className={cn}
         disabled={disabled}
+        form={form}
         id={id}
+        name={name}
         onChange={onChange}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
         style={style}
+        tabIndex={tabIndex}
         type='checkbox'
       />
       <span>{children}</span>
@@ -39,9 +51,15 @@ Checkbox.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
   id: React.PropTypes.string,
+  name: React.PropTypes.string,
   onChange: React.PropTypes.func,
-  style: React.PropTypes.object
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string
 };
 
 module.exports = Checkbox;

ui/src/components/input/index.js

@@ -3,14 +3,26 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Input = ({
+  autoComplete,
+  autoFocus,
   children,
   className,
   disabled = false,
+  form,
   id,
+  inputMode,
   label,
+  list,
+  name,
   onChange,
+  pattern,
   placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
   style,
+  tabIndex,
   type,
   value
 }) => {
@@ -31,11 +43,23 @@ const Input = ({
       </label>
       <input
         aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
         className={styles.input}
         disabled={disabled}
+        form={form}
         id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
         onChange={onChange}
+        pattern={pattern}
         placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
         type={type}
         value={value}
       />
@@ -45,14 +69,26 @@ const Input = ({
 };
 
 Input.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.string,
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
   id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
   label: React.PropTypes.string,
+  list: React.PropTypes.string,
+  name: React.PropTypes.string,
   onChange: React.PropTypes.func,
+  pattern: React.PropTypes.string,
   placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
   style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
   type: React.PropTypes.string,
   value: React.PropTypes.string
 };

ui/src/components/radio/index.js

@@ -8,11 +8,16 @@ const Radio = ({
   className,
   defaultChecked,
   disabled = false,
+  form,
   id,
   label,
   name,
   onChange,
+  readOnly,
+  required,
+  selectionDirection,
   style,
+  tabIndex,
   value
 }) => {
   const _label = label || children;
@@ -34,9 +39,14 @@ const Radio = ({
           className={styles.input}
           defaultChecked={defaultChecked}
           disabled={disabled}
+          form={form}
           id={id}
           name={name}
           onChange={onChange}
+          readOnly={readOnly}
+          required={required}
+          selectionDirection={selectionDirection}
+          tabIndex={tabIndex}
           type='radio'
           value={value}
         />
@@ -57,11 +67,16 @@ Radio.propTypes = {
   className: React.PropTypes.string,
   defaultChecked: React.PropTypes.bool,
   disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
   id: React.PropTypes.string,
   label: React.PropTypes.string,
   name: React.PropTypes.string.isRequired,
   onChange: React.PropTypes.func,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
   style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
   value: React.PropTypes.string.isRequired
 };