@tactics/toddle-styleguide 1.2.4 → 1.2.6

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { ReactNode } from 'react';
 type SwipeProps = {
-    children: React.ReactNode;
-    onIndexChanged?: (index: number) => void;
+    children: ReactNode;
+    onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({ children, onIndexChanged }: SwipeProps) => JSX.Element;
+declare const Swipe: ({ children, onIndexChange }: SwipeProps) => JSX.Element;
 export { Swipe as Swipe };

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

@@ -1,50 +1,77 @@
-import React, {Children, useContext} from 'react';
+import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
-import Swiper from 'react-native-swiper';
-import {View} from 'react-native';
-import {Stylesheet} from './Swipe.styles';
+import {Stylesheet} from './swipe.styles';
 import {Icon} from '../../../icons/index';
+import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
+import {Pressable, View} from 'react-native';
 
 type SwipeProps = {
-  children: React.ReactNode;
-  onIndexChanged?: (index: number) => void;
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
 };
 
-const Swipe = ({children, onIndexChanged}: SwipeProps) => {
+const Swipe = ({children, onIndexChange}: SwipeProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet();
+  const viewPagerRef = useRef<PagerView>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
   const count = Children.count(children);
 
   if (count > 5) {
     console.warn(' for more then 5 child-components, use another way to show');
   }
 
+  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
+    const currentIndex = event.nativeEvent.position;
+    setCurrentPage(currentIndex);
+
+    if (onIndexChange) {
+      onIndexChange(currentIndex);
+    }
+  };
+
   return (
-    <View style={styles.container}>
-      <Swiper
-        loop={false}
-        onIndexChanged={onIndexChanged}
-        paginationStyle={{bottom: 0}}
-        showsButtons={true}
-        dotColor={context.colors.ui.lightgrey}
-        activeDotColor={context.colors.main['7']}
-        prevButton={
+    <View style={styles.rootContainer}>
+      {currentPage !== 0 && (
+        <Pressable
+          style={styles.leftArrowContainer}
+          onPress={() =>
+            viewPagerRef.current?.setPage(
+              currentPage != 1 ? currentPage - 1 : 0
+            )
+          }
+        >
           <Icon
             style={'regular'}
             name={'chevron-left'}
             color={context.colors.main['0']}
           />
-        }
-        nextButton={
+        </Pressable>
+      )}
+
+      {currentPage !== count - 1 && (
+        <Pressable
+          style={styles.rightArrowContainer}
+          onPress={() => viewPagerRef.current?.setPage(currentPage + 1)}
+        >
           <Icon
             style={'regular'}
             name={'chevron-right'}
             color={context.colors.main['0']}
           />
-        }
+        </Pressable>
+      )}
+
+      <PagerView
+        ref={viewPagerRef}
+        style={styles.swipeContainer}
+        initialPage={0}
+        collapsable={false}
+        onPageSelected={handlePageSelected}
       >
         {children}
-      </Swiper>
+      </PagerView>
     </View>
   );
 };

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

@@ -1,63 +1,123 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Swipe} from './swipe.component';
 import {View} from 'react-native';
+import {Heading2} from '../../atoms/heading-components';
+import {Icon} from '../../../icons/index';
+import {TimePicker} from '../time-picker/time-picker.component';
+import {Paragraph} from '../../atoms/paragraph-components';
 import {Button} from '../button/button.component';
