@purpurds/password-field 6.4.0

package/src/password-field.stories.tsx

@@ -0,0 +1,273 @@
+import React, { ChangeEvent } from "react";
+import { Button } from "@purpurds/button";
+import { Heading } from "@purpurds/heading";
+import { Paragraph } from "@purpurds/paragraph";
+import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/button/styles";
+import "@purpurds/field-error-text/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/paragraph/styles";
+import "@purpurds/text-field/styles";
+import "./password-field.story.css";
+import { PasswordField } from "./password-field";
+
+const PasswordFieldStoryBookComponent = (...args: any[]) => {
+  const [password, setPassword] = React.useState("");
+  const [passwordTwo, setPasswordTwo] = React.useState("");
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+  const handlePasswordTwoChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPasswordTwo(e.target.value);
+  };
+
+  const isValid = !!password && password === passwordTwo;
+  return (
+    <form className="password-field-story-form" onSubmit={(e) => e.preventDefault()}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+        <Heading tag="h1" variant="title-400">
+          New password
+        </Heading>
+        <Paragraph>
+          Choose a new password with at least 10 characters. Make sure to select a strong password
+          for increased security.
+        </Paragraph>
+      </div>
+      <div className="password-field-story-field-container">
+        <PasswordField
+          {...args}
+          label="Password"
+          name="password"
+          showPasswordAllyLabel="Show password"
+          hidePasswordAllyLabel="Hide password"
+          errorText=""
+          value={password}
+          valid={isValid}
+          onChange={handlePasswordChange}
+        >
+          <PasswordField.PasswordStrength
+            value={password}
+            label="Password strength"
+            weakText="Weak"
+            mediumText="Medium"
+            strongText="Strong"
+          />
+        </PasswordField>
+        <PasswordField
+          {...args}
+          label="Confirm password"
+          name="confirm-password"
+          showPasswordAllyLabel="Show password"
+          hidePasswordAllyLabel="Hide password"
+          errorText=""
+          value={passwordTwo}
+          valid={isValid}
+          onChange={handlePasswordTwoChange}
+        />
+      </div>
+      <div className="password-field-story-button-container">
+        <Button variant="primary" type="submit">
+          Save password
+        </Button>
+        <Button variant="secondary" type="button">
+          Go back
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+const meta = {
+  title: "Inputs/PasswordField",
+  component: PasswordField,
+  subcomponents: {
+    //@ts-ignore
+    "PasswordField.PasswordStrength": PasswordField.PasswordStrength,
+  },
+  parameters: {
+    design: [
+      {
+        name: "PasswordField",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=67888-101414&m=dev",
+      },
+    ],
+  },
+  args: {
+    disabled: false,
+    errorText: undefined,
+    helperText: "Enter your password",
+    hidePasswordAllyLabel: "Hide password",
+    label: "Password",
+    loading: false,
+    placeholder: "Enter text",
+    readOnly: false,
+    required: true,
+    showPasswordAllyLabel: "Show password",
+    valid: false,
+    value: "",
+  },
+} satisfies Meta<typeof PasswordField>;
+
+export default meta;
+
+type Story = StoryObj<typeof PasswordField>;
+
+export const Showcase: Story = {
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#000000" },
+        { name: "lightgray", value: "#dfdfdf" },
+      ],
+      default: "lightgray",
+    },
+    docs: {
+      source: {
+        code: `
+<form>
+  <div>
+    <Heading tag="h1" variant="title-400">
+      New password
+    </Heading>
+    <Paragraph>
+      Choose a new password with at least 10 characters. Make sure to select a strong password
+      for increased security.
+    </Paragraph>
+  </div>
+  <div>
+    <PasswordField
+      {...args}
+      label="Password"
+      name="password"
+      showPasswordAllyLabel="Show password"
+      hidePasswordAllyLabel="Hide password"
+      errorText=""
+      value={password}
+      valid={isValid}
+      onChange={handlePasswordChange}
+    >
+      <PasswordField.PasswordStrength
+        value={password}
+        label="Password strength"
+        weakText="Weak"
+        mediumText="Medium"
+        strongText="Strong"
+      />
+    </PasswordField>
+    <PasswordField
+      {...args}
+      label="Confirm password"
+      name="confirm-password"
+      showPasswordAllyLabel="Show password"
+      hidePasswordAllyLabel="Hide password"
+      errorText=""
+      value={passwordTwo}
+      valid={isValid}
+      onChange={handlePasswordTwoChange}
+    />
+  </div>
+  <div>
+    <Button variant="primary" type="submit">
+      Save password
+    </Button>
+    <Button variant="secondary" type="button">
+      Go back
+    </Button>
+  </div>
+</form>
+        `,
+      },
+    },
+  },
+  render: ({ ...args }) => {
+    return <PasswordFieldStoryBookComponent {...args} />;
+  },
+};
+
+export const OnlyPasswordField: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PasswordField
+  value={value}
+  onChange={setValue}
+  disabled={false}
+  errorText={undefined}
+  helperText="Enter your password"
+  hidePasswordAllyLabel="Hide password"
+  label="Password"
+  placeholder="Enter text"
+  required={true}
+  showPasswordAllyLabel="Show password"
+/>
+        `,
+      },
+    },
+  },
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    const setValue = (e: ChangeEvent<HTMLInputElement>) => {
+      updateArgs({ value: e.target.value });
+    };
+
+    return <PasswordField {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export const PasswordFieldWithPasswordStrength: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PasswordField
+  value={value}
+  onChange={setValue}
+  disabled={false}
+  errorText={undefined}
+  helperText="Enter your password"
+  hidePasswordAllyLabel="Hide password"
+  label="Password"
+  placeholder="Enter text"
+  required={true}
+  showPasswordAllyLabel="Show password"
+>
+  <PasswordField.PasswordStrength
+    value={value}
+    label="Password strength"
+    weakText="Weak"
+    mediumText="Medium"
+    strongText="Strong"
+  />
+</PasswordField>
+        `,
+      },
+    },
+  },
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    const setValue = (e: ChangeEvent<HTMLInputElement>) => {
+      updateArgs({ value: e.target.value });
+    };
+
+    return (
+      <PasswordField {...args} value={value} onChange={setValue}>
+        <PasswordField.PasswordStrength
+          value={value}
+          label="Password strength"
+          weakText="Weak"
+          mediumText="Medium"
+          strongText="Strong"
+        />
+      </PasswordField>
+    );
+  },
+};

