@purpurds/field-error-text 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-field-error-text_1h4gy_1{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);color:var(--purpur-color-text-status-error-strong);display:flex;flex-direction:row;gap:var(--purpur-spacing-50);align-items:center}._purpur-field-error-text__icon_1h4gy_12{color:var(--purpur-color-text-status-error-medium);line-height:var(--purpur-typography-line-height-tight)}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@purpurds/field-error-text",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/field-error-text.cjs.js",
+  "types": "./dist/field-error-text.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/field-error-text.cjs.js",
+      "systemjs": "./dist/field-error-text.system.js",
+      "types": "./dist/field-error-text.d.ts",
+      "default": "./dist/field-error-text.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/field-error-text.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0",
+    "@purpurds/paragraph": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~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.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,58 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as FieldErrorTextStories from "./src/field-error-text.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/FieldErrorText" of={FieldErrorTextStories} />
+
+# FieldErrorText
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+This is an internal component used for form fields.
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/field-error-text": "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/field-error-text/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { FieldErrorText } from "@purpurds/field-error-text";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <FieldErrorText {...someProps}>Some content</FieldErrorText>
+    </div>
+  );
+};
+```

package/src/field-error-text.module.scss

@@ -0,0 +1,15 @@
+@import "@purpurds/paragraph/src/paragraph.mixins.scss";
+
+.purpur-field-error-text {
+  @include purpur-paragraph-100;
+  color: var(--purpur-color-text-status-error-strong);
+  display: flex;
+  flex-direction: row;
+  gap: var(--purpur-spacing-50);
+  align-items: center;
+
+  &__icon {
+    color: var(--purpur-color-text-status-error-medium);
+    line-height: var(--purpur-typography-line-height-tight);
+  }
+}

package/src/field-error-text.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/icon/styles";
+import { FieldErrorText } from "./field-error-text";
+
+const meta: Meta<typeof FieldErrorText> = {
+  title: "Components/FieldErrorText",
+  component: FieldErrorText,
+  parameters: {
+    design: [
+      {
+        name: "Checkbox",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274%3A614&mode=design&t=5WYoIWv1It545kCs-1",
+      },
+      {
+        name: "Date picker",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=33657%3A20978&mode=design&t=5WYoIWv1It545kCs-1",
+      },
+      {
+        name: "Search input",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=25720-16573&mode=design&t=5WYoIWv1It545kCs-0",
+      },
+      {
+        name: "Select",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=2649%3A1994&mode=design&t=I7q1i4D0IFuULtpT-1",
+      },
+      {
+        name: "Textarea",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1565%3A1896&mode=design&t=5WYoIWv1It545kCs-1",
+      },
+      {
+        name: "Text input",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1528%3A1886&mode=design&t=5WYoIWv1It545kCs-1",
+      },
+    ],
+  },
+  argTypes: {
+    children: { control: { type: "text" } },
+    relevant: {
+      control: { type: "select" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldErrorText>;
+
+export const Showcase: Story = {
+  args: {
+    children: "Error text",
+    relevant: "additions text",
+  },
+};

package/src/field-error-text.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { FieldErrorText } from "./field-error-text";
+
+expect.extend(matchers);
+
+describe("FieldErrorText", () => {
+  it("should have tests", () => {
+    render(<FieldErrorText data-testid="field-error-text">Some error text</FieldErrorText>);
+
+    expect(screen.getByTestId("field-error-text")).toHaveTextContent("Some error text");
+  });
+});

package/src/field-error-text.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { errorFilled, Icon } from "@purpurds/icon";
+import c from "classnames";
+
+import styles from "./field-error-text.module.scss";
+
+export type FieldErrorTextProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  relevant?: "additions text" | "additions" | "removals" | "text" | "all";
+};
+
+const rootClassName = "purpur-field-error-text";
+
+export const FieldErrorText = ({
+  ["data-testid"]: dataTestId,
+  children,
+  className,
+  relevant = "additions text",
+  ...props
+}: FieldErrorTextProps) => (
+  <div
+    className={c([className, styles[rootClassName]])}
+    data-testid={dataTestId}
+    aria-live="assertive"
+    aria-relevant={relevant}
+    {...props}
+  >
+    <Icon svg={errorFilled} size="xs" className={styles[`${rootClassName}__icon`]} />
+    {children}
+  </div>
+);

package/src/global.d.ts

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