feat(FluidTextInput): create FluidTextInput component

packages/react/src/components/FluidTextInput/FluidTextInput.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import FluidForm from '../FluidForm';
+import TextInput from '../TextInput';
+
+function FluidTextInput({ className, ...other }) {
+  return (
+    <FluidForm className={className}>
+      <TextInput {...other} />
+    </FluidForm>
+  );
+}
+
+FluidTextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+export default FluidTextInput;

packages/react/src/components/FluidTextInput/FluidTextInput.stories.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import FluidTextInput from '../FluidTextInput';
+import {
+  ToggletipLabel,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+} from '../Toggletip';
+import { Information } from '@carbon/icons-react';
+
+export default {
+  title: 'Components/FluidTextInput',
+  component: FluidTextInput,
+};
+
+export const Default = () => (
+  <FluidTextInput labelText="Label" placeholder="Placeholder text" />
+);
+
+const ToggleTip = (
+  <>
+    <ToggletipLabel>Label</ToggletipLabel>
+    <Toggletip>
+      <ToggletipButton label="Show information">
+        <Information />
+      </ToggletipButton>
+      <ToggletipContent>
+        <p>Additional field information here.</p>
+      </ToggletipContent>
+    </Toggletip>
+  </>
+);
+
+export const DefaultWithTooltip = () => (
+  <FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
+);
+
+export const Playground = (args) => (
+  <div style={{ width: args.playgroundWidth }}>
+    <FluidTextInput {...args} />
+  </div>
+);
+
+Playground.argTypes = {
+  playgroundWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+    defaultValue: 300,
+  },
+  className: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'test-class',
+  },
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Placeholder text',
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue:
+      'Error message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Label',
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue:
+      'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  value: {
+    control: {
+      type: 'text',
+    },
+  },
+};

packages/react/src/components/FluidTextInput/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default from './FluidTextInput';
+export { FluidTextInput } from './FluidTextInput';

packages/react/src/index.js

@@ -66,6 +66,7 @@ export FileUploader, {
 export { FilterableMultiSelect } from './components/FilterableMultiSelect';
 export Form from './components/Form';
 export FluidForm from './components/FluidForm';
+export FluidTextInput from './components/FluidTextInput';
 export FormGroup from './components/FormGroup';
 export FormItem from './components/FormItem';
 export FormLabel from './components/FormLabel';