-import {Pill} from '../pill/pill.component';
-import {VisualState} from '../../../types/visual-state.enum';
 
 export const SwipePreview = ({}: {}) => {
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
   return (
-    <View>
-      <Swipe onIndexChanged={(index) => console.log(index)}>
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 1'}
-            onPress={() => console.log('button 1 pressed')}
-          />
-        </View>
-        <View style={{marginTop: 32, alignSelf: 'center'}}>
-          <Pill label={'Pill'} visualState={VisualState.DEFAULT} />
-        </View>
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            width: '60%',
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 2'}
-            onPress={() => console.log('button 2 pressed')}
-          />
+    <Swipe>
+      {/*FIRST CHILD*/}
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={1}
+      >
+        <View style={{gap: 10}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
-        <View style={{marginTop: 32, width: '70%', alignSelf: 'center'}}>
-          <Pill label={'Pill'} visualState={VisualState.DEFAULT} />
+        <TimePicker
+          initialHours={checkInHours}
+          initialMinutes={checkInMinutes}
+          onChangeHours={setCheckInHours}
+          onChangeMinutes={setCheckInMinutes}
+        />
+      </View>
+
+      {/*SECOND CHILD*/}
+
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={2}
+      >
+        <View style={{gap: 12}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
 
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            width: '60%',
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 3'}
-            onPress={() => console.log('button 3 pressed')}
-          />
+        <Button label={'Test button'} onPress={() => console.log('pressed')} />
+      </View>
+
+      {/*THIRD CHILD*/}
+
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={3}
+      >
+        <View style={{gap: 12}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
-      </Swipe>
-    </View>
+
+        <TimePicker
+          initialHours={checkInHours}
+          initialMinutes={checkInMinutes}
+          onChangeHours={setCheckInHours}
+          onChangeMinutes={setCheckInMinutes}
+        />
+
+        <Button label={'Test button'} onPress={() => console.log('pressed')} />
+      </View>
+    </Swipe>
   );
 };

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

@@ -0,0 +1,28 @@
+export function Stylesheet(): {
+  rootContainer: {
+    flex: number;
+  };
+  leftArrowContainer: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    position: 'absolute';
+    zIndex: number;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
+  rightArrowContainer: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    position: 'absolute';
+    zIndex: number;
+    top: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  swipeContainer: {
+    flex: number;
+  };
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      flex: 1,
+    },
+    leftArrowContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: 10,
+      top: Scale.s,
+      left: 0,
+      width: 42,
+      height: 42,
+    },
+    rightArrowContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: 10,
+      top: Scale.s,
+      right: 0,
+      width: 42,
+      height: 42,
+    },
+    swipeContainer: {
+      flex: 1,
+    },
+  });

package/src/components/molecules/swipe/swipe.test.js

