@tactics/toddle-styleguide 1.2.2 → 1.2.4

package/src/components/atoms/calendar/calendar.component.tsx

@@ -63,18 +63,20 @@ export const Calendar = ({
 }: CalendarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const initDate = ToddleDateTime.now().toISODate();
+  const initDate = ToddleDateTime.now().toISODate() || undefined;
 
   const today = selected.toISODate();
 
-  const marked = useMemo(
-    () => ({
+  const marked = useMemo(() => {
+    if (today === null) {
+      return {};
+    }
+    return {
       [today]: {
         selected: true,
       },
-    }),
-    [today]
-  );
+    };
+  }, [today]);
 
   return (
     <RNCalendar

package/src/components/molecules/avatar/__snapshots__/avatar.test.js.snap

@@ -2,88 +2,96 @@
 
 exports[`test avatar given the isBlocked is true, and provide image source is empty return a red colored avatar  1`] = `
 <View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "backgroundColor": "#647ACB",
-        "justifyContent": "center",
-        "overflow": "hidden",
-      },
-      {
-        "borderRadius": 20,
-        "height": 40,
-        "width": 40,
-      },
-      false,
-      false,
-    ]
-  }
+  style={null}
 >
-  <Text
+  <View
     style={
       [
-        [
-          {
-            "fontFamily": "SourceSansProBold",
-            "fontSize": 18,
-            "lineHeight": 22.6,
-          },
-        ],
         {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
+          "alignItems": "center",
+          "backgroundColor": "#647ACB",
+          "justifyContent": "center",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
-        undefined,
+        false,
+        false,
       ]
     }
   >
-    JD
-  </Text>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 18,
+              "lineHeight": 22.6,
+            },
+          ],
+          {
+            "color": "#FFFFFF",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      JD
+    </Text>
+  </View>
 </View>
 `;
 
 exports[`test avatar renders correctly when provided image source is empty 1`] = `
 <View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "backgroundColor": "#647ACB",
-        "justifyContent": "center",
-        "overflow": "hidden",
-      },
-      {
-        "borderRadius": 20,
-        "height": 40,
-        "width": 40,
-      },
-      false,
-      false,
-    ]
-  }
+  style={null}
 >
-  <Text
+  <View
     style={
       [
-        [
-          {
-            "fontFamily": "SourceSansProBold",
-            "fontSize": 18,
-            "lineHeight": 22.6,
-          },
-        ],
         {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
+          "alignItems": "center",
+          "backgroundColor": "#647ACB",
+          "justifyContent": "center",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
-        undefined,
+        false,
+        false,
       ]
     }
   >
-    JD
-  </Text>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 18,
+              "lineHeight": 22.6,
+            },
+          ],
+          {
+            "color": "#FFFFFF",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      JD
+    </Text>
+  </View>
 </View>
 `;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -7,6 +7,7 @@ type AvatarProps = {
     isBlocked?: boolean;
     isActive?: boolean;
     isLoading?: boolean;
+    hasShadow?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => JSX.Element;
 export { Avatar as Avatar };

package/src/components/molecules/avatar/avatar.component.tsx

@@ -21,6 +21,7 @@ type AvatarProps = {
   isBlocked?: boolean;
   isActive?: boolean;
   isLoading?: boolean;
+  hasShadow?: boolean;
 };
 
 const Avatar = ({
@@ -29,6 +30,7 @@ const Avatar = ({
   isBlocked,
   isActive = true,
   isLoading,
+  hasShadow,
 }: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
@@ -69,21 +71,30 @@ const Avatar = ({
   };
 
   return source instanceof Initials ? (
-    <View style={styles.container}>
-      {isLoading ? (
-        <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
-      ) : (
-        renderText(size)
-      )}
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {isLoading ? (
+          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+        ) : (
+          renderText(size)
+        )}
+      </View>
     </View>
   ) : isLoading ? (
-    <View style={styles.container}>
-      <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
+        <View style={{zIndex: 100, position: 'absolute'}}>
+          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+        </View>
+      </View>
     </View>
   ) : (
-    <View style={styles.container}>
-      {!isBlocked ? <MainGradient isActive={isActive} /> : null}
-      <Image source={source} style={styles.image as ImageStyle} />
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
+        <Image source={source} style={styles.image as ImageStyle} />
+      </View>
     </View>
   );
 };

package/src/components/molecules/avatar/avatar.preview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {ScrollView} from 'react-native';
 
 const {Avatar} = require('./avatar.component');
 const {Size} = require('../../../types/size.enum');
@@ -7,49 +8,62 @@ const {View} = require('react-native');
 
 export const AvatarPreview = ({}: {}) => {
   return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'white',
-      }}
-    >
-      <Avatar
-        size={Size.LARGE}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar
-        size={Size.MEDIUM}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar
-        size={Size.SMALL}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar size={Size.LARGE} source={Initials.for('John', 'Doe')} />
-      <Avatar
-        size={Size.MEDIUM}
-        source={Initials.for('John', 'Doe')}
-        isBlocked={true}
-      />
-      <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
-      <Avatar
-        size={Size.LARGE}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-        isActive={false}
-      />
-      <Avatar
-        size={Size.MEDIUM}
-        source={Initials.for('John', 'Doe')}
-        isActive={false}
-      />
-      <Avatar
-        size={Size.SMALL}
-        source={Initials.for('John', 'Doe')}
-        isBlocked={true}
-        isActive={false}
-      />
-    </View>
+    <ScrollView>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          backgroundColor: 'white',
+          gap: 16,
+        }}
+      >
+        <Avatar
+          size={Size.LARGE}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          hasShadow={true}
+          isLoading={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.SMALL}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+        />
+        <Avatar
+          size={Size.LARGE}
+          source={Initials.for('John', 'Doe')}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={Initials.for('John', 'Doe')}
+          isBlocked={true}
+          hasShadow={true}
+        />
+        <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
+        <Avatar
+          size={Size.LARGE}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          isActive={false}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={Initials.for('John', 'Doe')}
+          isActive={false}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.SMALL}
+          source={Initials.for('John', 'Doe')}
+          isBlocked={true}
+          isActive={false}
+          hasShadow={true}
+        />
+      </View>
+    </ScrollView>
   );
 };

