@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/src/components/organisms/contact-item/__snapshots__/contact-item.test.js.snap

@@ -42,45 +42,49 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#F16868",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          {
-            "borderRadius": 20,
-            "height": 40,
-            "width": 40,
-          },
-          false,
-          false,
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 18,
-                "lineHeight": 22.6,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#F16868",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-            undefined,
+            {
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
+            },
+            false,
+            false,
           ]
         }
       >
-        JD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 18,
+                  "lineHeight": 22.6,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          JD
+        </Text>
+      </View>
     </View>
     <View
       style={
@@ -180,71 +184,6 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
         Geblokkeerd
       </Text>
     </View>
-    <View
-      style={
-        {
-          "marginLeft": 8,
-        }
-      }
-    >
-      <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={
-              [
-                "stroke",
-                "strokeWidth",
-                "strokeLinecap",
-                "strokeLinejoin",
-              ]
-            }
-            stroke={
-              {
-                "payload": 4279837036,
-                "type": 0,
-              }
-            }
-            strokeLinecap={1}
-            strokeLinejoin={1}
-            strokeWidth="2"
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
   </View>
 </View>
 `;
@@ -291,45 +230,49 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          {
-            "borderRadius": 20,
-            "height": 40,
-            "width": 40,
-          },
-          false,
-          false,
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 18,
-                "lineHeight": 22.6,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-            undefined,
+            {
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
+            },
+            false,
+            false,
           ]
         }
       >
-        ??
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 18,
+                  "lineHeight": 22.6,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          ??
+        </Text>
+      </View>
     </View>
     <View
       style={

package/src/components/organisms/contact-item/contact-item.component.tsx

@@ -55,15 +55,16 @@ const ContactItem = ({name, label, onPress, isBlocked}: ContactItemProps) => {
         </View>
         {isBlocked ? (
           <Pill label={'Geblokkeerd'} visualState={VisualState.ERROR} />
-        ) : null}
-        <View style={styles.iconSquare}>
-          <Icon
-            style={'regular'}
-            name={'chevron-right'}
-            size={20}
-            color={context.colors.main['0']}
-          />
-        </View>
+        ) : (
+          <View style={styles.iconSquare}>
+            <Icon
+              style={'regular'}
+              name={'chevron-right'}
+              size={20}
+              color={context.colors.main['0']}
+            />
+          </View>
+        )}
       </View>
     </Pressable>
   );

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

@@ -47,52 +47,56 @@ exports[`My child list item component test Should render your child but with an
   }
 >
   <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#E5E8EB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        false,
-        {
-          "borderRadius": 36,
-          "height": 72,
-          "width": 72,
-        },
-        false,
-      ]
-    }
+    style={null}
   >
     <View
       style={
         [
           {
+            "alignItems": "center",
             "backgroundColor": "#E5E8EB",
+            "justifyContent": "center",
+            "overflow": "hidden",
           },
-          [
-            {
-              "height": "100%",
-              "width": "100%",
-            },
-          ],
-        ]
-      }
-    />
-    <Image
-      source={1}
-      style={
-        [
+          false,
           {
-            "borderRadius": 50,
-            "height": "90%",
-            "position": "absolute",
-            "width": "90%",
+            "borderRadius": 36,
+            "height": 72,
+            "width": 72,
           },
+          false,
         ]
       }
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#E5E8EB",
+            },
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ],
+          ]
+        }
+      />
+      <Image
+        source={1}
+        style={
+          [
+            {
+              "borderRadius": 50,
+              "height": "90%",
+              "position": "absolute",
+              "width": "90%",
+            },
+          ]
+        }
+      />
+    </View>
   </View>
   <View
     style={
@@ -320,69 +324,73 @@ exports[`My child list item component test Should render your child that has an
   }
 >
   <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        false,
-        {
-          "borderRadius": 36,
-          "height": 72,
-          "width": 72,
-        },
-        false,
-      ]
-    }
+    style={null}
   >
-    <ViewManagerAdapter_ExpoLinearGradient
-      proxiedProperties={
-        {
-          "colors": [
-            4281681564,
-            4284775115,
-            4292481661,
-          ],
-          "endPoint": [
-            0.9,
-            0.9,
-          ],
-          "locations": [
-            0,
-            0.55,
-            1,
-          ],
-          "startPoint": [
-            0.1,
-            0.1,
-          ],
-        }
-      }
+    <View
       style={
         [
           {
-            "height": "100%",
-            "width": "100%",
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
           },
-        ]
-      }
-    />
-    <Image
-      source={1}
-      style={
-        [
+          false,
           {
-            "borderRadius": 50,
-            "height": "90%",
-            "position": "absolute",
-            "width": "90%",
+            "borderRadius": 36,
+            "height": 72,
+            "width": 72,
           },
+          false,
         ]
       }
-    />
+    >
+      <ViewManagerAdapter_ExpoLinearGradient
+        proxiedProperties={
+          {
+            "colors": [
+              4281681564,
+              4284775115,
+              4292481661,
+            ],
+            "endPoint": [
+              0.9,
+              0.9,
+            ],
+            "locations": [
+              0,
+              0.55,
+              1,
+            ],
+            "startPoint": [
+              0.1,
+              0.1,
+            ],
+          }
+        }
+        style={
+          [
+            {
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+      />
+      <Image
+        source={1}
+        style={
+          [
+            {
+              "borderRadius": 50,
+              "height": "90%",
+              "position": "absolute",
+              "width": "90%",
+            },
+          ]
+        }
+      />
+    </View>
   </View>
   <View
     style={