@tactics/toddle-styleguide 1.2.8 → 1.3.0

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

@@ -15,6 +15,7 @@ type ChildListItemProps = {
   sourceAvatar: ImageSourcePropType | Initials;
   textTimeTracker: string;
   visualStateTimeTracker: VisualState;
+  tags?: string[];
 };
 declare const ChildListItem: React.MemoExoticComponent<
   ({
@@ -30,6 +31,7 @@ declare const ChildListItem: React.MemoExoticComponent<
     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

@@ -8,7 +8,6 @@ export function Stylesheet(
     borderBottomRightRadius: number;
     borderTopLeftRadius: number;
     borderBottomLeftRadius: number;
-    overflow: 'hidden';
     flexDirection: 'row';
     backgroundColor: any;
   };
@@ -16,7 +15,6 @@ export function Stylesheet(
     flex: number;
     padding: number;
     flexDirection: 'row';
-    alignItems: 'center';
     borderTopRightRadius: number;
     borderBottomRightRadius: number;
     borderTopLeftRadius: number;
@@ -33,7 +31,6 @@ export function Stylesheet(
     width: number;
     borderTopRightRadius: number;
     borderBottomRightRadius: number;
-    overflow: 'hidden';
   };
   trackerContainer: {
     flexDirection: 'row';

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,9 @@
+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,13 @@
+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/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>
   );

package/src/components/organisms/journal-entry/components/entry-type-indicator/entry-type-indicator.d.ts

@@ -0,0 +1,9 @@
+interface EntryTypeIndicatorProps {
+  loading?: boolean;
+  send: boolean;
+}
+export declare const EntryTypeIndicator: ({
+  loading,
+  send,
+}: EntryTypeIndicatorProps) => JSX.Element;
+export {};

package/src/components/organisms/journal-entry/components/entry-type-indicator/entry-type-indicator.styles.d.ts

@@ -0,0 +1,13 @@
+export function Stylesheet(): {
+  rootContainer: {
+    width: number;
+    height: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  indicator: {
+    width: number;
+    height: number;
+    borderRadius: number;
+  };
+};

package/src/components/organisms/journal-entry/components/entry-type-indicator/entry-type-indicator.styles.js

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      width: Scale.l + 8,
+      height: Scale.l + 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    indicator: {
+      width: Scale.m,
+      height: Scale.m,
+      borderRadius: Scale.m / 2,
+    },
+  });

package/src/components/organisms/journal-entry/components/entry-type-indicator/entry-type-indicator.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {EntryTypeIndicator} from './entry-type-indicator';
+
+describe('EntryTypeIndicator', () => {
+  it('should render without errors', () => {
+    render(<EntryTypeIndicator />);
+  });
+
+  it('should apply loading animation when loading is true', () => {
+    const {getByTestId} = render(<EntryTypeIndicator loading={true} />);
+    const indicator = getByTestId('indicator');
+    expect(indicator).toBeDefined();
+  });
+
+  it('should not apply loading animation when loading is false', () => {
+    const {getByTestId} = render(<EntryTypeIndicator loading={false} />);
+    const indicator = getByTestId('indicator');
+    expect(indicator).toBeDefined();
+  });
+});