feat: add prop variant to the Textarea component

src/components/Textarea/index.d.ts

@@ -30,6 +30,7 @@ export interface TextareaProps extends BaseProps {
     onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
     id?: string;
+    variant?: 'default' | 'shaded';
 }
 
 declare const Textarea: ComponentType<TextareaProps>;

src/components/Textarea/index.js

@@ -96,6 +96,7 @@ class Textarea extends Component {
             hideLabel,
             name,
             footer,
+            variant,
         } = this.props;
 
         return (
@@ -113,6 +114,7 @@ class Textarea extends Component {
                     error={error}
                     readOnly={readOnly}
                     disabled={disabled}
+                    variant={variant}
                 >
                     <StyledTextarea
                         error={error}
@@ -193,6 +195,9 @@ Textarea.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** The variant changes the appearance of the Textarea. Accepted variants include default,
+     * and shaded. This value defaults to default. */
+    variant: PropTypes.oneOf(['default', 'shaded']),
     /** The id of the outer element. */
     id: PropTypes.string,
     /** It is what will be displayed at the bottom of the component. */
@@ -220,6 +225,7 @@ Textarea.defaultProps = {
     onPaste: () => {},
     className: undefined,
     style: undefined,
+    variant: 'default',
     id: undefined,
     hideLabel: false,
     footer: undefined,

src/components/Textarea/readme.md

@@ -165,3 +165,23 @@ function TextareaExample(props) {
 
 <TextareaExample maxLength={160} />
 ```
+##### Textarea with variant shaded
+
+```js
+import React from 'react';
+import { Textarea } from 'react-rainbow-components';
+
+const containerStyles = {
+    maxWidth: 700,
+};
+
+<Textarea
+    id="example-textarea-1"
+    label="Textarea Label"
+    rows={4}
+    placeholder="Placeholder Text"
+    style={containerStyles}
+    variant="shaded"
+    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+/>;
+```

src/components/Textarea/styled/textareaContainer.js

@@ -15,6 +15,12 @@ const StyledTextareaContainer = attachThemeAttrs(styled.div)`
         border: solid 2px ${props => props.palette.brand.main};
         box-shadow: ${props => props.shadows.brand};
     }
+    ${props =>
+        props.variant === 'shaded' &&
+        `
+        box-shadow:${props.disabled || props.readOnly ? '' : props.shadows.shadow_10};
+        border: 1px solid transparent;
+        `}
 
     ${props =>
         props.error &&