@tactics/toddle-styleguide 1.2.8 → 1.3.0

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

@@ -1,479 +1,223 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`My child list item component test Should render your child but with an inactive subscription 1`] = `
+exports[`My child list item component test Should render your child 1`] = `
 <View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
     {
-      "alignItems": "center",
       "backgroundColor": "#FFFFFF",
       "borderBottomLeftRadius": 48,
       "borderBottomRightRadius": 24,
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "padding": 8,
       "width": "100%",
     }
   }
 >
   <View
-    style={null}
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#E5E8EB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          {
-            "borderRadius": 36,
-            "height": 72,
-            "width": 72,
-          },
-          false,
-        ]
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
       }
-    >
-      <View
-        style={
-          [
-            {
-              "backgroundColor": "#E5E8EB",
-            },
-            [
-              {
-                "height": "100%",
-                "width": "100%",
-              },
-            ],
-          ]
-        }
-      />
-      <Image
-        source={1}
-        style={
-          [
-            {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
-            },
-          ]
-        }
-      />
-    </View>
-  </View>
-  <View
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    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={
       {
-        "alignItems": "flex-start",
+        "alignItems": "center",
+        "borderBottomLeftRadius": 48,
+        "borderBottomRightRadius": 24,
+        "borderTopLeftRadius": 48,
+        "borderTopRightRadius": 24,
         "flex": 1,
-        "justifyContent": "center",
-        "marginLeft": 24,
+        "flexDirection": "row",
+        "padding": 8,
       }
     }
   >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "left",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      2
-       jaar
-    </Text>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={1}
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 24,
-              "lineHeight": 30.2,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "left",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      Luca Jannsens
-    </Text>
     <View
-      style={
-        {
-          "marginTop": 2,
-        }
-      }
+      style={null}
     >
       <View
         style={
           [
             {
               "alignItems": "center",
-              "borderRadius": 50,
+              "backgroundColor": "#647ACB",
               "justifyContent": "center",
-              "paddingBottom": 4,
-              "paddingLeft": 8,
-              "paddingRight": 8,
-              "paddingTop": 4,
+              "overflow": "hidden",
             },
             false,
-            false,
-            false,
-            false,
             {
-              "backgroundColor": "#E5E8EB",
+              "borderRadius": 36,
+              "height": 72,
+              "width": 72,
             },
+            false,
           ]
         }
       >
-        <Text
+        <ViewManagerAdapter_ExpoLinearGradient
+          proxiedProperties={
+            {
+              "colors": [
+                4281681564,
+                4284775115,
+                4292481661,
+              ],
+              "endPoint": [
+                0.9,
+                0.9,
+              ],
+              "locations": [
+                0,
+                0.55,
+                1,
+              ],
+              "startPoint": [
+                0.1,
+                0.1,
+              ],
+            }
+          }
           style={
             [
-              [
-                {
-                  "fontFamily": "MontserratBold",
-                  "fontSize": 11,
-                  "lineHeight": 17.9,
-                },
-              ],
               {
-                "color": "#1F2933",
-                "textAlign": "center",
+                "height": "100%",
                 "width": "100%",
               },
-              undefined,
             ]
           }
-        >
-          Geen actieve inschrijving
-        </Text>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "flex-end",
-        "height": 44,
-        "justifyContent": "center",
-        "width": 44,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="20"
-      bbWidth="20"
-      fill="none"
-      focusable={false}
-      height={20}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 20,
-            "width": 20,
-          },
-        ]
-      }
-      vbHeight={19}
-      vbWidth={11}
-      width={20}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
-          propList={
+        />
+        <Image
+          source={1}
+          style={
             [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
             ]
           }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
         />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`My child list item component test Should render your child that has an active subscription 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#FFFFFF",
-      "borderBottomLeftRadius": 48,
-      "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 48,
-      "borderTopRightRadius": 24,
-      "flexDirection": "row",
-      "padding": 8,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={null}
-  >
+      </View>
+    </View>
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          {
-            "borderRadius": 36,
-            "height": 72,
-            "width": 72,
-          },
-          false,
-        ]
+        {
+          "flex": 1,
+          "marginLeft": 24,
+        }
       }
     >
-      <ViewManagerAdapter_ExpoLinearGradient
-        proxiedProperties={
-          {
-            "colors": [
-              4281681564,
-              4284775115,
-              4292481661,
-            ],
-            "endPoint": [
-              0.9,
-              0.9,
-            ],
-            "locations": [
-              0,
-              0.55,
-              1,
-            ],
-            "startPoint": [
-              0.1,
-              0.1,
-            ],
-          }
-        }
+      <Text
         style={
           [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
             {
-              "height": "100%",
+              "color": "#1F2933",
+              "textAlign": "left",
               "width": "100%",
             },
+            undefined,
           ]
         }
-      />
-      <Image
-        source={1}
+      >
+        leeftijd
+      </Text>
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={1}
         style={
           [
+            [
+              {
+                "fontFamily": "SourceSansProBold",
+                "fontSize": 24,
+                "lineHeight": 30.2,
+              },
+            ],
             {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
+              "color": "#1F2933",
+              "textAlign": "left",
+              "width": "100%",
             },
+            undefined,
           ]
         }
-      />
+      >
+        Luca Jannsens
+      </Text>
     </View>
   </View>
   <View
-    style={
+    accessibilityState={
       {
-        "alignItems": "flex-start",
-        "flex": 1,
-        "justifyContent": "center",
-        "marginLeft": 24,
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "left",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      2
-       jaar
-    </Text>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={1}
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 24,
-              "lineHeight": 30.2,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "left",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      Luca Jannsens
-    </Text>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "left",
-            "width": "100%",
-          },
-          undefined,
-        ]
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-    >
-      De Teddybeertjes
-    </Text>
-  </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={
       {
         "alignItems": "flex-end",
-        "height": 44,
+        "borderBottomRightRadius": 24,
+        "borderTopRightRadius": 24,
         "justifyContent": "center",
-        "width": 44,
+        "paddingRight": 8,
+        "width": 48,
       }
     }
   >

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

@@ -3,19 +3,17 @@ import {Initials} from '../../../models/initials.model';
 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 declare const MyChildListItem: ({
   id,
   name,
-  department,
   age,
   sourceAvatar,
-  onPress,
-  isActive,
+  onPressChild,
+  onPressArrow,
 }: MyChildListItemProps) => JSX.Element;
 export {};