From a8ec9fb7579a975ccaad897c4827206d32e07ed1 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 13 Mar 2024 15:29:18 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20InputPassword?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We had the need to have a built-in password input able to show or
hide the password.

Closes #301
---
 .changeset/flat-guests-matter.md              |  5 +++
 .../Forms/Input/InputPassword.stories.tsx     | 13 ++++++
 .../components/Forms/Input/InputPassword.tsx  | 41 +++++++++++++++++++
 .../src/components/Forms/Input/_index.scss    |  7 ++++
 .../src/components/Forms/Input/index.mdx      |  7 ++++
 .../src/components/Forms/Input/index.spec.tsx | 30 ++++++++++++++
 packages/react/src/index.ts                   |  1 +
 packages/react/src/locales/en-US.json         |  6 +++
 8 files changed, 110 insertions(+)
 create mode 100644 .changeset/flat-guests-matter.md
 create mode 100644 packages/react/src/components/Forms/Input/InputPassword.stories.tsx
 create mode 100644 packages/react/src/components/Forms/Input/InputPassword.tsx

diff --git a/.changeset/flat-guests-matter.md b/.changeset/flat-guests-matter.md
new file mode 100644
index 0000000..1a455c7
--- /dev/null
+++ b/.changeset/flat-guests-matter.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add InputPassword
diff --git a/packages/react/src/components/Forms/Input/InputPassword.stories.tsx b/packages/react/src/components/Forms/Input/InputPassword.stories.tsx
new file mode 100644
index 0000000..6533989
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/InputPassword.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta } from "@storybook/react";
+import { InputPassword } from ":/components/Forms/Input/InputPassword";
+
+export default {
+  title: "Components/Forms/Input",
+  component: InputPassword,
+} as Meta<typeof InputPassword>;
+
+export const Password = {
+  args: {
+    label: "Your most secret password",
+  },
+};
diff --git a/packages/react/src/components/Forms/Input/InputPassword.tsx b/packages/react/src/components/Forms/Input/InputPassword.tsx
new file mode 100644
index 0000000..6d53695
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/InputPassword.tsx
@@ -0,0 +1,41 @@
+import React, { forwardRef } from "react";
+import { Input, InputProps } from ":/components/Forms/Input/index";
+import { Button } from ":/components/Button";
+import { useCunningham } from ":/components/Provider";
+
+export const InputPassword = forwardRef<
+  HTMLInputElement,
+  Omit<InputProps, "rightIcon">
+>((props: InputProps, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const { className, ...otherProps } = props;
+  const customClassName = "c__input--password";
+  const { t } = useCunningham();
+  return (
+    <Input
+      {...otherProps}
+      ref={ref}
+      className={className + " " + customClassName}
+      type={showPassword ? "text" : "password"}
+      rightIcon={
+        showPassword ? (
+          <Button
+            onClick={() => setShowPassword(false)}
+            icon={<span className="material-icons">visibility_off</span>}
+            color="tertiary-text"
+            size="small"
+            aria-label={t("components.forms.input.password.hide_password")}
+          />
+        ) : (
+          <Button
+            onClick={() => setShowPassword(true)}
+            icon={<span className="material-icons">visibility</span>}
+            color="tertiary-text"
+            size="small"
+            aria-label={t("components.forms.input.password.show_password")}
+          />
+        )
+      }
+    />
+  );
+});
diff --git a/packages/react/src/components/Forms/Input/_index.scss b/packages/react/src/components/Forms/Input/_index.scss
index 944d66a..0ee3d36 100644
--- a/packages/react/src/components/Forms/Input/_index.scss
+++ b/packages/react/src/components/Forms/Input/_index.scss
@@ -133,3 +133,10 @@
     }
   }
 }
+
+.c__input--password {
+  .c__input__icon-right .material-icons {
+    font-size: 1.5rem;
+  }
+}
+
diff --git a/packages/react/src/components/Forms/Input/index.mdx b/packages/react/src/components/Forms/Input/index.mdx
index 0c6485d..2b62a59 100644
--- a/packages/react/src/components/Forms/Input/index.mdx
+++ b/packages/react/src/components/Forms/Input/index.mdx
@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Input } from "./index";
 import * as Stories from './index.stories';
+import * as InputPasswordStories from './InputPassword.stories';
 
 <Meta of={Stories}/>
 
@@ -65,6 +66,12 @@ in mind to also define `charCounterMax`.
 
 <Canvas of={Stories.CharCounter} sourceState="shown"/>
 
+## Password
+
+You can also use a built-in password input that includes a button to show or hide the password.
+
+<Canvas of={InputPasswordStories.Password} sourceState="shown"/>
+
 ## Controlled / Non Controlled
 
 Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx
index 4912b41..bb4fcbd 100644
--- a/packages/react/src/components/Forms/Input/index.spec.tsx
+++ b/packages/react/src/components/Forms/Input/index.spec.tsx
@@ -4,6 +4,8 @@ import userEvent from "@testing-library/user-event";
 import { expect } from "vitest";
 import { Input, InputOnlyProps } from ":/components/Forms/Input/index";
 import { Button } from ":/components/Button";
+import { InputPassword } from ":/components/Forms/Input/InputPassword";
+import { CunninghamProvider } from ":/components/Provider";
 import { FieldProps } from "../Field";
 
 const spyError = vi.spyOn(global.console, "error");
@@ -242,4 +244,32 @@ describe("<Input/>", () => {
       document.querySelector(".c__field.my-custom-class"),
     ).toBeInTheDocument();
   });
+
+  it("renders with className", async () => {
+    render(<Input label="First name" className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
+
+  it("allows to show/hide password", async () => {
+    render(
+      <CunninghamProvider>
+        <InputPassword label="Password" />
+      </CunninghamProvider>,
+    );
+    const user = userEvent.setup();
+    const input: HTMLInputElement = screen.getByLabelText("Password");
+
+    await user.type(input, "azerty");
+    expect(input.type).toEqual("password");
+
+    let button = screen.getByRole("button", { name: "Show password" });
+    await user.click(button);
+    expect(input.type).toEqual("text");
+
+    button = screen.getByRole("button", { name: "Hide password" });
+    await user.click(button);
+    expect(input.type).toEqual("password");
+  });
 });
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4b5b575..0920a17 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -12,6 +12,7 @@ export * from "./components/Forms/DatePicker";
 export * from "./components/Forms/Field";
 export * from "./components/Forms/FileUploader";
 export * from "./components/Forms/Input";
+export * from "./components/Forms/Input/InputPassword";
 export * from "./components/Forms/Radio";
 export * from "./components/Forms/Select";
 export * from "./components/Forms/Switch";
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
index 0489bcd..bbe2d64 100644
--- a/packages/react/src/locales/en-US.json
+++ b/packages/react/src/locales/en-US.json
@@ -24,6 +24,12 @@
       "test": "This is a test: {name}"
     },
     "forms": {
+      "input": {
+        "password": {
+            "show_password": "Show password",
+            "hide_password": "Hide password"
+        }
+      },
       "select": {
         "toggle_button_aria_label": "Toggle dropdown",
         "clear_button_aria_label": "Clear selection",