@tactics/toddle-styleguide 1.2.8 → 1.2.9

package/src/components/molecules/language-button/language-button.component.d.ts

@@ -1,11 +1,7 @@
 type LanguageButtonProps = {
-  label: string;
-  onPress?: () => void;
-  textColor?: string;
+    label: string;
+    onPress?: () => void;
+    textColor?: string;
 };
-export declare const LanguageButton: ({
-  label,
-  onPress,
-  textColor,
-}: LanguageButtonProps) => JSX.Element;
+export declare const LanguageButton: ({ label, onPress, textColor, }: LanguageButtonProps) => JSX.Element;
 export {};

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

@@ -1,13 +1,9 @@
-import {TextInputProps} from 'react-native';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import { TextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 interface MessageInputProps extends TextInputProps {
-  keyboardType?: KeyBoardTypes;
-  onPressSend: () => void;
-  addAttachment: () => void;
+    keyboardType?: KeyBoardTypes;
+    onPressSend: () => void;
+    addAttachment: () => void;
 }
-declare const MessageInput: ({
-  keyboardType,
-  onPressSend,
-  ...props
-}: MessageInputProps) => JSX.Element;
-export {MessageInput};
+declare const MessageInput: ({ keyboardType, onPressSend, ...props }: MessageInputProps) => JSX.Element;
+export { MessageInput };

package/src/components/molecules/more-info-button/more-info-button.component.d.ts

@@ -1,11 +1,7 @@
 type MoreInfoButtonProps = {
-  label: string;
-  onPress?: () => void;
-  textColor?: string;
+    label: string;
+    onPress?: () => void;
+    textColor?: string;
 };
-export declare const MoreInfoButton: ({
-  label,
-  onPress,
-  textColor,
-}: MoreInfoButtonProps) => JSX.Element;
+export declare const MoreInfoButton: ({ label, onPress, textColor, }: MoreInfoButtonProps) => JSX.Element;
 export {};

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

@@ -1,11 +1,7 @@
-import {TextInputProps} from 'react-native';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-interface PasswordInputProps
-  extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
-  keyboardType?: KeyBoardTypes;
+import { TextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+interface PasswordInputProps extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
+    keyboardType?: KeyBoardTypes;
 }
-export declare const PasswordInput: ({
-  keyboardType,
-  ...props
-}: PasswordInputProps) => JSX.Element;
+export declare const PasswordInput: ({ keyboardType, ...props }: PasswordInputProps) => JSX.Element;
 export {};

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,28 +1,29 @@
 export function Stylesheet(Context: any): {
-  container: {
-    width: string;
-    flexDirection: 'row';
-    backgroundColor: any;
-    borderRadius: number;
-    alignItems: 'center';
-  };
-  textInputContainer: {
-    flex: number;
-  };
-  textInput: {
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-  };
-  iconContainer: {
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-  };
+    container: {
+        width: string;
+        height: number;
+        flexDirection: "row";
+        backgroundColor: any;
+        borderRadius: number;
+        alignItems: "center";
+    };
+    textInput: {
+        lineHeight: number;
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        flex: number;
+        height: string;
+        paddingLeft: number;
+        justifyContent: "center";
+    };
+    iconContainer: {
+        height: string;
+        alignItems: "center";
+        justifyContent: "center";
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: 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/pill/pill.component.d.ts

@@ -1,7 +1,7 @@
-import {VisualState} from '../../../types/visual-state.enum';
+import { VisualState } from '../../../types/visual-state.enum';
 type PillProps = {
-  visualState: VisualState;
-  label: string;
+    visualState: VisualState;
+    label: string;
 };
-declare const Pill: ({visualState, label}: PillProps) => JSX.Element;
-export {Pill as Pill};
+declare const Pill: ({ visualState, label }: PillProps) => JSX.Element;
+export { Pill as Pill };

package/src/components/molecules/pressable-icon/pressable-icon.component.d.ts

@@ -1,14 +1,9 @@
 import * as React from 'react';
 type PressableIconProps = {
-  icon: React.ReactElement;
-  inverted?: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
+    icon: React.ReactElement;
+    inverted?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
 };
-export declare const PressableIcon: ({
-  icon,
-  inverted,
-  disabled,
-  onPress,
-}: PressableIconProps) => JSX.Element;
+export declare const PressableIcon: ({ icon, inverted, disabled, onPress, }: PressableIconProps) => JSX.Element;
 export {};

package/src/components/molecules/quick-filter/quick-filter.component.d.ts

@@ -1,18 +1,11 @@
-import {VisualState} from '../../../types/visual-state.enum';
+import { VisualState } from '../../../types/visual-state.enum';
 type QuickFilterProps = {
-  id: string;
-  isLoading: boolean;
-  amount: number;
-  isSelected?: boolean;
-  onSelect: (id: string) => void;
-  visualState: VisualState;
+    id: string;
+    isLoading: boolean;
+    amount: number;
+    isSelected?: boolean;
+    onSelect: (id: string) => void;
+    visualState: VisualState;
 };
-declare const QuickFilter: ({
-  id,
-  isLoading,
-  amount,
-  isSelected,
-  onSelect,
-  visualState,
-}: QuickFilterProps) => JSX.Element;
-export {QuickFilter as QuickFilter};
+declare const QuickFilter: ({ id, isLoading, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => JSX.Element;
+export { QuickFilter as QuickFilter };

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

@@ -12,10 +12,6 @@ exports[`test search shows search field 1`] = `
       "borderWidth": 1,
       "flexDirection": "row",
       "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 8,
       "width": "100%",
     }
   }
@@ -24,6 +20,10 @@ exports[`test search shows search field 1`] = `
     style={
       {
         "flex": 1,
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 48,
+        "paddingTop": 8,
       }
     }
   >
@@ -34,6 +34,8 @@ exports[`test search shows search field 1`] = `
       placeholderTextColor="#9AA5B1"
       style={
         {
+          "borderColor": "blue",
+          "borderWidth": 1,
           "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
@@ -74,17 +76,25 @@ exports[`test search shows search field 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
+        "alignItems": "center",
+        "borderColor": "red",
+        "borderWidth": 1,
+        "justifyContent": "center",
         "marginLeft": 16,
+        "minHeight": 42,
+        "minWidth": 42,
+        "position": "absolute",
+        "right": 0,
       }
     }
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
-      height={24}
+      height={20}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -96,14 +106,14 @@ exports[`test search shows search field 1`] = `
           },
           {
             "flex": 0,
-            "height": 24,
-            "width": 24,
+            "height": 20,
+            "width": 20,
           },
         ]
       }
-      vbHeight={23}
-      vbWidth={23}
-      width={24}
+      vbHeight={17}
+      vbWidth={17}
+      width={20}
     >
       <RNSVGGroup
         fill={null}
@@ -114,7 +124,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,9 @@
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-type SearchProps = {
-  placeholder?: string;
-  onchangeText?: (text: string) => void;
-  value: string;
-  keyboardType: KeyBoardTypes;
-  onPressSearch: (text: string) => void;
-};
-declare const Search: ({
-  placeholder,
-  onchangeText,
-  value,
-  keyboardType,
-  onPressSearch,
-}: SearchProps) => JSX.Element;
-export {Search as Search};
+import { TextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+interface SearchProps extends TextInputProps {
+    keyboardType?: KeyBoardTypes;
+    onPressClear: () => void;
+    showClearIcon: boolean;
+}
+declare const Search: ({ keyboardType, 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.d.ts

@@ -1 +1 @@
-export declare const SearchPreview: ({}: {}) => JSX.Element;
+export declare const SearchPreview: ({}?: {}) => JSX.Element;

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,32 +1,33 @@
 export function Stylesheet(context: any): {
-  container: {
-    width: string;
-    flexDirection: 'row';
-    borderStyle: 'solid';
-    borderWidth: number;
-    borderColor: any;
-    borderRadius: number;
-    backgroundColor: any;
-    overflow: 'hidden';
-    alignItems: 'center';
-  };
-  textInputContainer: {
-    flex: number;
-  };
-  input: {
-    lineHeight: number;
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingBottom: number;
-    paddingRight: number;
-  };
-  iconContainer: {
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-  };
+    container: {
+        width: string;
+        height: number;
+        flexDirection: "row";
+        borderStyle: "solid";
+        borderWidth: number;
+        borderColor: any;
+        borderRadius: number;
+        backgroundColor: any;
+        overflow: "hidden";
+        alignItems: "center";
+        paddingRight: number;
+    };
+    inputContainer: {
+        lineHeight: number;
+        color: any;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingBottom: number;
+        fontFamily: string;
+        fontSize: number;
+        flex: number;
+        justifyContent: "center";
+        height: string;
+    };
+    iconContainer: {
+        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();

package/src/components/molecules/select-link/select-link.component.d.ts

@@ -1,6 +1,6 @@
 type SelectLinkProps = {
-  label: string;
-  onPress: () => void;
+    label: string;
+    onPress: () => void;
 };
-declare const SelectLink: ({label, onPress}: SelectLinkProps) => JSX.Element;
-export {SelectLink as SelectLink};
+declare const SelectLink: ({ label, onPress }: SelectLinkProps) => JSX.Element;
+export { SelectLink as SelectLink };

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,16 +1,10 @@
 import * as React from 'react';
 type SelectListProps = {
-  title: string;
-  subtitle?: string;
-  icon: React.ReactElement;
-  onPress?: () => void;
-  inverse?: boolean;
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
 };
-declare const SelectListItem: ({
-  title,
-  subtitle,
-  icon,
-  onPress,
-  inverse,
-}: SelectListProps) => JSX.Element;
-export {SelectListItem as SelectListItem};
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, }: SelectListProps) => JSX.Element;
+export { SelectListItem as SelectListItem };

package/src/components/molecules/select-picker/select-picker.component.d.ts

@@ -1,16 +1,11 @@
 type PickerProps = {
-  placeholder?: string;
-  data: {
-    value: number | string;
-    label: string;
-  }[];
-  onChange: (item: string) => void;
-  defaultValue: string;
+    placeholder?: string;
+    data: {
+        value: number | string;
+        label: string;
+    }[];
+    onChange: (item: string) => void;
+    defaultValue: string;
 };
-export declare const SelectPicker: ({
-  placeholder,
-  data,
-  onChange,
-  defaultValue,
-}: PickerProps) => JSX.Element;
+export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => JSX.Element;
 export {};