@tactics/toddle-styleguide 1.2.8 → 1.3.0

package/src/components/organisms/my-child-list-item/my-child-list-item.component.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useCallback, useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View} from 'react-native';
 import {Initials} from '../../../models/initials.model';
@@ -8,82 +8,55 @@ import {Stylesheet} from './my-child-list-item.styles';
 import {Icon} from '../../../icons/index';
 import {SmallText, TinyText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
-import {Pill} from '../../molecules/pill/pill.component';
-import {VisualState} from '../../../types/visual-state.enum';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 
 type MyChildListItemProps = {
   id: string;
   name: string;
-  department: string;
-  age: number;
+  age: string;
   sourceAvatar: ImageSourcePropType | Initials;
-  onPress: (id: string) => void;
-  isActive: boolean;
+  onPressChild: (id: string) => void;
+  onPressArrow: (id: string) => void;
 };
 export const MyChildListItem = ({
   id,
   name,
-  department,
   age,
   sourceAvatar,
-  onPress,
-  isActive,
+  onPressChild,
+  onPressArrow,
 }: MyChildListItemProps) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-  return isActive ? (
-    <Pressable style={styles.container} onPress={() => onPress(id)}>
-      <Avatar source={sourceAvatar} size={Size.MEDIUM} />
-      <View style={styles.childTextContainer}>
-        <TinyText textAlign={'left'}>{age} jaar</TinyText>
-        <Heading2
-          bold={true}
-          textAlign={'left'}
-          numberOfLines={1}
-          ellipsizeMode={'tail'}
-        >
-          {name}
-        </Heading2>
-        <SmallText textAlign={'left'}>{department}</SmallText>
-      </View>
-      <View style={styles.iconContainer}>
-        <Icon
-          style={'regular'}
-          name={'chevron-right'}
-          size={20}
-          color={Context.colors.ui.black}
-        />
-      </View>
-    </Pressable>
-  ) : (
-    <Pressable style={styles.container} onPress={() => onPress(id)}>
-      <Avatar source={sourceAvatar} size={Size.MEDIUM} isActive={false} />
-      <View style={styles.childTextContainer}>
-        <TinyText textAlign={'left'}>{age} jaar</TinyText>
-        <Heading2
-          bold={true}
-          textAlign={'left'}
-          numberOfLines={1}
-          ellipsizeMode={'tail'}
-        >
-          {name}
-        </Heading2>
-        <View style={styles.pillContainer}>
-          <Pill
-            label={'Geen actieve inschrijving'}
-            visualState={VisualState.INACTIVE}
-          />
+  const onPressArrowCallback = useCallback(() => {
+    onPressArrow(id);
+  }, [id, onPressArrow]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.innerContainer} onPress={() => onPressChild(id)}>
+        <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+        <View style={styles.childTextContainer}>
+          <TinyText textAlign={'left'}>{age}</TinyText>
+          <Heading2
+            bold={true}
+            textAlign={'left'}
+            numberOfLines={1}
+            ellipsizeMode={'tail'}
+          >
+            {name}
+          </Heading2>
         </View>
-      </View>
-      <View style={styles.iconContainer}>
+      </Pressable>
+      <Pressable onPress={onPressArrowCallback} style={styles.iconContainer}>
         <Icon
           style={'regular'}
           name={'chevron-right'}
           size={20}
-          color={Context.colors.ui.black}
+          color={context.colors.ui.black}
         />
-      </View>
-    </Pressable>
+      </Pressable>
+    </View>
   );
 };

package/src/components/organisms/my-child-list-item/my-child-list-item.preview.tsx

@@ -1,39 +1,51 @@
 import React from 'react';
 import {MyChildListItem} from './my-child-list-item.component';