package/src/components/molecules/avatar/avatar.styles.d.ts

@@ -1,5 +1,5 @@
 export function Stylesheet(
-  Context: any,
+  context: any,
   size: any,
   isBlocked: any,
   isActive: any
@@ -26,24 +26,63 @@ export function Stylesheet(
             alignItems?: undefined;
           }
       )[];
+      shadow: (
+        | {
+            backgroundColor: string;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            shadowColor: any;
+            shadowOpacity: number;
+            shadowRadius: number;
+            shadowOffset: {
+              width: number;
+              height: number;
+            };
+            backgroundColor?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            elevation: number;
+            shadowColor: any;
+            backgroundColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            width: number;
+            height: number;
+            borderRadius: number;
+            backgroundColor?: undefined;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+          }
+      )[];
       image: {
         position: string;
         width: string;
         height: string;
         borderRadius: number;
       }[];
-      text: (
-        | {
-            color: any;
-            textTransform: string;
-          }
-        | {
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-            color?: undefined;
-            textTransform?: undefined;
-          }
-      )[];
+      text: {
+        textTransform: 'uppercase';
+      };
     }>;
-import {StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/molecules/avatar/avatar.styles.js

@@ -1,16 +1,16 @@
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Platform} from 'react-native';
 import {Size} from '../../../types/size.enum';
 
