Add basic Input component wrapper. (#204)

* Add basic Input component wrapper. Fixes #202

* Fix version bump

_templates/component/new/mainimport.js.t

@@ -1,6 +1,6 @@
 ---
 inject: true
-to: src/index.js
+to: src/index.ts
 append: true
 skip_if: ./components/<%= h.changeCase.pascal(name) %>
 ---

example/src/App.js

@@ -22,6 +22,7 @@ import {
   ExpansionPanel,
   Tooltip,
   Callout,
+  Input,
   // IMPORT_INJECTOR
 } from '@cision/rover-ui';
 
@@ -31,6 +32,7 @@ const App = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isEasyPillChecked, setIsEasyPillChecked] = useState(false);
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
 
   const toggleTooltip = function() {
     setTooltipOpen(prev => !prev);
@@ -390,6 +392,13 @@ const App = () => {
           to pay attention to this one, bro.
         </Callout>
       </section>
+      <section>
+        <h1>Input</h1>
+        <Input
+          onChange={e => setInputValue(e.target.value)}
+          value={inputValue}
+        />
+      </section>
       {/** USAGE_INJECTOR */}
     </div>
   );

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cision/rover-ui",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "publishConfig": {
-    "tag": "v1.4.5"
+    "tag": "v1.5.0"
   },
   "description": "UI Component Library",
   "author": "Matthew Wells (https://github.com/mdespuits)",

src/components/Input/README.md

@@ -0,0 +1,9 @@
+# \<Input\>
+
+### Input component is a thin wrapper around an HTML input element
+
+The basic `<Input />` doesn't add any behavior to the HTML element, it just adds styles.
+
+It also provides 1 custom prop
+
+- _fauxDisabled_: Applies the same style as disabled, but, unlike the real thing, doesn't stop click events. Useful for adding tooltips or other helpful behavior when a user tries to interact with a disabled field.

src/components/Input/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './style.css';
+
+const Input = ({ className, fauxDisabled, ...passedProps }) => (
+  <input
+    className={classNames(styles.Input, className, {
+      [styles.disabled]: fauxDisabled,
+    })}
+    {...passedProps}
+  />
+);
+
+Input.propTypes = {
+  className: PropTypes.string,
+  /** Applies disabled appearance without disabling. Helpful for adding tooltips on disabled field clicks. */
+  fauxDisabled: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  className: '',
+  fauxDisabled: false,
+};
+
+export default Input;

src/components/Input/story.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Input from './';
+import Readme from './README.md';
+
+const InteractiveInput = props => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Input {...props} onChange={e => setValue(e.target.value)} value={value} />
+  );
+};
+
+storiesOf('Planets/Input', module)
+  .addParameters({
+    readme: {
+      sidebar: Readme,
+    },
+  })
+  .add(
+    'Overview',
+    () => (
+      <Input
+        disabled={boolean('disabled (HTML)', false)}
+        fauxDisabled={boolean('fauxDisabled', false)}
+        onChange={action('onChange (HTML)')}
+        placeholder={text('placeholder(HTML)', 'Placeholder')}
+        value={text('value (HTML)', '')}
+        pattern={text('pattern (HTML)', '.*')}
+        type={text('type (HTML)', '')}
+      />
+    ),
+    {
+      info: {
+        inline: true,
+        source: true,
+      },
+    }
+  )
+  .add(
+    'Examples',
+    () => (
+      <div>
+        <InteractiveInput placeholder="Type here" />
+        <br />
+        <br />
+        <Input disabled value="Disabled" />
+        <br />
+        <br />
+        <Input pattern="" value="Invalid" />
+      </div>
+    ),
+    {
+      info: {
+        inline: false,
+        source: true,
+      },
+    }
+  );

src/components/Input/style.css

@@ -0,0 +1,61 @@
+.Input {
+  background-color: var(--rvr-white);
+  border-radius: var(--rvr-border-radius);
+  border: var(--rvr-border-width-md) solid var(--rvr-gray-60);
+  color: var(--rvr-gray-90);
+  font-family: var(--rvr-base-font-family);
+  line-height: var(--rvr-line-height-lg);
+  padding: var(--rvr-space-bordered-sm);
+  transition:
+    100ms linear background-color,
+    100ms linear border-color,
+    100ms linear box-shadow,
+    100ms linear color;
+}
+
+.Input::placeholder {
+  color: var(--rvr-gray-60);
+}
+
+.Input:hover {
+  background-color: var(--rvr-gray-10);
+  border-color: var(--rvr-gray-80);
+}
+
+.Input:hover::placeholder {
+  color: var(--rvr-gray-80);
+}
+
+.Input:focus {
+  border-color: var(--rvr-color-primary);
+  box-shadow: 0 0 4px var(--rvr-color-primary);
+  outline: 0 none;
+}
+
+.Input:active {
+  background-color: var(--rvr-gray-10);
+  border-color: var(--rvr-gray-80);
+}
+
+.Input:active::placeholder {
+  color: var(--rvr-gray-80);
+}
+
+.Input:disabled,
+.Input.disabled {
+  border-color: var(--rvr-gray-40);
+  color: var(--rvr-gray-40);
+  cursor: default;
+}
+
+.Input:disabled::placeholder,
+.Input.disabled::placeholder {
+  color: var(--rvr-gray-60);
+}
+
+.Input:invalid,
+.Input.invalid {
+  background-color: var(--rvr-color-danger-lite);
+  border-color: var(--rvr-color-danger);
+  color: var(--rvr-color-danger);
+}

src/components/Input/test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Input from './';
+
+describe('Input', () => {
+  it('renders', () => {
+    shallow(<Input />);
+  });
+});

src/index.ts

@@ -31,3 +31,4 @@ export {
 } from './components/TabMenu';
 
 export { default as Tooltip, EasyRichTooltip } from './components/Tooltip';
+export { default as Input } from './components/Input';

src/shared/sizing.css

@@ -58,4 +58,5 @@
   /* line-height */
   --rvr-line-height-sm: calc(var(--rvr-baseSize) * 2); /* 16px */
   --rvr-line-height-md: calc(var(--rvr-baseSize) * 2.5); /* 20px */
+  --rvr-line-height-lg: calc(var(--rvr-baseSize) * 3); /* 24px */
 }

src/shared/variables.css

@@ -22,4 +22,7 @@
   --rvr-zindex-modal-backdrop: 1060;
   --rvr-zindex-modal: 1070;
   --rvr-zindex-popover: 1080;
+
+  /* Borders */
+  --rvr-border-radius: 4px;
 }

src/stories/index.js

@@ -70,4 +70,5 @@ import '../components/Responsive/Visible/story';
  * Move these to a section above before committing
  */
 import '../components/Tooltip/story';
+import '../components/Input/story';
 /** INJECTOR */