feat: add header prop to the textarea component (#1807)

* feat: add header prop to the textarea component * feat: fixed styles in readme example header textarea Co-authored-by: Tahimi <[email protected]> Co-authored-by: Jose Leandro Torres <[email protected]>
nexxtway · Sep 7, 2020 · 093acec · 093acec
1 parent e14444a
commit 093acec
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 3 deletions.
diff --git a/src/components/Textarea/__test__/textarea.spec.js b/src/components/Textarea/__test__/textarea.spec.js
@@ -56,4 +56,15 @@ describe('<Textarea/>', () => {
             inputId: expect.any(String),
         });
     });
+    it('should have a inside div with id="headerTest"', () => {
+        const component = mount(<Textarea header={<div id="headerTest" />} />);
+        const div = component.find('div[id="headerTest"]');
+        expect(div.exists()).toBeTruthy();
+    });
+
+    it('should have a inside div with id="footerTest"', () => {
+        const component = mount(<Textarea footer={<div id="footerTest" />} />);
+        const div = component.find('div[id="footerTest"]');
+        expect(div.exists()).toBeTruthy();
+    });
 });
diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
@@ -95,6 +95,7 @@ class Textarea extends Component {
             id,
             hideLabel,
             name,
+            header,
             footer,
             variant,
         } = this.props;
@@ -110,12 +111,12 @@ class Textarea extends Component {
                     id={this.getInlineTextLabelId()}
                 />
                 <StyledTextareaContainer
-                    footer={footer}
                     error={error}
                     readOnly={readOnly}
                     disabled={disabled}
                     variant={variant}
                 >
+                    <RenderIf isTrue={!!header}>{header}</RenderIf>
                     <StyledTextarea
                         error={error}
                         id={this.textareaId}
@@ -136,7 +137,6 @@ class Textarea extends Component {
                         aria-labelledby={this.getInlineTextLabelId()}
                         aria-describedby={this.getErrorMessageId()}
                         ref={this.textareaRef}
-                        footer={footer}
                     />
                     <RenderIf isTrue={!!footer}>{footer}</RenderIf>
                 </StyledTextareaContainer>
@@ -200,6 +200,8 @@ Textarea.propTypes = {
     variant: PropTypes.oneOf(['default', 'shaded']),
     /** The id of the outer element. */
     id: PropTypes.string,
+    /** It is what will be displayed at the top of the component. */
+    header: PropTypes.node,
     /** It is what will be displayed at the bottom of the component. */
     footer: PropTypes.node,
 };
@@ -228,6 +230,7 @@ Textarea.defaultProps = {
     variant: 'default',
     id: undefined,
     hideLabel: false,
+    header: undefined,
     footer: undefined,
 };
 

diff --git a/src/components/Textarea/readme.md b/src/components/Textarea/readme.md
@@ -118,6 +118,79 @@ const containerStyles = {
 />;
 ```
 
+##### Textarea with header
+
+```js
+import React, { useState } from 'react';
+import { Textarea, Chip } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faImage } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
+
+const StyledHeader = styled.div.attrs(props => {
+    return props.theme.rainbow.palette;
+})
+`
+    font-size: 12px;
+    color: ${props => props.text.header};
+    text-align: center;
+    border-radius: 0.875rem 0.875rem 0 0;
+    margin: 16px 16px 0 16px;
+`;
+
+const containerStyles = {
+    maxWidth: 700,
+};
+
+const chipStyles = {
+    width:'100%'
+}
+
+const Icon = styled.span.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    ${props =>
+        `
+            color: ${props.brand.main};
+        `};
+`;
+
+function TextareaExample(props) {
+    const [count, setCount] = useState(0);
+    const {maxLength} = props;
+
+    return (
+        <Textarea
+            label="Textarea Label"
+            rows={4}
+            onChange={(event) => setCount(event.target.value.length)}
+            maxLength={maxLength}
+            placeholder="Type something . . ."
+            style={containerStyles}
+            header={
+                <StyledHeader>
+                    <Chip
+                        onDelete={() => alert('Delete Chip!')}
+                        style={chipStyles}
+                        label={
+                            <Icon variant="outline-brand">
+                                <FontAwesomeIcon
+                                    icon={faImage}
+                                    className="rainbow-m-right_xx-small"
+                                />{' '}
+                                marketing_1.png
+                            </Icon>
+                        }
+                    />
+                </StyledHeader>}
+            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+        />
+    );
+}
+
+<TextareaExample maxLength={160} />
+```
+
 ##### Textarea with footer
 
 ```js
@@ -132,7 +205,6 @@ const StyledFooter = styled.div.attrs(props => {
     font-size: 12px;
     color: ${props => props.text.header};
     text-align: right;
-    padding: 10px;
     border-radius: 0 0 0.875rem 0.875rem;
     background-color: #F6F7F9;
     padding: 16px;