package/src/password-field.story.css

@@ -0,0 +1,23 @@
+.password-field-story-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-400);
+  max-width: calc(4 * var(--purpur-spacing-1200));
+  width: 100%;
+  margin: var(--purpur-spacing-400) auto;
+  padding: var(--purpur-spacing-400);
+  border-radius: var(--purpur-border-radius-lg);
+  background-color: var(--purpur-color-background-secondary);
+}
+
+.password-field-story-field-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-300);
+}
+
+.password-field-story-button-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-200);
+}

package/src/password-field.test.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PasswordField, PasswordFieldProps } from "./password-field";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PasswordField", () => {
+  const defaultProps: PasswordFieldProps = {
+    clearButtonAllyLabel: "Clear",
+    showPasswordAllyLabel: "Show password",
+    hidePasswordAllyLabel: "Hide password",
+    onClear: vi.fn(),
+  };
+
+  it("renders without crashing", () => {
+    render(<PasswordField {...defaultProps} />);
+    const component = screen.getByTestId(Selectors.PasswordField);
+    expect(component).toBeInTheDocument();
+  });
+
+  it("toggles password visibility when the visibility button is clicked", async () => {
+    render(<PasswordField {...defaultProps} />);
+    const typeToggleButton = screen.getByTestId(Selectors.TypeToggleButton);
+    const inputField = screen.getByTestId(Selectors.PasswordField);
+
+    // Initially, the input type should be password
+    expect(inputField).toHaveAttribute("type", "password");
+
+    // Click the visibility button to show the password
+    await userEvent.click(typeToggleButton);
+    expect(inputField).toHaveAttribute("type", "text");
+
+    // Click the visibility button again to hide the password
+    await userEvent.click(typeToggleButton);
+    expect(inputField).toHaveAttribute("type", "password");
+  });
+
+  it("calls onChange when the input value changes", async () => {
+    const handleChange = vi.fn();
+    render(<PasswordField {...defaultProps} onChange={handleChange} />);
+    const inputField = screen.getByTestId(Selectors.PasswordField);
+
+    await userEvent.type(inputField, "new password");
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("renders children correctly", () => {
+    render(
+      <PasswordField {...defaultProps}>
+        <div data-testid="child">Child Component</div>
+      </PasswordField>
+    );
+    const childComponent = screen.getByTestId("child");
+    expect(childComponent).toBeInTheDocument();
+  });
+});
+
+const Selectors = {
+  PasswordField: "password-field-input",
+  TypeToggleButton: "password-field-type-toggle-button",
+};

package/src/password-field.tsx

