EPMRPP-91645 || Added collapsed state for field text

src/components/fieldText/README.md

@@ -22,6 +22,8 @@ Has 36px height & width adjusted by content.
 - **isRequired**: _bool_, optional, default = false
 - **hasDoubleMessage**: _bool_, optional, default = false
 - **displayError**: _bool_, optional, default = true
+- **collapsible**: _bool_, optional, default = false
+- **loading**: _bool_, optional, default = false
 
 ### Events:
 

src/components/fieldText/fieldText.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { DeleteIcon } from '@components/icons';
 import { FieldText } from './fieldText';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 
 const meta: Meta<typeof FieldText> = {
   title: 'Field Text',
@@ -13,12 +13,17 @@ const meta: Meta<typeof FieldText> = {
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, setValue] = useState('');
-
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = useRef<HTMLInputElement>(null);
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      setValue(event.target.value);
+      const val = event.target.value;
+      setValue(val);
+      if (val === 'blur') {
+        ref?.current?.blur();
+      }
     };
 
-    return <FieldText {...args} value={value} onChange={handleChange} />;
+    return <FieldText {...args} value={value} onChange={handleChange} ref={ref} />;
   },
 };
 

src/components/fieldText/fieldText.tsx

@@ -4,9 +4,9 @@ import {
   ReactElement,
   ReactNode,
   useState,
-  useImperativeHandle,
   useRef,
   InputHTMLAttributes,
+  MutableRefObject,
 } from 'react';
 import classNames from 'classnames/bind';
 import { ClearIcon } from '@components/icons';
@@ -22,6 +22,8 @@ interface FieldTextProps extends InputHTMLAttributes<HTMLInputElement> {
   placeholder?: string;
   disabled?: boolean;
   onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: ChangeEventHandler<HTMLInputElement>;
   touched?: boolean;
   title?: string;
   label?: string;
@@ -38,11 +40,8 @@ interface FieldTextProps extends InputHTMLAttributes<HTMLInputElement> {
   collapsible?: boolean;
   loading?: boolean;
 }
-interface FocusableInputHandle {
-  focus: () => void;
-}
 
-export const FieldText = forwardRef<FocusableInputHandle, FieldTextProps>(
+export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
   (
     {
       value = '',
@@ -66,20 +65,25 @@ export const FieldText = forwardRef<FocusableInputHandle, FieldTextProps>(
       displayError = true,
       collapsible = false,
       loading = false,
+      onFocus = () => {},
+      onBlur = () => {},
       ...rest
     },
     ref,
   ): ReactElement => {
     const internalRef = useRef<HTMLInputElement>(null);
+    const inputRef = ref || internalRef;
     const [focused, setFocused] = useState(false);
-    const onFocus = () => setFocused(true);
-    const onBlur = () => setFocused(false);
 
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        internalRef.current?.focus();
-      },
-    }));
+    const onFocusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(true);
+      onFocus(event);
+    };
+
+    const onBlurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      onBlur(event);
+    };
 
     const clearInput = () => {
       if (onClear) {
@@ -101,7 +105,7 @@ export const FieldText = forwardRef<FocusableInputHandle, FieldTextProps>(
         <div
           className={cx('field', className, {
             error,
-            touched: touched,
+            touched,
             disabled,
             'default-width': defaultWidth,
             collapsed: collapsible && !focused && !value,
@@ -114,22 +118,25 @@ export const FieldText = forwardRef<FocusableInputHandle, FieldTextProps>(
             startIcon && (
               <span
                 className={cx('icon-container-start')}
-                onClick={() => internalRef.current?.focus()}
+                onClick={() => {
+                  const input = inputRef as MutableRefObject<HTMLInputElement>;
+                  input.current?.focus();
+                }}
               >
                 <span className={cx('icon')}>{startIcon}</span>
               </span>
             )
           )}
           <span className={cx('input-container')}>
             <input
-              ref={internalRef}
+              ref={inputRef}
               type={type}
               className={cx('input')}
               value={value}
               disabled={disabled}
               onChange={onChange}
-              onFocus={onFocus}
-              onBlur={onBlur}
+              onFocus={onFocusHandler}
+              onBlur={onBlurHandler}
               {...rest}
             />
             {placeholder && !value && (

src/components/index.ts

@@ -8,6 +8,7 @@ export { Dropdown } from './dropdown';
 export { Toggle } from './toggle';
 export { FieldNumber } from './fieldNumber';
 export { BubblesLoader } from './bubblesLoader';
+export { SpinLoader } from './spinLoader';
 export { FieldTextFlex } from './fieldTextFlex';
 export { Radio } from './radio';
 export { Tooltip } from './tooltip';

src/components/spinLoader/spinLoader.module.scss

@@ -14,23 +14,15 @@
   border-radius: 50%;
   flex-shrink: 0;
   position: relative;
+  mask: radial-gradient(circle, transparent 55%, var(--rp-ui-color-primary) 0%);
 
   &.color-topaz {
-    background: conic-gradient(#0000 0%, var(--rp-ui-base-topaz));
+    background: conic-gradient(#0000 0%, var(--rp-ui-color-primary));
   }
 
   animation: spin 1s infinite linear;
 }
 
-.spinner::before {
-  content: "";
-  flex-shrink: 0;
-  height: 80%;
-  width: 80%;
-  background: #fff;
-  border-radius: 50%;
-}
-
 
 @keyframes spin {
   to {

src/components/spinLoader/spinLoader.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SpinLoader } from './spinLoader';
+
+const meta: Meta<typeof SpinLoader> = {
+  title: 'Spinner Loader',
+  component: SpinLoader,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SpinLoader>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/spinLoader/spinLoader.tsx

@@ -4,16 +4,13 @@ import styles from './spinLoader.module.scss';
 
 const cx = classNames.bind(styles);
 
-interface SpinLoaderLoaderProps {
+interface SpinLoaderProps {
   color?: string;
   className?: string;
 }
 
-export const SpinLoader: FC<SpinLoaderLoaderProps> = ({
-  color = 'topaz',
-  className,
-}): ReactElement => (
-  <div className={cx('spin-loader', className, { [`color-${color}`]: color })}>
-    <div className={cx('spinner')} />
+export const SpinLoader: FC<SpinLoaderProps> = ({ color = 'topaz', className }): ReactElement => (
+  <div className={cx('spin-loader', className)}>
+    <div className={cx('spinner', { [`color-${color}`]: color })} />
   </div>
 );