-export const Stylesheet = (Context, size, isBlocked, isActive) =>
+export const Stylesheet = (context, size, isBlocked, isActive) =>
   StyleSheet.create({
     container: [
       {
         overflow: 'hidden',
         backgroundColor: isBlocked
-          ? Context.colors.ui.error.default
+          ? context.colors.ui.error.default
           : isActive
-          ? Context.colors.main['5']
-          : Context.colors.ui.lightgrey,
+          ? context.colors.main['5']
+          : context.colors.ui.lightgrey,
         justifyContent: 'center',
         alignItems: 'center',
       },
@@ -30,6 +30,34 @@ export const Stylesheet = (Context, size, isBlocked, isActive) =>
         borderRadius: 120 / 2,
       },
     ],
+    shadow: [
+      {backgroundColor: 'white'},
+      Platform.OS === 'ios' && {
+        shadowColor: context.colors.ui.black,
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        shadowOffset: {width: 0, height: 4},
+      },
+      Platform.OS === 'android' && {
+        elevation: 6,
+        shadowColor: context.colors.ui.black,
+      },
+      size === Size.SMALL && {
+        width: 40,
+        height: 40,
+        borderRadius: 40 / 2,
+      },
+      size === Size.MEDIUM && {
+        width: 72,
+        height: 72,
+        borderRadius: 72 / 2,
+      },
+      size === Size.LARGE && {
+        width: 120,
+        height: 120,
+        borderRadius: 120 / 2,
+      },
+    ],
     image: [
       {
         position: 'absolute',

package/src/components/molecules/calendar-select/calendar-select.component.d.ts

@@ -2,8 +2,8 @@ import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-dateti
 type CalendarSelectProps = {
     onPressDate: (date: ToddleDateTime) => void;
     startDate: ToddleDateTime;
-    pressChevronRight?: (date: ToddleDateTime) => void;
-    pressChevronLeft?: (date: ToddleDateTime) => void;
+    pressChevronRight: (date: ToddleDateTime) => void;
+    pressChevronLeft: (date: ToddleDateTime) => void;
 };
 declare const CalendarSelect: ({ onPressDate, startDate, pressChevronLeft, pressChevronRight, }: CalendarSelectProps) => JSX.Element;
 export { CalendarSelect as CalendarSelect };

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -10,8 +10,8 @@ import {Icon} from '../../../icons/index';
 type CalendarSelectProps = {
   onPressDate: (date: ToddleDateTime) => void;
   startDate: ToddleDateTime;
-  pressChevronRight?: (date: ToddleDateTime) => void;
-  pressChevronLeft?: (date: ToddleDateTime) => void;
+  pressChevronRight: (date: ToddleDateTime) => void;
+  pressChevronLeft: (date: ToddleDateTime) => void;
 };
 
 const CalendarSelect = ({
@@ -29,20 +29,11 @@ const CalendarSelect = ({
     setVisibleDate(startDate);
   }, [startDate]);
 
-  const onPressRight = () => {
-    setVisibleDate(visibleDate.plus({days: 1}));
-  };
-
-  const onPressLeft = () => {
-    setVisibleDate(visibleDate.minus({days: 1}));
-  };
-
   return (
     <View style={styles.container}>
       <Pressable
         onPress={() => {
-          onPressLeft();
-          if (pressChevronLeft) pressChevronLeft(visibleDate.minus({days: 1}));
+          pressChevronLeft(visibleDate.minus({days: 1}));
         }}
       >
         <Icon style={'regular'} name={'chevron-left'} />
@@ -68,8 +59,7 @@ const CalendarSelect = ({
 
       <Pressable
         onPress={() => {
-          onPressRight();
-          if (pressChevronRight) pressChevronRight(visibleDate.plus({days: 1}));
+          pressChevronRight(visibleDate.plus({days: 1}));
         }}
       >
         <Icon style={'regular'} name={'chevron-right'} />

package/src/components/molecules/calendar-select/calendar-select.preview.tsx

@@ -1,33 +1,20 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {CalendarSelect} from './calendar-select.component';
 import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 
 export const CalendarSelectPreview = ({}: {}) => {
+  const [date, setDate] = useState(
+    ToddleDateTime.local({zone: 'America/Los_Angeles'})
+  );
+  console.log(date);
   return (
     <View>
       <CalendarSelect
-        onPressDate={(date) =>
-          console.log(
-            'show calendar',
-            ',',
-            'date is:',
-            date.toLocaleString(ToddleDateTime.DATE_MED)
-          )
-        }
-        startDate={ToddleDateTime.now()}
-        pressChevronRight={(date) =>
-          console.log(
-            'pijl rechts gedrukt, aangepaste data=',
-            date.toLocaleString()
-          )
-        }
-        pressChevronLeft={(date) =>
-          console.log(
-            'pijl links gedrukt, aangepaste data=',
-            date.toLocaleString()
-          )
-        }
+        onPressDate={() => console.log('open modal')}
+        startDate={date}
+        pressChevronRight={setDate}
+        pressChevronLeft={setDate}
       />
     </View>
   );

package/src/components/molecules/date-input/date-input.preview.tsx

@@ -7,6 +7,7 @@ import {TextInput} from '../../atoms/text-input/text-input.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 import {Popover} from '../../templates/popover/popover.component';
 import {Calendar} from '../../atoms/calendar/calendar.component';
+import {Modal} from '../../templates/modal/modal.component';
 
 const {View} = require('react-native');
 
@@ -15,30 +16,31 @@ export const DateInputPreview = ({}: {}) => {
   const [popoverIsVisible, setPopoverIsVisible] = useState(false);
 
   return (
-    <View
-      style={{
-        padding: 50,
-      }}
-    >
-      <Info
-        label={'Afwezigheid melden'}
-        description={
-          'Kan u kind een dag niet aanwezig zijn? Laat het via deze weg weten aan de opvanglocatie.'
-        }
-      />
-
-      <Text>Kind</Text>
-      <TextInput
-        keyboardType={KeyBoardTypes.DEFAULT}
-        placeholder={'De uiltjes'}
-      />
+    <>
+      <View
+        style={{
+          padding: 50,
+        }}
+      >
+        <Info
+          label={'Afwezigheid melden'}
+          description={
+            'Kan u kind een dag niet aanwezig zijn? Laat het via deze weg weten aan de opvanglocatie.'
+          }
+        />
 
-      <Text>Afwezig op</Text>
-      <DateInput
-        value={selectedDate}
-        onPress={() => setPopoverIsVisible(true)}
-      />
+        <Text>Kind</Text>
+        <TextInput
+          keyboardType={KeyBoardTypes.DEFAULT}
+          placeholder={'De uiltjes'}
+        />
 
+        <Text>Afwezig op</Text>
+        <DateInput
+          value={selectedDate}
+          onPress={() => setPopoverIsVisible(true)}
+        />
+      </View>
       <Popover
         onClose={() => setPopoverIsVisible(false)}
         title={'Datum'}
@@ -55,6 +57,6 @@ export const DateInputPreview = ({}: {}) => {
           />
         </View>
       </Popover>
-    </View>
+    </>
   );
 };