@tactics/toddle-styleguide 1.2.8 → 1.2.9

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

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useCallback, useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View} from 'react-native';
 import {Initials} from '../../../models/initials.model';
@@ -8,82 +8,55 @@ import {Stylesheet} from './my-child-list-item.styles';
 import {Icon} from '../../../icons/index';
 import {SmallText, TinyText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
-import {Pill} from '../../molecules/pill/pill.component';
-import {VisualState} from '../../../types/visual-state.enum';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 
 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 const MyChildListItem = ({
   id,
   name,
-  department,
   age,
   sourceAvatar,
-  onPress,
-  isActive,
+  onPressChild,
+  onPressArrow,
 }: MyChildListItemProps) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-  return isActive ? (
-    <Pressable style={styles.container} onPress={() => onPress(id)}>
-      <Avatar source={sourceAvatar} size={Size.MEDIUM} />
-      <View style={styles.childTextContainer}>
-        <TinyText textAlign={'left'}>{age} jaar</TinyText>
-        <Heading2
-          bold={true}
-          textAlign={'left'}
-          numberOfLines={1}
-          ellipsizeMode={'tail'}
-        >
-          {name}
-        </Heading2>
-        <SmallText textAlign={'left'}>{department}</SmallText>
-      </View>
-      <View style={styles.iconContainer}>
-        <Icon
-          style={'regular'}
-          name={'chevron-right'}
-          size={20}
-          color={Context.colors.ui.black}
-        />
-      </View>
-    </Pressable>
-  ) : (
-    <Pressable style={styles.container} onPress={() => onPress(id)}>
-      <Avatar source={sourceAvatar} size={Size.MEDIUM} isActive={false} />
-      <View style={styles.childTextContainer}>
-        <TinyText textAlign={'left'}>{age} jaar</TinyText>
-        <Heading2
-          bold={true}
-          textAlign={'left'}
-          numberOfLines={1}
-          ellipsizeMode={'tail'}
-        >
-          {name}
-        </Heading2>
-        <View style={styles.pillContainer}>
-          <Pill
-            label={'Geen actieve inschrijving'}
-            visualState={VisualState.INACTIVE}
-          />
+  const onPressArrowCallback = useCallback(() => {
+    onPressArrow(id);
+  }, [id, onPressArrow]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.innerContainer} onPress={() => onPressChild(id)}>
+        <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+        <View style={styles.childTextContainer}>
+          <TinyText textAlign={'left'}>{age}</TinyText>
+          <Heading2
+            bold={true}
+            textAlign={'left'}
+            numberOfLines={1}
+            ellipsizeMode={'tail'}
+          >
+            {name}
+          </Heading2>
         </View>
-      </View>
-      <View style={styles.iconContainer}>
+      </Pressable>
+      <Pressable onPress={onPressArrowCallback} style={styles.iconContainer}>
         <Icon
           style={'regular'}
           name={'chevron-right'}
           size={20}
-          color={Context.colors.ui.black}
+          color={context.colors.ui.black}
         />
-      </View>
-    </Pressable>
+      </Pressable>
+    </View>
   );
 };

package/src/components/organisms/my-child-list-item/my-child-list-item.preview.tsx

@@ -1,39 +1,51 @@
 import React from 'react';
 import {MyChildListItem} from './my-child-list-item.component';
