@tactics/toddle-styleguide 0.1.9 → 0.1.10

package/index.d.ts

@@ -39,6 +39,8 @@ import { DateInput } from './src/components/atoms/date-input/date-input.componen
 import { FilterRange } from './src/components/atoms/filter-range/filter-range.component';
 import { Footer } from './src/components/atoms/footer/footer.component';
 import { DefaultSelect } from './src/components/atoms/default-select/default-select.component';
+import { PasswordInput } from './src/components/atoms/password-input/password-input.component';
+import { MessageInput } from './src/components/atoms/message-input/message-input.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -46,4 +48,4 @@ import { VisualState } from './src/types/visual-state.enum';
 import { Initials } from './src/models/initials.model';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, };

package/index.tsx

@@ -47,6 +47,8 @@ import {DateInput} from './src/components/atoms/date-input/date-input.component'
 import {FilterRange} from './src/components/atoms/filter-range/filter-range.component';
 import {Footer} from './src/components/atoms/footer/footer.component';
 import {DefaultSelect} from './src/components/atoms/default-select/default-select.component';
+import {PasswordInput} from './src/components/atoms/password-input/password-input.component';
+import {MessageInput} from './src/components/atoms/message-input/message-input.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -110,4 +112,6 @@ export {
   FilterRange,
   Footer,
   DefaultSelect,
+  PasswordInput,
+  MessageInput,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -2418,7 +2418,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 23 Januari 2023 "
+            accessibilityLabel="today Maandag 23 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2438,6 +2438,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2457,6 +2461,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2487,7 +2494,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 24 Januari 2023 "
+            accessibilityLabel="today Dinsdag 24 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2507,6 +2514,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2526,6 +2537,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5870,7 +5884,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 23 Januari 2023 "
+            accessibilityLabel="today Maandag 23 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5889,6 +5904,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5909,7 +5928,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }
@@ -5941,7 +5960,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 24 Januari 2023 "
+            accessibilityLabel="today Dinsdag 24 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5960,6 +5980,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5980,7 +6004,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/filter-tab/__snapshots__/filter-tab.test.js.snap

@@ -8,8 +8,8 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
       "borderRadius": 16,
       "display": "flex",
       "paddingBottom": 4,
-      "paddingLeft": 4,
-      "paddingRight": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
       "paddingTop": 4,
       "width": "100%",
     }
@@ -65,7 +65,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -115,7 +115,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -161,7 +161,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -194,8 +194,8 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
       "borderRadius": 16,
       "display": "flex",
       "paddingBottom": 4,
-      "paddingLeft": 4,
-      "paddingRight": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
       "paddingTop": 4,
       "width": "100%",
     }
@@ -251,7 +251,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -301,7 +301,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -349,7 +349,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -395,7 +395,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,

package/src/components/atoms/filter-tab/filter-tab.styles.js

