feat(TextArea): Applying shared input components in textarea

catho · Jun 6, 2019 · 97caefa · 97caefa
1 parent 39c6383
commit 97caefa
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 157 deletions.
diff --git a/components/Input/sub-components/HelperText.jsx b/components/Input/sub-components/HelperText.jsx
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import ErrorMessage from './ErrorMessage';
+import InputErrorMessage from './InputErrorMessage';
 import { colors, spacing } from '../../shared/theme';
 
-const HelperText = styled(ErrorMessage)`
+const HelperText = styled(InputErrorMessage)`
   ${({
     theme: {
       colors: {

diff --git a/...nts/Input/sub-components/ErrorMessage.jsx → ...nput/sub-components/InputErrorMessage.jsx b/...nts/Input/sub-components/ErrorMessage.jsx → ...nput/sub-components/InputErrorMessage.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ErrorMessage } from '../../shared';
-import { spacing } from '../../shared/theme';
+import { spacing, colors } from '../../shared/theme';
 
 const InputErrorMessage = styled(ErrorMessage)`
   ${({
@@ -13,14 +13,17 @@ const InputErrorMessage = styled(ErrorMessage)`
   `}
 `;
 
-ErrorMessage.propTypes = {
+InputErrorMessage.displayName = 'InputErrorMessage';
+
+InputErrorMessage.propTypes = {
   theme: PropTypes.shape({
     spacing: PropTypes.object,
+    colors: PropTypes.object,
   }),
 };
 
-ErrorMessage.defaultProps = {
-  theme: { spacing },
+InputErrorMessage.defaultProps = {
+  theme: { spacing, colors },
 };
 
 export default InputErrorMessage;
diff --git a/components/Input/sub-components/Label.jsx → ...nents/Input/sub-components/InputLabel.jsx b/components/Input/sub-components/Label.jsx → ...nents/Input/sub-components/InputLabel.jsx
diff --git a/components/Input/sub-components/TextInput.jsx b/components/Input/sub-components/TextInput.jsx
@@ -3,9 +3,7 @@ import styled from 'styled-components';
 import { spacing, colors } from '../../shared/theme';
 import { shadow } from '../../shared';
 
-const TextInput = styled.input.attrs({
-  type: 'text',
-})`
+const TextInput = styled.input`
   border-radius: 4px;
   box-sizing: border-box;
   box-sizing: border-box;

diff --git a/components/Input/sub-components/index.js b/components/Input/sub-components/index.js
@@ -1,7 +1,7 @@
 import TextInput from './TextInput';
 import HelperText from './HelperText';
-import Label from './Label';
+import InputLabel from './InputLabel';
 import RequiredMark from './RequiredMark';
-import ErrorMessage from './ErrorMessage';
+import InputErrorMessage from './InputErrorMessage';
 
-export { TextInput, HelperText, Label, RequiredMark, ErrorMessage };
+export { TextInput, HelperText, InputLabel, RequiredMark, InputErrorMessage };
diff --git a/components/TextArea/TextArea.jsx b/components/TextArea/TextArea.jsx
@@ -1,50 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { INPUT_STYLE, Label, FieldGroup, ErrorMessage } from '../shared';
+import { FieldGroup } from '../shared';
 import uniqId from '../shared/uniqId';
+import {
+  InputLabel,
+  InputErrorMessage,
+  HelperText,
+  RequiredMark,
+  TextInput,
+} from '../Input/sub-components';
 
 const ID_GENERATOR = uniqId('textarea-');
 
-const {
-  default: DEFAULT_INPUT_STYLE,
-  LABEL_STYLE,
-  HELPER_TEXT_STYLE,
-  REQUIRED_MARK_STYLE,
-  ERROR_MESSAGE_STYLE,
-} = INPUT_STYLE;
-
-const TextAreaTag = styled.textarea`
-  ${DEFAULT_INPUT_STYLE};
-
+const TextAreaTag = styled(TextInput)`
   display: block;
   min-height: 108px;
   margin-top: 8px;
   transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 `;
 
-const TextAreaLabel = styled(Label)`
-  ${LABEL_STYLE}
-`;
-
-const HelperText = styled.span`
-  ${HELPER_TEXT_STYLE}
-`;
-
-const RequiredMark = styled.em`
-  ${REQUIRED_MARK_STYLE}
-`;
-
-const TextAreaErrorMessage = styled(ErrorMessage)`
-  ${ERROR_MESSAGE_STYLE}
-
-  ${({ helperText }) =>
-    helperText &&
-    `
-    padding-top: 2px;
-  `}
-`;
-
 class TextArea extends React.Component {
   constructor(props) {
     super(props);
@@ -60,22 +35,21 @@ class TextArea extends React.Component {
     return (
       <FieldGroup>
         {label && (
-          <TextAreaLabel htmlFor={this._id}>
+          <InputLabel htmlFor={this._id}>
             {label}
             {required && <RequiredMark>*</RequiredMark>}
-          </TextAreaLabel>
+          </InputLabel>
         )}
         <TextAreaTag
           error={error}
           id={this._id}
           required={required}
+          as="textarea"
           {...rest}
         />
         {helperText && <HelperText>{helperText}</HelperText>}
         {error && (
-          <TextAreaErrorMessage helperText={helperText}>
-            {error}
-          </TextAreaErrorMessage>
+          <InputErrorMessage helperText={helperText}>{error}</InputErrorMessage>
         )}
       </FieldGroup>
     );
@@ -107,8 +81,5 @@ TextArea.propTypes = {
 };
 
 TextAreaTag.displayName = 'TextAreaTag';
-TextAreaLabel.displayName = 'TextAreaLabel';
-HelperText.displayName = 'HelperText';
-TextAreaErrorMessage.displayName = 'TextAreaErrorMessage';
 
 export default TextArea;
diff --git a/components/TextArea/TextArea.unit.test.jsx b/components/TextArea/TextArea.unit.test.jsx
@@ -23,7 +23,7 @@ describe('TextArea component', () => {
 
   it('should has a required signal when "required" and "label" props are set ', () => {
     const component = shallow(<TextArea label="Text label" required />);
-    expect(component.find('TextAreaLabel').text()).toMatch('*');
+    expect(component.find('InputLabel').text()).toMatch('*');
   });
 
   it('should have a placeholder when "placeholder" prop is set ', () => {
@@ -47,7 +47,7 @@ describe('TextArea component', () => {
   it('should have a error text when "error" prop is set', () => {
     const errorMessageContent = 'Error message';
     const component = shallow(<TextArea error={errorMessageContent} />);
-    const errorMessage = component.find('TextAreaErrorMessage').text();
+    const errorMessage = component.find('InputErrorMessage').text();
     expect(errorMessage).toMatch(errorMessageContent);
   });
 
@@ -56,7 +56,7 @@ describe('TextArea component', () => {
       const id = 'input-id';
       const wrapper = shallow(<TextArea label="Text label" id={id} />);
       const input = wrapper.find('TextAreaTag');
-      const label = wrapper.find('TextAreaLabel');
+      const label = wrapper.find('InputLabel');
       const labelHtmlFor = label.prop('htmlFor');
       const inputId = input.prop('id');
 
@@ -66,7 +66,7 @@ describe('TextArea component', () => {
 
     it('should match label "htmlFor" label param and "input" param with generated id', () => {
       const wrapper = shallow(<TextArea label="Text label" value="foo" />);
-      const labelId = wrapper.find('TextAreaLabel').prop('htmlFor');
+      const labelId = wrapper.find('InputLabel').prop('htmlFor');
       const inputId = wrapper.find('TextAreaTag').prop('id');
 
       expect(labelId).toEqual(inputId);