From 3f915479e526b6d9720ac2c6706da2355a02b7cc Mon Sep 17 00:00:00 2001
From: Klaudija Ljevar <klaudija.ljevar@gmail.com>
Date: Tue, 26 Mar 2024 16:46:40 +0000
Subject: [PATCH] PasswordField - adding a new prop to render the "Show/Hide"
 button (#2759)

* chore: added renderShowHideButton prop to PasswordField component

* chore: updated README

* chore: test update

* chore: changeset

* chore: comment update
---
 .changeset/twelve-months-bow.md                     |  5 +++++
 packages/components/fields/password-field/README.md |  1 +
 .../password-field/src/password-field.story.js      |  1 +
 .../fields/password-field/src/password-field.tsx    | 13 +++++++++++--
 .../src/password-field.visualroute.jsx              |  9 +++++++++
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/twelve-months-bow.md

diff --git a/.changeset/twelve-months-bow.md b/.changeset/twelve-months-bow.md
new file mode 100644
index 0000000000..f2772a27c6
--- /dev/null
+++ b/.changeset/twelve-months-bow.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/password-field': patch
+---
+
+Adding a prop to `PasswordField` that determines whether to render the "Show/Hide" button for password.
diff --git a/packages/components/fields/password-field/README.md b/packages/components/fields/password-field/README.md
index 64a7589654..cbc0387e2e 100644
--- a/packages/components/fields/password-field/README.md
+++ b/packages/components/fields/password-field/README.md
@@ -71,6 +71,7 @@ export default Example;
 | `onInfoButtonClick`    | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |           | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.                                                                                                                                                |
 | `hintIcon`             | `ReactElement`                                                                                        |          |           | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well.                                                                                                                                                       |
 | `badge`                | `ReactNode`                                                                                           |          |           | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email)                                                                                                            |
+| `renderShowHideButton` | `boolean`                                                                                             |          | `true`    | Determines whether to render the "Show/Hide" button for the password field.                                                                                                                                                                                           |
 
 ## Signatures
 
diff --git a/packages/components/fields/password-field/src/password-field.story.js b/packages/components/fields/password-field/src/password-field.story.js
index da138857f8..dfafb99b5e 100644
--- a/packages/components/fields/password-field/src/password-field.story.js
+++ b/packages/components/fields/password-field/src/password-field.story.js
@@ -92,6 +92,7 @@ storiesOf('Components|Fields', module)
               }
               hintIcon={hintIcon}
               badge={text('badge', '')}
+              renderShowHideButton={boolean('renderShowHideButton', true)}
             />
           );
         }}
diff --git a/packages/components/fields/password-field/src/password-field.tsx b/packages/components/fields/password-field/src/password-field.tsx
index 85a7202c30..84a2db3231 100644
--- a/packages/components/fields/password-field/src/password-field.tsx
+++ b/packages/components/fields/password-field/src/password-field.tsx
@@ -176,6 +176,10 @@ export type TPasswordField = {
    * Might be used to display additional information about the content of the field (E.g verified email)
    */
   badge?: ReactNode;
+  /**
+   * Determines whether to render the "Show/Hide" button for the password field.
+   */
+  renderShowHideButton?: boolean;
 };
 
 type TTogglePasswordVisibilityHandler = (
@@ -185,8 +189,12 @@ type TTogglePasswordVisibilityHandler = (
     | KeyboardEvent<HTMLButtonElement>
 ) => void;
 
-const defaultProps: Pick<TPasswordField, 'horizontalConstraint'> = {
+const defaultProps: Pick<
+  TPasswordField,
+  'horizontalConstraint' | 'renderShowHideButton'
+> = {
   horizontalConstraint: 'scale',
+  renderShowHideButton: true,
 };
 
 const PasswordField = (props: TPasswordField) => {
@@ -195,7 +203,8 @@ const PasswordField = (props: TPasswordField) => {
   const id = useFieldId(props.id, sequentialId);
   const hasError = props.touched && hasErrors(props.errors);
   const hasWarning = props.touched && hasWarnings(props.warnings);
-  const canInteract = !props.isDisabled && !props.isReadOnly;
+  const canInteract =
+    !props.isDisabled && !props.isReadOnly && props.renderShowHideButton;
 
   if (!props.isReadOnly) {
     warning(
diff --git a/packages/components/fields/password-field/src/password-field.visualroute.jsx b/packages/components/fields/password-field/src/password-field.visualroute.jsx
index 8beaee402c..90c3f2aa70 100644
--- a/packages/components/fields/password-field/src/password-field.visualroute.jsx
+++ b/packages/components/fields/password-field/src/password-field.visualroute.jsx
@@ -102,5 +102,14 @@ export const component = () => (
         renderWarning={() => 'Custom warning'}
       />
     </Spec>
+    <Spec label="with not rendered show/hide password button">
+      <PasswordField
+        title="Welcome Text"
+        value={value}
+        onChange={() => {}}
+        horizontalConstraint={7}
+        renderShowHideButton={false}
+      />
+    </Spec>
   </Suite>
 );