@sproutsocial/seeds-react-textarea 1.0.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Textarea.tsx","../src/styles.ts","../src/TextareaTypes.ts"],"sourcesContent":["import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n","import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\n          {...inputProps}\n        />\n\n        {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n      </Container>\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\n      `}\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: string;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n"],"mappings":"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","names":["styled","props","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-textarea",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-textarea",
+  "version": "1.0.0",
+  "description": "Seeds React Textarea",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-mixins": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Textarea.stories.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Textarea } from "./";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Form Elements/Textarea",
+  component: Textarea,
+  argTypes: {
+    isInvalid: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    readOnly: {
+      control: "boolean",
+    },
+  },
+  args: {
+    id: "textarea",
+    value: "",
+    name: "basic-textarea",
+    ariaLabel: "Descriptive label",
+    isInvalid: undefined,
+    disabled: undefined,
+    readOnly: undefined,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  render: (args) => <Textarea {...args} />,
+  name: "Default",
+};
+
+export const ReadOnly: Story = {
+  args: {
+    value: "This is a read only textarea",
+    readOnly: true,
+  },
+  render: (args) => <Textarea {...args} />,
+  name: "Read Only",
+};
+
+export const LeftIcon: Story = {
+  render: (args) => (
+    <Textarea
+      aria-label="Search"
+      elemBefore={<Icon name="magnifying-glass-outline" aria-hidden />}
+      {...args}
+    />
+  ),
+  name: "Left icon",
+};
+
+export const RightIcon: Story = {
+  render: (args) => (
+    <Textarea
+      aria-label="Search"
+      elemAfter={<Icon name="magnifying-glass-outline" aria-hidden />}
+      {...args}
+    />
+  ),
+  name: "Right icon",
+};
+
+export const Autofocus: Story = {
+  render: (args) => <Textarea autoFocus {...args} />,
+  name: "Autofocus",
+};
+
+export const MaxLength: Story = {
+  args: {
+    maxLength: 10,
+  },
+  render: (args) => (
+    <Textarea
+      id={args.id}
+      name={args.name}
+      maxLength={args.maxLength}
+      ariaLabel={args.ariaLabel}
+    />
+  ),
+  name: "Max Length",
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: "Enter message here...",
+  },
+  render: (args) => <Textarea {...args} />,
+  name: "With Placeholder",
+};

package/src/Textarea.tsx

@@ -0,0 +1,126 @@
+import * as React from "react";
+import Container, { Accessory } from "./styles";
+import type { TypeTextareaProps } from "./TextareaTypes";
+
+/**
+ * @deprecated Use TypeTextareaProps from root instead
+ */
+export type TypeProps = TypeTextareaProps;
+
+export default class Textarea extends React.Component<TypeTextareaProps> {
+  static defaultProps = {
+    rows: 4,
+  };
+
+  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  };
+
+  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
+  };
+
+  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(e);
+    }
+  };
+
+  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  };
+
+  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(e);
+    }
+  };
+
+  override render() {
+    const {
+      autoFocus,
+      disabled,
+      readOnly,
+      isInvalid,
+      id,
+      name,
+      placeholder,
+      value,
+      enableSpellcheck,
+      enableResize,
+      required,
+      rows,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaLabel,
+      ariaDescribedby,
+      innerRef,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      color,
+      qa = {},
+      inputProps = {},
+      ...rest
+    } = this.props;
+
+    return (
+      <Container
+        hasBeforeElement={!!elemBefore}
+        hasAfterElement={!!elemAfter}
+        disabled={disabled}
+        invalid={isInvalid}
+        resizable={enableResize}
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        color={color}
+        data-qa-textarea={id}
+        data-qa-textarea-isdisabled={disabled === true}
+        data-qa-textarea-isrequired={required === true}
+        data-qa-textarea-isinvalid={isInvalid === true}
+        {...qa}
+        {...rest}
+      >
+        {elemBefore && <Accessory before>{elemBefore}</Accessory>}
+
+        <textarea
+          id={id}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedby}
+          aria-invalid={isInvalid}
+          value={value}
+          name={name}
+          placeholder={placeholder}
+          rows={rows}
+          disabled={disabled}
+          readOnly={Boolean(readOnly)}
+          autoFocus={autoFocus}
+          spellCheck={enableSpellcheck}
+          required={required}
+          maxLength={maxLength}
+          onChange={this.handleChange}
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          ref={innerRef}
+          data-qa-textarea-input=""
+          data-qa-input={name}
+          {...inputProps}
+        />
+
+        {elemAfter && <Accessory after>{elemAfter}</Accessory>}
+      </Container>
+    );
+  }
+}

package/src/TextareaTypes.ts

@@ -0,0 +1,97 @@
+import * as React from "react";
+import type {
+  TypeSystemCommonProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+type CollisionTypes =
+  | "color"
+  | "onChange"
+  | "onFocus"
+  | "onBlur"
+  | "onKeyDown"
+  | "onKeyUp";
+
+export interface TypeTextareaProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"textarea">, CollisionTypes> {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string;
+  name: string;
+
+  /** Label used to describe the input if not used with an accompanying visual label */
+  ariaLabel?: string;
+
+  /** Attribute used to associate other elements that describe the Textarea, like an error */
+  ariaDescribedby?: string;
+
+  /** Current value of the textarea */
+  value?: string;
+
+  /** Will autofocus the element when mounted to the DOM */
+  autoFocus?: boolean;
+
+  /** HTML disabled attribute */
+  disabled?: boolean;
+
+  /** HTML readonly attribute */
+  readOnly?: boolean;
+
+  /** Whether or not the current contents of the input are invalid */
+  isInvalid?: boolean;
+
+  /** Placeholder text for when value is undefined or empty */
+  placeholder?: string;
+
+  /** HTML required attribute */
+  required?: boolean;
+
+  /** 16x16 element, such as an icon */
+  elemBefore?: React.ReactNode;
+
+  /** 16x16 element, such as an icon */
+  elemAfter?: React.ReactNode;
+
+  /** Max length of the input */
+  maxLength?: number;
+
+  /** HTML spellcheck attribute */
+  enableSpellcheck?: boolean;
+
+  /** Makes the text area vertically resizable */
+  enableResize?: boolean;
+
+  /** The number of visible lines of text without scrolling */
+  rows?: number;
+  qa?: object;
+
+  /** Props to spread onto the underlying textarea element */
+  inputProps?: React.ComponentPropsWithoutRef<"textarea">;
+
+  /** Used to get a reference to the underlying element */
+  innerRef?:
+    | {
+        current: null | HTMLTextAreaElement;
+      }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    | ((arg0: React.ElementRef<any> | HTMLElement) => void);
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+}
+
+export interface TypeTextareaContainerProps {
+  resizable?: TypeTextareaProps["enableResize"];
+  hasBeforeElement?: boolean;
+  hasAfterElement?: boolean;
+  disabled?: TypeTextareaProps["disabled"];
+  invalid?: TypeTextareaProps["isInvalid"];
+}
+
+export interface TypeTextareaAccessoryProps {
+  before?: boolean;
+  after?: boolean;
+}

package/src/__tests__/Textarea.typetest.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Textarea from "../";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TextareaTypes() {
+  const [value, setValue] = React.useState("");
+  return (
+    <>
+      <Textarea id="test" name="test" />
+      <Textarea id="disabled" name="disabled" disabled={true} />
+      <Textarea id="readOnly" name="readOnly" readOnly={true} />
+      <Textarea id="required" name="required" required />
+      <Textarea id="error" name="error" isInvalid />
+      <Textarea
+        id="search"
+        name="search"
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      />
+      <Textarea id="autofocus" name="autofocus" autoFocus />
+      <Textarea id="maxlength" name="maxlength" autoFocus maxLength={10} />
+      <Textarea
+        id="test"
+        name="test"
+        inputProps={{
+          defaultValue: value,
+          style: {
+            borderRadius: "999999px",
+          },
+        }}
+      />
+      {/* @ts-expect-error - test missing required props is rejected */}
+      <Textarea />
+    </>
+  );
+}

package/src/__tests__/textarea.test.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Textarea from "../";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+describe("Textarea", () => {
+  it("should render statuses properly", () => {
+    render(<Textarea id="text" name="text" />);
+    expect(
+      screen.getByDataQaLabel({
+        textarea: "text",
+      })
+    ).toBeTruthy();
+  });
+
+  it("should render before and after element", () => {
+    render(
+      <Textarea
+        elemAfter={<Text>After</Text>}
+        elemBefore={<Text>Before</Text>}
+        id="text"
+        name="text"
+      />
+    );
+
+    expect(screen.getByText("Before")).toBeInTheDocument();
+    expect(screen.getByText("After")).toBeInTheDocument();
+  });
+
+  it("should notify on changes", () => {
+    const mockOnChange = jest.fn();
+    const mockEventHandler = jest.fn();
+
+    render(
+      <Textarea
+        id="name"
+        name="name"
+        onChange={mockOnChange}
+        onBlur={mockEventHandler}
+        onFocus={mockEventHandler}
+        onKeyDown={mockEventHandler}
+        onKeyUp={mockEventHandler}
+        value="User"
+      />
+    );
+
+    const textarea = screen.getByDataQaLabel({
+      input: "name",
+    });
+
+    expect(textarea).toBeTruthy();
+    fireEvent.change(textarea, {
+      target: {
+        value: "updated",
+      },
+    });
+
+    expect(mockOnChange).toHaveBeenCalled();
+    // Ensure that the event handlers aren't getting attached to the root level
+    // element (only the actual textarea itself)
+    const textareaContainer = screen.getByDataQaLabel({
+      textarea: "name",
+    });
+
+    expect(textareaContainer).toBeTruthy();
+
+    fireEvent.change(textareaContainer);
+
+    expect(mockOnChange.mock.calls.length).toEqual(1);
+
+    fireEvent.blur(textareaContainer);
+    fireEvent.focus(textareaContainer);
+    fireEvent.keyUp(textareaContainer);
+    fireEvent.keyDown(textareaContainer);
+
+    expect(mockEventHandler.mock.calls.length).toEqual(0);
+  });
+
+  describe("readOnly prop", () => {
+    it.each([true, "foobar", 1])(
+      "should correctly add the readonly prop for truthy values: %p",
+      (truthyValue) => {
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        render(<Textarea id="name" name="name" readOnly={truthyValue} />);
+        expect(
+          screen.getByDataQaLabel({
+            input: "name",
+          })
+        ).toHaveAttribute("readonly", "");
+      }
+    );
+
+    it.each([false, null, undefined, 0, ""])(
+      "should correctly leave off readonly prop for falsey values: %p",
+      (truthyValue) => {
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        render(<Textarea id="name" name="name" readOnly={truthyValue} />);
+        expect(
+          screen.getByDataQaLabel({
+            input: "name",
+          })
+        ).not.toHaveAttribute("readonly");
+      }
+    );
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import Textarea from "./Textarea";
+
+export default Textarea;
+export { Textarea };
+export * from "./TextareaTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,104 @@
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import type {
+  TypeTextareaAccessoryProps,
+  TypeTextareaContainerProps,
+} from "./TextareaTypes";
+
+const Container = styled.div<TypeTextareaContainerProps>`
+  box-sizing: border-box;
+  position: relative;
+
+  textarea {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: ${(props) => props.theme.space[300]};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    outline: none;
+    resize: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    ${(props) => props.theme.typography[200]}
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    appearance: none;
+
+    &:focus {
+      ${focusRing}
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.form.placeholder.base};
+      font-style: italic;
+    }
+
+    ${(props) =>
+      props.resizable &&
+      css`
+        resize: vertical;
+      `}
+
+    ${(props) =>
+      props.hasBeforeElement &&
+      css`
+        padding-left: 40px;
+      `}
+
+    ${(props) =>
+      props.hasAfterElement &&
+      css`
+        padding-right: 40px;
+      `}
+  }
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.4;
+
+      textarea {
+        cursor: not-allowed;
+      }
+    `}
+
+  ${(props) =>
+    props.invalid &&
+    css`
+      textarea {
+        border-color: ${(props) => props.theme.colors.form.border.error};
+      }
+    `}
+
+  ${COMMON}
+`;
+
+export const Accessory = styled.div<TypeTextareaAccessoryProps>`
+  position: absolute;
+  color: ${(props) => props.theme.colors.icon.base};
+
+  ${(props) =>
+    props.before &&
+    css`
+      top: ${props.theme.space[300]};
+      left: ${props.theme.space[350]};
+    `};
+
+  ${(props) =>
+    props.after &&
+    css`
+      right: ${props.theme.space[350]};
+      bottom: ${props.theme.space[300]};
+    `};
+`;
+
+Container.displayName = "TextareaContainer";
+Accessory.displayName = "TextareaAccessory";
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage", "src/Textarea.stories.tsx"]
+}