@@ -7,8 +7,8 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
     container: {
       width: '100%',
       display: 'flex',
-      paddingRight: Scale.xxs,
-      paddingLeft: Scale.xxs,
+      paddingRight: Scale.xs,
+      paddingLeft: Scale.xs,
       paddingTop: Scale.xxs,
       paddingBottom: Scale.xxs,
       borderRadius: inRow ? 50 : Scale.m,
@@ -55,7 +55,7 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
       ...Font.medium,
       width: '100%',
       textAlign: 'center',
-      color: Context.colors.ui.black,
+      color: Context.colors.main['0'],
       maxHeight: 32,
       overflow: 'hidden',
       whiteSpace: 'nowrap',

package/src/components/atoms/message-input/__snapshots__/message-input.test.js.snap

@@ -11,10 +11,10 @@ exports[`Message Input test render a message text input component with placehold
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -91,9 +91,10 @@ exports[`Message Input test render a message text input component with placehold
     multiline={true}
     onChangeText={[Function]}
     placeholder="Placeholder"
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -186,10 +187,10 @@ exports[`Message Input test render a message text input component with placehold
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -266,9 +267,10 @@ exports[`Message Input test render a message text input component with placehold
     multiline={true}
     onChangeText={[Function]}
     placeholder="Placeholder"
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -361,10 +363,10 @@ exports[`Message Input test render a message text input component without placeh
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -440,9 +442,10 @@ exports[`Message Input test render a message text input component without placeh
     keyboardType="default"
     multiline={true}
     onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -535,10 +538,10 @@ exports[`Message Input test render a message text input component without placeh
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -614,9 +617,10 @@ exports[`Message Input test render a message text input component without placeh
     keyboardType="email-address"
     multiline={true}
     onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,

package/src/components/atoms/message-input/message-input.component.tsx

@@ -23,6 +23,7 @@ const MessageInput = ({
 }: MessageInputProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context);
+
   return (
     <View style={styles.rootContainer}>
       <Pressable onPress={() => console.log('pressed add attachment')}>
@@ -32,6 +33,7 @@ const MessageInput = ({
         style={styles.textInput}
         multiline={true}
         placeholder={placeholder}
+        placeholderTextColor={Context.colors.ui.grey}
         onChangeText={onChangeText}
         value={value}
         keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}

package/src/components/atoms/message-input/message-input.styles.js

@@ -14,15 +14,15 @@ export const Stylesheet = (context) =>
       borderColor: context.colors.ui.lightgrey,
       borderRadius: Scale.xs,
       paddingLeft: Scale.m,
-      paddingTop: Scale.xs,
+      paddingTop: Scale.xs - 1,
       paddingRight: Scale.m,
-      paddingBottom: Scale.xs,
+      paddingBottom: Scale.xs - 1,
     },
     textInput: {
       maxHeight: 100,
       flex: 1,
       ...Font.medium,
-      color: context.colors.ui.grey,
+      color: context.colors.ui.black,
       marginLeft: Scale.m,
       marginRight: Scale.m,
     },

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

@@ -8,6 +8,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -22,10 +23,11 @@ exports[`Visual test for the password input field shows a password input field w
     <TextInput
       keyboardType="default"
       onChangeText={[Function]}
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,
@@ -139,6 +141,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -154,10 +157,11 @@ exports[`Visual test for the password input field shows a password input field w
       keyboardType="default"
       onChangeText={[Function]}
       placeholder="password"
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,
@@ -271,6 +275,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -286,10 +291,11 @@ exports[`Visual test for the password input field shows a password input field w
       keyboardType="number-pad"
       onChangeText={[Function]}
       placeholder="number password"
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,

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

@@ -30,6 +30,7 @@ export const PasswordInput = ({
         <RNTextInput
           style={styles.textInput}
           placeholder={placeholder}
+          placeholderTextColor={Context.colors.ui.grey}
           secureTextEntry={secure}
           value={value}
           onChangeText={onChangeText}

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

@@ -6,6 +6,7 @@ export const Stylesheet = (Context) =>
   StyleSheet.create({
     container: {
       width: '100%',
+      height: 44,
       flexDirection: 'row',
       backgroundColor: Context.colors.ui.white,
       borderRadius: Scale.xs,
@@ -21,7 +22,7 @@ export const Stylesheet = (Context) =>
       paddingRight: Scale.m,
       ...Font.medium,
       lineHeight: 20,
-      color: Context.colors.ui.grey,
+      color: Context.colors.ui.black,
     },
     iconContainer: {
       paddingLeft: Scale.m,

package/src/components/atoms/search/__snapshots__/search.test.js.snap

@@ -4,6 +4,7 @@ exports[`test search shows search field 1`] = `
 <View
   style={
     {
+      "alignItems": "center",
       "backgroundColor": "#FFFFFF",
       "borderColor": "#E5E8EB",
       "borderRadius": 8,
@@ -11,77 +12,110 @@ exports[`test search shows search field 1`] = `
       "borderWidth": 1,
       "flexDirection": "row",
       "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 8,
+      "width": "100%",
     }
   }
 >
-  <TextInput
-    keyboardType="default"
-    onChangeText={[Function]}
-    placeholder="placeholder search field"
+  <View
     style={
       {
         "flex": 1,
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "lineHeight": 22.4,
       }
     }
-  />
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight="28"
-    bbWidth="28"
-    fill="none"
-    focusable={false}
-    height="28"
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
+  >
+    <TextInput
+      keyboardType="default"
+      onChangeText={[Function]}
+      placeholder="placeholder search field"
+      placeholderTextColor="#9AA5B1"
+      style={
         {
-          "flex": 0,
-          "height": 28,
-          "width": 28,
-        },
-      ]
+          "color": "#1F2933",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 20,
+          "paddingBottom": 0,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 0,
+        }
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "paddingBottom": 7,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 7,
+      }
     }
-    vbHeight={27}
-    vbWidth={27}
-    width="28"
   >
-    <RNSVGGroup
-      fill={null}
-      propList={
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
         [
-          "fill",
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
         ]
       }
+      vbHeight={27}
+      vbWidth={27}
+      width="28"
     >
-      <RNSVGPath
-        d="M23.625 23.625L16.875 16.875M19.125 11.25C19.125 15.5992 15.5992 19.125 11.25 19.125C6.90076 19.125 3.375 15.5992 3.375 11.25C3.375 6.90076 6.90076 3.375 11.25 3.375C15.5992 3.375 19.125 6.90076 19.125 11.25Z"
+      <RNSVGGroup
+        fill={null}
         propList={
           [
-            "stroke",
-            "strokeWidth",
-            "strokeLinecap",
-            "strokeLinejoin",
+            "fill",
           ]
         }
-        stroke={4279837036}
-        strokeLinecap={1}
-        strokeLinejoin={1}
-        strokeWidth="2"
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
+      >
+        <RNSVGPath
+          d="M23.625 23.625L16.875 16.875M19.125 11.25C19.125 15.5992 15.5992 19.125 11.25 19.125C6.90076 19.125 3.375 15.5992 3.375 11.25C3.375 6.90076 6.90076 3.375 11.25 3.375C15.5992 3.375 19.125 6.90076 19.125 11.25Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
 </View>
 `;

package/src/components/atoms/search/search.component.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {View, TextInput as NativeTextInput} from 'react-native';
+import {View, TextInput as NativeTextInput, Pressable} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './search.styles';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
@@ -19,13 +19,18 @@ const Search = ({placeholder, onchangeText, keyboardType}: SearchProps) => {
 
   return (
     <View style={styles.container}>
-      <NativeTextInput
-        placeholder={placeholder}
-        style={styles.input}
-        onChangeText={onchangeText}
-        keyboardType={keyboardType}
-      />
-      <SearchIcon />
+      <View style={styles.textInputContainer}>
+        <NativeTextInput
+          placeholder={placeholder}
+          placeholderTextColor={context.colors.ui.grey}
+          style={styles.input}
+          onChangeText={onchangeText}
+          keyboardType={keyboardType}
+        />
+      </View>
+      <Pressable style={styles.iconContainer}>
+        <SearchIcon />
+      </Pressable>
     </View>
   );
 };

package/src/components/atoms/search/search.styles.d.ts

@@ -1,21 +1,32 @@
 export function Stylesheet(context: any): {
   container: {
+    width: string;
     flexDirection: 'row';
-    borderColor: any;
-    borderWidth: number;
     borderStyle: 'solid';
-    backgroundColor: any;
+    borderWidth: number;
+    borderColor: any;
     borderRadius: number;
+    backgroundColor: any;
     overflow: 'hidden';
-    paddingTop: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    paddingRight: number;
+    alignItems: 'center';
+  };
+  textInputContainer: {
+    flex: number;
   };
   input: {
+    lineHeight: number;
+    color: any;
     fontFamily: string;
     fontSize: number;
-    lineHeight: number;
-    flex: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingRight: number;
+  };
+  iconContainer: {
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
   };
 };

package/src/components/atoms/search/search.styles.js

@@ -7,20 +7,32 @@ import {Font} from '../../../theme/font';
 export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
+      width: '100%',
       flexDirection: 'row',
-      borderColor: context.colors.ui.lightgrey,
-      borderWidth: 1,
       borderStyle: 'solid',
-      backgroundColor: context.colors.ui.white,
+      borderWidth: 1,
+      borderColor: context.colors.ui.lightgrey,
       borderRadius: Scale.xs,
+      backgroundColor: context.colors.ui.white,
       overflow: 'hidden',
-      paddingTop: Scale.xs,
-      paddingBottom: Scale.xs,
-      paddingLeft: Scale.m,
-      paddingRight: Scale.m,
+      alignItems: 'center',
     },
-    input: {
+    textInputContainer: {
       flex: 1,
+    },
+    input: {
+      paddingLeft: Scale.m,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingRight: Scale.m,
       ...Font.medium,
+      lineHeight: 20,
+      color: context.colors.ui.black,
+    },
+    iconContainer: {
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs - 1,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.xs - 1,
     },
   });

package/src/components/atoms/text-input/__snapshots__/text-input.test.js.snap

@@ -1,32 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test input texts shows icon when provided 1`] = `
+exports[`test input texts show an input field with a border and placeholder text 1`] = `
 <View
   style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 8,
+    [
+      {
+        "alignItems": "flex-start",
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8,
+        "width": "100%",
+      },
+      {
+        "borderColor": "#E5E8EB",
+        "borderStyle": "solid",
+        "borderWidth": 1,
+      },
+    ]
+  }
+>
+  <TextInput
+    keyboardType="email-address"
+    onChangeText={[Function]}
+    placeholder="Text input field with a border"
+    placeholderTextColor="#9AA5B1"
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 20,
+        "width": "100%",
+      }
     }
+  />
+</View>
+`;
+
+exports[`test input texts show an input field with a border and without placeholder text 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "flex-start",
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8,
+        "width": "100%",
+      },
+      {
+        "borderColor": "#E5E8EB",
+        "borderStyle": "solid",
+        "borderWidth": 1,
+      },
+    ]
   }
 >
   <TextInput
     keyboardType="email-address"
     onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "flex": 1,
+        "color": "#1F2933",
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
-        "lineHeight": 22.4,
+        "lineHeight": 20,
+        "width": "100%",
       }
     }
   />
@@ -36,31 +88,74 @@ exports[`test input texts shows icon when provided 1`] = `
 exports[`test input texts shows placeholder when provided 1`] = `
 <View
   style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 8,
-    }
+    [
+      {
+        "alignItems": "flex-start",
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
   }
 >
   <TextInput
     keyboardType="default"
     onChangeText={[Function]}
     placeholder="dummy placeholder"
+    placeholderTextColor="#9AA5B1"
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 20,
+        "width": "100%",
+      }
+    }
+  />
+</View>
+`;
+
+exports[`test input texts text input field without placeholder text 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "flex-start",
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    keyboardType="email-address"
+    onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "flex": 1,
+        "color": "#1F2933",
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
-        "lineHeight": 22.4,
+        "lineHeight": 20,
+        "width": "100%",
       }
     }
   />

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -3,6 +3,7 @@ declare type TextInputProps = {
     placeholder?: string;
     onchangeText?: (text: string) => void;
     keyboardType: KeyBoardTypes;
+    border?: boolean;
 };
-declare const TextInput: ({ placeholder, onchangeText, keyboardType, }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ placeholder, onchangeText, keyboardType, border, }: TextInputProps) => JSX.Element;
 export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.component.tsx

@@ -10,20 +10,23 @@ type TextInputProps = {
   placeholder?: string;
   onchangeText?: (text: string) => void;
   keyboardType: KeyBoardTypes;
+  border?: boolean;
 };
 
 const TextInput = ({
   placeholder,
   onchangeText,
   keyboardType,
+  border,
 }: TextInputProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet(context, border);
 
   return (
     <View style={styles.container}>
       <NativeTextInput
         placeholder={placeholder}
+        placeholderTextColor={context.colors.ui.grey}
         style={styles.input}
         onChangeText={onchangeText}
         keyboardType={keyboardType}

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -5,7 +5,7 @@ import {SafeAreaView} from 'react-native';
 
 export const TextInputPreview = ({} = {}) => {
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{flex: 1, justifyContent: 'space-around'}}>
       <TextInput
         onchangeText={(text: string) =>
           console.log('text is changed to: ' + text)
@@ -25,6 +25,17 @@ export const TextInputPreview = ({} = {}) => {
         }
         keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
       />
+      <TextInput
+        keyboardType={KeyBoardTypes.DEFAULT}
+        onchangeText={(text: string) => console.log('text: ' + text)}
+        placeholder={'with border'}
+        border={true}
+      />
+      <TextInput
+        keyboardType={KeyBoardTypes.DEFAULT}
+        onchangeText={(text: string) => console.log('text: ' + text)}
+        border={true}
+      />
     </SafeAreaView>
   );
 };

package/src/components/atoms/text-input/text-input.styles.d.ts

@@ -1,21 +1,49 @@
-export function Stylesheet(context: any): {
-  container: {
-    flexDirection: 'row';
-    borderColor: any;
-    borderWidth: number;
-    borderStyle: 'solid';
-    backgroundColor: any;
-    borderRadius: number;
-    overflow: 'hidden';
-    paddingTop: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    paddingRight: number;
-  };
-  input: {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-    flex: number;
-  };
-};
+export function Stylesheet(
+  context: any,
+  border: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            width: string;
+            height: number;
+            borderRadius: number;
+            overflow: string;
+            paddingLeft: number;
+            paddingTop: number;
+            paddingRight: number;
+            paddingBottom: number;
+            backgroundColor: any;
+            justifyContent: string;
+            alignItems: string;
+            borderStyle?: undefined;
+            borderWidth?: undefined;
+            borderColor?: undefined;
+          }
+        | {
+            borderStyle: string;
+            borderWidth: number;
+            borderColor: any;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+            overflow?: undefined;
+            paddingLeft?: undefined;
+            paddingTop?: undefined;
+            paddingRight?: undefined;
+            paddingBottom?: undefined;
+            backgroundColor?: undefined;
+            justifyContent?: undefined;
+            alignItems?: undefined;
+          }
+      )[];
+      input: {
+        lineHeight: number;
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        width: string;
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/text-input/text-input.styles.js

@@ -4,23 +4,32 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 import {Font} from '../../../theme/font';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, border) =>
   StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      borderColor: context.colors.ui.lightgrey,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      backgroundColor: context.colors.ui.white,
-      borderRadius: Scale.xs,
-      overflow: 'hidden',
-      paddingTop: Scale.xs,
-      paddingBottom: Scale.xs,
-      paddingLeft: Scale.m,
-      paddingRight: Scale.m,
-    },
+    container: [
+      {
+        width: '100%',
+        height: 44,
+        borderRadius: Scale.xs,
+        overflow: 'hidden',
+        paddingLeft: Scale.m,
+        paddingTop: Scale.xs,
+        paddingRight: Scale.m,
+        paddingBottom: Scale.xs,
+        backgroundColor: context.colors.ui.white,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+      },
+      border && {
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: context.colors.ui.lightgrey,
+      },
+    ],
     input: {
-      flex: 1,
+      width: '100%',
       ...Font.medium,
+      lineHeight: 20,
+      color: context.colors.ui.black,
     },
   });

package/src/components/atoms/text-input/text-input.test.js

@@ -17,7 +17,7 @@ describe('test input texts', () => {
 
     expect(tree).toMatchSnapshot();
   });
-  it('shows icon when provided', () => {
+  it('text input field without placeholder text', () => {
     const tree = renderer
       .create(
         <TextInput
@@ -29,4 +29,31 @@ describe('test input texts', () => {
 
     expect(tree).toMatchSnapshot();
   });
+  it('show an input field with a border and without placeholder text', () => {
+    const tree = renderer
+      .create(
+        <TextInput
+          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+          onchangeText={() => console.log('text changed')}
+          border={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('show an input field with a border and placeholder text', () => {
+    const tree = renderer
+      .create(
+        <TextInput
+          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+          onchangeText={() => console.log('text changed')}
+          border={true}
+          placeholder={'Text input field with a border'}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });