TextArea component (#686)

* TextArea basic structure created

* TesxtArea updated missing correct spacing

* FieldTextArea component and tests added

* FieldTextAread and TextArea ready for review

* updates after review

Author: laraharrow

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## UNRELEASED
 
+### Added
+
+- `TextArea` component was created with documentation and tests
+- `FieldTextArea` component was created with documentation and tests
+
 ## [0.7.24] - 2020-03-12
 
 ### Added

packages/components/src/Form/Fields/FieldTextArea/FieldTextArea.test.tsx

@@ -0,0 +1,44 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React from 'react'
+import { assertSnapshot } from '@looker/components-test-utils'
+
+import { FieldTextArea } from './FieldTextArea'
+
+test('A FieldTextArea', () => {
+  assertSnapshot(<FieldTextArea id="FieldTextArea" label="this is a label" />)
+})
+
+test('A FieldTextArea with a validation message', () => {
+  assertSnapshot(
+    <FieldTextArea
+      id="errorMessage"
+      label="this is a label"
+      validationMessage={{ message: 'This is an error', type: 'error' }}
+    />
+  )
+})

packages/components/src/Form/Fields/FieldTextArea/FieldTextArea.tsx

@@ -0,0 +1,57 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React, { FC } from 'react'
+import styled from 'styled-components'
+import { v4 as uuid } from 'uuid'
+import { useFormContext } from '../../Form'
+import { TextArea, TextAreaProps } from '../../Inputs/TextArea'
+import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
+
+export interface FieldTextAreaProps extends FieldProps, TextAreaProps {}
+
+const FieldTextAreaComponent: FC<FieldTextAreaProps> = ({ ...props }) => {
+  const { id = uuid() } = props
+  const validationMessage = useFormContext(props)
+  return (
+    <Field
+      id={id}
+      alignValidationMessage="bottom"
+      validationMessage={validationMessage}
+      {...pickFieldProps(props)}
+    >
+      <TextArea
+        {...omitFieldProps(props)}
+        validationType={validationMessage && validationMessage.type}
+      />
+    </Field>
+  )
+}
+
+FieldTextAreaComponent.displayName = 'FieldTextAreaComponent'
+
+export const FieldTextArea = styled(FieldTextAreaComponent)``
+FieldTextArea.defaultProps = { width: '13rem' }