@tactics/toddle-styleguide 1.2.6 → 1.2.7

package/App.tsx

@@ -69,6 +69,7 @@ import {BackgroundGradientPreview} from './src/components/atoms/background-gradi
 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';
+import {QuickMessagePreview} from './src/components/atoms/quick-message/quick-message.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -221,6 +222,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Quick Filter"
         onPress={() => navigation.push('quick-filter')}
       />
+      <ReactBtn
+        title="Quick Message"
+        onPress={() => navigation.push('quick-message')}
+      />
       <ReactBtn
         title="Search Input"
         onPress={() => navigation.push('search')}
@@ -403,6 +408,9 @@ function App() {
           <Stack.Screen name="quick-filter">
             {() => <QuickFilterPreview />}
           </Stack.Screen>
+          <Stack.Screen name="quick-message">
+            {() => <QuickMessagePreview />}
+          </Stack.Screen>
           <Stack.Screen name="search">{() => <SearchPreview />}</Stack.Screen>
           <Stack.Screen name="select-link">
             {() => <SelectLinkPreview />}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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

@@ -1885,7 +1885,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 13 Juli 2023 "
+            accessibilityLabel=" Donderdag 13 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1917,10 +1917,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,
@@ -1940,9 +1936,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2307,7 +2300,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 18 Juli 2023 "
+            accessibilityLabel="today Dinsdag 18 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2339,6 +2332,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,
@@ -2358,6 +2355,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5865,8 +5865,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 13 Juli 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Donderdag 13 Juli 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -5897,10 +5896,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,
@@ -5921,7 +5916,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -6295,7 +6290,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 18 Juli 2023 "
+            accessibilityLabel="today Dinsdag 18 Juli 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6326,6 +6322,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,
@@ -6346,7 +6346,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QuickMessage should render correctly 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": "#515F6C",
+      "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

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

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

@@ -0,0 +1,32 @@
+import {Pressable, PressableProps} from 'react-native';
+import {Paragraph} from '../paragraph-components';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './quick-message.styles';
+
+interface QuickMessageProps extends PressableProps {
+  message: string;
+  setMessage: (value: string) => void;
+}
+
+export const QuickMessage = ({
+  message,
+  setMessage,
+  ...props
+}: QuickMessageProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <Pressable
+      onPress={() => setMessage(message)}
+      {...props}
+      style={styles.container}
+      testID={'quick-message-test'}
+    >
+      <Paragraph textAlign={'center'} textColor={context.colors.ui.white}>
+        {message}
+      </Paragraph>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1 @@
+export declare const QuickMessagePreview: () => JSX.Element;

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

@@ -0,0 +1,33 @@
+import {Text, View} from 'react-native';
+import {QuickMessage} from './quick-message.component';
+import {useState} from 'react';
+
+export const QuickMessagePreview = () => {
+  const [message, setMessage] = useState<string>('');
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 32,
+        padding: 32,
+      }}
+    >
+      <QuickMessage message={'Test message'} setMessage={setMessage} />
+      <QuickMessage
+        message={'Option message number 2'}
+        setMessage={setMessage}
+      />
+      <QuickMessage
+        message={
+          'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
+        }
+        setMessage={setMessage}
+      />
+
+      <Text style={{textAlign: 'center'}}>Pressed message: {message}</Text>
+    </View>
+  );
+};

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