@@ -0,0 +1,128 @@
+import React, {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  ReactPortal,
+  useState,
+} from "react";
+import { Button } from "@purpurds/button";
+import { IconPasswordInvisible } from "@purpurds/icon/password-invisible";
+import { IconPasswordVisible } from "@purpurds/icon/password-visible";
+import { type TextFieldProps, TextField } from "@purpurds/text-field";
+import c from "classnames/bind";
+
+import { FIELD_TYPE } from "./constants";
+import styles from "./password-field.module.scss";
+import { PasswordStrength } from "./password-strength";
+import { FieldType } from "./types";
+
+const cx = c.bind(styles);
+
+export type PasswordFieldDefaultProps = {
+  ["data-testid"]?: string;
+  children?: ReactNode;
+  className?: string;
+  showPasswordAllyLabel: string;
+  hidePasswordAllyLabel: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+type TextFieldClearProps =
+  | {
+      clearButtonAllyLabel: string;
+      onClear: () => void;
+    }
+  | {
+      clearButtonAllyLabel?: never;
+      onClear?: never;
+    };
+
+export type PasswordFieldProps = PasswordFieldDefaultProps &
+  Omit<TextFieldProps, "startAdornment" | "endAdornment" | "afterField" | "type"> &
+  TextFieldClearProps;
+
+const rootClassName = "purpur-password-field";
+
+type PasswordFieldCmp<P> = React.ForwardRefExoticComponent<
+  P & React.RefAttributes<HTMLInputElement>
+> & {
+  PasswordStrength: typeof PasswordStrength;
+};
+
+export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  (
+    {
+      ["data-testid"]: dataTestId = "password-field",
+      children,
+      className,
+      hidePasswordAllyLabel,
+      onChange,
+      showPasswordAllyLabel,
+      ...props
+    }: PasswordFieldProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+    const [type, setType] = useState<FieldType>(FIELD_TYPE.PASSWORD);
+
+    const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event);
+    };
+
+    const handleVisibilityChange = () => {
+      setType(type === FIELD_TYPE.PASSWORD ? FIELD_TYPE.TEXT : FIELD_TYPE.PASSWORD);
+    };
+
+    const IconComponent =
+      type === FIELD_TYPE.PASSWORD ? IconPasswordVisible : IconPasswordInvisible;
+
+    return (
+      <div className={classes}>
+        <TextField
+          className={cx(`${rootClassName}__text-field`)}
+          data-testid={dataTestId}
+          onChange={handleChange}
+          ref={ref}
+          type={type}
+          endAdornment={
+            // eslint-disable-next-line react/jsx-wrap-multilines
+            <Button
+              aria-label={
+                type === FIELD_TYPE.PASSWORD ? showPasswordAllyLabel : hidePasswordAllyLabel
+              }
+              data-testid={`${dataTestId}-type-toggle-button`}
+              onClick={handleVisibilityChange}
+              size="sm"
+              variant="tertiary-purple"
+              iconOnly
+            >
+              <IconComponent size="sm" />
+            </Button>
+          }
+          {...props}
+        />
+        {children}
+      </div>
+    );
+  }
+) as PasswordFieldCmp<PasswordFieldProps>;
+
+PasswordField.PasswordStrength = PasswordStrength;
+
+PasswordField.displayName = "PasswordField";
+
+export const isPasswordStrength = (
+  child:
+    | ReactElement
+    | Iterable<ReactNode>
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<PasswordFieldProps> =>
+  isValidElement<PasswordFieldProps>(child) && child?.type === PasswordStrength;

package/src/password-strength-indicator.module.scss

@@ -0,0 +1,19 @@
+.purpur-password-strength-indicator {
+  $root: &;
+  background-color: var(--purpur-color-background-interactive-disabled);
+  border-radius: var(--purpur-border-radius-full);
+  height: var(--purpur-spacing-100);
+  width: 100%;
+
+  &--active {
+    &#{$root}--weak {
+      background-color: var(--purpur-color-background-status-error-strong);
+    }
+    &#{$root}--medium {
+      background-color: var(--purpur-color-background-status-warning-strong);
+    }
+    &#{$root}--strong {
+      background-color: var(--purpur-color-background-status-success-strong);
+    }
+  }
+}

