Merge pull request #109 from BouyguesTelecom/update/input

Update input
BouyguesTelecom · Aug 27, 2024 · 294b036 · 294b036
2 parents 2c9f0c7 + 43ce815
commit 294b036
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 32 deletions.
diff --git a/examples/react-template/screens/Input.tsx b/examples/react-template/screens/Input.tsx
@@ -33,10 +33,22 @@ export const InputScreen = (): JSX.Element => {
   return (
     <Section background={TrilogyColor.BACKGROUND}>
       <Input
-        hovered
-        placeholder={'Input, search icon'}
+        label='Input label not dynamic with sample'
+        sample='Input sample'
         help='Search helper input'
         onKeyUp={(e) => console.log(e)}
+        required
+        hasIcon
+        customIconLeft='tri-search'
+      />
+
+      <Input
+        label='Input label not dynamic without sample'
+        help='Search helper input'
+        onKeyUp={(e) => console.log(e)}
+        required
+        hasIcon
+        customIconLeft='tri-search'
       />
 
       <Input
@@ -53,7 +65,6 @@ export const InputScreen = (): JSX.Element => {
         minLength={10}
         maxLength={12}
         onKeyPress={() => console.log('key')}
-        hovered
         hasIcon
         defaultValue='Input, with placeholder (without padding top)'
         help='Do not display upper padding when there is no placeholder'
@@ -64,7 +75,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, without placeholder, without search'
         help='Do not display upper padding when there is no placeholder'
@@ -75,35 +85,30 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, with placeholder, with search'
         help='this is my help message'
         type={InputType.TEXT}
         onIconClick={() => {
           window.alert('lol')
         }}
-        search
         customIcon={IconName.ALERT}
         placeholder='Placeholder with activated search'
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, with search & customIcon'
         help='CustomIcon takes precedence over the display of the search to avoid displaying 2 icons, one above the other.'
         type={InputType.TEXT}
         onIconClick={() => {
           window.alert('test')
         }}
-        search
         customIcon={IconName.ALERT}
         placeholder='Placeholder with activated search'
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -117,7 +122,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -131,7 +135,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -145,7 +148,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         forceControl
         defaultValue='12'
@@ -166,7 +168,6 @@ export const InputScreen = (): JSX.Element => {
         <Divider />
 
         <Input
-          hovered
           hasIcon
           forceControl
           defaultValue='Input Success'

diff --git a/examples/react-template/screens/Textarea.tsx b/examples/react-template/screens/Textarea.tsx
@@ -9,7 +9,32 @@ import {
 export const TextareaScreen = (): JSX.Element => {
   return (
     <Section>
+      <Textarea
+        label='Textarea label not dynamic with sample'
+        sample='Textarea sample'
+        help='Search helper textarea'
+        onKeyUp={(e) => console.log(e)}
+        required
+        iconName={IconName.CHECK}
+        statusIconName="tri-exclamation-circle"
+        dynamicPlaceholder={false}
+      />
+
+      <Divider />
+
+      <Textarea
+        label='Textarea label not dynamic without sample'
+        help='Search helper textarea'
+        onKeyUp={(e) => console.log(e)}
+        required
+        iconName={IconName.CHECK}
+        dynamicPlaceholder={false}
+      />
+
+      <Divider />
+
       <Textarea disabled placeholder="placeholder" label="Dynamic label" />
+
       <Divider />
 
       <Textarea
@@ -18,6 +43,7 @@ export const TextareaScreen = (): JSX.Element => {
         dynamicPlaceholder={false}
         customHeight={100}
       />
+
       <Divider />
 
       <Textarea

diff --git a/packages/react/components/input/Input.native.tsx b/packages/react/components/input/Input.native.tsx
@@ -16,7 +16,7 @@ import { Alignable } from '@/objects/facets/Alignable'
 import { TrilogyColor, getColorStyle } from '@/objects/facets/Color'
 import { ComponentName } from '@/components/enumsComponentsName'
 import { Icon, IconName, IconSize } from '@/components/icon'
-import { Text } from '@/components/text'
+import { Text, TextLevels } from '@/components/text'
 import {
   InputAutoCapitalize,
   InputKeyboardAppearance,
@@ -29,12 +29,16 @@ import { InputNativeEvents, InputProps } from './InputProps'
 import { AutoCompleteProps } from './autocomplete'
 import AutoComplete from './autocomplete/AutoComplete.native'
 import InputGauge from './gauge/InputGauge.native'
+import { TypographyColor } from '@/objects'
+import { Spacer, SpacerSize } from '../spacer'
 
 export interface InputNativeProps extends InputProps, InputNativeEvents {}
 
 /**
  * Input Native Component
  * @param name {string} Input name
+ * @param label {string} Label for input
+ * @param sample {string} Sample for input (below label)
  * @param disabled {boolean} Disabled input
  * @param onChange {Function} OnChange Input Event
  * @param onFocus {Function} OnFocus Input Event
@@ -64,6 +68,8 @@ export interface InputNativeProps extends InputProps, InputNativeEvents {}
 const Input = ({
   defaultValue,
   name,
+  label,
+  sample,
   onChange,
   onFocus,
   onBlur,
@@ -91,7 +97,6 @@ const Input = ({
   securityGauge,
   validationRules,
   onIconClick,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   required,
   ...others
 }: InputNativeProps): JSX.Element => {
@@ -274,12 +279,12 @@ const Input = ({
     inputIcon: {
       position: 'absolute',
       right: 10,
-      top: !value ? -33 : -38,
+      top: dynamicPlaceholder && !label && value ? -38 : -33,
     },
     inputIconLeft: {
       position: 'absolute',
       left: 10,
-      top: !value ? -33 : -38,
+      top: dynamicPlaceholder && !label && value ? -38 : -33,
     },
     text: {
       zIndex: -1,
@@ -306,6 +311,20 @@ const Input = ({
       accessibilityLabel={inputAccessibilityLabel}
       testID={inputTestId}
     >
+      {!dynamicPlaceholder && label && (
+        <>
+          <Text typo={TypographyColor.TEXT_DISABLED}>{label} {label && required && <Text typo={TypographyColor.TEXT_ERROR}>*</Text>}</Text>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
+
+      {!dynamicPlaceholder && label && sample && (
+        <>
+          <Text level={TextLevels.THREE} typo={TypographyColor.TEXT_DISABLED}>{sample}</Text>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
+
       <View testID='input-wrapper-id' style={styles.inputWrapper}>
         {dynamicPlaceholder && type !== InputType.SEARCH && (
           <Animated.Text style={[styles.dynamicPlaceholder, { top: animation, fontSize: sizeAnimation }]}>

diff --git a/packages/react/components/input/Input.tsx b/packages/react/components/input/Input.tsx
@@ -4,11 +4,12 @@ import { useTrilogyContext } from '@/context'
 import { hashClass } from '@/helpers'
 import { has, is } from '@/services'
 import { Icon, IconColor, IconName, IconNameValues, IconSize } from '../icon'
-import { Text } from '@/components/text'
+import { Text, TextLevels, TextMarkup } from '@/components/text'
 import { InputStatus, InputStatusValues, InputType, InputTypeValues } from './InputEnum'
 import { InputProps, InputWebEvents } from './InputProps'
 import { AutoComplete, AutoCompleteProps, Item } from './autocomplete'
 import InputGauge from './gauge/InputGauge'
+import { TypographyColor } from '@/objects'
 
 export interface InputProp extends InputProps, InputWebEvents {}
 
@@ -23,6 +24,8 @@ interface IconWrapper {
 /**
  * Input Component
  * @param name {string} Input name
+ * @param label {string} Label for input
+ * @param sample {string} Sample for input (below label)
  * @param disabled {boolean} Disabled input
  * @param onChange {Function} OnChange Input Event
  * @param onFocus {Function} onFocus Input Event
@@ -48,7 +51,6 @@ interface IconWrapper {
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param loading {boolean} Loading input
  * @param value {string} Value for Input
- * @param hovered {boolean} Hover mode
  * @param focused {boolean} Fucus mode
  * @param className {string} Additionnal CSS Classes
  * @param onMouseEnter {Function} onMouseEnter Input Event
@@ -68,6 +70,8 @@ interface IconWrapper {
  */
 const Input = ({
   forceControl,
+  label,
+  sample,
   className,
   disabled,
   onChange,
@@ -208,6 +212,8 @@ const Input = ({
 
   return (
     <div className={wrapperClasses} data-has-gauge={securityGauge ? true : undefined}>
+      {!hasPlaceholder && <label className='input-label'>{label} {label && required && <Text markup={TextMarkup.SPAN} typo={TypographyColor.TEXT_ERROR}>*</Text>}</label>}
+      {!hasPlaceholder && label && sample && <Text className='input-sample' level={TextLevels.TWO} typo={TypographyColor.TEXT_DISABLED}>{sample}</Text>}
       <div className={controlClasses}>
         <input
           required={required}

diff --git a/packages/react/components/input/InputProps.ts b/packages/react/components/input/InputProps.ts
@@ -66,7 +66,8 @@ export type KeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'none' | 'def
  */
 export interface InputProps extends Accessibility {
   type?: InputType | InputTypeValues
-  content?: string
+  label?: string
+  sample?: string
   placeholder?: string
   defaultValue?: string
   value?: string
@@ -83,9 +84,7 @@ export interface InputProps extends Accessibility {
   patternValidator?: RegExp
   help?: string | ReactNode
   name?: string
-  search?: boolean
   className?: string
-  hovered?: boolean
   focused?: boolean
   reference?: any | null
   keyboardStyle?: InputKeyboardAppearance | InputKeyboardAppearanceValues

diff --git a/packages/react/components/textarea/Textarea.native.tsx b/packages/react/components/textarea/Textarea.native.tsx
@@ -11,10 +11,16 @@ import { getColorStyle, TrilogyColor } from "@/objects/facets/Color"
 import { AlertState, getAlertStyle } from "@/objects/facets/Alert"
 import { Icon, IconColor } from "@/components/icon"
 import { ComponentName } from "@/components/enumsComponentsName"
+import { TypographyColor } from "@/objects"
+import { Spacer, SpacerSize } from "../spacer"
+import { TextLevels } from "../text/TextEnum"
+import { Text as TrilogyText } from "../text"
 
 /**
  * Textarea Native Component
  * @param name {string} Textarea name
+ * @param label {string} Textarea label
+ * @param sample {string} Textarea sample
  * @param disabled {boolean} Disabled input
  * @param onChange {Function} OnChange Input Event
  * @param placeholder {string} Placeholder Input
@@ -34,6 +40,7 @@ const Textarea = (
   {
     defaultValue,
     name,
+    sample,
     onChange,
     disabled,
     help,
@@ -52,6 +59,7 @@ const Textarea = (
     customHeight = 120,
     value,
     testId,
+    required,
     ...others
   }: TextareaNativeProps,
   // eslint-disable-next-line
@@ -135,22 +143,32 @@ const Textarea = (
     },
     leftIcon: {
       position: "absolute",
-      top: 16,
+      top: dynamicPlaceholder && 16 || !dynamicPlaceholder && label && sample && 60 || 55,
       left: 16,
       zIndex: 10
     },
     rightIcon: {
       position: "absolute",
-      top: dynamicPlaceholder ? 16 : 32,
+      top: dynamicPlaceholder && 16 || !dynamicPlaceholder && label && sample && 60 || 55,
       right: 16,
       zIndex: 10
     },
   })
 
   return (
     <View>
-      {!dynamicPlaceholder && (
-        <Text style={{ color: getColorStyle(TrilogyColor.MAIN) }}>{label}</Text>
+      {!dynamicPlaceholder && label && (
+        <>
+          <TrilogyText typo={TypographyColor.TEXT_DISABLED}>{label} {label && required && <TrilogyText typo={TypographyColor.TEXT_ERROR}>*</TrilogyText>}</TrilogyText>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
+
+      {!dynamicPlaceholder && label && sample && (
+        <>
+          <TrilogyText level={TextLevels.THREE} typo={TypographyColor.TEXT_DISABLED}>{sample}</TrilogyText>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
       )}
 
       {iconName && (