@@ -0,0 +1,14 @@
+export function Stylesheet(context: any): {
+    container: {
+        width: string;
+        backgroundColor: any;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingRight: number;
+        paddingLeft: number;
+        borderBottomLeftRadius: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+};

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

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      backgroundColor: context.colors.ui.darkgrey,
+      paddingTop: Scale.l,
+      paddingBottom: Scale.l,
+      paddingRight: Scale.l,
+      paddingLeft: Scale.l,
+      borderBottomLeftRadius: Scale.xs,
+      borderTopLeftRadius: Scale.l,
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+    },
+  });

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {QuickMessage} from './quick-message.component';
+
+describe('QuickMessage', () => {
+  it('should render correctly', () => {
+    const {toJSON} = render(
+      <QuickMessage message="Test message" setMessage={() => {}} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('QuickMessage', () => {
+  it('should set the message when pressed', () => {
+    const setMessageMock = jest.fn();
+    const {getByTestId} = render(
+      <QuickMessage message="Test message" setMessage={setMessageMock} />
+    );
+
+    const pressable = getByTestId('quick-message-test');
+    fireEvent.press(pressable);
+
+    expect(setMessageMock).toHaveBeenCalledWith('Test message');
+  });
+});

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

@@ -429,6 +429,78 @@ exports[`test button component should render a button component with a solid ico
 </View>
 `;
 
+exports[`test button component should render a light 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": "#FFFFFF",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Light button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`test button component should render a success button component 1`] = `
 <View
   accessibilityState={

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

@@ -1,6 +1,6 @@
 import { PressableProps } from 'react-native';
 import { IconNameType, IconStyleType } from '../../../types/icontype.type';
-type ButtonType = 'regular' | 'error' | 'success';
+type ButtonType = 'regular' | 'error' | 'success' | 'light';
 interface ButtonProps extends PressableProps {
     label: string;
     icon?: boolean;

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

@@ -8,7 +8,7 @@ import {Heading4} from '../../atoms/heading-components';
 import {IconNameType, IconStyleType} from '../../../types/icontype.type';
 import {Icon} from '../../../icons/index';
 
-type ButtonType = 'regular' | 'error' | 'success';
+type ButtonType = 'regular' | 'error' | 'success' | 'light';
 
 interface ButtonProps extends PressableProps {
   label: string;
@@ -33,12 +33,17 @@ const Button = ({
   const context = useContext(ThemeCtx);
 
   let buttonColor;
+  let textColor = context.colors.ui.white;
   if (type === 'error') {
     buttonColor = context.colors.ui.error.dark;
   } else if (type === 'success') {
     buttonColor = context.colors.ui.success.dark;
+  } else if (type === 'light') {
+    buttonColor = context.colors.ui.white;
+    textColor = context.colors.ui.darkgrey;
   } else {
     buttonColor = context.colors.main['0'];
+    textColor = context.colors.main['9'];
   }
 
   const styles = Stylesheet(context, disabled, buttonColor);
@@ -51,13 +56,7 @@ const Button = ({
             <Icon
               style={iconStyle}
               name={iconName}
-              color={
-                disabled
-                  ? context.colors.ui.darkgrey
-                  : type === 'regular'
-                  ? context.colors.main['9']
-                  : context.colors.ui.white
-              }
+              color={disabled ? context.colors.ui.darkgrey : textColor}
               size={iconSize}
             />
           </View>
@@ -65,13 +64,7 @@ const Button = ({
         <View>
           <Heading4
             textAlign={'center'}
-            textColor={
-              disabled
-                ? context.colors.ui.darkgrey
-                : type === 'regular'
-                ? context.colors.main['9']
-                : context.colors.ui.white
-            }
+            textColor={disabled ? context.colors.ui.darkgrey : textColor}
           >
             {label}
           </Heading4>

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

@@ -22,6 +22,11 @@ export const ButtonPreview = ({}: {}) => {
         type={'success'}
         onPress={() => console.log('clicked')}
       />
+      <Button
+        label="Light button"
+        type={'light'}
+        onPress={() => console.log('clicked')}
+      />
       <Button
         label="Icon button"
         icon={true}

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

@@ -19,6 +19,12 @@ describe('test button component', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  it('should render a light button component', function () {
+    const tree = render
+      .create(<Button type={'light'} label="Light 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/failed-to-send/__snapshots__/failed-bubble.test.js.snap

@@ -174,6 +174,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="refresh-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -274,6 +275,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"

package/src/components/molecules/failed-to-send/failed-bubble.component.d.ts

@@ -1,7 +1,8 @@
 type FailedBubbleProps = {
+    id: string;
     text: string;
-    onPressRefresh: () => void;
-    onPressDelete: () => void;
+    onPressRefresh: (id: string) => void;
+    onPressDelete: (id: string) => void;
 };
-declare const FailedTextBubble: ({ text, onPressRefresh, onPressDelete, }: FailedBubbleProps) => JSX.Element;
+declare const FailedTextBubble: ({ id, text, onPressRefresh, onPressDelete, }: FailedBubbleProps) => JSX.Element;
 export { FailedTextBubble };

package/src/components/molecules/failed-to-send/failed-bubble.component.tsx

@@ -10,12 +10,14 @@ import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
 import {SmallText} from '../../atoms/paragraph-components';
 
 type FailedBubbleProps = {
+  id: string;
   text: string;
-  onPressRefresh: () => void;
-  onPressDelete: () => void;
+  onPressRefresh: (id: string) => void;
+  onPressDelete: (id: string) => void;
 };
 
 const FailedTextBubble = ({
+  id,
   text,
   onPressRefresh,
   onPressDelete,
@@ -36,7 +38,7 @@ const FailedTextBubble = ({
     return (
       <View style={styles.swipedRow}>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressRefresh}>
+          <Pressable onPress={() => onPressRefresh(id)} testID="refresh-button">
             <Icon
               style={'regular'}
               name={'refresh'}
@@ -45,7 +47,7 @@ const FailedTextBubble = ({
           </Pressable>
         </Animated.View>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressDelete}>
+          <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
             <Icon
               style={'regular'}
               name={'trash'}

package/src/components/molecules/failed-to-send/failed-bubble.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {FailedTextBubble} from './failed-bubble.component';
+import {render, fireEvent} from '@testing-library/react-native';
 
 describe('Failed text bubble test', () => {
   it('shows a failed to send text bubble that is swipeable with refresh and trash icon, which if we press them we can resend or delete the message', () => {
     const tree = renderer
       .create(
         <FailedTextBubble
+          id={'1'}
           text={'Testing our failed bubble'}
           onPressRefresh={() => alert('pressed resend')}
           onPressDelete={() => alert('delete the message')}
@@ -17,3 +19,57 @@ describe('Failed text bubble test', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('FailedTextBubble', () => {
+  const mockId = '123';
+  const mockText = 'Failed message';
+  const mockOnPressRefresh = jest.fn();
+  const mockOnPressDelete = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component correctly', () => {
+    const {getByText} = render(
+      <FailedTextBubble
+        id={mockId}
+        text={mockText}
+        onPressRefresh={mockOnPressRefresh}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    expect(getByText(mockText)).toBeDefined();
+  });
+
+  it('should call onPressRefresh when the refresh button is pressed', () => {
+    const {getByTestId} = render(
+      <FailedTextBubble
+        id={mockId}
+        text={mockText}
+        onPressRefresh={mockOnPressRefresh}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('refresh-button'));
+
+    expect(mockOnPressRefresh).toHaveBeenCalledWith(mockId);
+  });
+
+  it('should call onPressDelete when the delete button is pressed', () => {
+    const {getByTestId} = render(
+      <FailedTextBubble
+        id={mockId}
+        text={mockText}
+        onPressRefresh={mockOnPressRefresh}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('delete-button'));
+
+    expect(mockOnPressDelete).toHaveBeenCalledWith(mockId);
+  });
+});