@tactics/toddle-styleguide 0.1.4 → 0.1.6

package/App.tsx

@@ -33,7 +33,7 @@ import {CheckboxPreview} from './src/components/atoms/checkbox/checkbox.preview'
 import {CheckPreview} from './src/components/atoms/check-switch/check-switch.preview';
 import {WideButtonPreview} from './src/components/atoms/wide-button/wide-button.preview';
 import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressable-icon.preview';
-import {FormActionPreview} from './src/components/atoms/form-actions/form-action.preview';
+import {SplitContainerPreview} from './src/components/atoms/split-container/split-container.preview';
 import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
 import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
 import {DateInputPreview} from './src/components/atoms/date-input/date-input.preview';
@@ -51,6 +51,10 @@ import {SearchPreview} from './src/components/atoms/search/search.preview';
 import {BlockedMessagePreview} from './src/components/atoms/blocked-message/blocked-message.preview';
 import {DepartmentLogoPreview} from './src/components/atoms/department_logo/department-logo.preview';
 import {CalendarSelectPreview} from './src/components/atoms/calendar-select/calendar-select.preview';
+import {FooterPreview} from './src/components/atoms/footer/footer.preview';
+import {DefaulSelectPreview} from './src/components/atoms/default-select/default-select.preview';
+import {PasswordInputPreview} from './src/components/atoms/password-input/password-input.preview';
+import {MessageInputPreview} from './src/components/atoms/message-input/message-input.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -132,8 +136,8 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       />
       <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
       <ReactBtn
-        title="formAction"
-        onPress={() => navigation.push('form-action')}
+        title="split-container"
+        onPress={() => navigation.push('split-container')}
       />
       <ReactBtn
         title="Select Picker"
@@ -188,6 +192,19 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="calendarSelect"
         onPress={() => navigation.push('calendar-select')}
       />
+      <ReactBtn title="footer" onPress={() => navigation.push('footer')} />
+      <ReactBtn
+        title="Default select"
+        onPress={() => navigation.push('default-select')}
+      />
+      <ReactBtn
+        title="Password Input Field"
+        onPress={() => navigation.push('password-input')}
+      />
+      <ReactBtn
+        title="Message input"
+        onPress={() => navigation.push('message-input')}
+      />
     </ScrollView>
   );
 };