package/src/password-strength-indicator.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { PASSWORD_STRENGTH } from "./constants";
+import { PasswordStrengthIndicator } from "./password-strength-indicator";
+import type { PasswordStrengthValue } from "./types";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PasswordStrengthIndicator", () => {
+  it("renders without crashing", () => {
+    render(<PasswordStrengthIndicator active={false} />);
+    const indicator = screen.getByTestId(Selectors.PasswordStrengthIndicator);
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it("applies the active class when active is true", () => {
+    render(<PasswordStrengthIndicator active={true} />);
+    const indicator = screen.getByTestId(Selectors.PasswordStrengthIndicator);
+    expect(indicator).toHaveClass("purpur-password-strength-indicator--active");
+  });
+
+  it("applies the correct strength class when passwordStrength is provided", () => {
+    const strength: PasswordStrengthValue = PASSWORD_STRENGTH.STRONG;
+    render(<PasswordStrengthIndicator active={false} passwordStrength={strength} />);
+    const indicator = screen.getByTestId(Selectors.PasswordStrengthIndicator);
+    expect(indicator).toHaveClass(`purpur-password-strength-indicator--${strength}`);
+  });
+
+  it("applies additional className if provided", () => {
+    const customClass = "custom-class";
+    render(<PasswordStrengthIndicator active={false} className={customClass} />);
+    const indicator = screen.getByTestId(Selectors.PasswordStrengthIndicator);
+    expect(indicator).toHaveClass(customClass);
+  });
+});
+
+const Selectors = {
+  PasswordStrengthIndicator: "password-strength-indicator",
+};

package/src/password-strength-indicator.tsx

@@ -0,0 +1,38 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import c from "classnames/bind";
+
+import styles from "./password-strength-indicator.module.scss";
+import type { PasswordStrengthValue } from "./types";
+const cx = c.bind(styles);
+
+export type PasswordStrengthIndicatorProps = {
+  ["data-testid"]?: string;
+  active: boolean;
+  className?: string;
+  passwordStrength?: PasswordStrengthValue;
+};
+
+const rootClassName = "purpur-password-strength-indicator";
+
+export const PasswordStrengthIndicator = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "password-strength-indicator",
+      active,
+      className,
+      passwordStrength,
+    }: PasswordStrengthIndicatorProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([
+      className,
+      rootClassName,
+      { [`${rootClassName}--${passwordStrength}`]: passwordStrength },
+      { [`${rootClassName}--active`]: active },
+    ]);
+
+    return <div data-testid={dataTestId} className={classes} ref={ref} />;
+  }
+);
+
+PasswordStrengthIndicator.displayName = "PasswordStrengthIndicator";

package/src/password-strength.module.scss

@@ -0,0 +1,30 @@
+.purpur-password-strength {
+  $root: &;
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-100);
+
+  &__indicator-container {
+    display: flex;
+    gap: var(--purpur-spacing-100);
+  }
+
+  #{$root}__password-strength-text {
+    &--weak {
+      color: var(--purpur-color-text-status-error-strong);
+    }
+    &--medium {
+      color: var(--purpur-color-text-status-warning-strong);
+    }
+    &--strong {
+      color: var(--purpur-color-text-status-success-strong);
+    }
+  }
+
+  #{$root}__password-strength-label {
+    font-family: var(--purpur-typography-family-default);
+    font-size: var(--purpur-typography-scale-100);
+    font-weight: var(--purpur-typography-weight-medium);
+    line-height: var(--purpur-typography-line-height-loose);
+  }
+}

package/src/password-strength.test.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { PasswordStrength } from "./password-strength";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PasswordStrength", () => {
+  const defaultProps = {
+    value: "p4ssWord123!!!",
+    label: "Password strength",
+    weakText: "Weak",
+    mediumText: "Medium",
+    strongText: "Strong",
+  };
+
+  it("renders without crashing", () => {
+    render(<PasswordStrength {...defaultProps} />);
+    const component = screen.getByTestId(Selectors.PasswordStrength);
+    expect(component).toBeInTheDocument();
+  });
+
+  it("displays the correct password strength text", async () => {
+    render(<PasswordStrength {...defaultProps} />);
+    const strengthText = screen.getByTestId(Selectors.PasswordStrengthText);
+    await waitFor(() => expect(strengthText).toHaveTextContent("Strong"));
+  });
+
+  it("renders the correct number of PasswordStrengthIndicator components", () => {
+    render(<PasswordStrength {...defaultProps} />);
+    const indicators = screen.getAllByTestId(Selectors.PasswordStrengthIndicator);
+    expect(indicators.length).toBe(3);
+  });
+
+  it("applies the correct class names based on password strength", () => {
+    render(<PasswordStrength {...defaultProps} />);
+    const component = screen.getByTestId(Selectors.PasswordStrength);
+    expect(component).toHaveClass("purpur-password-strength");
+  });
+});
+
+const Selectors = {
+  PasswordStrength: "password-strength",
+  PasswordStrengthText: "password-strength-text",
+  PasswordStrengthIndicator: "password-strength-indicator",
+};