@purpurds/text-field 3.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@purpurds/text-field",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/text-field.cjs.js",
+  "types": "./dist/text-field.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/text-field.cjs.js",
+      "systemjs": "./dist/text-field.system.js",
+      "types": "./dist/text-field.d.ts",
+      "default": "./dist/text-field.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/text-field.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/field-helper-text": "3.0.0",
+    "@purpurds/field-error-text": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/label": "3.0.0",
+    "@purpurds/spinner": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/client-api": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.check.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,61 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as TextFieldStories from "./src/text-field.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/TextField" of={TextFieldStories} />
+
+# TextField
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+Except for the props below, [all "native" input attributs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) are also valid props. The only exceptions are:
+
+- `type` - Restricted to `"email" | "number" | "password" | "search" | "tel" | "text"`
+- `id` - Required
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/text-field": "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-field/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { TextField } from "@purpurds/text-field";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <TextField {...someProps}>Some content</TextField>
+    </div>
+  );
+};
+```

package/src/global.d.ts

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

package/src/text-field.module.scss

@@ -0,0 +1,143 @@
+.purpur-text-field {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-50);
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-50);
+    width: fit-content;
+  }
+
+  &__label-text {
+    width: fit-content;
+  }
+
+  &__field-row {
+    display: flex;
+    width: 100%;
+  }
+
+  &__frame {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--purpur-border-radius-sm);
+    border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
+    pointer-events: none;
+  }
+
+  &__input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-radius: var(--purpur-border-radius-sm);
+    background: var(--purpur-color-background-primary);
+
+    &--disabled {
+      background: var(--purpur-color-background-interactive-disabled);
+    }
+
+    &--readonly {
+      background: var(--purpur-color-background-interactive-read-only);
+    }
+
+    &--end-adornment {
+      padding-right: var(--purpur-spacing-150);
+
+      #{$root}__input {
+        padding-right: var(--purpur-spacing-100);
+      }
+    }
+
+    &--start-adornment {
+      padding-left: var(--purpur-spacing-150);
+
+      #{$root}__input {
+        padding-left: var(--purpur-spacing-100);
+      }
+    }
+  }
+
+  &__input {
+    $inputRoot: &;
+
+    border-radius: var(--purpur-border-radius-sm);
+    padding: calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-150);
+    border: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+      sans-serif;
+    font-size: var(--purpur-typography-scale-100);
+    line-height: 150%;
+    outline: none;
+    background: transparent;
+
+    &: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);
+      }
+    }
+
+    &:read-only:not(:disabled) {
+      color: var(--purpur-color-text-default);
+
+      ~ #{$root}__frame {
+        border-width: var(--purpur-border-width-xs);
+      }
+
+      &:not(#{$inputRoot}--valid):not(#{$inputRoot}--error) {
+        ~ #{$root}__frame {
+          border-color: var(--purpur-color-border-medium);
+        }
+      }
+    }
+
+    &#{$inputRoot}--valid {
+      ~ #{$root}__frame {
+        border-color: var(--purpur-color-border-status-success);
+      }
+    }
+
+    &#{$inputRoot}--error:not(:hover) {
+      ~ #{$root}__frame {
+        border-color: var(--purpur-color-border-status-error);
+      }
+    }
+  }
+
+  &__adornment-container {
+    display: flex;
+    align-items: center;
+    gap: var(--purpur-spacing-50);
+  }
+
+  &__valid-icon {
+    color: var(--purpur-color-text-status-success-medium);
+  }
+}

package/src/text-field.stories.tsx

@@ -0,0 +1,71 @@
+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 "@purpurds/icon/styles";
+import "@purpurds/spinner/styles";
+import { TextField } from "./text-field";
+
+const meta: Meta<typeof TextField> = {
+  title: "Inputs/TextField",
+  component: TextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Showcase: Story = {
+  args: {
+    value: "Text field",
+    label: "Text field label",
+    helperText: "Helper text",
+    placeholder: "Enter text",
+    valid: false,
+    errorText: undefined,
+    loading: false,
+    disabled: false,
+    readOnly: false,
+    required: false,
+    type: "text",
+  },
+  argTypes: {
+    onChange: { action: "inputChange", table: { disable: true } },
+    type: { options: ["email", "number", "password", "search", "tel", "text"], control: "select" },
+    startAdornment: { table: { disable: true } },
+    endAdornment: { table: { disable: true } },
+    afterField: { table: { disable: true } },
+  },
+  parameters: {
+    design: [
+      {
+        name: "TextField",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=1528%3A1886",
+      },
+    ],
+  },
+  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 (
+      <TextField
+        {...args}
+        id="playground-input"
+        value={value}
+        onChange={(e) => {
+          onChange?.(e);
+          updateArgs({ value: e.target.value });
+        }}
+      />
+    );
+  },
+};

package/src/text-field.test.tsx

@@ -0,0 +1,218 @@
+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 { TextField } from "./text-field";
+const rootClassName = "purpur-text-field";
+
+expect.extend(matchers);
+
+describe("TextField", () => {
+  afterEach(cleanup);
+
+  it("should render plain", () => {
+    render(<TextField id="test" data-testid="test" />);
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input.className).toBe(`${rootClassName}__input`);
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-helper-text")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-endrootClassName-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render with label", () => {
+    render(<TextField id="test" data-testid="test" label="Test label" />);
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input.className).toBe(`${rootClassName}__input`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.queryByTestId("test-helper-text")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render with helper-text", () => {
+    render(<TextField id="test" data-testid="test" label="Test label" helperText="Helper text" />);
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input.className).toBe(`${rootClassName}__input`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-helper-text").querySelector("svg")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render with helper-text and error-text", () => {
+    render(
+      <TextField
+        errorText="Test error"
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-error-text")).toHaveTextContent("Test error");
+    expect(screen.getByTestId("test-error-text").querySelector("svg")).toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render valid", () => {
+    render(
+      <TextField valid id="test" data-testid="test" label="Test label" helperText="Helper text" />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-helper-text").querySelector("svg")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.getByTestId("test-end-adornments")).toBeInTheDocument();
+    expect(screen.getByTestId("test-valid-icon")).toBeInTheDocument();
+  });
+
+  it("should render loading", () => {
+    render(
+      <TextField loading id="test" data-testid="test" label="Test label" helperText="Helper text" />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-helper-text").querySelector("svg")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.getByTestId("test-end-adornments")).toBeInTheDocument();
+    expect(screen.getByTestId("test-spinner")).toBeInTheDocument();
+  });
+
+  it("should render with adornment", () => {
+    render(
+      <TextField
+        startAdornment={<span data-testid="start-adornment" />}
+        endAdornment={<span data-testid="end-adornment" />}
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeInTheDocument();
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.getByTestId("test-helper-text").querySelector("svg")).not.toBeInTheDocument();
+
+    const startAdornment = screen.getByTestId("test-start-adornments");
+    expect(startAdornment).toBeInTheDocument();
+    expect(within(startAdornment).getByTestId("start-adornment")).toBeInTheDocument();
+
+    const endAdornment = screen.getByTestId("test-end-adornments");
+    expect(endAdornment).toBeInTheDocument();
+    expect(within(endAdornment).getByTestId("end-adornment")).toBeInTheDocument();
+  });
+
+  it("should render required", () => {
+    render(
+      <TextField
+        required
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeRequired();
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("* Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render disabled", () => {
+    render(
+      <TextField
+        disabled
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toBeDisabled();
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render readOnly", () => {
+    render(
+      <TextField
+        readOnly
+        id="test"
+        data-testid="test"
+        label="Test label"
+        helperText="Helper text"
+      />
+    );
+
+    const input = screen.getByTestId("test-input");
+    expect(input).toHaveAttribute("readOnly");
+    expect(input).not.toHaveClass(`${rootClassName}__input--error`);
+    expect(input).not.toHaveClass(`${rootClassName}__input--valid`);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+    expect(screen.getByTestId("test-helper-text")).toHaveTextContent("Helper text");
+    expect(screen.queryByTestId("test-start-adornments")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-end-adornments")).not.toBeInTheDocument();
+  });
+
+  it("should render with default value and onChange", () => {
+    const onChangeMock = vi.fn();
+    render(
+      <TextField
+        id="test"
+        data-testid="test"
+        onChange={onChangeMock}
+        defaultValue="Default value"
+      />
+    );
+    const input = screen.getByTestId("test-input");
+    expect(input).toHaveValue("Default value");
+
+    fireEvent.change(input, { target: { value: "Changed" } });
+
+    expect(input).toHaveValue("Changed");
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});