@@ -263,8 +280,8 @@ function App() {
             {() => <TimeTrackerPreview />}
           </Stack.Screen>
           <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
-          <Stack.Screen name="form-action">
-            {() => <FormActionPreview />}
+          <Stack.Screen name="split-container">
+            {() => <SplitContainerPreview />}
           </Stack.Screen>
           <Stack.Screen name="select-picker">
             {() => <SelectPickerPreview />}
@@ -308,6 +325,16 @@ function App() {
           <Stack.Screen name="calendar-select">
             {() => <CalendarSelectPreview />}
           </Stack.Screen>
+          <Stack.Screen name="password-input">
+            {() => <PasswordInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
+          <Stack.Screen name="default-select">
+            {() => <DefaulSelectPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="message-input">
+            {() => <MessageInputPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -8,7 +8,7 @@ import { Checkbox } from './src/components/atoms/checkbox/checkbox.component';
 import { ChildListItem } from './src/components/atoms/child-list-item/child-list-item.component';
 import { ContactItem } from './src/components/atoms/contact-item/contact-item.component';
 import { FilterTab } from './src/components/atoms/filter-tab/filter-tab.component';
-import { FormAction } from './src/components/atoms/form-actions/form-action.component';
+import { SplitContainer } from './src/components/atoms/split-container/split-container.component';
 import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
 import { Info } from './src/components/atoms/info/info.component';
 import { Pill } from './src/components/atoms/pill/pill.component';
@@ -28,13 +28,17 @@ import { IncrementInput } from './src/components/atoms/increment-input/increment
 import { Swipe } from './src/components/atoms/swipe/swipe.component';
 import { Logo } from './src/components/atoms/logo/logo.component';
 import { DaySelect } from './src/components/atoms/day-select/day-select.component';
-import { Search } from "./src/components/atoms/search/search.component";
+import { Search } from './src/components/atoms/search/search.component';
 import { BlockedMessage } from './src/components/atoms/blocked-message/blocked-message.component';
 import { DepartmentLogo } from './src/components/atoms/department_logo/department-logo.component';
 import { ContactRole } from './src/components/atoms/contact-role/contact-role.component';
 import { Timeline } from './src/components/atoms/timeline/timeline.component';
 import { SelectPicker } from './src/components/atoms/select-picker/select-picker.component';
-import { CalendarSelect } from "./src/components/atoms/calendar-select/calendar-select.component";
+import { CalendarSelect } from './src/components/atoms/calendar-select/calendar-select.component';
+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 { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -42,4 +46,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, FormAction, 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 };
+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, };

package/index.tsx

@@ -16,7 +16,7 @@ import {Checkbox} from './src/components/atoms/checkbox/checkbox.component';
 import {ChildListItem} from './src/components/atoms/child-list-item/child-list-item.component';
 import {ContactItem} from './src/components/atoms/contact-item/contact-item.component';
 import {FilterTab} from './src/components/atoms/filter-tab/filter-tab.component';
-import {FormAction} from './src/components/atoms/form-actions/form-action.component';
+import {SplitContainer} from './src/components/atoms/split-container/split-container.component';
 import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
 import {Info} from './src/components/atoms/info/info.component';
 import {Pill} from './src/components/atoms/pill/pill.component';
@@ -36,13 +36,17 @@ import {IncrementInput} from './src/components/atoms/increment-input/increment-i
 import {Swipe} from './src/components/atoms/swipe/swipe.component';
 import {Logo} from './src/components/atoms/logo/logo.component';
 import {DaySelect} from './src/components/atoms/day-select/day-select.component';
-import {Search} from "./src/components/atoms/search/search.component";
+import {Search} from './src/components/atoms/search/search.component';
 import {BlockedMessage} from './src/components/atoms/blocked-message/blocked-message.component';
 import {DepartmentLogo} from './src/components/atoms/department_logo/department-logo.component';
 import {ContactRole} from './src/components/atoms/contact-role/contact-role.component';
 import {Timeline} from './src/components/atoms/timeline/timeline.component';
 import {SelectPicker} from './src/components/atoms/select-picker/select-picker.component';
-import {CalendarSelect} from "./src/components/atoms/calendar-select/calendar-select.component";
+import {CalendarSelect} from './src/components/atoms/calendar-select/calendar-select.component';
+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';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -60,46 +64,50 @@ 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,
-      FormAction,
-      ImageBubble,
-      Info,
-      Pill,
-      Popover,
-      PressableIcon,
-      QuickFilter,
-    Search,
-      SelectListItem,
-      Snackbar,
-      Tag,
-      TextBubble,
-      TextInput,
-      TimeTracker,
-      WideButton,
-      Icon,
-      Calendar,
-      IncrementInput,
-      Swipe,
-      Logo,
-      DaySelect,
+  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
+  CalendarSelect,
+  DateInput,
+  FilterRange,
+  Footer,
+  DefaultSelect,
 };

package/package.json

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

package/src/components/atoms/avatar/avatar.component.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {ImageSourcePropType} from 'react-native';
-import {Size} from '../../../types/size.enum';
-import {Initials} from '../../../models/initials.model';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
 declare type AvatarProps = {
-  source: ImageSourcePropType | Initials;
-  size: Size;
-  isBlocked?: boolean;
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
 };
 declare const Avatar: React.FC<AvatarProps>;
-export {Avatar as Avatar};
+export { Avatar as Avatar };

package/src/components/atoms/blocked-message/blocked-message.component.d.ts

@@ -1,7 +1,5 @@
 declare type BlockedMessageProps = {
-  message: string;
+    message: string;
 };
-export declare const BlockedMessage: ({
-  message,
-}: BlockedMessageProps) => JSX.Element;
+export declare const BlockedMessage: ({ message }: BlockedMessageProps) => JSX.Element;
 export {};

package/src/components/atoms/button/button.component.d.ts

@@ -1,13 +1,8 @@
 declare type ButtonProps = {
-  label: string;
-  icon?: any;
-  disabled?: boolean;
-  onPress?: () => void;
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    onPress?: () => void;
 };
-declare const Button: ({
-  label,
-  icon,
-  disabled,
-  onPress,
-}: ButtonProps) => JSX.Element;
-export {Button as Button};
+declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
+export { Button as Button };

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

@@ -1501,7 +1501,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Dinsdag 10 Januari 2023 "
+            accessibilityLabel=" Dinsdag 10 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1521,10 +1521,6 @@ 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,
@@ -1544,9 +1540,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2139,7 +2132,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 19 Januari 2023 "
+            accessibilityLabel="today Donderdag 19 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2159,6 +2152,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,
@@ -2178,6 +2175,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2208,7 +2208,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 20 Januari 2023 "
+            accessibilityLabel="today Vrijdag 20 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2228,6 +2228,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,
@@ -2247,6 +2251,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4927,8 +4934,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Dinsdag 10 Januari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Dinsdag 10 Januari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -4947,10 +4953,6 @@ 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,
@@ -4971,7 +4973,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5581,7 +5583,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 19 Januari 2023 "
+            accessibilityLabel="today Donderdag 19 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5600,6 +5603,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,
@@ -5620,7 +5627,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }
@@ -5652,7 +5659,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 20 Januari 2023 "
+            accessibilityLabel="today Vrijdag 20 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5671,6 +5679,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,
@@ -5691,7 +5703,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,14 +1,9 @@
-import {DateTime} from 'luxon';
+import { DateTime } from 'luxon';
 declare type CalendarProps = {
-  onDayPress: (day: DateTime) => void;
-  selected: DateTime;
-  minDate?: string;
-  maxDate?: string;
+    onDayPress: (day: DateTime) => void;
+    selected: DateTime;
+    minDate?: string;
+    maxDate?: string;
 };
-export declare const Calendar: ({
-  onDayPress,
-  selected,
-  minDate,
-  maxDate,
-}: CalendarProps) => JSX.Element;
+export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => JSX.Element;
 export {};

package/src/components/atoms/calendar-select/calendar-select.component.d.ts

@@ -1,10 +1,7 @@
-import {DateTime} from 'luxon';
+import { DateTime } from 'luxon';
 declare type CalendarSelectProps = {
-  onPressDate: (date: DateTime) => void;
-  startDate: DateTime;
+    onPressDate: (date: DateTime) => void;
+    startDate: DateTime;
 };
-declare const CalendarSelect: ({
-  onPressDate,
-  startDate,
-}: CalendarSelectProps) => JSX.Element;
-export {CalendarSelect as CalendarSelect};
+declare const CalendarSelect: ({ onPressDate, startDate }: CalendarSelectProps) => JSX.Element;
+export { CalendarSelect as CalendarSelect };

package/src/components/atoms/cancel-link/cancel-link.component.d.ts

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

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,6 +1,6 @@
 declare type CheckProps = {
-  value: boolean;
-  onToggle: () => void;
+    value: boolean;
+    onToggle: () => void;
 };
-export declare const Check: ({value, onToggle}: CheckProps) => JSX.Element;
+export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
 export {};

package/src/components/atoms/checkbox/checkbox.component.d.ts

@@ -1,11 +1,7 @@
 declare type CheckboxProps = {
-  value: boolean;
-  onValueChange: () => void;
-  label: string;
+    value: boolean;
+    onValueChange: () => void;
+    label: string;
 };
-declare const Checkbox: ({
-  value,
-  onValueChange,
-  label,
-}: CheckboxProps) => JSX.Element;
-export {Checkbox as Checkbox};
+declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
+export { Checkbox as Checkbox };

package/src/components/atoms/child-list-item/child-list-item.component.d.ts

@@ -1,30 +1,18 @@
-import {ImageSourcePropType} from 'react-native';
-import {Initials} from '../../../models/initials.model';
-import {VisualState} from '../../../types/visual-state.enum';
+import { ImageSourcePropType } from 'react-native';
+import { Initials } from '../../../models/initials.model';
+import { VisualState } from '../../../types/visual-state.enum';
 declare type ChildListItemProps = {
-  id: string;
-  name: string;
-  label: string;
-  selectable: boolean;
-  isSelected: boolean;
-  onPressArrow: () => void;
-  onPressText: () => void;
-  onSelect: (id: string) => void;
-  sourceAvatar: ImageSourcePropType | Initials;
-  textTimeTracker: string;
-  visualStateTimeTracker: VisualState;
+    id: string;
+    name: string;
+    label: string;
+    selectable: boolean;
+    isSelected: boolean;
+    onPressArrow: (id: string) => void;
+    onPressText: (id: string) => void;
+    onSelect: (id: string) => void;
+    sourceAvatar: ImageSourcePropType | Initials;
+    textTimeTracker: string;
+    visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: ({
-  id,
-  name,
-  label,
-  selectable,
-  isSelected,
-  onPressArrow,
-  onPressText,
-  onSelect,
-  sourceAvatar,
-  textTimeTracker,
-  visualStateTimeTracker,
-}: ChildListItemProps) => JSX.Element;
-export {ChildListItem as ChildListItem};
+declare const ChildListItem: ({ id, name, label, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
+export { ChildListItem as ChildListItem };

package/src/components/atoms/child-list-item/child-list-item.component.tsx

@@ -16,8 +16,8 @@ type ChildListItemProps = {
   label: string;
   selectable: boolean;
   isSelected: boolean;
-  onPressArrow: () => void;
-  onPressText: () => void;
+  onPressArrow: (id: string) => void;
+  onPressText: (id: string) => void;
   onSelect: (id: string) => void;
   sourceAvatar: ImageSourcePropType | Initials;
   textTimeTracker: string;
@@ -46,7 +46,7 @@ const ChildListItem = ({
   );
 
   const onPressSelectable = () => {
-    selectable ? onSelect(id) : onPressText();
+    selectable ? onSelect(id) : onPressText(id);
   };
 
   return (
@@ -72,7 +72,10 @@ const ChildListItem = ({
       </Pressable>
       <>
         {!selectable ? (
-          <Pressable onPress={onPressArrow} style={styles.iconContainer}>
+          <Pressable
+            onPress={(id) => onPressArrow}
+            style={styles.iconContainer}
+          >
             <ChevronRightIcon />
           </Pressable>
         ) : null}

package/src/components/atoms/contact-item/contact-item.component.d.ts

@@ -1,15 +1,9 @@
 declare type ContactItemProps = {
-  name: string;
-  firstname: string;
-  label: string;
-  onPress?: () => void;
-  isBlocked?: boolean;
+    name: string;
+    firstname: string;
+    label: string;
+    onPress?: () => void;
+    isBlocked?: boolean;
 };
-declare const ContactItem: ({
-  name,
-  firstname,
-  label,
-  onPress,
-  isBlocked,
-}: ContactItemProps) => JSX.Element;
-export {ContactItem as ContactItem};
+declare const ContactItem: ({ name, firstname, label, onPress, isBlocked, }: ContactItemProps) => JSX.Element;
+export { ContactItem as ContactItem };