feat(Input): add new component

docs/src/components/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
-import { Menu, Icon, Input } from 'semantic-ui-react'
+import { Menu, Icon, Input as SemanticUIInput } from 'semantic-ui-react'
 
 import Logo from 'docs/src/components/Logo/Logo'
 import { getComponentPathname, typeOrder, repoURL } from 'docs/src/utils'
@@ -190,7 +190,7 @@ class Sidebar extends Component<any, any> {
           <Icon name="file alternate outline" /> CHANGELOG
         </Menu.Item>
         <Menu.Item active>
-          <Input
+          <SemanticUIInput
             className="transparent inverted icon"
             icon="search"
             placeholder="Search components..."

docs/src/examples/components/Input/Types/InputExample.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputExample = () => <Input placeholder="Search..." />
+
+export default InputExample

docs/src/examples/components/Input/Types/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Input."
+      examplePath="components/Input/Types/InputExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputExampleIcon = () => <Input icon="search" placeholder="Search..." />
+
+export default InputExampleIcon

docs/src/examples/components/Input/Variations/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Icon"
+      description="An input can have a search icon."
+      examplePath="components/Input/Variations/InputExampleIcon"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/Input/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Types from './Types'
+import Variations from './Variations'
+
+const InputExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default InputExamples

src/components/Icon/fontAwesomeIconRules.ts

@@ -26,6 +26,7 @@ const fontAwesomeIcons = new Map([
   ['check', 'f00c'],
   ['minus', 'f068'],
   ['clock', 'f017'],
+  ['search', 'f002'],
 ])
 
 export default name => {

src/components/Input/Input.tsx

@@ -0,0 +1,129 @@
+import PropTypes from 'prop-types'
+import React, { Children, cloneElement } from 'react'
+import cx from 'classnames'
+import _ from 'lodash'
+
+import {
+  childrenExist,
+  createHTMLInput,
+  customPropTypes,
+  getUnhandledProps,
+  partitionHTMLProps,
+  UIComponent,
+} from '../../lib'
+import inputRules from './inputRules'
+import inputVariables from './inputVariables'
+import Icon from '../Icon'
+
+/**
+ * An Input
+ * @accessibility This is example usage of the accessibility tag.
+ */
+class Input extends UIComponent<any, any> {
+  static className = 'ui-input'
+
+  static displayName = 'Input'
+
+  static rules = inputRules
+  static variables = inputVariables
+
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** Optional Icon to display inside the Input. */
+    icon: customPropTypes.itemShorthand,
+
+    /** Shorthand for creating the HTML Input. */
+    input: customPropTypes.itemShorthand,
+
+    /** The HTML input type. */
+    type: PropTypes.string,
+  }
+
+  static handledProps = ['as', 'children', 'className', 'icon', 'input', 'type']
+
+  static defaultProps = {
+    as: 'div',
+    type: 'text',
+  }
+
+  handleChildOverrides = (child, defaultProps) => ({
+    ...defaultProps,
+    ...child.props,
+  })
+
+  partitionProps = () => {
+    const { type } = this.props
+
+    const unhandled = getUnhandledProps(Input, this.props)
+    const [htmlInputProps, rest] = partitionHTMLProps(unhandled)
+
+    return [
+      {
+        ...htmlInputProps,
+        type,
+      },
+      rest,
+    ]
+  }
+
+  computeIcon = () => {
+    const { icon } = this.props
+
+    if (!_.isNil(icon)) return icon
+    return null
+  }
+
+  renderComponent({ ElementType, classes, rest }) {
+    const { children, className, icon, input, type } = this.props
+    const [htmlInputProps, restProps] = this.partitionProps()
+
+    const inputClasses = cx(classes.input)
+
+    // Render with children
+    // ----------------------------------------
+    if (childrenExist(children)) {
+      // add htmlInputProps to the `<input />` child
+      const childElements = _.map(Children.toArray(children), child => {
+        if (child.type !== 'input') return child
+        return cloneElement(child, this.handleChildOverrides(child, htmlInputProps))
+      })
+
+      return (
+        <ElementType {...rest} className={classes.root}>
+          {childElements}
+        </ElementType>
+      )
+    }
+
+    if (this.computeIcon()) {
+      return (
+        <ElementType {...rest} className={classes.root} {...htmlInputProps}>
+          {createHTMLInput(input || type, {
+            defaultProps: htmlInputProps,
+            overrideProps: { className: inputClasses },
+          })}
+          <Icon name={this.computeIcon()} />
+        </ElementType>
+      )
+    }
+
+    return (
+      <ElementType {...rest} className={classes.root} {...htmlInputProps}>
+        {createHTMLInput(input || type, {
+          defaultProps: htmlInputProps,
+          overrideProps: { className: inputClasses },
+        })}
+      </ElementType>
+    )
+  }
+}
+
+export default Input

src/components/Input/index.ts

@@ -0,0 +1 @@
+export { default } from './Input'

src/components/Input/inputRules.ts

@@ -0,0 +1,23 @@
+const inputRules = {
+  root: ({ props, variables }) => {
+    return {
+      display: 'inline-flex',
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      border: variables.defaultBorder,
+      borderRadius: variables.borderRadius,
+      outline: 0,
+      padding: variables.defaultPadding,
+    }
+  },
+
+  input: ({ props, variables }) => {
+    return {
+      outline: 0,
+      border: 0,
+    }
+  },
+}
+
+export default inputRules

src/components/Input/inputVariables.ts

@@ -0,0 +1,14 @@
+import { pxToRem } from '../../lib'
+
+export default (siteVars: any) => {
+  const vars: any = {}
+
+  vars.borderRadius = `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`
+
+  vars.defaultBorder = `${pxToRem(1)} solid #222426`
+  vars.defaultBorderFocus = `${pxToRem(1)} solid #85b7d9`
+  vars.defaultBorderError = `${pxToRem(1)} solid #e0b4b4`
+  vars.defaultPadding = `${pxToRem(6)} 0 ${pxToRem(6)} ${pxToRem(10)}`
+
+  return vars
+}

src/index.ts

@@ -4,6 +4,7 @@ export { default as Chat } from './components/Chat'
 export { default as ChatMessage } from './components/Chat'
 export { default as Divider } from './components/Divider'
 export { default as Image } from './components/Image'
+export { default as Input } from './components/Input'
 export { default as Label } from './components/Label'
 export { default as Layout } from './components/Layout'
 export { default as List } from './components/List'

test/specs/components/Input/Input-test.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { isConformant } from 'test/specs/commonTests'
+import { getTestingRenderedComponent } from 'test/utils'
+
+import Input from 'src/components/Input/Input'
+
+describe('Input', () => {
+  isConformant(Input)
+})