@tactics/toddle-styleguide 1.2.8 → 1.3.0

package/src/components/molecules/password-input/__snapshots__/password-input.test.js.snap

@@ -13,33 +13,25 @@ exports[`Visual test for the password input field shows a password input field w
     }
   }
 >
-  <View
+  <TextInput
+    keyboardType="default"
+    onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
+    secureTextEntry={true}
     style={
       {
+        "color": "#1F2933",
         "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "height": "100%",
+        "justifyContent": "center",
+        "lineHeight": 20,
+        "paddingLeft": 16,
       }
     }
-  >
-    <TextInput
-      keyboardType="default"
-      onChangeText={[Function]}
-      placeholderTextColor="#9AA5B1"
-      secureTextEntry={true}
-      style={
-        {
-          "color": "#1F2933",
-          "fontFamily": "SourceSansPro",
-          "fontSize": 16,
-          "lineHeight": 20,
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
-        }
-      }
-      value="text"
-    />
-  </View>
+    value="text"
+  />
   <View
     accessibilityState={
       {
@@ -72,6 +64,9 @@ exports[`Visual test for the password input field shows a password input field w
     onStartShouldSetResponder={[Function]}
     style={
       {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -173,34 +168,26 @@ exports[`Visual test for the password input field shows a password input field w
     }
   }
 >
-  <View
+  <TextInput
+    keyboardType="default"
+    onChangeText={[Function]}
+    placeholder="password"
+    placeholderTextColor="#9AA5B1"
+    secureTextEntry={true}
     style={
       {
+        "color": "#1F2933",
         "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "height": "100%",
+        "justifyContent": "center",
+        "lineHeight": 20,
+        "paddingLeft": 16,
       }
     }
-  >
-    <TextInput
-      keyboardType="default"
-      onChangeText={[Function]}
-      placeholder="password"
-      placeholderTextColor="#9AA5B1"
-      secureTextEntry={true}
-      style={
-        {
-          "color": "#1F2933",
-          "fontFamily": "SourceSansPro",
-          "fontSize": 16,
-          "lineHeight": 20,
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
-        }
-      }
-      value="text"
-    />
-  </View>
+    value="text"
+  />
   <View
     accessibilityState={
       {
@@ -233,6 +220,9 @@ exports[`Visual test for the password input field shows a password input field w
     onStartShouldSetResponder={[Function]}
     style={
       {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -334,34 +324,26 @@ exports[`Visual test for the password input field shows a password input field w
     }
   }
 >
-  <View
+  <TextInput
+    keyboardType="number-pad"
+    onChangeText={[Function]}
+    placeholder="number password"
+    placeholderTextColor="#9AA5B1"
+    secureTextEntry={true}
     style={
       {
+        "color": "#1F2933",
         "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "height": "100%",
+        "justifyContent": "center",
+        "lineHeight": 20,
+        "paddingLeft": 16,
       }
     }
-  >
-    <TextInput
-      keyboardType="number-pad"
-      onChangeText={[Function]}
-      placeholder="number password"
-      placeholderTextColor="#9AA5B1"
-      secureTextEntry={true}
-      style={
-        {
-          "color": "#1F2933",
-          "fontFamily": "SourceSansPro",
-          "fontSize": 16,
-          "lineHeight": 20,
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
-        }
-      }
-      value="text"
-    />
-  </View>
+    value="text"
+  />
   <View
     accessibilityState={
       {
@@ -394,6 +376,9 @@ exports[`Visual test for the password input field shows a password input field w
     onStartShouldSetResponder={[Function]}
     style={
       {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,

package/src/components/molecules/password-input/password-input.component.tsx

@@ -24,15 +24,13 @@ export const PasswordInput = ({keyboardType, ...props}: PasswordInputProps) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.textInputContainer}>
-        <RNTextInput
-          style={styles.textInput}
-          placeholderTextColor={Context.colors.ui.grey}
-          secureTextEntry={secure}
-          keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
-          {...props}
-        />
-      </View>
+      <RNTextInput
+        style={styles.textInput}
+        placeholderTextColor={Context.colors.ui.grey}
+        secureTextEntry={secure}
+        keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
+        {...props}
+      />
       <Pressable
         style={styles.iconContainer}
         onPress={() => setSecure(!secure)}

package/src/components/molecules/password-input/password-input.styles.d.ts

@@ -1,25 +1,26 @@
 export function Stylesheet(Context: any): {
   container: {
     width: string;
+    height: number;
     flexDirection: 'row';
     backgroundColor: any;
     borderRadius: number;
     alignItems: 'center';
   };
-  textInputContainer: {
-    flex: number;
-  };
   textInput: {
+    lineHeight: number;
     color: any;
     fontFamily: string;
     fontSize: number;
-    lineHeight: number;
+    flex: number;
+    height: string;
     paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
+    justifyContent: 'center';
   };
   iconContainer: {
+    height: string;
+    alignItems: 'center';
+    justifyContent: 'center';
     paddingLeft: number;
     paddingTop: number;
     paddingRight: number;

package/src/components/molecules/password-input/password-input.styles.js

@@ -12,19 +12,19 @@ export const Stylesheet = (Context) =>
       borderRadius: Scale.xs,
       alignItems: 'center',
     },
-    textInputContainer: {
-      flex: 1,
-    },
     textInput: {
+      flex: 1,
+      height: '100%',
       paddingLeft: Scale.m,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: Scale.m,
+      justifyContent: 'center',
       ...Font.medium,
       lineHeight: 20,
       color: Context.colors.ui.black,
     },
     iconContainer: {
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
       paddingLeft: Scale.m,
       paddingTop: Scale.xs,
       paddingRight: Scale.m,

package/src/components/molecules/search-input/__snapshots__/search.test.js.snap

@@ -11,37 +11,33 @@ exports[`test search shows search field 1`] = `
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
+      "height": 44,
       "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingRight": 4,
       "width": "100%",
     }
   }
 >
-  <View
+  <TextInput
+    keyboardType="default"
+    onChangeText={[Function]}
+    placeholder="placeholder search field"
+    placeholderTextColor="#9AA5B1"
     style={
       {
+        "color": "#1F2933",
         "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "height": "100%",
+        "justifyContent": "center",
+        "lineHeight": 20,
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingTop": 8,
       }
     }
-  >
-    <TextInput
-      keyboardType="default"
-      onChangeText={[Function]}
-      placeholder="placeholder search field"
-      placeholderTextColor="#9AA5B1"
-      style={
-        {
-          "color": "#1F2933",
-          "fontFamily": "SourceSansPro",
-          "fontSize": 16,
-          "lineHeight": 20,
-        }
-      }
-    />
-  </View>
+  />
   <View
     accessibilityState={
       {
@@ -74,17 +70,20 @@ exports[`test search shows search field 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "marginLeft": 16,
+        "alignItems": "center",
+        "justifyContent": "center",
+        "minHeight": 42,
+        "minWidth": 42,
       }
     }
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
+      bbHeight="18"
+      bbWidth="18"
       fill="none"
       focusable={false}
-      height={24}
+      height={18}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -96,14 +95,14 @@ exports[`test search shows search field 1`] = `
           },
           {
             "flex": 0,
-            "height": 24,
-            "width": 24,
+            "height": 18,
+            "width": 18,
           },
         ]
       }
-      vbHeight={23}
-      vbWidth={23}
-      width={24}
+      vbHeight={17}
+      vbWidth={17}
+      width={18}
     >
       <RNSVGGroup
         fill={null}
@@ -114,7 +113,7 @@ exports[`test search shows search field 1`] = `
         }
       >
         <RNSVGPath
-          d="M21.625 21.625L14.875 14.875M17.125 9.25C17.125 13.5992 13.5992 17.125 9.25 17.125C4.90076 17.125 1.375 13.5992 1.375 9.25C1.375 4.90076 4.90076 1.375 9.25 1.375C13.5992 1.375 17.125 4.90076 17.125 9.25Z"
+          d="M1.75 15.25L15.25 1.75M1.75 1.75L15.25 15.25"
           propList={
             [
               "stroke",

package/src/components/molecules/search-input/search.component.d.ts

@@ -1,16 +1,14 @@
+import {TextInputProps} from 'react-native';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-type SearchProps = {
-  placeholder?: string;
-  onchangeText?: (text: string) => void;
-  value: string;
-  keyboardType: KeyBoardTypes;
-  onPressSearch: (text: string) => void;
-};
+interface SearchProps extends TextInputProps {
+  keyboardType?: KeyBoardTypes;
+  onPressClear: () => void;
+  showClearIcon: boolean;
+}
 declare const Search: ({
-  placeholder,
-  onchangeText,
-  value,
   keyboardType,
-  onPressSearch,
+  onPressClear,
+  showClearIcon,
+  ...props
 }: SearchProps) => JSX.Element;
 export {Search as Search};

package/src/components/molecules/search-input/search.component.tsx

@@ -5,54 +5,43 @@ import {
   View,
   TextInput as NativeTextInput,
   Pressable,
-  Keyboard,
+  TextInputProps,
 } from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './search.styles';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 import {Icon} from '../../../icons/index';
+import {Scale} from '../../../theme/scale/index';
 
-type SearchProps = {
-  placeholder?: string;
-  onchangeText?: (text: string) => void;
-  value: string;
-  keyboardType: KeyBoardTypes;
-  onPressSearch: (text: string) => void;
-};
+interface SearchProps extends TextInputProps {
+  keyboardType?: KeyBoardTypes;
+  onPressClear: () => void;
+  showClearIcon: boolean;
+}
 
 const Search = ({
-  placeholder,
-  onchangeText,
-  value,
   keyboardType,
-  onPressSearch,
+  onPressClear,
+  showClearIcon,
+  ...props
 }: SearchProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   return (
     <View style={styles.container}>
-      <View style={styles.textInputContainer}>
-        <NativeTextInput
-          placeholder={placeholder}
-          placeholderTextColor={context.colors.ui.grey}
-          style={styles.input}
-          onChangeText={onchangeText}
-          keyboardType={keyboardType}
-          value={value}
-        />
-      </View>
-      <Pressable
-        onPress={() => {
-          onPressSearch(value);
-          Keyboard.dismiss();
-        }}
-        style={styles.iconContainer}
-      >
+      <NativeTextInput
+        placeholderTextColor={context.colors.ui.grey}
+        style={styles.inputContainer}
+        keyboardType={keyboardType}
+        {...props}
+      />
+      <Pressable onPress={onPressClear} style={styles.iconContainer}>
         <Icon
           style={'regular'}
-          name={'search'}
+          name={!showClearIcon ? 'search' : 'xmark'}
           color={context.colors.ui.black}
+          size={showClearIcon ? Scale.m * 1.125 : undefined}
         />
       </Pressable>
     </View>

package/src/components/molecules/search-input/search.preview.tsx

@@ -1,23 +1,25 @@
 import React, {useState} from 'react';
 import {Search} from './search.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {SafeAreaView} from 'react-native';
+import {Keyboard, SafeAreaView} from 'react-native';
 
 export const SearchPreview = ({} = {}) => {
   const [input, setInput] = useState('');
 
-  const searchHandler = (text: string) => {
-    console.log('Search for: ' + text);
+  const clearHandler = () => {
+    setInput('');
+    Keyboard.dismiss;
   };
 
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{paddingHorizontal: 16}}>
       <Search
         placeholder={'Search field placeholder'}
-        onchangeText={(text: string) => setInput(text)}
+        onChangeText={(text: string) => setInput(text)}
         value={input}
         keyboardType={KeyBoardTypes.DEFAULT}
-        onPressSearch={searchHandler}
+        onPressClear={clearHandler}
+        showClearIcon={input.length > 0}
       />
     </SafeAreaView>
   );

package/src/components/molecules/search-input/search.styles.d.ts

@@ -1,6 +1,7 @@
 export function Stylesheet(context: any): {
   container: {
     width: string;
+    height: number;
     flexDirection: 'row';
     borderStyle: 'solid';
     borderWidth: number;
@@ -9,24 +10,24 @@ export function Stylesheet(context: any): {
     backgroundColor: any;
     overflow: 'hidden';
     alignItems: 'center';
+    paddingRight: number;
   };
-  textInputContainer: {
-    flex: number;
-  };
-  input: {
+  inputContainer: {
     lineHeight: number;
     color: any;
-    fontFamily: string;
-    fontSize: number;
     paddingLeft: number;
     paddingTop: number;
     paddingBottom: number;
-    paddingRight: number;
+    fontFamily: string;
+    fontSize: number;
+    flex: number;
+    justifyContent: 'center';
+    height: string;
   };
   iconContainer: {
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
   };
 };

package/src/components/molecules/search-input/search.styles.js

@@ -8,6 +8,7 @@ export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
       width: '100%',
+      height: Scale.m * 2.75,
       flexDirection: 'row',
       borderStyle: 'solid',
       borderWidth: 1,
@@ -16,20 +17,25 @@ export const Stylesheet = (context) =>
       backgroundColor: context.colors.ui.white,
       overflow: 'hidden',
       alignItems: 'center',
-      paddingLeft: Scale.m,
-      paddingTop: Scale.xs,
-      paddingRight: Scale.m,
-      paddingBottom: Scale.xs,
+      paddingRight: Scale.xxs,
     },
-    textInputContainer: {
+    inputContainer: {
       flex: 1,
-    },
-    input: {
+      justifyContent: 'center',
+      height: '100%',
       ...Font.medium,
       lineHeight: 20,
       color: context.colors.ui.black,
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
     },
     iconContainer: {
-      marginLeft: Scale.m,
+      minWidth: 42,
+      minHeight: 42,
+      justifyContent: 'center',
+      alignItems: 'center',
+      // position: 'absolute',
+      // right: Scale.xs,
     },
   });

package/src/components/molecules/search-input/search.test.js

@@ -10,7 +10,9 @@ describe('test search', () => {
         <Search
           keyboardType={KeyBoardTypes.DEFAULT}
           placeholder="placeholder search field"
-          onchangeText={() => console.log('text is changed')}
+          onChangeText={() => console.log('text is changed')}
+          onPressClear={() => console.log('clear input')}
+          showClearIcon={true}
         />
       )
       .toJSON();