@tactics/toddle-styleguide 1.2.4 → 1.2.6

package/App.tsx

@@ -68,6 +68,7 @@ import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-date
 import {BackgroundGradientPreview} from './src/components/atoms/background-gradient/background-gradient.preview';
 import {PersonInfoCardPreview} from './src/components/organisms/person-info-card/person-info-card.preview';
 import {TimePickerPreview} from './src/components/molecules/time-picker/time-picker.preview';
+import {PopOverActionPreview} from './src/components/templates/popover-action/popover-action.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -208,6 +209,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       />
       <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
       <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
+      <ReactBtn
+        title="Popover Action"
+        onPress={() => navigation.push('popover-action')}
+      />
       <ReactBtn
         title="Pressable Icon"
         onPress={() => navigation.push('pressable-icon')}
@@ -389,6 +394,9 @@ function App() {
           <Stack.Screen name="popover" options={{headerShown: false}}>
             {() => <PopoverPreview />}
           </Stack.Screen>
+          <Stack.Screen name="popover-action" options={{headerShown: false}}>
+            {() => <PopOverActionPreview />}
+          </Stack.Screen>
           <Stack.Screen name="pressable-icon">
             {() => <PressableIconPreview />}
           </Stack.Screen>

package/index.d.ts

@@ -53,6 +53,7 @@ import { WaveBackground } from './src/components/molecules/wave-background/wave.
 import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
 import { PersonInfoCard } from './src/components/organisms/person-info-card/person-info-card.component';
 import { TimePicker } from './src/components/molecules/time-picker/time-picker.component';
+import { PopOverAction } from './src/components/templates/popover-action/popover-action.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -62,4 +63,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, TimeLine, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, TimePicker, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, TimeLine, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, TimePicker, PopOverAction, };

package/index.tsx

@@ -71,6 +71,7 @@ import {WaveBackground} from './src/components/molecules/wave-background/wave.co
 import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
 import {PersonInfoCard} from './src/components/organisms/person-info-card/person-info-card.component';
 import {TimePicker} from './src/components/molecules/time-picker/time-picker.component';
+import {PopOverAction} from './src/components/templates/popover-action/popover-action.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -162,4 +163,5 @@ export {
   BackgroundGradient,
   PersonInfoCard,
   TimePicker,
+  PopOverAction,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -48,13 +48,13 @@
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1299.0",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-pager-view": "6.1.2",
     "react-native-picker-select": "^8.0.4",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-native-swipe-gestures": "^1.0.5",
-    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.18.10",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-test-renderer": "^18.2.0"

package/src/components/atoms/backdrop/backdrop.component.d.ts

@@ -1,5 +1,6 @@
 type PopoverBackdropProps = {
     isVisible: boolean;
+    touchBackDrop?: (value: boolean) => void;
 };
-declare const Backdrop: ({ isVisible }: PopoverBackdropProps) => JSX.Element;
+declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => JSX.Element;
 export { Backdrop as Backdrop };

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

@@ -7,9 +7,10 @@ import {Stylesheet} from './backdrop.styles';
 
 type PopoverBackdropProps = {
   isVisible: boolean;
+  touchBackDrop?: (value: boolean) => void;
 };
 
-const Backdrop = ({isVisible}: PopoverBackdropProps) => {
+const Backdrop = ({isVisible, touchBackDrop}: PopoverBackdropProps) => {
   const context = useContext(ThemeCtx);
   const opacity = useMemo(() => new Animated.Value(0), []);
 
@@ -37,6 +38,11 @@ const Backdrop = ({isVisible}: PopoverBackdropProps) => {
     close();
   }
 
-  return <Animated.View style={[styles.element, {opacity: opacity}]} />;
+  return (
+    <Animated.View
+      onTouchStart={() => (touchBackDrop ? touchBackDrop(false) : null)}
+      style={[styles.element, {opacity: opacity}]}
+    />
+  );
 };
 export {Backdrop as Backdrop};

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1389,7 +1389,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 7 Juli 2023 "
+            accessibilityLabel=" Vrijdag 7 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1421,10 +1421,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1444,9 +1440,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1892,7 +1885,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 13 Juli 2023 "
+            accessibilityLabel="today Donderdag 13 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1924,6 +1917,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1943,6 +1940,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5357,8 +5357,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 7 Juli 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 7 Juli 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -5389,10 +5388,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5413,7 +5408,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5870,7 +5865,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 13 Juli 2023 "
+            accessibilityLabel="today Donderdag 13 Juli 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5901,6 +5897,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5921,7 +5921,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,9 +1,8 @@
+import { TextInputProps as NativeTextInputProps } from 'react-native';
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-type TextInputProps = {
-    placeholder?: string;
-    onchangeText?: (text: string) => void;
+interface TextInputProps extends NativeTextInputProps {
     keyboardType: KeyBoardTypes;
     border?: boolean;
-};
-declare const TextInput: ({ placeholder, onchangeText, keyboardType, border, }: TextInputProps) => JSX.Element;
+}
+declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => JSX.Element;
 export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.component.tsx

@@ -1,35 +1,31 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {View, TextInput as NativeTextInput} from 'react-native';
+import {
+  View,
+  TextInput as NativeTextInput,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './text-input.styles';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 
-type TextInputProps = {
-  placeholder?: string;
-  onchangeText?: (text: string) => void;
+interface TextInputProps extends NativeTextInputProps {
   keyboardType: KeyBoardTypes;
   border?: boolean;
-};
+}
 
-const TextInput = ({
-  placeholder,
-  onchangeText,
-  keyboardType,
-  border,
-}: TextInputProps) => {
+const TextInput = ({keyboardType, border, ...props}: TextInputProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, border);
 
   return (
     <View style={styles.container}>
       <NativeTextInput
-        placeholder={placeholder}
         placeholderTextColor={context.colors.ui.grey}
         style={styles.input}
-        onChangeText={onchangeText}
         keyboardType={keyboardType}
+        {...props}
       />
     </View>
   );

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -7,33 +7,33 @@ export const TextInputPreview = ({} = {}) => {
   return (
     <SafeAreaView style={{flex: 1, justifyContent: 'space-around'}}>
       <TextInput
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.DECIMAL_PAD}
       />
       <TextInput
         placeholder={'placeholder text'}
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.DEFAULT}
       />
       <TextInput
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
       />
       <TextInput
         keyboardType={KeyBoardTypes.DEFAULT}
-        onchangeText={(text: string) => console.log('text: ' + text)}
+        onChangeText={(text: string) => console.log('text: ' + text)}
         placeholder={'with border'}
         border={true}
       />
       <TextInput
         keyboardType={KeyBoardTypes.DEFAULT}
-        onchangeText={(text: string) => console.log('text: ' + text)}
+        onChangeText={(text: string) => console.log('text: ' + text)}
         border={true}
       />
     </SafeAreaView>

package/src/components/atoms/text-input/text-input.test.js

@@ -10,7 +10,7 @@ describe('test input texts', () => {
         <TextInput
           keyboardType={KeyBoardTypes.DEFAULT}
           placeholder="dummy placeholder"
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
         />
       )
       .toJSON();
@@ -22,7 +22,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
         />
       )
       .toJSON();
@@ -34,7 +34,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
           border={true}
         />
       )
@@ -47,7 +47,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
           border={true}
           placeholder={'Text input field with a border'}
         />

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

@@ -428,3 +428,147 @@ exports[`test button component should render a button component with a solid ico
   </View>
 </View>
 `;
+
+exports[`test button component should render a success button component 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#67C14E",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+              },
+            ],
+            {
+              "color": "#FFFFFF",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Success button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test button component should render an error button component 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#D25E5E",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+              },
+            ],
+            {
+              "color": "#FFFFFF",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Error button
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -1,12 +1,14 @@
+import { PressableProps } from 'react-native';
 import { IconNameType, IconStyleType } from '../../../types/icontype.type';
-type ButtonProps = {
+type ButtonType = 'regular' | 'error' | 'success';
+interface ButtonProps extends PressableProps {
     label: string;
     icon?: boolean;
     iconStyle?: IconStyleType;
     iconName?: IconNameType;
     iconSize?: number;
     disabled?: boolean;
-    onPress?: () => void;
-};
-declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, onPress, }: ButtonProps) => JSX.Element;
+    type?: ButtonType;
+}
+declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, type, ...props }: ButtonProps) => JSX.Element;
 export { Button as Button };

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

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {Pressable, View} from 'react-native';
+import {Pressable, PressableProps, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './button.styles';
 import {Heading4} from '../../atoms/heading-components';
 import {IconNameType, IconStyleType} from '../../../types/icontype.type';
 import {Icon} from '../../../icons/index';
 
-type ButtonProps = {
+type ButtonType = 'regular' | 'error' | 'success';
+
+interface ButtonProps extends PressableProps {
   label: string;
   icon?: boolean;
   iconStyle?: IconStyleType;
   iconName?: IconNameType;
   iconSize?: number;
   disabled?: boolean;
-  onPress?: () => void;
-};
+  type?: ButtonType;
+}
 
 const Button = ({
   label,
@@ -25,13 +27,24 @@ const Button = ({
   iconName = 'calendar',
   iconSize,
   disabled,
-  onPress,
+  type = 'regular',
+  ...props
 }: ButtonProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, disabled);
+
+  let buttonColor;
+  if (type === 'error') {
+    buttonColor = context.colors.ui.error.dark;
+  } else if (type === 'success') {
+    buttonColor = context.colors.ui.success.dark;
+  } else {
+    buttonColor = context.colors.main['0'];
+  }
+
+  const styles = Stylesheet(context, disabled, buttonColor);
 
   return (
-    <Pressable disabled={disabled} onPress={onPress}>
+    <Pressable disabled={disabled} {...props}>
       <View style={styles.container}>
         {icon ? (
           <View style={styles.iconGap}>
@@ -39,7 +52,11 @@ const Button = ({
               style={iconStyle}
               name={iconName}
               color={
-                disabled ? context.colors.ui.darkgrey : context.colors.main['9']
+                disabled
+                  ? context.colors.ui.darkgrey
+                  : type === 'regular'
+                  ? context.colors.main['9']
+                  : context.colors.ui.white
               }
               size={iconSize}
             />
@@ -49,7 +66,11 @@ const Button = ({
           <Heading4
             textAlign={'center'}
             textColor={
-              disabled ? context.colors.ui.darkgrey : context.colors.main['9']
+              disabled
+                ? context.colors.ui.darkgrey
+                : type === 'regular'
+                ? context.colors.main['9']
+                : context.colors.ui.white
             }
           >
             {label}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {Button} from './button.component';
-import {Icon} from '../../../icons/index';
 const {View} = require('react-native');
 
 export const ButtonPreview = ({}: {}) => {
@@ -13,6 +12,16 @@ export const ButtonPreview = ({}: {}) => {
       }}
     >
       <Button label="Default button" onPress={() => console.log('clicked')} />
+      <Button
+        label="Error button"
+        type={'error'}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Success button"
+        type={'success'}
+        onPress={() => console.log('clicked')}
+      />
       <Button
         label="Icon button"
         icon={true}
@@ -24,6 +33,12 @@ export const ButtonPreview = ({}: {}) => {
         disabled={true}
         onPress={() => console.log('clicked')}
       />
+      <Button
+        label="Success disabled"
+        type={'success'}
+        disabled={true}
+        onPress={() => console.log('clicked')}
+      />
       <Button
         label="Disabled Icon button"
         disabled={true}