Merge pull request #226 from deriv-com/codex/extend-steppertextfield-to-support-suffix

Matin/Implement StepperTextField suffix support

Author: matin-deriv

src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx

@@ -20,7 +20,7 @@ describe('StepperTextField', () => {
     });
   });
 
-  const renderStepperTextField = () => {
+  const renderStepperTextField = (props?: Partial<React.ComponentProps<typeof StepperTextField>>) => {
     render(
       <StepperTextField
         handleOnMinusClick={() => jest.fn()}
@@ -31,6 +31,7 @@ describe('StepperTextField', () => {
         error={{
           type: 'min',
         }}
+        {...props}
       />,
     );
   };
@@ -40,4 +41,9 @@ describe('StepperTextField', () => {
     const input = screen.getByTestId('stepper-text-field');
     expect(input).toBeInTheDocument();
   });
+
+  it('should render suffix when provided', () => {
+    renderStepperTextField({ suffix: '%' });
+    expect(screen.getByTestId('stepper-text-field-suffix')).toHaveTextContent('%');
+  });
 });

src/features/dashboard/components/stepper-text-field/stepper-text-field.scss

@@ -16,7 +16,12 @@
     width: 340px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding-block: 12px;
     border: 1px solid rgba(0, 0, 0, 0.08);
   }
+
+  &__suffix {
+    margin-left: 8px;
+  }
 }

src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx

@@ -10,6 +10,10 @@ type StepperTextFieldProps = {
   name: string;
   min: number;
   max: number;
+  /**
+   * Optional element to display after the input value
+   */
+  suffix?: React.ReactNode;
   error: {
     type: string;
   };
@@ -21,6 +25,7 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
   name,
   min,
   max,
+  suffix,
   error,
   ...rest
 }) => {
@@ -65,6 +70,11 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
           {...register(name)}
           {...rest}
         />
+        {suffix && (
+          <span className='stepper_text_field__suffix' data-testid='stepper-text-field-suffix'>
+            {suffix}
+          </span>
+        )}
         <Button
           color='black'
           icon={<LabelPairedPlusSmFillIcon />}

src/features/dashboard/update-app/AppUpdateForm/index.tsx

@@ -149,6 +149,7 @@ const AppUpdateForm = ({ initialValues, submit, onCancel, is_loading }: TAppForm
             }}
             min={0}
             max={3}
+            suffix='%'
             error={errors?.app_markup_percentage}
           />
           {errors?.app_markup_percentage && (