@tactics/toddle-styleguide 1.2.3 → 1.2.5

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}

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

@@ -1,17 +1,14 @@
-export function Stylesheet(
-  context: any,
-  disabled: any
-): {
-  container: {
-    backgroundColor: any;
-    paddingVertical: number;
-    paddingHorizontal: number;
-    flexDirection: 'row';
-    justifyContent: 'center';
-    alignItems: 'center';
-    borderRadius: number;
-  };
-  iconGap: {
-    marginRight: number;
-  };
+export function Stylesheet(context: any, disabled: any, buttonColor: any): {
+    container: {
+        backgroundColor: any;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+    };
+    iconGap: {
+        marginRight: number;
+    };
 };

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

@@ -1,12 +1,10 @@
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 
-export const Stylesheet = (context, disabled) =>
+export const Stylesheet = (context, disabled, buttonColor) =>
   StyleSheet.create({
     container: {
-      backgroundColor: disabled
-        ? context.colors.ui.lightgrey
-        : context.colors.main['0'],
+      backgroundColor: disabled ? context.colors.ui.lightgrey : buttonColor,
       paddingVertical: Scale.s,
       paddingHorizontal: Scale.l,
       flexDirection: 'row',

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

@@ -7,6 +7,18 @@ describe('test button component', () => {
     const tree = render.create(<Button label="Test button" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
+  it('should render a success button component', function () {
+    const tree = render
+      .create(<Button type={'success'} label="Success button" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an error button component', function () {
+    const tree = render
+      .create(<Button type={'error'} label="Error button" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
   it('should render a button component that is disabled', () => {
     const tree = render
       .create(<Button label="Button without icon" disabled={true} />)

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>
+    </>
   );
 };

package/src/components/molecules/message-input/__snapshots__/message-input.test.js.snap

@@ -109,6 +109,7 @@ exports[`Message Input test render a message text input component with placehold
     </RNSVGSvgView>
   </View>
   <TextInput
+    addAttachment={[Function]}
     keyboardType="default"
     multiline={true}
     onChangeText={[Function]}
@@ -346,6 +347,7 @@ exports[`Message Input test render a message text input component with placehold
     </RNSVGSvgView>
   </View>
   <TextInput
+    addAttachment={[Function]}
     keyboardType="email-address"
     multiline={true}
     onChangeText={[Function]}
@@ -583,6 +585,7 @@ exports[`Message Input test render a message text input component without placeh
     </RNSVGSvgView>
   </View>
   <TextInput
+    addAttachment={[Function]}
     keyboardType="default"
     multiline={true}
     onChangeText={[Function]}
@@ -819,6 +822,7 @@ exports[`Message Input test render a message text input component without placeh
     </RNSVGSvgView>
   </View>
   <TextInput
+    addAttachment={[Function]}
     keyboardType="email-address"
     multiline={true}
     onChangeText={[Function]}

package/src/components/molecules/message-input/message-input.component.d.ts

@@ -1,11 +1,9 @@
+import { TextInputProps } from 'react-native';
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-type MessageInputProps = {
-    placeholder?: string;
-    onChangeText: (text: string) => void;
-    value: string;
+interface MessageInputProps extends TextInputProps {
     keyboardType?: KeyBoardTypes;
     onPressSend: () => void;
     addAttachment: () => void;
-};
-declare const MessageInput: ({ placeholder, onChangeText, value, keyboardType, onPressSend, }: MessageInputProps) => JSX.Element;
+}
+declare const MessageInput: ({ keyboardType, onPressSend, ...props }: MessageInputProps) => JSX.Element;
 export { MessageInput };

package/src/components/molecules/message-input/message-input.component.tsx

@@ -1,25 +1,25 @@
 import React, {useContext} from 'react';
-import {Pressable, TextInput as RNTextInput, View} from 'react-native';
+import {
+  Pressable,
+  TextInput as RNTextInput,
+  TextInputProps,
+  View,
+} from 'react-native';
 import {Icon} from '../../../icons/index';
 import {Stylesheet} from './message-input.styles';
 import {ThemeCtx} from '../../../context/theme.context';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 
-type MessageInputProps = {
-  placeholder?: string;
-  onChangeText: (text: string) => void;
-  value: string;
+interface MessageInputProps extends TextInputProps {
   keyboardType?: KeyBoardTypes;
   onPressSend: () => void;
   addAttachment: () => void;
-};
+}
 
 const MessageInput = ({
-  placeholder,
-  onChangeText,
-  value,
   keyboardType,
   onPressSend,
+  ...props
 }: MessageInputProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context);
@@ -36,11 +36,9 @@ const MessageInput = ({
       <RNTextInput
         style={styles.textInput}
         multiline={true}
-        placeholder={placeholder}
         placeholderTextColor={Context.colors.ui.grey}
-        onChangeText={onChangeText}
-        value={value}
         keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
+        {...props}
       />
       <Pressable onPress={onPressSend}>
         <Icon

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

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
+import {KeyboardAvoidingView, Platform, View} from 'react-native';
 import {MessageInput} from './message-input.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 
 export const MessageInputPreview = ({}: {}) => {
   const [input, setInput] = useState('');
@@ -18,24 +19,36 @@ export const MessageInputPreview = ({}: {}) => {
   };
 
   return (
-    <View
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={{
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 16,
+        backgroundColor: '#ECECEC',
+        borderRadius: 10,
+        paddingVertical: 5,
+        marginLeft: 10,
       }}
     >
-      <MessageInput
-        placeholder={'Type a message'}
-        value={input}
-        onChangeText={onChangeHandler}
-        onPressSend={() => {
-          submitHandler(input);
-          clear();
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
         }}
-        addAttachment={() => alert('add an image')}
-      />
-    </View>
+      >
+        <MessageInput
+          placeholder={'Type a message'}
+          value={input}
+          onChangeText={onChangeHandler}
+          onPressSend={() => {
+            submitHandler(input);
+            clear();
+          }}
+          addAttachment={() => alert('add an image')}
+          keyboardType={KeyBoardTypes.DEFAULT}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 };

package/src/components/molecules/password-input/password-input.component.d.ts

@@ -1,9 +1,7 @@
+import { TextInputProps } from 'react-native';
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-type PasswordInputProps = {
-    placeholder?: string;
-    onChangeText: (text: string) => void;
-    value: string;
+interface PasswordInputProps extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
     keyboardType?: KeyBoardTypes;
-};
-export declare const PasswordInput: ({ placeholder, onChangeText, value, keyboardType, }: PasswordInputProps) => JSX.Element;
+}
+export declare const PasswordInput: ({ keyboardType, ...props }: PasswordInputProps) => JSX.Element;
 export {};

package/src/components/molecules/password-input/password-input.component.tsx

@@ -1,24 +1,22 @@
 import * as React from 'react';
 import {useContext, useState} from 'react';
-import {Pressable, TextInput as RNTextInput, View} from 'react-native';
+import {
+  Pressable,
+  TextInput as RNTextInput,
+  TextInputProps,
+  View,
+} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './password-input.styles';
 import {Icon} from '../../../icons';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 
-type PasswordInputProps = {
-  placeholder?: string;
-  onChangeText: (text: string) => void;
-  value: string;
+interface PasswordInputProps
+  extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
   keyboardType?: KeyBoardTypes;
-};
+}
 
-export const PasswordInput = ({
-  placeholder,
-  onChangeText,
-  value,
-  keyboardType,
-}: PasswordInputProps) => {
+export const PasswordInput = ({keyboardType, ...props}: PasswordInputProps) => {
   const [secure, setSecure] = useState(true);
 
   const Context = useContext(ThemeCtx);
@@ -29,12 +27,10 @@ export const PasswordInput = ({
       <View style={styles.textInputContainer}>
         <RNTextInput
           style={styles.textInput}
-          placeholder={placeholder}
           placeholderTextColor={Context.colors.ui.grey}
           secureTextEntry={secure}
-          value={value}
-          onChangeText={onChangeText}
           keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
+          {...props}
         />
       </View>
       <Pressable