@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,635 @@
+// 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": 48,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 48,
+      "borderTopRightRadius": 24,
+      "flexDirection": "row",
+      "overflow": "hidden",
+      "width": "100%",
+    }
+  }
+>
+  <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": "center",
+        "borderBottomLeftRadius": 48,
+        "borderBottomRightRadius": 24,
+        "borderTopLeftRadius": 48,
+        "borderTopRightRadius": 24,
+        "flex": 1,
+        "flexDirection": "row",
+        "padding": 8,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          false,
+          {
+            "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
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 16,
+          "marginRight": 32,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginRight": 4,
+                "width": 12,
+              },
+              false,
+              {
+                "backgroundColor": "#83D56C",
+              },
+              false,
+              false,
+            ]
+          }
+        />
+        <Text
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            }
+          }
+        >
+          time tracker
+        </Text>
+      </View>
+      <View>
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 24,
+              "lineHeight": 30.2,
+            }
+          }
+        >
+          Jean-Paul Janssens-Peeters
+        </Text>
+        <Text
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            }
+          }
+        >
+          De Teddybeertjes
+        </Text>
+      </View>
+    </View>
+  </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": "center",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={27}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </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": 48,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 48,
+      "borderTopRightRadius": 24,
+      "flexDirection": "row",
+      "overflow": "hidden",
+      "width": "100%",
+    }
+  }
+>
+  <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": "center",
+        "borderBottomLeftRadius": 48,
+        "borderBottomRightRadius": 24,
+        "borderTopLeftRadius": 48,
+        "borderTopRightRadius": 24,
+        "flex": 1,
+        "flexDirection": "row",
+        "padding": 8,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          false,
+          {
+            "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
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 16,
+          "marginRight": 64,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginRight": 4,
+                "width": 12,
+              },
+              false,
+              {
+                "backgroundColor": "#83D56C",
+              },
+              false,
+              false,
+            ]
+          }
+        />
+        <Text
+          style={
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            }
+          }
+        >
+          time tracker
+        </Text>
+      </View>
+      <View>
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 24,
+              "lineHeight": 30.2,
+            }
+          }
+        >
+          Jean-Paul Janssens-Peeters
+        </Text>
+        <Text
+          style={
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            }
+          }
+        >
+          De Teddybeertjes
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test child list item component make text that is too long end in ... 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderBottomLeftRadius": 48,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 48,
+      "borderTopRightRadius": 24,
+      "flexDirection": "row",
+      "overflow": "hidden",
+      "width": "100%",
+    }
+  }
+>
+  <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": "center",
+        "borderBottomLeftRadius": 48,
+        "borderBottomRightRadius": 24,
+        "borderTopLeftRadius": 48,
+        "borderTopRightRadius": 24,
+        "flex": 1,
+        "flexDirection": "row",
+        "padding": 8,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          false,
+          {
+            "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
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 16,
+          "marginRight": 64,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginRight": 4,
+                "width": 12,
+              },
+              false,
+              {
+                "backgroundColor": "#83D56C",
+              },
+              false,
+              false,
+            ]
+          }
+        />
+        <Text
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            }
+          }
+        >
+          time tracker
+        </Text>
+      </View>
+      <View>
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 24,
+              "lineHeight": 30.2,
+            }
+          }
+        >
+          Jean-Paul Janssens-Peeters
+        </Text>
+        <Text
+          style={
+            {
+              "color": "#1F2933",
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            }
+          }
+        >
+          De Teddybeertjes
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,81 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {ImageSourcePropType, Pressable, View, Text} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {Size} from '../../../types/size.enum';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Avatar} from '../avatar/avatar.component';
+import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
+import {Stylesheet} from './child-list-item.styles';
+
+type ChildListItemProps = {
+  id: string;
+  name: string;
+  label: string;
+  selectable: boolean;
+  isSelected: boolean;
+  onPressArrow: () => void;
+  onPressText: () => void;
+  onSelect: (id: string) => void;
+  sourceAvatar: ImageSourcePropType | Initials;
+  textTimeTracker: string;
+  visualStateTimeTracker: VisualState;
+};
+
+const ChildListItem = ({
+  id,
+  name,
+  label,
+  selectable,
+  isSelected,
+  onPressArrow,
+  onPressText,
+  onSelect,
+  sourceAvatar,
+  textTimeTracker,
+  visualStateTimeTracker,
+}: ChildListItemProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(
+    isSelected,
+    context,
+    selectable,
+    visualStateTimeTracker
+  );
+
+  const onPressSelectable = () => {
+    selectable ? onSelect(id) : onPressText();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={onPressSelectable} style={styles.innerContainer}>
+        <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+        <View style={styles.pressableText}>
+          <View style={styles.trackerContainer}>
+            <View style={styles.bal} />
+            <Text style={styles.textTracker}>{textTimeTracker}</Text>
+          </View>
+          <View>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={styles.textName}
+            >
+              {name}
+            </Text>
+            <Text style={styles.textLabel}>{label}</Text>
+          </View>
+        </View>
+      </Pressable>
+      <>
+        {!selectable ? (
+          <Pressable onPress={onPressArrow} style={styles.iconContainer}>
+            <ChevronRightIcon />
+          </Pressable>
+        ) : null}
+      </>
+    </View>
+  );
+};
+export {ChildListItem as ChildListItem};