@tactics/toddle-styleguide 1.3.0 → 1.3.2

package/App.tsx

@@ -392,7 +392,9 @@ function App() {
           <Stack.Screen name="message-input">
             {() => <MessageInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="modal" options={{headerShown: false}}>
+            {() => <ModalPreview />}
+          </Stack.Screen>
           <Stack.Screen name="more-info-button">
             {() => <MoreInfoButtonPreview />}
           </Stack.Screen>

package/package.json

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

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

@@ -1300,7 +1300,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 10 Augustus 2023 "
+            accessibilityLabel=" Donderdag 10 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1332,10 +1332,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,
@@ -1355,9 +1351,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1388,7 +1381,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 11 Augustus 2023 "
+            accessibilityLabel="today Vrijdag 11 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1420,6 +1413,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,
@@ -1439,6 +1436,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4683,8 +4683,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 10 Augustus 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Donderdag 10 Augustus 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4715,10 +4714,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,
@@ -4739,7 +4734,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4771,7 +4766,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 11 Augustus 2023 "
+            accessibilityLabel="today Vrijdag 11 Augustus 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4802,6 +4798,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,
@@ -4822,7 +4822,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -5,6 +5,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
   style={
     {
       "flexDirection": "row",
+      "gap": 12,
     }
   }
 >
@@ -13,7 +14,6 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
       {
         "justifyContent": "center",
         "padding": 2,
-        "width": "14%",
       }
     }
   >
@@ -79,16 +79,16 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
     style={
       {
         "backgroundColor": "#F16868",
-        "borderBottomLeftRadius": 32,
-        "borderBottomRightRadius": 8,
-        "borderRadius": 24,
+        "borderBottomLeftRadius": 8,
+        "borderBottomRightRadius": 32,
+        "borderTopLeftRadius": 24,
+        "borderTopRightRadius": 24,
+        "flex": 1,
         "justifyContent": "center",
-        "overflow": "hidden",
         "paddingBottom": 16,
         "paddingLeft": 24,
         "paddingRight": 24,
         "paddingTop": 16,
-        "width": "86%",
       }
     }
   >
@@ -199,8 +199,8 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                     },
                   ]
                 }
-                vbHeight={21}
-                vbWidth={20}
+                vbHeight={18}
+                vbWidth={16}
                 width={24}
               >
                 <RNSVGGroup
@@ -212,24 +212,18 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                   }
                 >
                   <RNSVGPath
-                    d="M1.33337 1.5V7.125H1.96335M18.5997 9.375C18.0665 4.9354 14.4196 1.5 10 1.5C6.36288 1.5 3.24902 3.82669 1.96335 7.125M1.96335 7.125H6.75004M18.6667 19.5V13.875H18.0367M18.0367 13.875C16.7511 17.1733 13.6372 19.5 10 19.5C5.58045 19.5 1.93353 16.0646 1.40043 11.625M18.0367 13.875H13.25"
-                    propList={
-                      [
-                        "stroke",
-                        "strokeWidth",
-                        "strokeLinecap",
-                        "strokeLinejoin",
-                      ]
-                    }
-                    stroke={
+                    d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                    fill={
                       {
                         "payload": 4294695385,
                         "type": 0,
                       }
                     }
-                    strokeLinecap={1}
-                    strokeLinejoin={1}
-                    strokeWidth="2"
+                    propList={
+                      [
+                        "fill",
+                      ]
+                    }
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -300,8 +294,8 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                     },
                   ]
                 }
-                vbHeight={22}
-                vbWidth={21}
+                vbHeight={18}
+                vbWidth={17}
                 width={24}
               >
                 <RNSVGGroup
@@ -313,24 +307,21 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                   }
                 >
                   <RNSVGPath
-                    d="M18.375 5.58333L17.3993 18.7377C17.3152 19.8715 16.3354 20.75 15.155 20.75H5.84502C4.66458 20.75 3.68484 19.8715 3.60074 18.7377L2.625 5.58333M8.25 9.91667V16.4167M12.75 9.91667V16.4167M13.875 5.58333V2.33333C13.875 1.73502 13.3713 1.25 12.75 1.25H8.25C7.62868 1.25 7.125 1.73502 7.125 2.33333V5.58333M1.5 5.58333H19.5"
-                    propList={
-                      [
-                        "stroke",
-                        "strokeWidth",
-                        "strokeLinecap",
-                        "strokeLinejoin",
-                      ]
-                    }
-                    stroke={
+                    clipRule={0}
+                    d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                    fill={
                       {
                         "payload": 4294695385,
                         "type": 0,
                       }
                     }
-                    strokeLinecap={1}
-                    strokeLinejoin={1}
-                    strokeWidth="2"
+                    fillRule={0}
+                    propList={
+                      [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>

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

@@ -44,7 +44,7 @@ const FailedTextBubble = ({
               testID="refresh-button"
             >
               <Icon
-                style={'regular'}
+                style={'solid'}
                 name={'refresh'}
                 color={context.colors.ui.error.xlight}
               />
@@ -56,7 +56,7 @@ const FailedTextBubble = ({
           <Animated.View style={[styles.swipedIcon, {opacity}]}>
             <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
               <Icon
-                style={'regular'}
+                style={'solid'}
                 name={'trash'}
                 color={context.colors.ui.error.xlight}
               />
@@ -68,7 +68,7 @@ const FailedTextBubble = ({
   };
 
   return (
-    <GestureHandlerRootView style={{flexDirection: 'row'}}>
+    <GestureHandlerRootView style={styles.rootContainer}>
       <View style={styles.iconContainer}>
         <Icon
           style={'regular'}

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

@@ -1,30 +1,29 @@
 export function Stylesheet(context: any): {
+  rootContainer: {
+    flexDirection: 'row';
+    gap: number;
+  };
   iconContainer: {
-    width: string;
     padding: number;
     justifyContent: 'center';
   };
   textBubbleContainer: {
-    width: string;
+    flex: number;
     paddingLeft: number;
     paddingTop: number;
     paddingRight: number;
     paddingBottom: number;
-    borderRadius: number;
-    overflow: 'hidden';
     justifyContent: 'center';
     backgroundColor: any;
-    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
     borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
   };
   text: {
+    minHeight: number;
     textAlignVertical: 'center';
     backgroundColor: any;
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-    minHeight: number;
   };
   swipedIcon: {
     alignItems: 'center';

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

@@ -3,23 +3,26 @@ import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context) =>
   StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'row',
+      gap: Scale.s,
+    },
     iconContainer: {
-      width: '14%',
       padding: Scale.xxxs,
       justifyContent: 'center',
     },
     textBubbleContainer: {
-      width: '86%',
+      flex: 1,
       paddingLeft: Scale.l,
       paddingTop: Scale.m,
       paddingRight: Scale.l,
       paddingBottom: Scale.m,
-      borderRadius: Scale.l,
-      overflow: 'hidden',
       justifyContent: 'center',
       backgroundColor: context.colors.ui.error.default,
-      borderBottomRightRadius: Scale.xs,
-      borderBottomLeftRadius: Scale.xl,
+      borderTopLeftRadius: Scale.l,
+      borderTopRightRadius: Scale.l,
+      borderBottomLeftRadius: Scale.xs,
+      borderBottomRightRadius: Scale.xl,
     },
     text: {
       minHeight: 30,