Merge pull request #63 from input-output-hk/feat/convert-password-box-to-uncontrolled-component

Feat/convert password box to uncontrolled component

Author: mchappell

src/design-system/index.ts

@@ -24,9 +24,8 @@ export { ToastBar } from './toast-bar';
 export * from './tooltip';
 export { Message } from './message';
 export { Metadata, MetadataLink } from './metadata';
-export { PasswordBox, UncontrolledPasswordBox } from './password-box';
+export { PasswordBox } from './password-box';
 export type {
-  UncontrolledPasswordBoxProps,
   PasswordBoxProps,
   OnPasswordChange,
   Password,

src/design-system/password-box/index.ts

@@ -1,8 +1,6 @@
 export { PasswordBox } from './password-box.component';
 export type { PasswordBoxProps } from './password-box.component';
-export { UncontrolledPasswordBox } from './uncontrolled-password-box.component';
-export type { UncontrolledPasswordBoxProps } from './uncontrolled-password-box.component';
 export type {
   OnPasswordChange,
   Password,
-} from './uncontrolled-password-box-input.component';
+} from './password-box-input.component';

src/design-system/password-box/password-box-input.component.tsx

@@ -9,15 +9,23 @@ import { Text } from '../text';
 import { PasswordInputButton } from './password-box-button.component';
 import * as cx from './password-box-input.css';
 
-export interface PasswordInputProps extends Form.FormControlProps {
+export type Password = {
+  input: HTMLInputElement;
+  // TODO: convert this to UInt8Array
+  value: string;
+};
+
+export type OnPasswordChange = (event: Readonly<Password>) => void;
+
+export interface PasswordInputProps
+  extends Omit<Form.FormControlProps, 'value' | 'onChange'> {
   required?: boolean;
   disabled?: boolean;
   id?: string;
   label: string;
   name?: string;
-  value: string;
   errorMessage?: string;
-  onChange?: (event: Readonly<React.ChangeEvent<HTMLInputElement>>) => void;
+  onChange: OnPasswordChange;
   defaultIsPasswordVisible?: boolean;
   containerClassName?: string;
   containerStyle?: React.CSSProperties;
@@ -30,10 +38,10 @@ export const PasswordInput = ({
   id,
   label,
   name,
-  value,
   errorMessage = '',
   containerClassName = '',
   onChange,
+  autoFocus,
   defaultIsPasswordVisible = false,
   containerStyle,
   testId,
@@ -42,8 +50,11 @@ export const PasswordInput = ({
     defaultIsPasswordVisible,
   );
 
+  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = event =>
+    onChange({ input: event.target, value: event.target.value });
+
   return (
-    <div className={cx.root}>
+    <div className={cx.root} data-testid={testId && `${testId}-container`}>
       <Form.Field
         name="field"
         className={cn(cx.container, {
@@ -58,11 +69,11 @@ export const PasswordInput = ({
               type={isPasswordVisible ? 'text' : 'password'}
               required={required}
               placeholder=""
+              autoFocus={autoFocus}
               className={cn(cx.input, { [cx.largeDots]: !isPasswordVisible })}
               disabled={disabled}
               name={name}
-              value={value}
-              onChange={onChange}
+              onChange={onChangeHandler}
               id={id}
               data-testid={testId}
             />
@@ -73,7 +84,12 @@ export const PasswordInput = ({
             {label}
           </Form.Label>
           <PasswordInputButton
-            testId={testId && `${testId}-toggle`}
+            testId={
+              testId &&
+              (isPasswordVisible
+                ? `${testId}-hide-icon`
+                : `${testId}-show-icon`)
+            }
             onClick={(event): void => {
               event.preventDefault();
               setIsPasswordVisible(!isPasswordVisible);
@@ -84,7 +100,11 @@ export const PasswordInput = ({
         </Flex>
       </Form.Field>
       {errorMessage && (
-        <Text.Label color="error" className={cx.errorMessage}>
+        <Text.Label
+          color="error"
+          className={cx.errorMessage}
+          data-testid={testId && `${testId}-error`}
+        >
           {errorMessage}
         </Text.Label>
       )}

src/design-system/password-box/password-box.stories.tsx

@@ -29,15 +29,17 @@ const VariantsTable = (): JSX.Element => (
       <Variants.Row>
         <Variants.Cell>
           <PasswordBox
-            value="Input Text"
+            placeholder="Input Text"
             label="Password"
+            onChange={v => console.log(v.value)}
             defaultIsPasswordVisible
             onSubmit={action('onSubmit')}
           />
         </Variants.Cell>
         <Variants.Cell>
           <PasswordBox
-            value="Input Text"
+            onChange={v => console.log(v.value)}
+            placeholder="Input Text"
             label="Password"
             onSubmit={action('onSubmit')}
           />
@@ -49,11 +51,10 @@ const VariantsTable = (): JSX.Element => (
 
 const PasswordBoxComponent = ({
   label = 'Password',
-  value = '',
   ...props
 }: Readonly<Partial<PasswordBoxProps>>): JSX.Element => (
   <PasswordBox
-    value={value}
+    onChange={v => console.log(v.value)}
     label={label}
     rootStyle={{ width: '200px' }}
     onSubmit={action('onSubmit')}
@@ -85,12 +86,15 @@ const MainComponents = (): JSX.Element => (
         <HoverPasswordBoxComponent />
       </Variants.Cell>
       <Variants.Cell>
-        <PasswordBoxComponent value="Input Text" defaultIsPasswordVisible />
+        <PasswordBoxComponent
+          placeholder="Input Text"
+          defaultIsPasswordVisible
+        />
       </Variants.Cell>
       <Variants.Cell>
-        <PasswordBox
+        <PasswordBoxComponent
           label="Password"
-          value="Input Text"
+          placeholder="Input Text"
           defaultIsPasswordVisible
           errorMessage="Error"
           rootStyle={{ width: '200px' }}
@@ -106,18 +110,18 @@ const MainComponents = (): JSX.Element => (
     </Variants.Row>
     <Variants.Row>
       <Variants.Cell>
-        <PasswordBoxComponent value="" />
+        <PasswordBoxComponent placeholder="" />
       </Variants.Cell>
       <Variants.Cell>
         <HoverPasswordBoxComponent />
       </Variants.Cell>
       <Variants.Cell>
-        <PasswordBoxComponent value="Input Text" />
+        <PasswordBoxComponent placeholder="Input Text" />
       </Variants.Cell>
       <Variants.Cell>
-        <PasswordBox
+        <PasswordBoxComponent
           label="Password"
-          value="Input Text"
+          placeholder="Input Text"
           defaultIsPasswordVisible
           errorMessage="Error"
           rootStyle={{ width: '200px', marginTop: '20px' }}
@@ -135,19 +139,13 @@ const MainComponents = (): JSX.Element => (
 );
 
 export const Overview = (): JSX.Element => {
-  const [value, setValue] = useState('');
-
   return (
     <Grid>
       <Cell>
         <Section title="Copy for use">
           <Flex flexDirection="column" alignItems="center" w="$fill" my="$32">
-            <PasswordBox
-              value={value}
+            <PasswordBoxComponent
               label="Password"
-              onChange={(event): void => {
-                setValue(event.target.value);
-              }}
               rootStyle={{ width: '500px' }}
               onSubmit={action('onSubmit')}
             />