feat: support withComponent on Input, Button

Author: gregberge

src/Button.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styled, { css } from 'styled-components'
 import handleRef from './internal/handleRef'
+import getWithComponent from './internal/getWithComponent'
 import * as defaultTheme from './style/defaultTheme'
 import { th, mixin } from './utils'
 
@@ -17,8 +18,15 @@ const variants = [
   'dark',
 ]
 
-const ButtonComponent = ({ className, size, theme, variant, ...props }) => (
-  <button
+const ButtonComponent = ({
+  className,
+  component: Component = 'button',
+  size,
+  theme,
+  variant,
+  ...props
+}) => (
+  <Component
     {...props}
     className={classNames(
       'sui-button',
@@ -80,5 +88,7 @@ Button.defaultProps = {
   theme: defaultTheme,
 }
 
+Button.withComponent = getWithComponent(Button, ButtonComponent)
+
 /** @component */
 export default Button

src/Input.js

@@ -3,18 +3,20 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import handleRef from './internal/handleRef'
+import getWithComponent from './internal/getWithComponent'
 import * as defaultTheme from './style/defaultTheme'
 import { th, mixin } from './utils'
 
 const InputComponent = ({
+  component: Component = 'input',
   className,
   control,
   size,
   theme,
   valid,
   ...props
 }) => (
-  <input
+  <Component
     {...props}
     className={classNames(
       'sui-input',
@@ -111,5 +113,7 @@ Input.defaultProps = {
   theme: defaultTheme,
 }
 
+Input.withComponent = getWithComponent(Input, InputComponent)
+
 /** @component */
 export default Input

src/Textarea.js

@@ -1,44 +1,5 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import * as defaultTheme from './style/defaultTheme'
 import Input from './Input'
 
-const TextareaComponent = ({
-  className,
-  control,
-  size,
-  theme,
-  valid,
-  ...props
-}) => (
-  <textarea
-    {...props}
-    className={classNames(
-      'sui-input',
-      {
-        'sui-control': control,
-        'sui-is-valid': valid === true,
-        'sui-is-invalid': valid === false,
-        [`sui-input-${size}`]: size,
-      },
-      className,
-    )}
-  />
-)
+const Textarea = Input.withComponent('textarea')
 
-const Textarea = Input.withComponent(TextareaComponent)
-
-Input.propTypes = {
-  control: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'lg']),
-  theme: PropTypes.object,
-  valid: PropTypes.bool,
-}
-
-Input.defaultProps = {
-  theme: defaultTheme,
-}
-
-/** @component */
 export default Textarea

src/Textarea.md

@@ -1,3 +1,5 @@
+See [`Input`](#input).
+
 ### Sizes
 
 Set heights using `size` prop like `"sm"` or `"lg"`.

src/internal/getWithComponent.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const getWithComponent = (StyledComponent, BaseComponent) => {
+  const originalWithComponent = StyledComponent.withComponent.bind(
+    StyledComponent,
+  )
+
+  const withComponent = component => {
+    const NewStyledComponent = originalWithComponent(props => (
+      <BaseComponent component={component} {...props} />
+    ))
+    NewStyledComponent.withComponent = withComponent
+    return NewStyledComponent
+  }
+
+  return withComponent
+}
+
+export default getWithComponent