@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {Button} from '../button/button.component';
 
 describe('Test Swipe component', () => {
-  it('should render an swipe component with dots and navigation arrows', () => {
+  it('should render an swipe component with navigation arrows', () => {
     const tree = renderer
       .create(
         <Swipe>

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

@@ -36,11 +36,13 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
     style={
       {
         "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
+        "backgroundColor": "#647ACB",
         "borderRadius": 50,
         "justifyContent": "center",
-        "paddingHorizontal": 8,
-        "paddingVertical": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 8,
       }
     }
   >
@@ -49,22 +51,20 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
         [
           [
             {
-              "fontFamily": "Montserrat",
+              "fontFamily": "MontserratBold",
               "fontSize": 13,
               "lineHeight": 20.4,
             },
           ],
           {
-            "color": "#1F2933",
+            "color": "#E0E8F9",
             "textAlign": "center",
             "width": "100%",
           },
           undefined,
         ]
       }
-    >
-      Geblokkeerd
-    </Text>
+    />
   </View>
 </View>
 `;
@@ -108,8 +108,10 @@ exports[`test Tag renders Tag correctly (grey, black text) 1`] = `
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
         "justifyContent": "center",
-        "paddingHorizontal": 8,
-        "paddingVertical": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 8,
       }
     }
   >
@@ -131,9 +133,7 @@ exports[`test Tag renders Tag correctly (grey, black text) 1`] = `
           undefined,
         ]
       }
-    >
-      Geblokkeerd
-    </Text>
+    />
   </View>
 </View>
 `;

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

@@ -1,12 +1,7 @@
-export interface TagPressEvent {
-    value: string;
-    isSelected: boolean;
-}
 type TagProps = {
     value: string;
-    text: string;
-    isSelected?: boolean;
-    onPress: (event: TagPressEvent) => void;
+    label: string;
+    onPress: (event: string) => void;
 };
-declare const Tag: ({ text, isSelected, onPress, value }: TagProps) => JSX.Element;
+declare const Tag: ({ label, onPress, value }: TagProps) => JSX.Element;
 export { Tag as Tag };

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

@@ -1,47 +1,36 @@
 import * as React from 'react';
-import {useContext, useState} from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './tag.styles';
 import {View, Pressable} from 'react-native';
 import {SmallText} from '../../atoms/paragraph-components';
 
-export interface TagPressEvent {
-  value: string;
-  isSelected: boolean;
-}
-
 type TagProps = {
   value: string;
-  text: string;
-  isSelected?: boolean;
-  onPress: (event: TagPressEvent) => void;
+  label: string;
+  onPress: (value: string, isSelected: boolean) => void;
+  isSelected: boolean;
 };
 
-const Tag = ({text, isSelected, onPress, value}: TagProps) => {
+const Tag = ({label, onPress, value, isSelected}: TagProps) => {
   const context = useContext(ThemeCtx);
-  const [isSelectedTag, setIsSelectedTag] = useState(isSelected);
-  const styles = Stylesheet(context, isSelectedTag);
+  const styles = Stylesheet(context, isSelected);
 
   const onClicked = () => {
-    setIsSelectedTag((current) => !current);
-    onPress({value, isSelected: !isSelectedTag});
+    onPress(value, !isSelected);
   };
 
   return (
     <Pressable onPress={onClicked}>
       <View style={styles.container}>
-        {isSelectedTag ? (
-          <SmallText
-            bold={true}
-            textAlign={'center'}
-            textColor={context.colors.main[9]}
-          >
-            {text}
-          </SmallText>
-        ) : (
-          <SmallText textAlign={'center'}>{text}</SmallText>
-        )}
+        <SmallText
+          bold={isSelected}
+          textAlign={'center'}
+          textColor={isSelected ? context.colors.main[9] : undefined}
+        >
+          {label}
+        </SmallText>
       </View>
     </Pressable>
   );

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

@@ -1,27 +1,85 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Tag} from './tag.component';
-import {View} from 'react-native';
+import {View, Text} from 'react-native';
 
 export const TagPreview = ({}: {}) => {
+  const [singleTag, setSingleTag] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const handleSingleTagPress = (value: string) => {
+    setSingleTag(value);
+  };
+
+  const handleTagPress = (value: string, isSelected: boolean) => {
+    if (isSelected) {
+      setSelectedTags([...selectedTags, value]);
+    } else {
+      setSelectedTags(selectedTags.filter((tag) => tag !== value));
+    }
+  };
+
   return (
-    <View>
-      <Tag
-        value={'tab1'}
-        text={'Algemeen'}
-        onPress={(e) => console.log('clicked', e)}
-      />
-      <Tag
-        value={'tab2'}
-        text={'Gezondheid'}
-        isSelected={true}
-        onPress={(e) => console.log('clicked', e)}
-      />
-      <Tag
-        value={'tab3'}
-        text={'Activiteit'}
-        isSelected={true}
-        onPress={(e) => console.log('clicked', e)}
-      />
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+      }}
+    >
+      <Text>Select single tag</Text>
+      <View>
+        <Tag
+          value={'Option 1'}
+          label={'Option 1'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 1'}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Option 2'}
+          label={'Option 2'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 2'}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Option 3'}
+          label={'Option 3'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 3'}
+        />
+      </View>
+      <Text style={{marginBottom: 16}}>Selected tag: {singleTag}</Text>
+      <Text>Select multiple tags</Text>
+      <View>
+        <Tag
+          value={'Algemeen'}
+          label={'Algemeen'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Algemeen')}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Gezondheid'}
+          label={'Gezondheid'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Gezondheid')}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Activiteit'}
+          label={'Activiteit'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Activiteit')}
+        />
+      </View>
+      <Text>Selected tags: {selectedTags.join(', ')}</Text>
     </View>
   );
 };

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

@@ -8,8 +8,10 @@ export const Stylesheet = (context, isSelected) =>
       borderRadius: 50,
       alignItems: 'center',
       justifyContent: 'center',
-      paddingVertical: Scale.xs,
-      paddingHorizontal: Scale.xs,
+      paddingLeft: Scale.s,
+      paddingTop: Scale.xs,
+      paddingRight: Scale.s,
+      paddingBottom: Scale.xs,
       backgroundColor: isSelected
         ? context.colors.main[5]
         : context.colors.ui.lightgrey,

package/src/components/molecules/tag/tag.test.js

@@ -6,7 +6,12 @@ describe('test Tag', () => {
   it('renders Tag correctly (grey, black text)', () => {
     const tree = renderer
       .create(
-        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+        <Tag
+          value={'Geblokkeerd'}
+          text={'Geblokkeerd'}
+          onPress={(value) => console.log(value)}
+          isSelected={false}
+        />
       )
       .toJSON();
 
@@ -15,7 +20,12 @@ describe('test Tag', () => {
   it('renders Tag correctly (blue, bold grey text) when isSelected is true', () => {
     const tree = renderer
       .create(
-        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+        <Tag
+          value={'Test2'}
+          text={'Tag2'}
+          onPress={(value) => console.log(value)}
+          isSelected={true}
+        />
       )
       .toJSON();
 

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

@@ -22,6 +22,6 @@ exports[`Timestamp component test Renders a timestamp component, this will be ad
     ]
   }
 >
-  25 May, 9:08
+  9:08
 </Text>
 `;

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

@@ -15,8 +15,6 @@ export const Timestamp = ({sent}: TimestampProps) => {
 
   const timestampToStringHandler = (timestamp: ToddleDateTime) => {
     return timestamp.toLocaleString({
-      day: 'numeric',
-      month: 'short',
       hourCycle: 'h24',
       hour: 'numeric',
       minute: '2-digit',