@tactics/toddle-styleguide 1.2.8 → 1.3.0

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

@@ -19,7 +19,6 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
           "backgroundColor": "#E0E8F9",
         },
         false,
-        false,
         {
           "borderBottomLeftRadius": 8,
           "borderBottomRightRadius": 32,
@@ -319,7 +318,6 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
                   "backgroundColor": "#E0E8F9",
                 },
                 false,
-                false,
               ],
             ]
           }
@@ -352,7 +350,6 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
         },
         false,
         false,
-        false,
         {
           "borderBottomLeftRadius": 32,
           "borderBottomRightRadius": 8,
@@ -651,7 +648,6 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
                   "backgroundColor": "#E0E8F9",
                 },
                 false,
-                false,
               ],
             ]
           }
@@ -681,9 +677,8 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
         },
         false,
         {
-          "backgroundColor": "#FEEFDB",
+          "backgroundColor": "#FFD398",
         },
-        false,
         {
           "borderBottomLeftRadius": 8,
           "borderBottomRightRadius": 32,
@@ -970,7 +965,7 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
                 },
               ],
               {
-                "color": "#FAAC44",
+                "color": "#1F2933",
                 "textAlign": undefined,
                 "width": "100%",
               },
@@ -981,9 +976,8 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
                 },
                 false,
                 {
-                  "backgroundColor": "#FEEFDB",
+                  "backgroundColor": "#FFD398",
                 },
-                false,
               ],
             ]
           }
@@ -1013,10 +1007,9 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
         },
         false,
         {
-          "backgroundColor": "#FEEFDB",
+          "backgroundColor": "#FFD398",
         },
         false,
-        false,
         {
           "borderBottomLeftRadius": 32,
           "borderBottomRightRadius": 8,
@@ -1302,7 +1295,7 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
                 },
               ],
               {
-                "color": "#FAAC44",
+                "color": "#1F2933",
                 "textAlign": undefined,
                 "width": "100%",
               },
@@ -1313,9 +1306,8 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
                 },
                 false,
                 {
-                  "backgroundColor": "#FEEFDB",
+                  "backgroundColor": "#FFD398",
                 },
-                false,
               ],
             ]
           }
@@ -1345,9 +1337,6 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
         },
         false,
         false,
-        {
-          "backgroundColor": "#F16868",
-        },
         {
           "borderBottomLeftRadius": 8,
           "borderBottomRightRadius": 32,
@@ -1487,7 +1476,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
                     }
                     stroke={
                       {
-                        "payload": 4294695385,
+                        "payload": 4279837036,
                         "type": 0,
                       }
                     }
@@ -1588,7 +1577,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
                     }
                     stroke={
                       {
-                        "payload": 4294695385,
+                        "payload": 4279837036,
                         "type": 0,
                       }
                     }
@@ -1634,7 +1623,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
                 },
               ],
               {
-                "color": "#FFFFFF",
+                "color": "#1F2933",
                 "textAlign": undefined,
                 "width": "100%",
               },
@@ -1645,9 +1634,6 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
                 },
                 false,
                 false,
-                {
-                  "backgroundColor": "#F16868",
-                },
               ],
             ]
           }
@@ -1677,9 +1663,6 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
         },
         false,
         false,
-        {
-          "backgroundColor": "#F16868",
-        },
         false,
         {
           "borderBottomLeftRadius": 32,
@@ -1819,7 +1802,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
                     }
                     stroke={
                       {
-                        "payload": 4294695385,
+                        "payload": 4279837036,
                         "type": 0,
                       }
                     }
@@ -1920,7 +1903,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
                     }
                     stroke={
                       {
-                        "payload": 4294695385,
+                        "payload": 4279837036,
                         "type": 0,
                       }
                     }
@@ -1966,7 +1949,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
                 },
               ],
               {
-                "color": "#FFFFFF",
+                "color": "#1F2933",
                 "textAlign": undefined,
                 "width": "100%",
               },
@@ -1977,9 +1960,6 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
                 },
                 false,
                 false,
-                {
-                  "backgroundColor": "#F16868",
-                },
               ],
             ]
           }

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

