CR, add test and story

src/components/InlineInput/InlineInput.stories.tsx

@@ -0,0 +1,17 @@
+import { InlineInput } from './InlineInput';
+
+export default { title: 'Components/InlineInput' };
+
+export const _InlineInput = {
+  render: () => (
+    <p>
+      <InlineInput value="1000000" />
+      <br />
+      <InlineInput value="0.00" disabled />
+      <br />
+      <InlineInput value="5.55" suffix=" USD" />
+      <br />
+      <InlineInput value="5.55" customClass="mas-caption" />
+    </p>
+  ),
+};

src/components/InlineInput/InlineInput.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { InlineInput } from '.';
+
+describe('Components | Fields | InlineInput', () => {
+  test('it should render', () => {
+    render(<InlineInput value="value" />);
+
+    let inlineInput = screen.getByTestId('inline-input');
+
+    expect(inlineInput).toBeInTheDocument();
+  });
+});

src/components/InlineInput/InlineInput.tsx

@@ -1,31 +1,39 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
 import { NumberFormatValues, NumericFormat } from 'react-number-format';
 
-interface InlineInputProps {
-  name: string;
-  disabled?: boolean;
+interface InlineInputProps
+  extends ComponentPropsWithoutRef<typeof NumericFormat> {
   value: string;
+  disabled?: boolean;
+  suffix?: string;
   onValueChange?: (event: NumberFormatValues) => void;
+  customClass?: string;
 }
 
 export function InlineInput(props: InlineInputProps) {
-  const { name, disabled, value, onValueChange } = props;
+  const { disabled, value, onValueChange, suffix, customClass, ...rest } =
+    props;
+
   const underline = disabled ? '' : 'underline';
 
+  const suffixAttr = suffix ? suffix : ' MAS';
+
   return (
     <NumericFormat
-      className={`text-right bg-primary mas-caption underline-offset-4 ${underline}`}
-      name={name}
+      data-testid="inline-input"
+      className={`default-input border-none focus:border-none rounded-none
+        text-right bg-primary underline-offset-4 ${underline} ${customClass}`}
       decimalScale={9}
       allowNegative={false}
+      suffix={suffixAttr}
       disabled={disabled}
       thousandSeparator=","
       value={value}
       onValueChange={onValueChange}
-      suffix=" MAS"
+      {...rest}
     />
   );
 }