@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {ChildListItem} from './child-list-item.component';
+import {View} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+
+export const ChildListItemPreview = ({}: {}) => {
+  const [selectedId, setSelectedId] = useState<string[]>([]);
+
+  const addIdToSelected = (id: string) => {
+    setSelectedId((current) => [...current, id]);
+  };
+  const isIdSelected = (id: string) => {
+    return selectedId.includes(id);
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ChildListItem
+        id={'id1'}
+        name={'Luca Janssens 123456789011223344556677889900'}
+        label={'De Teddybeertjes'}
+        selectable={true}
+        onSelect={addIdToSelected}
+        isSelected={isIdSelected('id1')}
+        sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+        textTimeTracker={'3u45m'}
+        visualStateTimeTracker={VisualState.SUCCESS}
+        onPressArrow={() => console.log('Arrow pressed')}
+        onPressText={() => console.log('text pressed')}
+      />
+      <ChildListItem
+        id={'id2'}
+        name={'Luca Janssens'}
+        label={'De Teddybeertjes'}
+        selectable={true}
+        isSelected={true}
+        onSelect={addIdToSelected}
+        sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+        textTimeTracker={'3u45m'}
+        visualStateTimeTracker={VisualState.SUCCESS}
+        onPressArrow={() => console.log('Arrow pressed')}
+        onPressText={() => console.log('text pressed')}
+      />
+      <ChildListItem
+        id={'id'}
+        name={'Luca Janssens'}
+        label={'De Teddybeertjes'}
+        selectable={false}
+        onSelect={addIdToSelected}
+        isSelected={isIdSelected('id')}
+        sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+        textTimeTracker={'3u45m'}
+        visualStateTimeTracker={VisualState.SUCCESS}
+        onPressArrow={() => console.log('Arrow pressed')}
+        onPressText={() => console.log('text pressed')}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+import {VisualState} from '../../../types/visual-state.enum';
+
+export const Stylesheet = (
+  isSelectedItem,
+  context,
+  selectable,
+  visualStateTimeTracker
+) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
+      overflow: 'hidden',
+      flexDirection: 'row',
+      backgroundColor: isSelectedItem
+        ? context.colors.main[6]
+        : context.colors.ui.white,
+    },
+    selectableContainer: {},
+    innerContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+        padding: Scale.xs,
+        borderTopRightRadius: Scale.l,
+        borderBottomRightRadius: Scale.l,
+        borderTopLeftRadius: Scale.xxl,
+        borderBottomLeftRadius: Scale.xxl,
+    },
+    pressableText: {
+      marginLeft: Scale.m,
+      flex: 1,
+      marginRight: selectable ? Scale.xxxl : Scale.xl,
+    },
+    iconContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    textName: {
+      ...Font.bigBold,
+      color: isSelectedItem ? context.colors.ui.white : context.colors.ui.black,
+    },
+    textLabel: {
+      ...Font.small,
+      color: isSelectedItem ? context.colors.ui.white : context.colors.ui.black,
+    },
+    trackerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    bal: [
+      {
+        width: Scale.s,
+        height: Scale.s,
+        borderRadius: Scale.s / 2,
+        marginRight: Scale.xxs,
+      },
+      visualStateTimeTracker === VisualState.DEFAULT && {
+        backgroundColor: context.colors.main['0'],
+      },
+      visualStateTimeTracker === VisualState.SUCCESS && {
+        backgroundColor: context.colors.ui.success.default,
+      },
+      visualStateTimeTracker === VisualState.WARNING && {
+        backgroundColor: context.colors.ui.warning.default,
+      },
+      visualStateTimeTracker === VisualState.ERROR && {
+        backgroundColor: context.colors.ui.error.default,
+      },
+    ],
+    textTracker: {
+      ...Font.tiny,
+      color: isSelectedItem ? context.colors.ui.white : context.colors.ui.black,
+    },
+  });

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {ChildListItem} from './child-list-item.component';
+import {Avatar} from '../avatar/avatar.component';
+import {SelectListItem} from '../select-list-item/select-list.component-item';
+import renderer from 'react-test-renderer';
+import {VisualState} from '../../../types/visual-state.enum';
+
+describe('test child list item component', () => {
+  it('make text that is too long end in ...', () => {
+    const tree = render
+      .create(
+        <ChildListItem
+          id={1}
+          name={'Jean-Paul Janssens-Peeters'}
+          label={'De Teddybeertjes'}
+          selectable={true}
+          isSelected={false}
+          onPressArrow={() => console.log('pressedArrow')}
+          onPressText={() => console.log('pressedText')}
+          onSelect={() => console.log('selected')}
+          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+          textTimeTracker={'time tracker'}
+          visualStateTimeTracker={VisualState.SUCCESS}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('background is blue and text is white when isSelected is true', () => {
+    const tree = render
+      .create(
+        <ChildListItem
+          id={1}
+          name={'Jean-Paul Janssens-Peeters'}
+          label={'De Teddybeertjes'}
+          selectable={true}
+          isSelected={true}
+          onPressArrow={() => console.log('pressedArrow')}
+          onPressText={() => console.log('pressedText')}
+          onSelect={() => console.log('selected')}
+          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+          textTimeTracker={'time tracker'}
+          visualStateTimeTracker={VisualState.SUCCESS}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('arrow appears when selectable is false', () => {
+    const tree = render
+      .create(
+        <ChildListItem
+          id={1}
+          name={'Jean-Paul Janssens-Peeters'}
+          label={'De Teddybeertjes'}
+          selectable={false}
+          isSelected={false}
+          onPressArrow={() => console.log('pressedArrow')}
+          onPressText={() => console.log('pressedText')}
+          onSelect={() => console.log('selected')}
+          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+          textTimeTracker={'time tracker'}
+          visualStateTimeTracker={VisualState.SUCCESS}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test contact-item renders a contact-item with a red avatar and an extra pill when isBlocked is true  1`] = `
+<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]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          {
+            "borderRadius": 20,
+            "height": 40,
+            "width": 40,
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "textTransform": "uppercase",
+            },
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 16,
+              "lineHeight": 22.4,
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        DD
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          }
+        }
+      >
+        Doe
+         
+        Doe
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 11,
+            "lineHeight": 17.9,
+          }
+        }
+      >
+        ouder 1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "marginLeft": 8,
+        }
+      }
+    >
+      <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>
+</View>
+`;
+
+exports[`test contact-item renders a contact-item, with an avatar 1`] = `
+<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]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          {
+            "borderRadius": 20,
+            "height": 40,
+            "width": 40,
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "textTransform": "uppercase",
+            },
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 16,
+              "lineHeight": 22.4,
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        JD
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          }
+        }
+      >
+        John
+         
+        Doe
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 11,
+            "lineHeight": 17.9,
+          }
+        }
+      >
+        ouder 1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "marginLeft": 8,
+        }
+      }
+    >
+      <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>
+</View>
+`;

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

@@ -0,0 +1,61 @@
+import React, {useContext} from 'react';
+import {Stylesheet} from './contact-item.styles';
+import {Avatar} from '../avatar/avatar.component';
+import {Initials} from '../../../models/initials.model';
+import {ThemeCtx} from '../../../context/theme.context';
+import {View, Text} from 'react-native';
+import {Pressable} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {Pill} from '../pill/pill.component';
+import {VisualState} from '../../../types/visual-state.enum';
+import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
+
+type ContactItemProps = {
+  name: string;
+  firstname: string;
+  label: string;
+  onPress?: () => void;
+  isBlocked?: boolean;
+};
+
+const ContactItem = ({
+  name,
+  firstname,
+  label,
+  onPress,
+  isBlocked,
+}: ContactItemProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <Pressable onPress={onPress}>
+      <View style={styles.container}>
+        {isBlocked ? (
+          <Avatar
+            isBlocked={true}
+            source={Initials.for(firstname, name)}
+            size={Size.SMALL}
+          />
+        ) : (
+          <Avatar source={Initials.for(firstname, name)} size={Size.SMALL} />
+        )}
+        <View style={styles.textContainer}>
+          <Text style={styles.textNames}>
+            {firstname} {name}
+          </Text>
+          <Text style={styles.textSubtitle}>{label}</Text>
+        </View>
+        {isBlocked ? (
+          <Pill label={'Geblokkeerd'} variant={VisualState.ERROR} />
+        ) : null}
+        <View style={styles.iconSquare}>
+          {/*<FilterIcon />*/}
+          <ChevronRightIcon />
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export {ContactItem as ContactItem};

package/src/components/atoms/contact-item/contact-item.preview.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {ContactItem} from './contact-item.component';
+
+const {View} = require('react-native');
+
+export const ContactItemPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ContactItem
+        name={'Doe'}
+        firstname={'John'}
+        label={'Ouder 1'}
+        onPress={() => console.log('clicked')}
+      />
+      <ContactItem
+        name={'Doe'}
+        firstname={'John'}
+        label={'Ouder 1'}
+        onPress={() => console.log('clicked')}
+        isBlocked={true}
+      />
+    </View>
+  );
+};

package/src/components/atoms/contact-item/contact-item.styles.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    textContainer: {
+      flex: 1,
+      marginLeft: Scale.xs,
+    },
+    textNames: {
+      ...Font.regularBold,
+    },
+    textSubtitle: {
+      ...Font.tiny,
+    },
+    iconSquare: {
+      marginLeft: Scale.xs,
+    },
+  });

package/src/components/atoms/contact-item/contact-item.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ContactItem} from './contact-item.component';
+
+describe('test contact-item', () => {
+  it('renders a contact-item, with an avatar', () => {
+    const tree = renderer
+      .create(<ContactItem name={'Doe'} firstname={'John'} label={'ouder 1'} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a contact-item with a red avatar and an extra pill when isBlocked is true ', () => {
+    const tree = renderer
+      .create(<ContactItem name={'Doe'} firstname={'Doe'} label={'ouder 1'} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});