Added color and leftover changes in Text input component (#1701)

* added color and leftover changes * Update TextInput.constants.tsx
push-protocol · Jul 8, 2024 · 7c83c07 · 7c83c07
1 parent bc7d660
commit 7c83c07
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 48 deletions.
diff --git a/src/blocks/Blocks.colors.ts b/src/blocks/Blocks.colors.ts
@@ -35,6 +35,17 @@ const brandColors = {
   'RED-800': '#A40A0A',
   'RED-900': '#670000',
   'RED-1000': '#400000',
+
+  'GREEN-100': '#D8F7F0',
+  'GREEN-200': '#AFEFE1',
+  'GREEN-300': '#51DCBD',
+  'GREEN-400': '#00C296',
+  'GREEN-500': '#00A47F',
+  'GREEN-600': '#008769',
+  'GREEN-700': '#006B53',
+  'GREEN-800': '#A40A0A',
+  'GREEN-900': '#00382B',
+  'GREEN-1000': '#002019',
 };
 
 export const blocksColorsLegacy = {

diff --git a/src/blocks/icons/components/Asterisk.tsx b/src/blocks/icons/components/Asterisk.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Asterisk: FC<IconProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IconWrapper
+      componentName="Asterisk"
+      icon={
+        <svg
+          width="inherit"
+          height="inherit"
+          viewBox="0 0 5 5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          {...props}
+        >
+          <path
+            d="M0.687978 4.28802L0.795978 4.14402L1.43198 3.32202L1.83998 2.84202C1.82798 2.81802 1.82198 2.79402 1.81598 2.76402L1.20998 2.62002L0.207978 2.33802L0.039978 2.28402L0.327978 1.40202L0.495978 1.45602L1.47398 1.81002L2.04398 2.04402C2.06798 2.02602 2.09198 2.00802 2.11598 1.99002L2.07398 1.39002L2.03798 0.346015V0.166016H2.96198V0.346015L2.92598 1.39002L2.87798 1.99002C2.90198 2.00802 2.92598 2.02602 2.94998 2.04402L3.51998 1.81002L4.50398 1.45602L4.67198 1.40202L4.95998 2.28402L4.78598 2.33802L3.78398 2.62002L3.17798 2.76402C3.17198 2.79402 3.16598 2.81802 3.15398 2.84202L3.56198 3.32202L4.20398 4.14402L4.30598 4.28802L3.55598 4.83402L3.45398 4.68402L2.87198 3.82002L2.54798 3.29202C2.52998 3.29202 2.51198 3.29202 2.49998 3.29202C2.48198 3.29202 2.46398 3.29202 2.44598 3.29202L2.12198 3.82002L1.53998 4.68402L1.43798 4.83402L0.687978 4.28802Z"
+            fill="currentColor"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default Asterisk;
diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts
@@ -5,6 +5,8 @@ export { default as Add } from './components/Add';
 
 export { default as AddEmoji } from './components/AddEmoji';
 
+export { default as Asterisk } from './components/Asterisk';
+
 export { default as Back } from './components/Back';
 
 export { default as BellRingFilled } from './components/BellRingFilled';

diff --git a/src/blocks/textInput/TextInput.constants.tsx b/src/blocks/textInput/TextInput.constants.tsx
@@ -1,26 +1,43 @@
 import { TextInputStyles } from './TextInput.types';
 
-//optimisation needed for this part
-export const backgroundColor: TextInputStyles = {
-  error: { light: 'red-100', dark: 'red-100' },
+const backgroundColor: TextInputStyles = {
+  error: { light: 'red-100', dark: 'gray-800' },
+  success: { light: 'green-100', dark: 'gray-800' },
   disabled: { light: 'gray-200', dark: 'gray-800' },
   default: { light: 'white', dark: 'gray-800' },
 };
 
-export const borderColor: TextInputStyles = {
-  error: { light: 'red-400', dark: 'red-400' },
+const borderColor: TextInputStyles = {
+  error: { light: 'red-400', dark: 'red-500' },
+  success: { light: 'green-500', dark: 'green-400' },
   disabled: { light: 'gray-300', dark: 'gray-900' },
   default: { light: 'gray-200', dark: 'gray-800' },
 };
 
-export const textColor: TextInputStyles = {
-  error: { light: 'red-700', dark: 'red-700' },
+const textColor: TextInputStyles = {
+  error: { light: 'gray-1000', dark: 'gray-100' },
+  success: { light: 'gray-1000', dark: 'gray-100' },
   disabled: { light: 'gray-400', dark: 'gray-700' },
   default: { light: 'gray-1000', dark: 'gray-100' },
 };
 
-export const placeholderColor: TextInputStyles = {
-  error: { light: 'red-600', dark: 'red-600' },
+const descriptionColor: TextInputStyles = {
+  error: { light: 'gray-1000', dark: 'gray-100' },
+  success: { light: 'gray-1000', dark: 'gray-100' },
+  disabled: { light: 'gray-400', dark: 'gray-600' },
+  default: { light: 'gray-400', dark: 'gray-600' },
+};
+const iconColor: TextInputStyles = {
+  error: { light: 'red-700', dark: 'red-500' },
+  success: { light: 'green-600', dark: 'green-400' },
   disabled: { light: 'gray-400', dark: 'gray-700' },
-  default: { light: 'gray-400', dark: 'gray-500' },
+  default: { light: 'gray-300', dark: 'gray-600' },
+};
+
+export const textInputColor = {
+  backgroundColor: backgroundColor,
+  borderColor: borderColor,
+  textColor: textColor,
+  iconColor: iconColor,
+  descriptionColor: descriptionColor,
 };
diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx
@@ -6,7 +6,7 @@ import { ModeProp } from '../Blocks.types';
 
 import { getTextInputState, getTextInputStateStyles } from './TextInput.utils';
 import { useBlocksTheme } from 'blocks/Blocks.hooks';
-import { CrossFilled } from 'blocks/icons';
+import { Asterisk, CrossFilled } from 'blocks/icons';
 import { Text } from 'blocks/text';
 
 export type TextInputProps = {
@@ -53,7 +53,10 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
     justify-content: space-between;
     align-items: center;
   }
-
+  .label {
+    display: flex;
+    gap: var(--s1);
+  }
   .input-container {
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     display: flex;
@@ -68,22 +71,17 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
     border-radius: var(--r3);
 
     /* Common icon css added through CSS class */
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 2px;
-      span {
-        width: 18px;
-        height: 13.5px;
-      }
+    [role='img'] {
+      width: 18px;
+      height: 18px;
     }
 
     & input {
       flex: 1;
       border: none;
       background-color: transparent;
       padding: var(--s3) var(--s0);
+      margin-left: var(--s1);
       &:focus {
         outline: none;
       }
@@ -96,10 +94,10 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
     }
   }
   /* TextInput type CSS styles */
-  ${({ mode, error, disabled }) =>
+  ${({ mode, error, disabled, success }) =>
     getTextInputStateStyles({
       mode,
-      state: getTextInputState({ error: !!error, disabled: !!disabled }),
+      state: getTextInputState({ error: !!error, disabled: !!disabled, success: !!success }),
     })}
 
   /* Custom CSS applied via styled component css prop */
@@ -132,6 +130,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       <StyledTextInput
         disabled={disabled}
         error={error}
+        success={success}
         required={required}
         role="input"
         mode={mode}
@@ -140,12 +139,35 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       >
         {(label || totalCount) && (
           <div className="label-count">
-            {label && <Text>{label}</Text>}
-            {totalCount && <Text>{totalCount}</Text>}
+            {label && (
+              <div className="label">
+                <Text
+                  variant="h6-semibold"
+                  color={{ light: disabled ? 'gray-400' : 'gray-1000', dark: disabled ? 'gray-700' : 'gray-100' }}
+                >
+                  {label}
+                </Text>
+                {!!required && (
+                  <Asterisk
+                    color={{ light: disabled ? 'gray-400' : 'gray-500', dark: disabled ? 'gray-700' : 'gray-500' }}
+                    size={4.6}
+                  />
+                )}
+              </div>
+            )}
+
+            {totalCount && (
+              <Text
+                variant="c-regular"
+                color={{ light: 'gray-600', dark: 'gray-500' }}
+              >
+                {`${value?.length}/${totalCount}`}
+              </Text>
+            )}
           </div>
         )}
         <div className="input-container">
-          {icon && <span className="icon">{icon}</span>}
+          {icon}
           <input
             type={type}
             disabled={!!disabled}
@@ -154,15 +176,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             onChange={onChange}
             value={value}
           />
-          {/* width is not getting applied */}
-          {onClear && (
-            <CrossFilled
-              width="18px"
-              height="18px"
-              className="clear"
-              onClick={() => onClear?.()}
-            />
-          )}
+          {onClear && <CrossFilled onClick={() => onClear?.()} />}
         </div>
         {description && (
           <Text

diff --git a/src/blocks/textInput/TextInput.types.tsx b/src/blocks/textInput/TextInput.types.tsx
@@ -1,4 +1,4 @@
 import { ThemeModeColors } from 'blocks/Blocks.types';
 
-export type TextInputStates = 'error' | 'disabled' | 'default';
+export type TextInputStates = 'error' | 'disabled' | 'default' | 'success';
 export type TextInputStyles = Record<TextInputStates, ThemeModeColors>;
diff --git a/src/blocks/textInput/TextInput.utils.ts b/src/blocks/textInput/TextInput.utils.ts
@@ -1,14 +1,24 @@
 import { ThemeMode } from 'blocks/Blocks.types';
 import { getBlocksColor } from 'blocks/Blocks.utils';
 
-import { backgroundColor, borderColor, placeholderColor, textColor } from './TextInput.constants';
+import { textInputColor } from './TextInput.constants';
 import { TextInputStates } from './TextInput.types';
 
-export const getTextInputState = ({ error, disabled }: { error: boolean; disabled: boolean }): TextInputStates => {
+export const getTextInputState = ({
+  error,
+  disabled,
+  success,
+}: {
+  error: boolean;
+  disabled: boolean;
+  success: boolean;
+}): TextInputStates => {
   if (error) {
     return 'error';
   } else if (disabled) {
     return 'disabled';
+  } else if (success) {
+    return 'success';
   }
   return 'default';
 };
@@ -20,9 +30,9 @@ export const getTextInputStateStyles = ({ mode, state }: { mode: ThemeMode; stat
   return `
   
   .input-container {
-     background-color:   ${getBlocksColor(mode, backgroundColor[state])};
+     background-color:   ${getBlocksColor(mode, textInputColor.backgroundColor[state])};
  
-     border: 1.5px solid ${getBlocksColor(mode, borderColor[state])};
+     border: 1.5px solid ${getBlocksColor(mode, textInputColor.borderColor[state])};
 
 
      &:hover {
@@ -35,21 +45,21 @@ export const getTextInputStateStyles = ({ mode, state }: { mode: ThemeMode; stat
      &:focus-within {
          border: 1.5px solid ${getBlocksColor(
            mode,
-           state === 'error' ? borderColor.error : { light: 'pink-300', dark: 'pink-300' }
+           state === 'error' ? textInputColor.borderColor.error : { light: 'pink-300', dark: 'pink-300' }
          )};
         };
     
-    .icon,.clear {
-         color: ${getBlocksColor(mode, {
-           light: 'gray-300',
-           dark: 'gray-100',
-         })};
+    [role='img'] {
+         color: ${getBlocksColor(mode, textInputColor.iconColor[state])};
         };
     
     & input{
-         color: ${getBlocksColor(mode, textColor[state])};
+         color: ${getBlocksColor(mode, textInputColor.textColor[state])};
          ::placeholder {
-           color: ${getBlocksColor(mode, placeholderColor[state])};
+           color: ${getBlocksColor(mode, {
+             light: 'gray-400',
+             dark: 'gray-600',
+           })};
 
         };
   }