-import {View} from 'react-native';
+import {FlatList, View} from 'react-native';
+
+interface IData {
+  id: string;
+  name: string;
+  age: number;
+}
+
+const data: IData[] = [];
+for (let i = 0; i < 6; i++) {
+  data.push({
+    id: 'child' + i,
+    name: 'Children with very long names because in 2023 we give our kids special name',
+    age: Math.floor(Math.random() * (6 - 2 + 1) + 2),
+  });
+}
 
 export const MyChildListItemPreview = ({}: {}) => {
+  const renderMyChildList = ({item}: any) => {
+    return (
+      <MyChildListItem
+        id={item.id}
+        name={item.name}
+        age={item.age}
+        sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
+        onPressChild={(id) => console.log('Pressed ', id)}
+        onPressArrow={(id) => console.log('Pressed arrow ', id)}
+      />
+    );
+  };
+
   return (
     <View
       style={{
         flex: 1,
-        justifyContent: 'center',
         padding: 16,
+        justifyContent: 'center',
         backgroundColor: 'white',
       }}
     >
-      <View style={{marginBottom: 24}}>
-        <MyChildListItem
-          id={'child1'}
-          name={'Luca JannsensJannsensJannsensJannsensJannsensJannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('Pressed')}
-          isActive={true}
-        />
-      </View>
-      <View style={{marginBottom: 24}}>
-        <MyChildListItem
-          id={'child2'}
-          name={'Luca JannsensJannsensJannsensJannsensJannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('Pressed')}
-          isActive={false}
-        />
-      </View>
+      <FlatList
+        style={{flex: 1}}
+        data={data}
+        renderItem={renderMyChildList}
+        keyExtractor={(item) => item.id}
+      />
     </View>
   );
 };

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

@@ -1,29 +1,33 @@
-export function Stylesheet(Context: any): {
-  container: {
-    width: string;
-    flexDirection: 'row';
-    alignItems: 'center';
-    padding: number;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    borderBottomLeftRadius: number;
-    overflow: 'hidden';
-    backgroundColor: any;
-  };
-  childTextContainer: {
-    flex: number;
-    alignItems: 'flex-start';
-    justifyContent: 'center';
-    marginLeft: number;
-  };
-  iconContainer: {
-    alignItems: 'flex-end';
-    justifyContent: 'center';
-    width: number;
-    height: number;
-  };
-  pillContainer: {
-    marginTop: number;
-  };
+export function Stylesheet(context: any): {
+    container: {
+        width: string;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        flexDirection: "row";
+        backgroundColor: any;
+    };
+    innerContainer: {
+        flex: number;
+        padding: number;
+        flexDirection: "row";
+        alignItems: "center";
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    childTextContainer: {
+        flex: number;
+        marginLeft: number;
+    };
+    iconContainer: {
+        alignItems: "flex-end";
+        justifyContent: "center";
+        paddingRight: number;
+        width: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
 };

package/src/components/organisms/my-child-list-item/my-child-list-item.styles.js

@@ -1,32 +1,37 @@
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (Context) =>
+export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
       width: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
       flexDirection: 'row',
-      alignItems: 'center',
+      backgroundColor: context.colors.ui.white,
+    },
+    innerContainer: {
+      flex: 1,
       padding: Scale.xs,
-      borderTopLeftRadius: Scale.xxl,
+      flexDirection: 'row',
+      alignItems: 'center',
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
-      backgroundColor: Context.colors.ui.white,
     },
     childTextContainer: {
       flex: 1,
-      alignItems: 'flex-start',
-      justifyContent: 'center',
       marginLeft: Scale.l,
     },
     iconContainer: {
       alignItems: 'flex-end',
       justifyContent: 'center',
-      width: 44,
-      height: 44,
-    },
-    pillContainer: {
-      marginTop: Scale.xxxs,
+      paddingRight: Scale.xs,
+      width: Scale.m * 3,
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
     },
   });

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

@@ -3,34 +3,17 @@ import renderer from 'react-test-renderer';
 import {MyChildListItem} from './my-child-list-item.component';
 
 describe('My child list item component test', () => {
-  it('Should render your child that has an active subscription', () => {
+  it('Should render your child', () => {
     const tree = renderer
       .create(
         <MyChildListItem
-          id={1}
+          id={'kind1'}
           name={'Luca Jannsens'}
           department={'De Teddybeertjes'}
-          age={2}
+          age={'leeftijd'}
           sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('pressed Child')}
-          isActive={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('Should render your child but with an inactive subscription', () => {
-    const tree = renderer
-      .create(
-        <MyChildListItem
-          id={1}
-          name={'Luca Jannsens'}
-          department={'De Teddybeertjes'}
-          age={2}
-          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          onPress={() => console.log('pressed Child')}
-          isActive={false}
+          onPressChild={() => console.log('pressed Child')}
+          onPressArrow={() => console.log('pressed arrow')}
         />
       )
       .toJSON();

package/src/components/organisms/person-info-card/person-info-card.component.d.ts

@@ -1,21 +1,13 @@
-import {ImageSourcePropType, ViewStyle} from 'react-native';
-import {Initials} from '../../../models/initials.model';
+import { ImageSourcePropType, ViewStyle } from 'react-native';
+import { Initials } from '../../../models/initials.model';
 interface IContactInfoCard {
-  source: ImageSourcePropType | Initials;
-  name: string;
-  label?: string;
-  isBlocked?: boolean;
-  isActive?: boolean;
-  style?: ViewStyle;
-  isLoading?: boolean;
+    source: ImageSourcePropType | Initials;
+    name: string;
+    label?: string;
+    isBlocked?: boolean;
+    isActive?: boolean;
+    style?: ViewStyle;
+    isLoading?: boolean;
 }
-export declare const PersonInfoCard: ({
-  source,
-  isBlocked,
-  isActive,
-  name,
-  label,
-  style,
-  isLoading,
-}: IContactInfoCard) => JSX.Element;
+export declare const PersonInfoCard: ({ source, isBlocked, isActive, name, label, style, isLoading, }: IContactInfoCard) => JSX.Element;
 export {};

package/src/components/organisms/tab-view/tab-view.component.d.ts

@@ -1,15 +1,11 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 interface TabViewProps {
-  tabItem: {
-    value: string;
-    label: string;
-  }[];
-  children: ReactNode;
-  setTabValue: (value: string) => void;
+    tabItem: {
+        value: string;
+        label: string;
+    }[];
+    children: ReactNode;
+    setTabValue: (value: string) => void;
 }
-export declare const TabView: ({
-  tabItem,
-  setTabValue,
-  children,
-}: TabViewProps) => JSX.Element;
+export declare const TabView: ({ tabItem, setTabValue, children }: TabViewProps) => JSX.Element;
 export {};

package/src/components/organisms/text-bubble/text-bubble.component.d.ts

@@ -1,26 +1,17 @@
-import {VisualState} from '../../../types/visual-state.enum';
-import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { VisualState } from '../../../types/visual-state.enum';
+import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TextBubbleProps = {
-  id: string;
-  text: string;
-  visualState: VisualState;
-  bubbleAlignment: BubbleAlignment;
-  timestamp: ToddleDateTime;
-  send: boolean;
-  onFail: (id: string) => void;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
+    id: string;
+    text: string;
+    visualState: VisualState;
+    bubbleAlignment: BubbleAlignment;
+    timestamp: ToddleDateTime;
+    timestampLabel?: string;
+    send: boolean;
+    onFail: (id: string) => void;
+    onEdit: (id: string) => void;
+    onDelete: (id: string) => void;
 };
-declare const TextBubble: ({
-  id,
-  text,
-  visualState,
-  bubbleAlignment,
-  timestamp,
-  send,
-  onFail,
-  onEdit,
-  onDelete,
-}: TextBubbleProps) => JSX.Element;
-export {TextBubble as TextBubble};
+declare const TextBubble: ({ id, text, visualState, bubbleAlignment, timestamp, timestampLabel, send, onFail, onEdit, onDelete, }: TextBubbleProps) => JSX.Element;
+export { TextBubble as TextBubble };

package/src/components/organisms/text-bubble/text-bubble.component.tsx

@@ -18,6 +18,7 @@ type TextBubbleProps = {
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
   timestamp: ToddleDateTime;
+  timestampLabel?: string;
   send: boolean;
   onFail: (id: string) => void;
   onEdit: (id: string) => void;
@@ -30,6 +31,7 @@ const TextBubble = ({
   visualState,
   bubbleAlignment,
   timestamp,
+  timestampLabel,
   send,
   onFail,
   onEdit,
@@ -68,7 +70,7 @@ const TextBubble = ({
         </View>
       )}
       <View style={styles.timestampContainer}>
-        <Timestamp sent={timestamp} />
+        <Timestamp sent={timestamp} label={timestampLabel} />
       </View>
     </View>
   );

package/src/components/organisms/text-bubble/text-bubble.preview.tsx

@@ -9,6 +9,9 @@ const {View} = require('react-native');
 export const TextBubblePreview = ({}: {}) => {
   const [sentTimeMessage, setSentTimeMessage] = useState(ToddleDateTime.now());
 
+  const dateTimeString = '2023-11-28T09:12:00';
+  const alternativeDateTime = ToddleDateTime.fromISO(dateTimeString);
+
   return (
     <View
       style={{
@@ -22,7 +25,8 @@ export const TextBubblePreview = ({}: {}) => {
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus."
         bubbleAlignment={BubbleAlignment.SENT}
         visualState={VisualState.DEFAULT}
-        timestamp={sentTimeMessage}
+        timestamp={alternativeDateTime}
+        timestampLabel={'ingevuld op'}
         send={true}
         onFail={() => alert('Try to resend')}
         onEdit={() => alert('Edit the message')}
@@ -54,7 +58,7 @@ export const TextBubblePreview = ({}: {}) => {
         id={'4'}
         text="Error!"
         bubbleAlignment={BubbleAlignment.SENT}
-        visualState={VisualState.ERROR}
+        visualState={VisualState.WARNING}
         timestamp={sentTimeMessage}
         send={false}
         onFail={() => alert('Try to resend')}
@@ -65,7 +69,7 @@ export const TextBubblePreview = ({}: {}) => {
         id={'5'}
         text="Niet verzonden! Probeer het opnieuw aub! Swipe en refresh!"
         bubbleAlignment={BubbleAlignment.SENT}
-        visualState={VisualState.ERROR}
+        visualState={VisualState.WARNING}
         timestamp={sentTimeMessage}
         send={false}
         onFail={() => alert('Try to resend')}
@@ -76,7 +80,7 @@ export const TextBubblePreview = ({}: {}) => {
         id={'6'}
         text="We hebben uw betaling van vorige maand nog niet ontvangen!"
         bubbleAlignment={BubbleAlignment.RECEIVE}
-        visualState={VisualState.ERROR}
+        visualState={VisualState.WARNING}
         timestamp={sentTimeMessage}
         send={true}
         onFail={() => alert('Try to resend')}

package/src/components/organisms/text-bubble/text-bubble.styles.d.ts

@@ -1,45 +1,32 @@
-export function Stylesheet(
-  context: any,
-  bubbleAlignment: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      rootContainer: {
+export function Stylesheet(context: any, bubbleAlignment: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    rootContainer: {
         width: string;
-      }[];
-      textBubbleRootContainer: (
-        | {
-            maxWidth: string;
-            minWidth: string;
-            alignSelf?: undefined;
-          }
-        | {
-            alignSelf: string;
-            maxWidth?: undefined;
-            minWidth?: undefined;
-          }
-      )[];
-      failedBubbleRootContainer: (
-        | {
-            maxWidth: string;
-            minWidth: string;
-            alignSelf?: undefined;
-          }
-        | {
-            alignSelf: string;
-            maxWidth?: undefined;
-            minWidth?: undefined;
-          }
-      )[];
-      timestampContainer: (
-        | {
-            maxWidth: string;
-            alignSelf?: undefined;
-          }
-        | {
-            alignSelf: string;
-            maxWidth?: undefined;
-          }
-      )[];
-    }>;
-import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';
+        gap: number;
+    }[];
+    textBubbleRootContainer: ({
+        maxWidth: string;
+        minWidth: string;
+        alignSelf?: undefined;
+    } | {
+        alignSelf: string;
+        maxWidth?: undefined;
+        minWidth?: undefined;
+    })[];
+    failedBubbleRootContainer: ({
+        maxWidth: string;
+        minWidth: string;
+        alignSelf?: undefined;
+    } | {
+        alignSelf: string;
+        maxWidth?: undefined;
+        minWidth?: undefined;
+    })[];
+    timestampContainer: ({
+        maxWidth: string;
+        alignSelf?: undefined;
+    } | {
+        alignSelf: string;
+        maxWidth?: undefined;
+    })[];
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

package/src/components/organisms/text-bubble/text-bubble.styles.js

@@ -1,11 +1,13 @@
 import {StyleSheet} from 'react-native';
 import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context, bubbleAlignment) =>
   StyleSheet.create({
     rootContainer: [
       {
         width: '100%',
+        gap: Scale.xxs,
       },
     ],
     textBubbleRootContainer: [

package/src/components/templates/modal/components/fade-panel.component.d.ts

@@ -1,20 +1,12 @@
 import React from 'react';
 type FadePanelProps = {
-  title: string;
-  subtitle?: string;
-  isVisible: boolean;
-  onClose: () => void;
-  maxHeight: number;
-  children: React.ReactNode;
-  scrollable: boolean | undefined;
+    title: string;
+    subtitle?: string;
+    isVisible: boolean;
+    onClose: () => void;
+    maxHeight: number;
+    children: React.ReactNode;
+    scrollable: boolean | undefined;
 };
-export declare const FadePanel: ({
-  title,
-  subtitle,
-  isVisible,
-  onClose,
-  maxHeight,
-  children,
-  scrollable,
-}: FadePanelProps) => JSX.Element;
+export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, scrollable, }: FadePanelProps) => JSX.Element;
 export {};

package/src/components/templates/modal/components/fade-panel.component.tsx

@@ -36,7 +36,7 @@ export const FadePanel = ({
     } else if (!isVisible) {
       Animated.timing(fadeAnimation, {
         toValue: 0,
-        duration: 600,
+        duration: 100,
         useNativeDriver: true,
       }).start();
     }