feat(textfields): add new MediaInput component

packages/textfields/package.json

@@ -31,7 +31,7 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@zendeskgarden/css-forms": "6.1.1",
+    "@zendeskgarden/css-forms": "6.1.3",
     "@zendeskgarden/react-theming": "^3.1.3"
   },
   "keywords": [

packages/textfields/src/elements/FauxInput.js

@@ -69,6 +69,7 @@ export default class FauxInput extends ControlledComponent {
           this.setControlledState({ focused: false });
         })}
         focused={focused}
+        aria-invalid={null} // eslint-disable-line jsx-a11y/aria-proptypes
       >
         {children}
       </DIVInput>

packages/textfields/src/views/MediaFigure.example.md

@@ -1,5 +1,5 @@
-The `FauxInput[mediaLayout=true]` can be used with the `MediaFigure` component
-to include icons within the input.
+The `FauxInput[mediaLayout=true]` can be used with the `MediaFigure` and `MediaInput`
+components to include icons within the input.
 
 ```jsx
 const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/search.svg');
@@ -9,7 +9,7 @@ const SettingsIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/sv
   <MediaFigure>
     <SearchIcon />
   </MediaFigure>
-  <Input aria-label="Media Input Example" placeholder="Example media input" bare />
+  <MediaInput aria-label="Media Input Example" placeholder="Example media input" />
   <MediaFigure>
     <SettingsIcon />
   </MediaFigure>

packages/textfields/src/views/MediaInput.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { retrieveTheme } from '@zendeskgarden/react-theming';
+import TextStyles from '@zendeskgarden/css-forms/dist/text.css';
+
+import Input from './Input';
+
+const COMPONENT_ID = 'textfields.media_input';
+const VALIDATION = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  NONE: 'none'
+};
+
+/**
+ * Accepts all `<input>` props
+ */
+const MediaInput = styled(Input).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION,
+  className: TextStyles['c-txt__input--media__body']
+})`
+  ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+MediaInput.propTypes = {
+  small: PropTypes.bool,
+  bare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focused: PropTypes.bool,
+  hovered: PropTypes.bool,
+  validation: PropTypes.oneOf([
+    VALIDATION.SUCCESS,
+    VALIDATION.WARNING,
+    VALIDATION.ERROR,
+    VALIDATION.NONE
+  ])
+};
+
+MediaInput.defaultProps = {
+  bare: true
+};
+
+/** @component */
+export default MediaInput;

packages/textfields/src/views/MediaInput.spec.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import MediaInput from './MediaInput';
+
+describe('MediaInput', () => {
+  it('renders default styling', () => {
+    const wrapper = shallow(<MediaInput />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

packages/textfields/src/views/__snapshots__/MediaInput.spec.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MediaInput renders default styling 1`] = `
+<Input
+  bare={true}
+  className="c-txt__input--media__body "
+  data-garden-id="textfields.media_input"
+  data-garden-version="version"
+/>
+`;

utils/travis/publish-gh-pages.js

@@ -11,6 +11,5 @@ const ghPages = require('gh-pages');
 
 ghPages.publish('demo', {
   repo: `https://${process.env.GITHUB_TOKEN}@github.com/zendeskgarden/react-components.git`,
-  silent: true,
-  add: true
+  silent: true
 });