@tactics/toddle-styleguide 1.2.8 → 1.2.9

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

@@ -5,9 +5,9 @@ exports[`test child list item component arrow appears when selectable is false 1
   style={
     {
       "backgroundColor": "#FFFFFF",
-      "borderBottomLeftRadius": 48,
+      "borderBottomLeftRadius": 32,
       "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 48,
+      "borderTopLeftRadius": 32,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
       "width": "100%",
@@ -46,7 +46,6 @@ exports[`test child list item component arrow appears when selectable is false 1
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "alignItems": "center",
         "borderBottomLeftRadius": 48,
         "borderBottomRightRadius": 24,
         "borderTopLeftRadius": 48,
@@ -239,6 +238,85 @@ exports[`test child list item component arrow appears when selectable is false 1
           De Teddybeertjes
         </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "flexWrap": "wrap",
+            "gap": 6,
+            "marginTop": 10,
+          }
+        }
+      >
+        <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>
   </View>
   <View
@@ -348,9 +426,9 @@ exports[`test child list item component background is blue and text is white whe
   style={
     {
       "backgroundColor": "#7B93DB",
-      "borderBottomLeftRadius": 48,
+      "borderBottomLeftRadius": 32,
       "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 48,
+      "borderTopLeftRadius": 32,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
       "width": "100%",
@@ -389,7 +467,6 @@ exports[`test child list item component background is blue and text is white whe
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "alignItems": "center",
         "borderBottomLeftRadius": 48,
         "borderBottomRightRadius": 24,
         "borderTopLeftRadius": 48,
@@ -587,14 +664,14 @@ exports[`test child list item component background is blue and text is white whe
 </View>
 `;
 
-exports[`test child list item component make text that is too long end in ... 1`] = `
+exports[`test child list item component make text that is too long end in ... and has tags 1`] = `
 <View
   style={
     {
       "backgroundColor": "#FFFFFF",
-      "borderBottomLeftRadius": 48,
+      "borderBottomLeftRadius": 32,
       "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 48,
+      "borderTopLeftRadius": 32,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
       "width": "100%",
@@ -633,7 +710,6 @@ exports[`test child list item component make text that is too long end in ... 1`
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "alignItems": "center",
         "borderBottomLeftRadius": 48,
         "borderBottomRightRadius": 24,
         "borderTopLeftRadius": 48,
@@ -826,6 +902,85 @@ exports[`test child list item component make text that is too long end in ... 1`
           De Teddybeertjes
         </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "flexWrap": "wrap",
+            "gap": 6,
+            "marginTop": 10,
+          }
+        }
+      >
+        <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>
   </View>
 </View>

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

@@ -1,35 +1,21 @@
 import * as React from 'react';
-import {ImageSourcePropType} from 'react-native';
-import {Initials} from '../../../models/initials.model';
-import {VisualState} from '../../../types/visual-state.enum';
+import { ImageSourcePropType } from 'react-native';
+import { Initials } from '../../../models/initials.model';
+import { VisualState } from '../../../types/visual-state.enum';
 type ChildListItemProps = {
-  id: string;
-  name: string;
-  department: string;
-  selectable: boolean;
-  isSelected: boolean;
-  onPressArrow: (id: string) => void;
-  onPressText: (id: string) => void;
-  onLongPress: (id: string) => void;
-  onSelect: (id: string) => void;
-  sourceAvatar: ImageSourcePropType | Initials;
-  textTimeTracker: string;
-  visualStateTimeTracker: VisualState;
+    id: string;
+    name: string;
+    department: string;
+    selectable: boolean;
+    isSelected: boolean;
+    onPressArrow: (id: string) => void;
+    onPressText: (id: string) => void;
+    onLongPress: (id: string) => void;
+    onSelect: (id: string) => void;
+    sourceAvatar: ImageSourcePropType | Initials;
+    textTimeTracker: string;
+    visualStateTimeTracker: VisualState;
+    tags?: string[];
 };
-declare const ChildListItem: React.MemoExoticComponent<
-  ({
-    id,
-    name,
-    department,
-    selectable,
-    isSelected,
-    onPressArrow,
-    onPressText,
-    onLongPress,
-    onSelect,
-    sourceAvatar,
-    textTimeTracker,
-    visualStateTimeTracker,
-  }: ChildListItemProps) => JSX.Element
->;
-export {ChildListItem as ChildListItem};
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, }: ChildListItemProps) => JSX.Element>;
+export { ChildListItem as ChildListItem };

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

@@ -8,10 +8,11 @@ import {Size} from '../../../types/size.enum';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Avatar} from '../../molecules/avatar/avatar.component';
 import {Stylesheet} from './child-list-item.styles';
-import {SmallText} from '../../atoms/paragraph-components';
+import {SmallText, TinyText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
 import {TimeTracker} from '../../molecules/time-tracker/time-tracker.component';
 import {Icon} from '../../../icons/index';
+import {ChildListTag} from './components/child-list-tag.component';
 
 type ChildListItemProps = {
   id: string;
@@ -26,6 +27,7 @@ type ChildListItemProps = {
   sourceAvatar: ImageSourcePropType | Initials;
   textTimeTracker: string;
   visualStateTimeTracker: VisualState;
+  tags?: string[];
 };
 
 const ChildListItem = React.memo(
@@ -42,6 +44,7 @@ const ChildListItem = React.memo(
     sourceAvatar,
     textTimeTracker,
     visualStateTimeTracker,
+    tags,
   }: ChildListItemProps) => {
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
@@ -105,6 +108,26 @@ const ChildListItem = React.memo(
                 {department}
               </SmallText>
             </View>
+            {tags && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  gap: 6,
+                  flexWrap: 'wrap',
+                  marginTop: 10,
+                }}
+              >
+                {tags.map((tag) => {
+                  return (
+                    <ChildListTag
+                      key={`${id}--${tag}`}
+                      label={tag}
+                      isSelected={isSelected}
+                    />
+                  );
+                })}
+              </View>
+            )}
           </View>
         </Pressable>
         {!selectable && (

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

@@ -10,14 +10,23 @@ interface IData {
   id: string;
   name: string;
   department: string;
+  tags?: string[];
 }
 
 const data: IData[] = [];
 for (let i = 0; i < 6; i++) {
+  const tagsChance = Math.random(); // Generate a random number between 0 and 1
+  let tagsArray: string[] | undefined;
+
+  if (tagsChance > 0.5) {
+    tagsArray = ['Gezondheid', 'Allergie', 'Voedsel', 'Slaap'];
+  }
+
   data.push({
     id: 'child' + i,
     name: 'Children with very long names because in 2023 we give our kids special name',
     department: 'De Teddybeertjes',
+    tags: tagsArray,
   });
 }
 
@@ -63,6 +72,7 @@ export const ChildListItemPreview = ({}: {}) => {
         sourceAvatar={Initials.for('Zeno', 'Driesen')}
         textTimeTracker={'3u45m'}
         visualStateTimeTracker={VisualState.SUCCESS}
+        tags={item.tags}
       />
     );
   };
@@ -92,6 +102,7 @@ export const ChildListItemPreview = ({}: {}) => {
         style={{
           flex: 1,
         }}
+        contentContainerStyle={{gap: 16}}
         data={data}
         renderItem={renderChildList}
         keyExtractor={(item) => item.id}

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

@@ -1,42 +1,36 @@
-export function Stylesheet(
-  isSelectedItem: any,
-  context: any
-): {
-  container: {
-    width: string;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    borderTopLeftRadius: number;
-    borderBottomLeftRadius: number;
-    overflow: 'hidden';
-    flexDirection: 'row';
-    backgroundColor: any;
-  };
-  innerContainer: {
-    flex: number;
-    padding: number;
-    flexDirection: 'row';
-    alignItems: 'center';
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    borderTopLeftRadius: number;
-    borderBottomLeftRadius: number;
-  };
-  pressableText: {
-    marginLeft: number;
-    flex: number;
-  };
-  iconContainer: {
-    alignItems: 'flex-end';
-    justifyContent: 'center';
-    paddingRight: number;
-    width: number;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    overflow: 'hidden';
-  };
-  trackerContainer: {
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
+export function Stylesheet(isSelectedItem: any, context: any): {
+    container: {
+        width: string;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        flexDirection: "row";
+        backgroundColor: any;
+    };
+    innerContainer: {
+        flex: number;
+        padding: number;
+        flexDirection: "row";
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    pressableText: {
+        marginLeft: number;
+        flex: number;
+    };
+    iconContainer: {
+        alignItems: "flex-end";
+        justifyContent: "center";
+        paddingRight: number;
+        width: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    trackerContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
 };

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

@@ -8,8 +8,8 @@ export const Stylesheet = (isSelectedItem, context) =>
       width: '100%',
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
-      borderTopLeftRadius: Scale.xxl,
-      borderBottomLeftRadius: Scale.xxl,
+      borderTopLeftRadius: Scale.xl,
+      borderBottomLeftRadius: Scale.xl,
       flexDirection: 'row',
       backgroundColor: isSelectedItem
         ? context.colors.main[6]
@@ -19,7 +19,6 @@ export const Stylesheet = (isSelectedItem, context) =>
       flex: 1,
       padding: Scale.xs,
       flexDirection: 'row',
-      alignItems: 'center',
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xxl,

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

@@ -4,11 +4,11 @@ import {ChildListItem} from './child-list-item.component';
 import {VisualState} from '../../../types/visual-state.enum';
 
 describe('test child list item component', () => {
-  it('make text that is too long end in ...', () => {
+  it('make text that is too long end in ... and has tags', () => {
     const tree = render
       .create(
         <ChildListItem
-          id={1}
+          id={'1'}
           name={'Jean-Paul Janssens-Peeters'}
           department={'De Teddybeertjes'}
           selectable={true}
@@ -16,9 +16,11 @@ describe('test child list item component', () => {
           onPressArrow={() => console.log('pressedArrow')}
           onPressText={() => console.log('pressedText')}
           onSelect={() => console.log('selected')}
+          onLongPress={() => console.log('long press')}
           sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
           textTimeTracker={'time tracker'}
           visualStateTimeTracker={VisualState.SUCCESS}
+          tags={['tag1', 'tag2']}
         />
       )
       .toJSON();
@@ -29,7 +31,7 @@ describe('test child list item component', () => {
     const tree = render
       .create(
         <ChildListItem
-          id={1}
+          id={'1'}
           name={'Jean-Paul Janssens-Peeters'}
           department={'De Teddybeertjes'}
           selectable={true}
@@ -37,6 +39,7 @@ describe('test child list item component', () => {
           onPressArrow={() => console.log('pressedArrow')}
           onPressText={() => console.log('pressedText')}
           onSelect={() => console.log('selected')}
+          onLongPress={() => console.log('long press')}
           sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
           textTimeTracker={'time tracker'}
           visualStateTimeTracker={VisualState.SUCCESS}
@@ -50,7 +53,7 @@ describe('test child list item component', () => {
     const tree = render
       .create(
         <ChildListItem
-          id={1}
+          id={'1'}
           name={'Jean-Paul Janssens-Peeters'}
           department={'De Teddybeertjes'}
           selectable={false}
@@ -58,9 +61,11 @@ describe('test child list item component', () => {
           onPressArrow={() => console.log('pressedArrow')}
           onPressText={() => console.log('pressedText')}
           onSelect={() => console.log('selected')}
+          onLongPress={() => console.log('long press')}
           sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
           textTimeTracker={'time tracker'}
           visualStateTimeTracker={VisualState.SUCCESS}
+          tags={['tag1', 'tag2']}
         />
       )
       .toJSON();

package/src/components/organisms/child-list-item/components/child-list-tag.component.d.ts

@@ -0,0 +1,6 @@
+type ChildListTagProps = {
+    label: string;
+    isSelected: boolean;
+};
+export declare const ChildListTag: ({ label, isSelected }: ChildListTagProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {TinyText} from '../../../atoms/paragraph-components';
+import {ThemeCtx} from '../../../../context/theme.context';
+import {Stylesheet} from './child-list-tag.styles';
+
+type ChildListTagProps = {
+  label: string;
+  isSelected: boolean;
+};
+
+export const ChildListTag = ({label, isSelected}: ChildListTagProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, isSelected);
+
+  return (
+    <View style={styles.rootContainer}>
+      <TinyText
+        textAlign={'center'}
+        textColor={
+          !isSelected ? context.colors.ui.darkgrey : context.colors.ui.white
+        }
+      >
+        {label}
+      </TinyText>
+    </View>
+  );
+};

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

@@ -0,0 +1,10 @@
+export function Stylesheet(context: any, isSelected: any): {
+    rootContainer: {
+        backgroundColor: any;
+        borderRadius: number;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+    };
+};

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

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../theme/scale/index';
+
+export const Stylesheet = (context, isSelected) =>
+  StyleSheet.create({
+    rootContainer: {
+      backgroundColor: !isSelected
+        ? context.colors.ui.lightgrey
+        : context.colors.main[5],
+      borderRadius: 50,
+      paddingLeft: Scale.s,
+      paddingTop: Scale.xxs,
+      paddingRight: Scale.s,
+      paddingBottom: Scale.xxs,
+    },
+  });

package/src/components/organisms/contact-item/contact-item.component.d.ts

@@ -1,13 +1,8 @@
 type ContactItemProps = {
-  name: string;
-  label: string;
-  onPress?: () => void;
-  isBlocked?: boolean;
+    name: string;
+    label: string;
+    onPress?: () => void;
+    isBlocked?: boolean;
 };
-declare const ContactItem: ({
-  name,
-  label,
-  onPress,
-  isBlocked,
-}: ContactItemProps) => JSX.Element;
-export {ContactItem as ContactItem};
+declare const ContactItem: ({ name, label, onPress, isBlocked }: ContactItemProps) => JSX.Element;
+export { ContactItem as ContactItem };

package/src/components/organisms/day-select/day-select.component.d.ts

@@ -1,12 +1,8 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DaySelectProps = {
-  onSelectDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  selectedDate: ToddleDateTime;
+    onSelectDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    selectedDate: ToddleDateTime;
 };
-declare const DaySelect: ({
-  onSelectDate,
-  selectedDate,
-  startDate,
-}: DaySelectProps) => JSX.Element;
-export {DaySelect as DaySelect};
+declare const DaySelect: ({ onSelectDate, selectedDate, startDate }: DaySelectProps) => JSX.Element;
+export { DaySelect as DaySelect };

package/src/components/organisms/day-select/day-select.preview.tsx

@@ -5,14 +5,18 @@ import {View} from 'react-native';
 import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 
 export const DaySelectPreview = ({}: {}) => {
-  const [selected, setSelected] = useState(ToddleDateTime.now());
+  const [startOfWeek, setStartOfWeek] = useState(ToddleDateTime.local());
+
+  const [selectedDate, setSelectedDate] = useState<ToddleDateTime>(
+    ToddleDateTime.local()
+  );
 
   return (
-    <View>
+    <View style={{paddingHorizontal: 48}}>
       <DaySelect
-        startDate={ToddleDateTime.now()}
-        onSelectDate={(date) => setSelected(date)}
-        selectedDate={selected}
+        startDate={startOfWeek}
+        onSelectDate={setSelectedDate}
+        selectedDate={selectedDate}
       />
     </View>
   );