@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

@@ -0,0 +1,1040 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test child list item component arrow appears when selectable is false 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderBottomLeftRadius": 32,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 32,
+      "borderTopRightRadius": 24,
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <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",
+          "borderBottomLeftRadius": 48,
+          "borderBottomRightRadius": 24,
+          "borderTopLeftRadius": 48,
+          "borderTopRightRadius": 24,
+          "flex": 1,
+          "flexDirection": "row",
+          "padding": 8,
+        }
+      }
+    >
+      <View
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#647ACB",
+                "justifyContent": "center",
+                "overflow": "hidden",
+              },
+              false,
+              {
+                "borderRadius": 36,
+                "height": 72,
+                "width": 72,
+              },
+              false,
+            ]
+          }
+        >
+          <ViewManagerAdapter_ExpoLinearGradient
+            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={
+          {
+            "flex": 1,
+            "marginLeft": 24,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 6,
+                    "height": 12,
+                    "marginRight": 4,
+                    "width": 12,
+                  },
+                  false,
+                  {
+                    "backgroundColor": "#83D56C",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            />
+            <View>
+              <Text
+                style={
+                  [
+                    [
+                      {
+                        "fontFamily": "Montserrat",
+                        "fontSize": 11,
+                        "lineHeight": 17.9,
+                      },
+                    ],
+                    {
+                      "color": "#1F2933",
+                      "textAlign": undefined,
+                      "width": "100%",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                time tracker
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View>
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "SourceSansProBold",
+                    "fontSize": 24,
+                    "lineHeight": 30.2,
+                  },
+                ],
+                {
+                  "color": "#1F2933",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            Jean-Paul Janssens-Peeters
+          </Text>
+          <Text
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "Montserrat",
+                    "fontSize": 13,
+                    "lineHeight": 20.4,
+                  },
+                ],
+                {
+                  "color": "#1F2933",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            De Teddybeertjes
+          </Text>
+        </View>
+      </View>
+    </View>
+    <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": "flex-end",
+          "borderBottomRightRadius": 24,
+          "borderTopRightRadius": 24,
+          "justifyContent": "center",
+          "paddingRight": 8,
+          "width": 48,
+        }
+      }
+    >
+      <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"
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            propList={
+              [
+                "stroke",
+                "strokeWidth",
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            stroke={
+              {
+                "payload": 4280232243,
+                "type": 0,
+              }
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "marginBottom": 8,
+        "marginLeft": 96,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E5E8EB",
+          "borderRadius": 50,
+          "paddingBottom": 4,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        tag1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E5E8EB",
+          "borderRadius": 50,
+          "paddingBottom": 4,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        tag2
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test child list item component background is blue and text is white when isSelected is true 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#7B93DB",
+      "borderBottomLeftRadius": 32,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 32,
+      "borderTopRightRadius": 24,
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <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",
+          "borderBottomLeftRadius": 48,
+          "borderBottomRightRadius": 24,
+          "borderTopLeftRadius": 48,
+          "borderTopRightRadius": 24,
+          "flex": 1,
+          "flexDirection": "row",
+          "padding": 8,
+        }
+      }
+    >
+      <View
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#647ACB",
+                "justifyContent": "center",
+                "overflow": "hidden",
+              },
+              false,
+              {
+                "borderRadius": 36,
+                "height": 72,
+                "width": 72,
+              },
+              false,
+            ]
+          }
+        >
+          <ViewManagerAdapter_ExpoLinearGradient
+            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={
+          {
+            "flex": 1,
+            "marginLeft": 24,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 6,
+                    "height": 12,
+                    "marginRight": 4,
+                    "width": 12,
+                  },
+                  false,
+                  {
+                    "backgroundColor": "#83D56C",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            />
+            <View>
+              <Text
+                style={
+                  [
+                    [
+                      {
+                        "fontFamily": "Montserrat",
+                        "fontSize": 11,
+                        "lineHeight": 17.9,
+                      },
+                    ],
+                    {
+                      "color": "#FFFFFF",
+                      "textAlign": undefined,
+                      "width": "100%",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                time tracker
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View>
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "SourceSansProBold",
+                    "fontSize": 24,
+                    "lineHeight": 30.2,
+                  },
+                ],
+                {
+                  "color": "#FFFFFF",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            Jean-Paul Janssens-Peeters
+          </Text>
+          <Text
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "Montserrat",
+                    "fontSize": 13,
+                    "lineHeight": 20.4,
+                  },
+                ],
+                {
+                  "color": "#FFFFFF",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            De Teddybeertjes
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test child list item component make text that is too long end in ... and has tags 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderBottomLeftRadius": 32,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 32,
+      "borderTopRightRadius": 24,
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <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",
+          "borderBottomLeftRadius": 48,
+          "borderBottomRightRadius": 24,
+          "borderTopLeftRadius": 48,
+          "borderTopRightRadius": 24,
+          "flex": 1,
+          "flexDirection": "row",
+          "padding": 8,
+        }
+      }
+    >
+      <View
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#647ACB",
+                "justifyContent": "center",
+                "overflow": "hidden",
+              },
+              false,
+              {
+                "borderRadius": 36,
+                "height": 72,
+                "width": 72,
+              },
+              false,
+            ]
+          }
+        >
+          <ViewManagerAdapter_ExpoLinearGradient
+            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={
+          {
+            "flex": 1,
+            "marginLeft": 24,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 6,
+                    "height": 12,
+                    "marginRight": 4,
+                    "width": 12,
+                  },
+                  false,
+                  {
+                    "backgroundColor": "#83D56C",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            />
+            <View>
+              <Text
+                style={
+                  [
+                    [
+                      {
+                        "fontFamily": "Montserrat",
+                        "fontSize": 11,
+                        "lineHeight": 17.9,
+                      },
+                    ],
+                    {
+                      "color": "#1F2933",
+                      "textAlign": undefined,
+                      "width": "100%",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                time tracker
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View>
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "SourceSansProBold",
+                    "fontSize": 24,
+                    "lineHeight": 30.2,
+                  },
+                ],
+                {
+                  "color": "#1F2933",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            Jean-Paul Janssens-Peeters
+          </Text>
+          <Text
+            style={
+              [
+                [
+                  {
+                    "fontFamily": "Montserrat",
+                    "fontSize": 13,
+                    "lineHeight": 20.4,
+                  },
+                ],
+                {
+                  "color": "#1F2933",
+                  "textAlign": undefined,
+                  "width": "100%",
+                },
+                undefined,
+              ]
+            }
+          >
+            De Teddybeertjes
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "marginBottom": 8,
+        "marginLeft": 96,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E5E8EB",
+          "borderRadius": 50,
+          "paddingBottom": 4,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        tag1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E5E8EB",
+          "borderRadius": 50,
+          "paddingBottom": 4,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        tag2
+      </Text>
+    </View>
+  </View>
+</View>
+`;