-import {View} from 'react-native';
+import {FlatList, View} from 'react-native';
+
+interface IData {
+  id: string;
+  name: string;
+  age: number;
+}
+
+const data: IData[] = [];
+for (let i = 0; i < 6; i++) {
+  data.push({
+    id: 'child' + i,
+    name: 'Children with very long names because in 2023 we give our kids special name',
+    age: Math.floor(Math.random() * (6 - 2 + 1) + 2),
+  });
+}
 
 export const MyChildListItemPreview = ({}: {}) => {
+  const renderMyChildList = ({item}: any) => {
+    return (
+      <MyChildListItem
+        id={item.id}
+        name={item.name}
+        age={item.age}
+        sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
+        onPressChild={(id) => console.log('Pressed ', id)}
+        onPressArrow={(id) => console.log('Pressed arrow ', id)}
+      />
+    );
+  };
+
   return (
     <View
       style={{
         flex: 1,
-        justifyContent: 'center',
         padding: 16,
+        justifyContent: 'center',
         backgroundColor: 'white',
       }}
     >
-      <View style={{marginBottom: 24}}>
-        <MyChildListItem
-          id={'child1'}
-          name={'Luca JannsensJannsensJannsensJannsensJannsensJannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('Pressed')}
-          isActive={true}
-        />
-      </View>
-      <View style={{marginBottom: 24}}>
-        <MyChildListItem
-          id={'child2'}
-          name={'Luca JannsensJannsensJannsensJannsensJannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('Pressed')}
-          isActive={false}
-        />
-      </View>
+      <FlatList
+        style={{flex: 1}}
+        data={data}
+        renderItem={renderMyChildList}
+        keyExtractor={(item) => item.id}
+      />
     </View>
   );
 };

package/src/components/organisms/my-child-list-item/my-child-list-item.styles.d.ts

@@ -1,29 +1,33 @@
-export function Stylesheet(Context: any): {
+export function Stylesheet(context: any): {
   container: {
     width: string;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderBottomLeftRadius: number;
     flexDirection: 'row';
-    alignItems: 'center';
+    backgroundColor: any;
+  };
+  innerContainer: {
+    flex: number;
     padding: number;
-    borderTopLeftRadius: number;
+    flexDirection: 'row';
+    alignItems: 'center';
     borderTopRightRadius: number;
     borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
     borderBottomLeftRadius: number;
-    overflow: 'hidden';
-    backgroundColor: any;
   };
   childTextContainer: {
     flex: number;
-    alignItems: 'flex-start';
-    justifyContent: 'center';
     marginLeft: number;
   };
   iconContainer: {
     alignItems: 'flex-end';
     justifyContent: 'center';
+    paddingRight: number;
     width: number;
-    height: number;
-  };
-  pillContainer: {
-    marginTop: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
   };
 };

package/src/components/organisms/my-child-list-item/my-child-list-item.styles.js

@@ -1,32 +1,37 @@
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (Context) =>
+export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
       width: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
       flexDirection: 'row',
-      alignItems: 'center',
+      backgroundColor: context.colors.ui.white,
+    },
+    innerContainer: {
+      flex: 1,
       padding: Scale.xs,
-      borderTopLeftRadius: Scale.xxl,
+      flexDirection: 'row',
+      alignItems: 'center',
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
-      backgroundColor: Context.colors.ui.white,
     },
     childTextContainer: {
       flex: 1,
-      alignItems: 'flex-start',
-      justifyContent: 'center',
       marginLeft: Scale.l,
     },
     iconContainer: {
       alignItems: 'flex-end',
       justifyContent: 'center',
-      width: 44,
-      height: 44,
-    },
-    pillContainer: {
-      marginTop: Scale.xxxs,
+      paddingRight: Scale.xs,
+      width: Scale.m * 3,
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
     },
   });

package/src/components/organisms/my-child-list-item/my-child-list-item.test.js

@@ -3,34 +3,17 @@ import renderer from 'react-test-renderer';
 import {MyChildListItem} from './my-child-list-item.component';
 
 describe('My child list item component test', () => {
-  it('Should render your child that has an active subscription', () => {
+  it('Should render your child', () => {
     const tree = renderer
       .create(
         <MyChildListItem
-          id={1}
+          id={'kind1'}
           name={'Luca Jannsens'}
           department={'De Teddybeertjes'}
-          age={2}
+          age={'leeftijd'}
           sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('pressed Child')}
-          isActive={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('Should render your child but with an inactive subscription', () => {
-    const tree = renderer
-      .create(
-        <MyChildListItem
-          id={1}
-          name={'Luca Jannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('pressed Child')}
-          isActive={false}
+          onPressChild={() => console.log('pressed Child')}
+          onPressArrow={() => console.log('pressed arrow')}
         />
       )
       .toJSON();

package/src/components/organisms/text-bubble/__snapshots__/text-bubble.test.js.snap

@@ -5,8 +5,10 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      false,
     ]
   }
 >
@@ -42,7 +44,6 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
             },
             false,
             false,
-            false,
             {
               "borderBottomLeftRadius": 32,
               "borderBottomRightRadius": 8,
@@ -341,7 +342,6 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
                       "backgroundColor": "#E0E8F9",
                     },
                     false,
-                    false,
                   ],
                 ]
               }
@@ -357,6 +357,7 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         {
@@ -386,7 +387,8 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -397,8 +399,10 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      false,
     ]
   }
 >
@@ -434,7 +438,6 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
             },
             false,
             false,
-            false,
             {
               "borderBottomLeftRadius": 32,
               "borderBottomRightRadius": 8,
@@ -733,7 +736,6 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
                       "backgroundColor": "#E0E8F9",
                     },
                     false,
-                    false,
                   ],
                 ]
               }
