@tactics/toddle-styleguide 1.2.7 → 1.2.9

package/src/components/atoms/quick-message/__snapshots__/quick-message.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`QuickMessage should render correctly 1`] = `
+exports[`QuickMessage should render a quick message that is not selected 1`] = `
 <View
   accessibilityState={
     {
@@ -70,3 +70,74 @@ exports[`QuickMessage should render correctly 1`] = `
   </Text>
 </View>
 `;
+
+exports[`QuickMessage should render a quick message that is selected 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]}
+  style={
+    {
+      "backgroundColor": "#647ACB",
+      "borderBottomLeftRadius": 8,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 24,
+      "borderTopRightRadius": 24,
+      "paddingBottom": 24,
+      "paddingLeft": 24,
+      "paddingRight": 24,
+      "paddingTop": 24,
+      "width": "100%",
+    }
+  }
+  testID="quick-message-test"
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Test message
+  </Text>
+</View>
+`;

package/src/components/atoms/quick-message/quick-message.component.d.ts

@@ -2,6 +2,7 @@ import { PressableProps } from 'react-native';
 interface QuickMessageProps extends PressableProps {
     message: string;
     setMessage: (value: string) => void;
+    selectedMessage: boolean;
 }
-export declare const QuickMessage: ({ message, setMessage, ...props }: QuickMessageProps) => JSX.Element;
+export declare const QuickMessage: ({ message, setMessage, selectedMessage, ...props }: QuickMessageProps) => JSX.Element;
 export {};

package/src/components/atoms/quick-message/quick-message.component.tsx

@@ -7,15 +7,17 @@ import {Stylesheet} from './quick-message.styles';
 interface QuickMessageProps extends PressableProps {
   message: string;
   setMessage: (value: string) => void;
+  selectedMessage: boolean;
 }
 
 export const QuickMessage = ({
   message,
   setMessage,
+  selectedMessage,
   ...props
 }: QuickMessageProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet(context, selectedMessage);
 
   return (
     <Pressable

package/src/components/atoms/quick-message/quick-message.preview.tsx

@@ -15,16 +15,25 @@ export const QuickMessagePreview = () => {
         padding: 32,
       }}
     >
-      <QuickMessage message={'Test message'} setMessage={setMessage} />
+      <QuickMessage
+        message={'Test message'}
+        setMessage={setMessage}
+        selectedMessage={message === 'Test message'}
+      />
       <QuickMessage
         message={'Option message number 2'}
         setMessage={setMessage}
+        selectedMessage={message === 'Option message number 2'}
       />
       <QuickMessage
         message={
           'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
         }
         setMessage={setMessage}
+        selectedMessage={
+          message ===
+          'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
+        }
       />
 
       <Text style={{textAlign: 'center'}}>Pressed message: {message}</Text>

package/src/components/atoms/quick-message/quick-message.styles.d.ts

@@ -1,4 +1,4 @@
-export function Stylesheet(context: any): {
+export function Stylesheet(context: any, selectedMessage: any): {
     container: {
         width: string;
         backgroundColor: any;

package/src/components/atoms/quick-message/quick-message.styles.js

@@ -1,11 +1,13 @@
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, selectedMessage) =>
   StyleSheet.create({
     container: {
       width: '100%',
-      backgroundColor: context.colors.ui.darkgrey,
+      backgroundColor: !selectedMessage
+        ? context.colors.ui.darkgrey
+        : context.colors.main['5'],
       paddingTop: Scale.l,
       paddingBottom: Scale.l,
       paddingRight: Scale.l,

package/src/components/atoms/quick-message/quick-message.test.js

@@ -3,19 +3,51 @@ import {render, fireEvent} from '@testing-library/react-native';
 import {QuickMessage} from './quick-message.component';
 
 describe('QuickMessage', () => {
-  it('should render correctly', () => {
+  it('should render a quick message that is not selected', () => {
     const {toJSON} = render(
-      <QuickMessage message="Test message" setMessage={() => {}} />
+      <QuickMessage
+        message="Test message"
+        setMessage={() => {}}
+        selectedMessage={false}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should render a quick message that is selected', () => {
+    const {toJSON} = render(
+      <QuickMessage
+        message="Test message"
+        setMessage={() => {}}
+        selectedMessage={true}
+      />
     );
     expect(toJSON()).toMatchSnapshot();
   });
-});
 
-describe('QuickMessage', () => {
-  it('should set the message when pressed', () => {
+  it('calls setMessage when pressed (selected)', () => {
+    const setMessageMock = jest.fn();
+    const {getByTestId} = render(
+      <QuickMessage
+        message="Test message"
+        setMessage={setMessageMock}
+        selectedMessage={true} // Mocking selectedMessage as true
+      />
+    );
+
+    const pressable = getByTestId('quick-message-test');
+    fireEvent.press(pressable);
+
+    expect(setMessageMock).toHaveBeenCalledWith('Test message');
+  });
+
+  it('calls setMessage when pressed (not selected)', () => {
     const setMessageMock = jest.fn();
     const {getByTestId} = render(
-      <QuickMessage message="Test message" setMessage={setMessageMock} />
+      <QuickMessage
+        message="Test message"
+        setMessage={setMessageMock}
+        selectedMessage={false} // Mocking selectedMessage as false
+      />
     );
 
     const pressable = getByTestId('quick-message-test');

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useContext} from 'react';
 
 import {
-  View,
   TextInput as NativeTextInput,
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
@@ -20,14 +19,12 @@ const TextInput = ({keyboardType, border, ...props}: TextInputProps) => {
   const styles = Stylesheet(context, border);
 
   return (
-    <View style={styles.container}>
-      <NativeTextInput
-        placeholderTextColor={context.colors.ui.grey}
-        style={styles.input}
-        keyboardType={keyboardType}
-        {...props}
-      />
-    </View>
+    <NativeTextInput
+      placeholderTextColor={context.colors.ui.grey}
+      style={styles.input}
+      keyboardType={keyboardType}
+      {...props}
+    />
   );
 };
 export {TextInput as TextInput};

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import {TextInput} from './text-input.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {SafeAreaView} from 'react-native';
+import {View} from 'react-native';
 
 export const TextInputPreview = ({} = {}) => {
   return (
-    <SafeAreaView style={{flex: 1, justifyContent: 'space-around'}}>
+    <View style={{flex: 1, justifyContent: 'space-around', padding: 32}}>
       <TextInput
         onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
@@ -36,6 +36,6 @@ export const TextInputPreview = ({} = {}) => {
         onChangeText={(text: string) => console.log('text: ' + text)}
         border={true}
       />
-    </SafeAreaView>
+    </View>
   );
 };

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

@@ -1,49 +1,25 @@
-export function Stylesheet(
-  context: any,
-  border: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: (
-        | {
-            width: string;
-            height: number;
-            borderRadius: number;
-            overflow: string;
-            paddingLeft: number;
-            paddingTop: number;
-            paddingRight: number;
-            paddingBottom: number;
-            backgroundColor: any;
-            justifyContent: string;
-            alignItems: string;
-            borderStyle?: undefined;
-            borderWidth?: undefined;
-            borderColor?: undefined;
-          }
-        | {
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: any;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-            overflow?: undefined;
-            paddingLeft?: undefined;
-            paddingTop?: undefined;
-            paddingRight?: undefined;
-            paddingBottom?: undefined;
-            backgroundColor?: undefined;
-            justifyContent?: undefined;
-            alignItems?: undefined;
-          }
-      )[];
-      input: {
+export function Stylesheet(context: any, border: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    input: ({
         lineHeight: number;
         color: any;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        backgroundColor: any;
+        borderRadius: number;
         fontFamily: string;
         fontSize: number;
+        height: number;
         width: string;
-      };
-    }>;
-import {StyleSheet} from 'react-native';
+        justifyContent: string;
+        borderStyle?: undefined;
+        borderWidth?: undefined;
+        borderColor?: undefined;
+    } | {
+        borderStyle: string;
+        borderWidth: number;
+        borderColor: any;
+    })[];
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

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

@@ -1,24 +1,24 @@
 import React from 'react';
-
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 import {Font} from '../../../theme/font';
 
 export const Stylesheet = (context, border) =>
   StyleSheet.create({
-    container: [
+    input: [
       {
+        height: Scale.m * 2.75,
         width: '100%',
-        height: 44,
-        borderRadius: Scale.xs,
-        overflow: 'hidden',
+        justifyContent: 'center',
+        ...Font.medium,
+        lineHeight: 20,
+        color: context.colors.ui.black,
         paddingLeft: Scale.m,
         paddingTop: Scale.xs,
         paddingRight: Scale.m,
         paddingBottom: Scale.xs,
         backgroundColor: context.colors.ui.white,
-        justifyContent: 'center',
-        alignItems: 'flex-start',
+        borderRadius: Scale.xs,
       },
       border && {
         borderStyle: 'solid',
@@ -26,10 +26,4 @@ export const Stylesheet = (context, border) =>
         borderColor: context.colors.ui.lightgrey,
       },
     ],
-    input: {
-      width: '100%',
-      ...Font.medium,
-      lineHeight: 20,
-      color: context.colors.ui.black,
-    },
   });

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

@@ -1,14 +1,18 @@
-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;
-    };
+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/day/day.component.tsx

@@ -20,12 +20,17 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
       ToddleDateTime.now().toFormat('yyyy-MM-dd')
     );
   };
-  const styles = Stylesheet(context, isSelected, isToday());
+  const styles = Stylesheet(context, isSelected);
 
   return (
     <View style={styles.container}>
       <View style={styles.dayNameContainer}>
-        <Heading4 textColor={context.colors.ui.grey}>
+        <Heading4
+          textColor={
+            isToday() ? context.colors.main[5] : context.colors.ui.grey
+          }
+          bold={isToday()}
+        >
           {date.weekdayShort.toUpperCase().slice(0, 2)}
         </Heading4>
       </View>
@@ -33,7 +38,11 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
         <Pressable style={styles.dayCircle} onPress={() => onSelect(date)}>
           <Heading4
             textColor={
-              isSelected ? context.colors.main[9] : context.colors.ui.grey
+              isSelected
+                ? context.colors.main[9]
+                : !isSelected && isToday()
+                ? context.colors.main[5]
+                : context.colors.ui.grey
             }
             textAlign={'center'}
           >
@@ -42,7 +51,11 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
 
           <TinyText
             textColor={
-              isSelected ? context.colors.main[9] : context.colors.ui.grey
+              isSelected
+                ? context.colors.main[9]
+                : !isSelected && isToday()
+                ? context.colors.main[5]
+                : context.colors.ui.grey
             }
             textAlign={'center'}
           >

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

@@ -1,44 +1,27 @@
-export function Stylesheet(
-  context: any,
-  isSelected: any,
-  isToday: any
-): {
-  container: {
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-  };
-  dayCircle: {
-    width: number;
-    height: number;
-    borderRadius: number;
-    padding: number;
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-    borderColor: any;
-    borderWidth: number;
-  };
-  dayNumber: {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-  monthNumber: {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-  selectedDate: {
-    color: any;
-  };
-  dayNameContainer: {
-    marginBottom: number;
-  };
-  dayName: {
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-};
+export function Stylesheet(context: any, isSelected: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    dayCircle: ({
+        width: number;
+        height: number;
+        borderRadius: number;
+        padding: number;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor?: undefined;
+    } | {
+        backgroundColor: any;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+        padding?: undefined;
+        alignItems?: undefined;
+        justifyContent?: undefined;
+    })[];
+    dayNameContainer: {
+        marginBottom: number;
+    };
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

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

@@ -2,28 +2,25 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 
-export const Stylesheet = (context, isSelected, isToday) =>
+export const Stylesheet = (context, isSelected) =>
   StyleSheet.create({
     container: {
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: context.colors.ui.xlightgrey,
-    },
-    dayCircle: {
-      width: Scale.xxl,
-      height: Scale.xxl,
-      borderRadius: Scale.xxl / 2,
-      padding: Scale.s,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: isSelected
-        ? context.colors.main[5]
-        : context.colors.ui.xlightgrey,
-      borderColor: isToday
-        ? context.colors.ui.grey
-        : context.colors.ui.xlightgrey,
-      borderWidth: 1,
     },
+    dayCircle: [
+      {
+        width: Scale.xxl,
+        height: Scale.xxl,
+        borderRadius: Scale.xxl / 2,
+        padding: Scale.s,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      isSelected && {
+        backgroundColor: context.colors.main[5],
+      },
+    ],
     dayNameContainer: {
       marginBottom: Scale.s,
     },

package/src/components/molecules/filter-tab/filter-tab.component.d.ts

@@ -3,7 +3,8 @@ type FilterTab = {
         value: string;
         label: string;
     }[];
-    filterValue: (value: string) => void;
+    setFilterValue: (value: string) => void;
+    setActivePage?: (index: number) => void;
 };
-export declare const FilterTab: ({ tabItem, filterValue }: FilterTab) => JSX.Element;
+export declare const FilterTab: ({ tabItem, setFilterValue, setActivePage, }: FilterTab) => JSX.Element;
 export {};

package/src/components/molecules/filter-tab/filter-tab.component.tsx

@@ -11,15 +11,19 @@ type FilterTab = {
     value: string;
     label: string;
   }[];
-  filterValue: (value: string) => void;
+  setFilterValue: (value: string) => void;
+  setActivePage?: (index: number) => void;
 };
 
-export const FilterTab = ({tabItem, filterValue}: FilterTab) => {
+export const FilterTab = ({
+  tabItem,
+  setFilterValue,
+  setActivePage,
+}: FilterTab) => {
   const [dimensions, setDimensions] = useState({width: 0, height: 0});
   const [translateValue] = useState(new Animated.Value(0));
 
   const [clickedButton, setClickedButton] = useState(0);
-  const [isActive, setIsActive] = useState(false);
 
   // Default from design.
   const minTabWidth = 95;
@@ -55,9 +59,9 @@ export const FilterTab = ({tabItem, filterValue}: FilterTab) => {
             style={styles.tab}
             onPress={() => {
               setClickedButton(index);
-              setIsActive(!isActive);
               translateTab(index, inRow);
-              filterValue(tab.value);
+              setFilterValue(tab.value);
+              setActivePage ? setActivePage(index) : null;
             }}
           >
             <Heading4

package/src/components/molecules/filter-tab/filter-tab.preview.tsx

@@ -70,10 +70,10 @@ export const FilterTabPreview = ({}: {}) => {
           marginBottom: 20,
         }}
       >
-        <FilterTab tabItem={tabs} filterValue={setFilterValue} />
+        <FilterTab tabItem={tabs} setFilterValue={setFilterValue} />
       </View>
       <View>
-        <FilterTab tabItem={data} filterValue={setFilterValue} />
+        <FilterTab tabItem={data} setFilterValue={setFilterValue} />
       </View>
     </View>
   );

package/src/components/molecules/filter-tab/filter-tab.test.js

@@ -15,7 +15,7 @@ describe('Filter tab test', () => {
       },
     ];
     const tree = render
-      .create(<FilterTab tabItem={tabs1} filterValue={() => 'NFC'} />)
+      .create(<FilterTab tabItem={tabs1} setFilterValue={() => 'NFC'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -35,7 +35,7 @@ describe('Filter tab test', () => {
       },
     ];
     const tree = render
-      .create(<FilterTab tabItem={tabs2} filterValue={() => 'M'} />)
+      .create(<FilterTab tabItem={tabs2} setFilterValue={() => 'M'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });