@purpurds/text-area 3.0.0

package/readme.mdx

@@ -0,0 +1,60 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as TextAreaStories from "./src/text-area.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/TextArea" of={TextAreaStories} />
+
+# TextArea
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+Except for the props below, [all "native" textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) are also valid props. The only exception is:
+
+- `id` - Required
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/text-area": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/text-area/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { TextArea } from "@purpurds/text-area";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <TextArea {...someProps}>Some content</TextArea>
+    </div>
+  );
+};
+```

package/scripts/generate-assets.mts

@@ -0,0 +1,22 @@
+import { purpurColorTextMedium, purpurColorTextWeak } from "@purpurds/tokens";
+
+import fs from "fs";
+import path from "path";
+import dedent from "dedent";
+
+const srcDir = path.join(process.cwd(), "src");
+const assetsDir = path.join(srcDir, "assets");
+
+[
+  { name: "default", color: purpurColorTextMedium },
+  { name: "disabled", color: purpurColorTextWeak },
+].forEach(({ name, color }) => {
+  const svgFileContent = dedent`    
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.29298 12.9028C1.90234 12.5121 1.90234 11.8788 2.29298 11.4881L11.4881 2.29298C11.8788 1.90234 12.5121 1.90234 12.9028 2.29298C13.2934 2.68362 13.2934 3.31698 12.9028 3.70762L3.70762 12.9028C3.31698 13.2934 2.68362 13.2934 2.29298 12.9028Z" fill="${color}" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M8.2948 14.307C7.90415 13.9164 7.90415 13.283 8.2948 12.8924L12.8924 8.2948C13.283 7.90415 13.9164 7.90415 14.307 8.2948C14.6977 8.68544 14.6977 9.3188 14.307 9.70944L9.70944 14.307C9.31879 14.6977 8.68544 14.6977 8.2948 14.307Z" fill="${color}" />
+    </svg>
+  `;
+
+  fs.writeFileSync(path.join(assetsDir, `resize-handle-${name}-icon.svg`), svgFileContent);
+});

package/src/assets/resize-handle-default-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.29298 12.9028C1.90234 12.5121 1.90234 11.8788 2.29298 11.4881L11.4881 2.29298C11.8788 1.90234 12.5121 1.90234 12.9028 2.29298C13.2934 2.68362 13.2934 3.31698 12.9028 3.70762L3.70762 12.9028C3.31698 13.2934 2.68362 13.2934 2.29298 12.9028Z" fill="rgba(0, 0, 0, 0.62)" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.2948 14.307C7.90415 13.9164 7.90415 13.283 8.2948 12.8924L12.8924 8.2948C13.283 7.90415 13.9164 7.90415 14.307 8.2948C14.6977 8.68544 14.6977 9.3188 14.307 9.70944L9.70944 14.307C9.31879 14.6977 8.68544 14.6977 8.2948 14.307Z" fill="rgba(0, 0, 0, 0.62)" />
+</svg>

package/src/assets/resize-handle-disabled-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.29298 12.9028C1.90234 12.5121 1.90234 11.8788 2.29298 11.4881L11.4881 2.29298C11.8788 1.90234 12.5121 1.90234 12.9028 2.29298C13.2934 2.68362 13.2934 3.31698 12.9028 3.70762L3.70762 12.9028C3.31698 13.2934 2.68362 13.2934 2.29298 12.9028Z" fill="rgba(0, 0, 0, 0.44)" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.2948 14.307C7.90415 13.9164 7.90415 13.283 8.2948 12.8924L12.8924 8.2948C13.283 7.90415 13.9164 7.90415 14.307 8.2948C14.6977 8.68544 14.6977 9.3188 14.307 9.70944L9.70944 14.307C9.31879 14.6977 8.68544 14.6977 8.2948 14.307Z" fill="rgba(0, 0, 0, 0.44)" />
+</svg>

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/text-area.module.scss

@@ -0,0 +1,118 @@
+.purpur-text-area {
+  $root: &;
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-50);
+  max-width: 100%;
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-50);
+    width: fit-content;
+  }
+
+  &__label-text {
+    width: fit-content;
+  }
+
+  &__frame {
+    position: absolute;
+    inset: 0;
+    border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
+    border-radius: var(--purpur-border-radius-sm);
+    pointer-events: none;
+  }
+
+  &__textarea-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 var(--purpur-spacing-100) var(--purpur-spacing-100) 0;
+    border-radius: var(--purpur-border-radius-sm);
+    box-sizing: border-box;
+    background: var(--purpur-color-background-primary);
+
+    &--disabled {
+      background: var(--purpur-color-background-interactive-disabled);
+    }
+
+    &--readonly {
+      background: var(--purpur-color-background-interactive-read-only);
+    }
+  }
+
+  &__textarea {
+    $textAreaRoot: &;
+
+    width: 100%;
+    max-width: 100%; /* Needed to keep the textarea inside its container when resizing in Firefox */
+    padding: var(--purpur-spacing-150) 0 var(--purpur-spacing-200) var(--purpur-spacing-150);
+    outline: none;
+    border: none;
+    border-radius: var(--purpur-border-radius-sm);
+    font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+    font-size: var(--purpur-typography-scale-100);
+    line-height: 150%;
+    background: transparent;
+
+    &::-webkit-resizer {
+      background: url("./assets/resize-handle-default-icon.svg");
+      background-size: cover;
+    }
+
+    &:hover {
+      ~ #{$root}__frame {
+        border-width: var(--purpur-border-width-sm);
+        border-color: var(--purpur-color-border-interactive-subtle-hover);
+      }
+    }
+
+    &:active:not(:disabled):not(:read-only),
+    &:focus:not(:disabled):not(:read-only) {
+      ~ #{$root}__frame {
+        outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+        outline-offset: calc(var(--purpur-spacing-10) * 2);
+        border-width: var(--purpur-border-width-xs);
+        border-color: var(--purpur-color-border-interactive-subtle-hover);
+      }
+    }
+
+    &:disabled {
+      color: var(--purpur-color-text-weak);
+
+      ~ #{$root}__frame {
+        border-width: var(--purpur-border-width-xs);
+        border-color: var(--purpur-color-border-medium);
+      }
+
+      &::-webkit-resizer {
+        background: url("./assets/resize-handle-disabled-icon.svg");
+      }
+    }
+
+    &:read-only:not(:disabled) {
+      color: var(--purpur-color-text-default);
+
+      ~ #{$root}__frame {
+        border-width: var(--purpur-border-width-xs);
+      }
+
+      &:not(#{$textAreaRoot}--valid):not(#{$textAreaRoot}--error) {
+        ~ #{$root}__frame {
+          border-color: var(--purpur-color-border-medium);
+        }
+      }
+    }
+
+    &#{$textAreaRoot}--error {
+      ~ #{$root}__frame {
+        border-color: var(--purpur-color-border-status-error);
+      }
+    }
+  }
+}

package/src/text-area.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useArgs } from "@storybook/client-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/label/styles";
+import "@purpurds/field-helper-text/styles";
+import "@purpurds/field-error-text/styles";
+import { TextArea } from "./text-area";
+
+const meta: Meta<typeof TextArea> = {
+  title: "Inputs/TextArea",
+  component: TextArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Showcase: Story = {
+  args: {
+    value: "Text area",
+    label: "Text area label",
+    helperText: "Helper text",
+    placeholder: "Enter text",
+    errorText: undefined,
+    disabled: false,
+    readOnly: false,
+    required: false,
+    rows: 3,
+    cols: 90,
+  },
+  argTypes: {
+    onChange: { action: "inputChange", table: { disable: true } },
+  },
+  parameters: {
+    design: [
+      {
+        name: "TextArea",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1565-1896&mode=design&t=diHAdohOrRRVp09w-0",
+      },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "18.5rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: ({ onChange, ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    return (
+      <TextArea
+        {...args}
+        id="playground-textarea"
+        value={value}
+        onChange={(e) => {
+          onChange?.(e);
+          updateArgs({ value: e.target.value });
+        }}
+      />
+    );
+  },
+};

package/src/text-area.test.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { TextArea } from "./text-area";
+const rootClassName = "purpur-text-area";
+
+expect.extend(matchers);
+
+describe("TextArea", () => {
+  afterEach(cleanup);
+
+  it("should render plain", () => {
+    render(<TextArea id="test" data-testid="test" />);
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.className).toBe(`${rootClassName}__textarea`);
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-helper-text")).not.toBeInTheDocument();
+  });
+
+  it("should render with label", () => {
+    render(<TextArea id="test" data-testid="test" label="Test label" />);
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.className).toBe(`${rootClassName}__textarea`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.queryByTestId("test-helper-text")).not.toBeInTheDocument();
+  });
+
+  it("should render with helper-text", () => {
+    render(<TextArea id="test" data-testid="test" label="Test label" helperText="Helper text" />);
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.className).toBe(`${rootClassName}__textarea`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+  });
+
+  it("should render with helper-text and error-text", () => {
+    render(
+      <TextArea
+        errorText="Error text"
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveClass(`${rootClassName}__textarea--error`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-error-text")).toHaveTextContent("Error text");
+    expect(screen.getByTestId("test-error-text").querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("should render required", () => {
+    render(
+      <TextArea required id="test" data-testid="test" label="Test label" helperText="Helper text" />
+    );
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeRequired();
+    expect(textarea).not.toHaveClass(`${rootClassName}__textarea--error`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("* Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+  });
+
+  it("should render disabled", () => {
+    render(
+      <TextArea disabled id="test" data-testid="test" label="Test label" helperText="Helper text" />
+    );
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toBeDisabled();
+    expect(textarea).not.toHaveClass(`${rootClassName}__textarea--error`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+  });
+
+  it("should render readOnly", () => {
+    render(
+      <TextArea readOnly id="test" data-testid="test" label="Test label" helperText="Helper text" />
+    );
+
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toHaveAttribute("readOnly");
+    expect(textarea).not.toHaveClass(`${rootClassName}__textarea--error`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+  });
+
+  it("should render with default value and onChange", () => {
+    const onChangeMock = vi.fn();
+    render(
+      <TextArea id="test" data-testid="test" onChange={onChangeMock} defaultValue="Default value" />
+    );
+    const textarea = screen.getByTestId("test-textarea");
+    expect(textarea).toHaveValue("Default value");
+
+    fireEvent.change(textarea, { target: { value: "Changed" } });
+
+    expect(textarea).toHaveValue("Changed");
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});

package/src/text-area.tsx

@@ -0,0 +1,107 @@
+import React, { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from "react";
+import { FieldErrorText } from "@purpurds/field-error-text";
+import { FieldHelperText } from "@purpurds/field-helper-text";
+import { Label } from "@purpurds/label";
+import c from "classnames";
+
+import styles from "./text-area.module.scss";
+
+export type TextAreaProps = ComponentPropsWithoutRef<"textarea"> & {
+  id: string;
+  ["data-testid"]?: string;
+  className?: string;
+  /**
+   * Use to render error message below the text area. The text area renders with error appearance.
+   * */
+  errorText?: string;
+  /**
+   * Use to give context about the text area's input. Renders below the text area.
+   * */
+  helperText?: string;
+  /**
+   * The label of the text area.
+   * */
+  label?: string;
+  /**
+   * The height of the text area, measured in number of rows.
+   * */
+  rows?: number;
+  /**
+   * The width of the text area, measured in number of cols.
+   * */
+  cols?: number;
+};
+
+const rootClassName = "purpur-text-area";
+
+const TextAreaComponent = (
+  {
+    id,
+    ["data-testid"]: dataTestId,
+    className,
+    errorText,
+    helperText,
+    label,
+    rows = 3,
+    cols = 90,
+    ...props
+  }: TextAreaProps,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) => {
+  const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
+
+  const helperTextId = helperText ? `${id}-helper-text` : undefined;
+
+  const textAreaContainerClassnames = c([
+    styles[`${rootClassName}__textarea-container`],
+    {
+      [styles[`${rootClassName}__textarea-container--disabled`]]: props.disabled,
+      [styles[`${rootClassName}__textarea-container--readonly`]]: props.readOnly && !props.disabled,
+    },
+  ]);
+
+  return (
+    <div className={c(className, styles[rootClassName])} data-testid={dataTestId}>
+      {label && (
+        <Label
+          htmlFor={id}
+          disabled={props.disabled}
+          className={styles[`${rootClassName}__label`]}
+          data-testid={getTestId("label")}
+        >
+          {`${props.required ? "* " : ""}${label}`}
+        </Label>
+      )}
+      <div className={textAreaContainerClassnames}>
+        <textarea
+          {...props}
+          ref={ref}
+          id={id}
+          data-testid={getTestId("textarea")}
+          aria-describedby={props["aria-describedby"] || helperTextId}
+          aria-invalid={props["aria-invalid"] || !!errorText}
+          className={c([
+            styles[`${rootClassName}__textarea`],
+            {
+              [styles[`${rootClassName}__textarea--error`]]: !!errorText,
+            },
+          ])}
+          rows={rows}
+          cols={cols}
+        />
+        <div className={styles[`${rootClassName}__frame`]} />
+      </div>
+      {helperTextId && (
+        <FieldHelperText data-testid={getTestId("helper-text")} id={helperTextId}>
+          {helperText}
+        </FieldHelperText>
+      )}
+      {errorText && (
+        <FieldErrorText data-testid={getTestId("error-text")}>{errorText}</FieldErrorText>
+      )}
+    </div>
+  );
+};
+
+export const TextArea = forwardRef(TextAreaComponent);
+TextArea.displayName = "TextArea";