@tactics/toddle-styleguide 1.4.6 → 1.4.7

package/package.json

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

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

@@ -13,8 +13,8 @@ type ChildListItemProps = {
     onLongPress: (id: string) => void;
     onSelect: (id: string) => void;
     sourceAvatar: ImageSourcePropType | Initials;
-    textTimeTracker: string;
-    visualStateTimeTracker: VisualState;
+    textTimeTracker?: string;
+    visualStateTimeTracker?: VisualState;
     tags?: string[];
 };
 declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, }: ChildListItemProps) => React.JSX.Element>;

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

@@ -25,8 +25,8 @@ type ChildListItemProps = {
   onLongPress: (id: string) => void;
   onSelect: (id: string) => void;
   sourceAvatar: ImageSourcePropType | Initials;
-  textTimeTracker: string;
-  visualStateTimeTracker: VisualState;
+  textTimeTracker?: string;
+  visualStateTimeTracker?: VisualState;
   tags?: string[];
 };
 
@@ -69,6 +69,19 @@ const ChildListItem = React.memo(
       return isSelected ? context.colors.ui.white : context.colors.ui.black;
     }, [isSelected]);
 
+    const renderTimeTracker = (textTimeTracker?: string, visualStateTimeTracker?: VisualState) => {
+      if (textTimeTracker && visualStateTimeTracker) {
+        return <TimeTracker
+        text={textTimeTracker}
+        visualState={visualStateTimeTracker}
+        textColor={textColor}
+      />
+      } else {
+        return <View style={styles.timeTrackerSpacer}></View>
+      }
+
+    }
+
     return (
       <View style={styles.container}>
         <Pressable
@@ -83,11 +96,7 @@ const ChildListItem = React.memo(
           />
           <View style={styles.pressableText}>
             <View style={styles.trackerContainer}>
-              <TimeTracker
-                text={textTimeTracker}
-                visualState={visualStateTimeTracker}
-                textColor={textColor}
-              />
+              {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
             </View>
             <View>
               <Heading2

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

@@ -70,8 +70,6 @@ export const ChildListItemPreview = ({}: {}) => {
         onSelect={addIdToSelected}
         // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
         sourceAvatar={Initials.for('Zeno', 'Driesen')}
-        textTimeTracker={'3u45m'}
-        visualStateTimeTracker={VisualState.SUCCESS}
         tags={item.tags}
       />
     );

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

@@ -33,4 +33,8 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         flexDirection: "row";
         alignItems: "center";
     };
+    timeTrackerSpacer: {
+        height: number;
+        marginBottom: number;
+    };
 };

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

@@ -40,4 +40,8 @@ export const Stylesheet = (isSelectedItem, context) =>
       flexDirection: 'row',
       alignItems: 'center',
     },
+    timeTrackerSpacer: {
+      height: Scale.s,
+      marginBottom: Scale.xxs
+    }
   });