@@ -5,10 +5,10 @@ type FailedBubbleProps = {
   text: string;
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
-  onPressEdit: (id: string) => void;
-  onPressDelete: (id: string) => void;
+  onPressEdit?: (id: string) => void;
+  onPressDelete?: (id: string) => void;
 };
-declare const SendTextBubble: ({
+export declare const SendTextBubble: ({
   id,
   text,
   visualState,
@@ -16,4 +16,4 @@ declare const SendTextBubble: ({
   onPressEdit,
   onPressDelete,
 }: FailedBubbleProps) => JSX.Element;
-export {SendTextBubble};
+export {};

package/src/components/molecules/send-bubble/send-text-bubble.component.tsx

@@ -16,11 +16,11 @@ type FailedBubbleProps = {
   text: string;
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
-  onPressEdit: (id: string) => void;
-  onPressDelete: (id: string) => void;
+  onPressEdit?: (id: string) => void;
+  onPressDelete?: (id: string) => void;
 };
 
-const SendTextBubble = ({
+export const SendTextBubble = ({
   id,
   text,
   visualState,
@@ -42,16 +42,12 @@ const SendTextBubble = ({
       ? context.colors.main['0']
       : visualState === VisualState.WARNING
       ? context.colors.ui.warning.dark
-      : visualState === VisualState.ERROR
-      ? context.colors.ui.error.xlight
       : null;
   }
 
   const textColorCheck = (visualState: VisualState) => {
     if (visualState === VisualState.DEFAULT) return context.colors.main['0'];
-    else if (visualState === VisualState.WARNING)
-      return context.colors.ui.warning.dark;
-    else if (visualState === VisualState.ERROR) return context.colors.ui.white;
+    if (visualState === VisualState.WARNING) return context.colors.ui.black;
   };
 
   const RenderEditDeleteAction = (
@@ -66,16 +62,24 @@ const SendTextBubble = ({
 
     return (
       <View style={styles.swipedRow}>
-        <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={() => onPressEdit(id)} testID="edit-button">
-            <Icon style={'regular'} name={'pencil'} color={iconColorCheck()} />
-          </Pressable>
-        </Animated.View>
-        <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
-            <Icon style={'regular'} name={'trash'} color={iconColorCheck()} />
-          </Pressable>
-        </Animated.View>
+        {onPressEdit && (
+          <Animated.View style={[styles.swipedIcon, {opacity}]}>
+            <Pressable onPress={() => onPressEdit(id)} testID="edit-button">
+              <Icon
+                style={'regular'}
+                name={'pencil'}
+                color={iconColorCheck()}
+              />
+            </Pressable>
+          </Animated.View>
+        )}
+        {onPressDelete && (
+          <Animated.View style={[styles.swipedIcon, {opacity}]}>
+            <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
+              <Icon style={'regular'} name={'trash'} color={iconColorCheck()} />
+            </Pressable>
+          </Animated.View>
+        )}
       </View>
     );
   };
@@ -83,20 +87,27 @@ const SendTextBubble = ({
   return (
     <GestureHandlerRootView>
       <View style={styles.textBubbleContainer}>
-        <Swipeable
-          ref={swipeableRef}
-          renderRightActions={RenderEditDeleteAction}
-        >
+        {onPressDelete && onPressEdit ? (
+          <Swipeable
+            ref={swipeableRef}
+            renderRightActions={RenderEditDeleteAction}
+          >
+            <SmallText
+              textColor={textColorCheck(visualState)}
+              addStyle={styles.text}
+            >
+              {text}
+            </SmallText>
+          </Swipeable>
+        ) : (
           <SmallText
             textColor={textColorCheck(visualState)}
             addStyle={styles.text}
           >
             {text}
           </SmallText>
-        </Swipeable>
+        )}
       </View>
     </GestureHandlerRootView>
   );
 };
-
-export {SendTextBubble};

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

@@ -48,17 +48,14 @@ export function Stylesheet(
       )[];
       text: (
         | {
-            textAlignVertical: string;
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
             minHeight: number;
+            textAlignVertical: string;
             backgroundColor?: undefined;
-            color?: undefined;
           }
         | {
             backgroundColor: any;
-            color: any;
+            minHeight?: undefined;
+            textAlignVertical?: undefined;
           }
       )[];
       swipedIcon: {
@@ -72,4 +69,4 @@ export function Stylesheet(
         justifyContent: 'space-evenly';
       };
     }>;
-import {StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/molecules/send-bubble/send-text-bubble.styles.js

@@ -20,10 +20,7 @@ export const Stylesheet = (context, visualState, bubbleAlignment) =>
         backgroundColor: context.colors.main['9'],
       },
       visualState === VisualState.WARNING && {
-        backgroundColor: context.colors.ui.warning.xlight,
-      },
-      visualState === VisualState.ERROR && {
-        backgroundColor: context.colors.ui.error.default,
+        backgroundColor: context.colors.ui.warning.light,
       },
       bubbleAlignment === BubbleAlignment.RECEIVE && {
         borderBottomLeftRadius: Scale.xs,
@@ -43,10 +40,7 @@ export const Stylesheet = (context, visualState, bubbleAlignment) =>
         backgroundColor: context.colors.main['9'],
       },
       visualState === VisualState.WARNING && {
-        backgroundColor: context.colors.ui.warning.xlight,
-      },
-      visualState === VisualState.ERROR && {
-        backgroundColor: context.colors.ui.error.default,
+        backgroundColor: context.colors.ui.warning.light,
       },
     ],
     swipedIcon: {

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

@@ -15,7 +15,7 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
       {
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
-        "height": 8,
+        "height": 16,
         "overflow": "hidden",
       }
     }
@@ -41,7 +41,7 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
       style={
         {
           "borderRadius": 50,
-          "height": 8,
+          "height": "100%",
           "left": "10%",
           "width": "33.333333333333336%",
         }
@@ -142,7 +142,7 @@ exports[`Timeline visual test renders a check-in time with no known check-out ti
       {
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
-        "height": 8,
+        "height": 16,
         "overflow": "hidden",
       }
     }
@@ -168,7 +168,7 @@ exports[`Timeline visual test renders a check-in time with no known check-out ti
       style={
         {
           "borderRadius": 50,
-          "height": 8,
+          "height": "100%",
           "left": "10%",
           "width": "25%",
         }

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

@@ -17,7 +17,7 @@ export function Stylesheet(
         overflow: 'hidden';
       };
       checkInLine: {
-        height: number;
+        height: string;
         width: string;
         borderRadius: number;
         left: string;

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

@@ -9,13 +9,13 @@ export const Stylesheet = (context, startingPosition, width) =>
       marginBottom: Scale.xs,
     },
     lineContainer: {
-      height: Scale.xs,
+      height: Scale.m,
       borderRadius: 50,
       backgroundColor: context.colors.ui.lightgrey,
       overflow: 'hidden',
     },
     checkInLine: {
-      height: Scale.xs,
+      height: '100%',
       width: width.toString() + '%',
       borderRadius: 50,
       left: startingPosition.toString() + '%',

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

@@ -22,6 +22,7 @@ exports[`Timestamp component test Renders a timestamp component, this will be ad
     ]
   }
 >
-  9:08
+   
+  25 May, 9:08
 </Text>
 `;

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

@@ -1,6 +1,7 @@
 import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TimestampProps = {
   sent: ToddleDateTime;
+  label?: string;
 };
-export declare const Timestamp: ({sent}: TimestampProps) => JSX.Element;
+export declare const Timestamp: ({sent, label}: TimestampProps) => JSX.Element;
 export {};

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

@@ -7,18 +7,15 @@ import {SmallText} from '../../atoms/paragraph-components';
 
 type TimestampProps = {
   sent: ToddleDateTime;
+  label?: string;
 };
 
-export const Timestamp = ({sent}: TimestampProps) => {
+export const Timestamp = ({sent, label}: TimestampProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet();
 
   const timestampToStringHandler = (timestamp: ToddleDateTime) => {
-    return timestamp.toLocaleString({
-      hourCycle: 'h24',
-      hour: 'numeric',
-      minute: '2-digit',
-    });
+    return timestamp.toFormat('d LLL, H:mm');
   };
 
   return (
@@ -27,7 +24,7 @@ export const Timestamp = ({sent}: TimestampProps) => {
       textAlign={'right'}
       addStyle={styles.timestampText}
     >
-      {timestampToStringHandler(sent)}
+      {label} {timestampToStringHandler(sent)}
     </SmallText>
   );
 };