@@ -749,6 +751,7 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         {
@@ -778,7 +781,8 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -789,8 +793,10 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      false,
     ]
   }
 >
@@ -823,9 +829,6 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
             },
             false,
             false,
-            {
-              "backgroundColor": "#F16868",
-            },
             false,
             {
               "borderBottomLeftRadius": 32,
@@ -965,7 +968,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                         }
                         stroke={
                           {
-                            "payload": 4294695385,
+                            "payload": 4279837036,
                             "type": 0,
                           }
                         }
@@ -1066,7 +1069,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                         }
                         stroke={
                           {
-                            "payload": 4294695385,
+                            "payload": 4279837036,
                             "type": 0,
                           }
                         }
@@ -1112,7 +1115,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                     },
                   ],
                   {
-                    "color": "#FFFFFF",
+                    "color": "#1F2933",
                     "textAlign": undefined,
                     "width": "100%",
                   },
@@ -1123,9 +1126,6 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
                     },
                     false,
                     false,
-                    {
-                      "backgroundColor": "#F16868",
-                    },
                   ],
                 ]
               }
@@ -1141,6 +1141,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         {
@@ -1170,7 +1171,8 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -1181,8 +1183,12 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      {
+        "marginLeft": 24,
+      },
     ]
   }
 >
@@ -1215,7 +1221,6 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
               "backgroundColor": "#E0E8F9",
             },
             false,
-            false,
             {
               "borderBottomLeftRadius": 8,
               "borderBottomRightRadius": 32,
@@ -1515,7 +1520,6 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
                       "backgroundColor": "#E0E8F9",
                     },
                     false,
-                    false,
                   ],
                 ]
               }
@@ -1531,6 +1535,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         false,
@@ -1558,7 +1563,8 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -1569,8 +1575,12 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      {
+        "marginLeft": 24,
+      },
     ]
   }
 >
@@ -1603,7 +1613,6 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
               "backgroundColor": "#E0E8F9",
             },
             false,
-            false,
             {
               "borderBottomLeftRadius": 8,
               "borderBottomRightRadius": 32,
@@ -1903,7 +1912,6 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
                       "backgroundColor": "#E0E8F9",
                     },
                     false,
-                    false,
                   ],
                 ]
               }
@@ -1919,6 +1927,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         false,
@@ -1946,7 +1955,8 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -1957,8 +1967,10 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      false,
     ]
   }
 >
@@ -1991,10 +2003,9 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
             },
             false,
             {
-              "backgroundColor": "#FEEFDB",
+              "backgroundColor": "#FFD398",
             },
             false,
-            false,
             {
               "borderBottomLeftRadius": 32,
               "borderBottomRightRadius": 8,
@@ -2280,7 +2291,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
                     },
                   ],
                   {
-                    "color": "#FAAC44",
+                    "color": "#1F2933",
                     "textAlign": undefined,
                     "width": "100%",
                   },
@@ -2291,9 +2302,8 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
                     },
                     false,
                     {
-                      "backgroundColor": "#FEEFDB",
+                      "backgroundColor": "#FFD398",
                     },
-                    false,
                   ],
                 ]
               }
@@ -2309,6 +2319,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         {
@@ -2338,7 +2349,8 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>
@@ -2349,8 +2361,10 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
   style={
     [
       {
+        "gap": 4,
         "width": "100%",
       },
+      false,
     ]
   }
 >
@@ -2759,6 +2773,7 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
     style={
       [
         {
+          "marginBottom": 2,
           "maxWidth": "80%",
         },
         {
@@ -2788,7 +2803,8 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
         ]
       }
     >
-      9:08
+       
+      25 May, 9:08
     </Text>
   </View>
 </View>