@tactics/toddle-styleguide 1.2.8 → 1.2.9

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

@@ -1,19 +1,12 @@
-import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
-import {VisualState} from '../../../types/visual-state.enum';
+import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+import { VisualState } from '../../../types/visual-state.enum';
 type FailedBubbleProps = {
-  id: string;
-  text: string;
-  visualState: VisualState;
-  bubbleAlignment: BubbleAlignment;
-  onPressEdit: (id: string) => void;
-  onPressDelete: (id: string) => void;
+    id: string;
+    text: string;
+    visualState: VisualState;
+    bubbleAlignment: BubbleAlignment;
+    onPressEdit: (id: string) => void;
+    onPressDelete: (id: string) => void;
 };
-declare const SendTextBubble: ({
-  id,
-  text,
-  visualState,
-  bubbleAlignment,
-  onPressEdit,
-  onPressDelete,
-}: FailedBubbleProps) => JSX.Element;
-export {SendTextBubble};
+declare const SendTextBubble: ({ id, text, visualState, bubbleAlignment, onPressEdit, onPressDelete, }: FailedBubbleProps) => JSX.Element;
+export { SendTextBubble };

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

@@ -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 = (

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

@@ -1,75 +1,59 @@
-export function Stylesheet(
-  context: any,
-  visualState: any,
-  bubbleAlignment: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      textBubbleContainer: (
-        | {
-            width: string;
-            paddingLeft: number;
-            paddingTop: number;
-            paddingRight: number;
-            paddingBottom: number;
-            borderRadius: number;
-            overflow: string;
-            justifyContent: string;
-            backgroundColor?: undefined;
-            borderBottomLeftRadius?: undefined;
-            borderBottomRightRadius?: undefined;
-          }
-        | {
-            backgroundColor: any;
-            width?: undefined;
-            paddingLeft?: undefined;
-            paddingTop?: undefined;
-            paddingRight?: undefined;
-            paddingBottom?: undefined;
-            borderRadius?: undefined;
-            overflow?: undefined;
-            justifyContent?: undefined;
-            borderBottomLeftRadius?: undefined;
-            borderBottomRightRadius?: undefined;
-          }
-        | {
-            borderBottomLeftRadius: number;
-            borderBottomRightRadius: number;
-            width?: undefined;
-            paddingLeft?: undefined;
-            paddingTop?: undefined;
-            paddingRight?: undefined;
-            paddingBottom?: undefined;
-            borderRadius?: undefined;
-            overflow?: undefined;
-            justifyContent?: undefined;
-            backgroundColor?: undefined;
-          }
-      )[];
-      text: (
-        | {
-            textAlignVertical: string;
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-            minHeight: number;
-            backgroundColor?: undefined;
-            color?: undefined;
-          }
-        | {
-            backgroundColor: any;
-            color: any;
-          }
-      )[];
-      swipedIcon: {
-        alignItems: 'center';
-        justifyContent: 'center';
-      };
-      swipedRow: {
+export function Stylesheet(context: any, visualState: any, bubbleAlignment: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    textBubbleContainer: ({
+        width: string;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        borderRadius: number;
+        overflow: string;
+        justifyContent: string;
+        backgroundColor?: undefined;
+        borderBottomLeftRadius?: undefined;
+        borderBottomRightRadius?: undefined;
+    } | {
+        backgroundColor: any;
+        width?: undefined;
+        paddingLeft?: undefined;
+        paddingTop?: undefined;
+        paddingRight?: undefined;
+        paddingBottom?: undefined;
+        borderRadius?: undefined;
+        overflow?: undefined;
+        justifyContent?: undefined;
+        borderBottomLeftRadius?: undefined;
+        borderBottomRightRadius?: undefined;
+    } | {
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        width?: undefined;
+        paddingLeft?: undefined;
+        paddingTop?: undefined;
+        paddingRight?: undefined;
+        paddingBottom?: undefined;
+        borderRadius?: undefined;
+        overflow?: undefined;
+        justifyContent?: undefined;
+        backgroundColor?: undefined;
+    })[];
+    text: ({
+        minHeight: number;
+        textAlignVertical: string;
+        backgroundColor?: undefined;
+    } | {
+        backgroundColor: any;
+        minHeight?: undefined;
+        textAlignVertical?: undefined;
+    })[];
+    swipedIcon: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    swipedRow: {
         flex: number;
-        flexDirection: 'row';
-        alignItems: 'center';
-        justifyContent: 'space-evenly';
-      };
-    }>;
-import {StyleSheet} from 'react-native';
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-evenly";
+    };
+}>;
+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/snackbar/snackbar.component.d.ts

@@ -1,7 +1,7 @@
-import {VisualState} from '../../../types/visual-state.enum';
+import { VisualState } from '../../../types/visual-state.enum';
 type SnackbarProps = {
-  text: string;
-  visualState: VisualState;
+    text: string;
+    visualState: VisualState;
 };
-declare const Snackbar: ({text, visualState}: SnackbarProps) => JSX.Element;
-export {Snackbar as Snackbar};
+declare const Snackbar: ({ text, visualState }: SnackbarProps) => JSX.Element;
+export { Snackbar as Snackbar };

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

@@ -1,7 +1,7 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 type SwipeProps = {
-  children: ReactNode;
-  onIndexChange?: (index: number) => void;
+    children: ReactNode;
+    onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({children, onIndexChange}: SwipeProps) => JSX.Element;
-export {Swipe as Swipe};
+declare const Swipe: ({ children, onIndexChange }: SwipeProps) => JSX.Element;
+export { Swipe as Swipe };

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

@@ -1,13 +1,8 @@
 type TagProps = {
-  value: string;
-  label: string;
-  onPress: (value: string, isSelected: boolean) => void;
-  isSelected: boolean;
+    value: string;
+    label: string;
+    onPress: (value: string, isSelected: boolean) => void;
+    isSelected: boolean;
 };
-declare const Tag: ({
-  label,
-  onPress,
-  value,
-  isSelected,
-}: TagProps) => JSX.Element;
-export {Tag as Tag};
+declare const Tag: ({ label, onPress, value, isSelected }: TagProps) => JSX.Element;
+export { Tag as Tag };

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -1,13 +1,8 @@
 interface TimePickerProps {
-  initialHours: string;
-  initialMinutes: string;
-  onChangeHours: (value: string) => void;
-  onChangeMinutes: (value: string) => void;
+    initialHours: string;
+    initialMinutes: string;
+    onChangeHours: (value: string) => void;
+    onChangeMinutes: (value: string) => void;
 }
-export declare const TimePicker: ({
-  initialHours,
-  initialMinutes,
-  onChangeHours,
-  onChangeMinutes,
-}: TimePickerProps) => JSX.Element;
+export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => JSX.Element;
 export {};

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,12 +1,8 @@
-import {VisualState} from '../../../types/visual-state.enum';
+import { VisualState } from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
-  text: string;
-  textColor?: string;
-  visualState: VisualState;
+    text: string;
+    textColor?: string;
+    visualState: VisualState;
 };
-declare const TimeTracker: ({
-  text,
-  visualState,
-  textColor,
-}: TimeTrackerProps) => JSX.Element;
-export {TimeTracker as TimeTracker};
+declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => JSX.Element;
+export { TimeTracker as TimeTracker };

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

@@ -1,9 +1,6 @@
 type TimeLineProps = {
-  checkIn: string;
-  checkOut?: string;
+    checkIn: string;
+    checkOut?: string;
 };
-export declare const TimeLine: ({
-  checkIn,
-  checkOut,
-}: TimeLineProps) => JSX.Element;
+export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => JSX.Element;
 export {};

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

@@ -1,61 +1,51 @@
-export function Stylesheet(
-  context: any,
-  startingPosition: any,
-  width: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: {
+export function Stylesheet(context: any, startingPosition: any, width: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: {
         width: string;
         marginTop: number;
         marginBottom: number;
-      };
-      lineContainer: {
+    };
+    lineContainer: {
         height: number;
         borderRadius: number;
         backgroundColor: any;
-        overflow: 'hidden';
-      };
-      checkInLine: {
-        height: number;
+        overflow: "hidden";
+    };
+    checkInLine: {
+        height: string;
         width: string;
         borderRadius: number;
         left: string;
-      };
-      checkInOutTextContainer: (
-        | {
-            width: string;
-            flexDirection: string;
-            height: number;
-            marginTop: number;
-            marginLeft?: undefined;
-            justifyContent?: undefined;
-            alignSelf?: undefined;
-          }
-        | {
-            marginLeft: string;
-            justifyContent: string;
-            width?: undefined;
-            flexDirection?: undefined;
-            height?: undefined;
-            marginTop?: undefined;
-            alignSelf?: undefined;
-          }
-        | {
-            alignSelf: string;
-            justifyContent: string;
-            width: string;
-            flexDirection?: undefined;
-            height?: undefined;
-            marginTop?: undefined;
-            marginLeft?: undefined;
-          }
-      )[];
-      checkInTime: {
+    };
+    checkInOutTextContainer: ({
+        width: string;
+        flexDirection: string;
+        height: number;
+        marginTop: number;
+        marginLeft?: undefined;
+        justifyContent?: undefined;
+        alignSelf?: undefined;
+    } | {
+        marginLeft: string;
+        justifyContent: string;
+        width?: undefined;
+        flexDirection?: undefined;
+        height?: undefined;
+        marginTop?: undefined;
+        alignSelf?: undefined;
+    } | {
+        alignSelf: string;
+        justifyContent: string;
+        width: string;
+        flexDirection?: undefined;
+        height?: undefined;
+        marginTop?: undefined;
+        marginLeft?: undefined;
+    })[];
+    checkInTime: {
         right: number;
-      };
-      checkOutTime: {
+    };
+    checkOutTime: {
         left: number;
-      };
-    }>;
-import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';
+    };
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

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/timestamp.component.d.ts

@@ -1,6 +1,7 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TimestampProps = {
-  sent: ToddleDateTime;
+    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>
   );
 };

package/src/components/molecules/wave-background/wave.component.d.ts

@@ -1,7 +1,2 @@
-import {WaveProps} from '../../atoms/static-wave/static-wave.component';
-export declare const WaveBackground: ({
-  customWavePath,
-  customStyle,
-  heightSvgContainer,
-  positionTop,
-}: WaveProps) => JSX.Element;
+import { WaveProps } from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;

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

@@ -1,13 +1,8 @@
 type ButtonProps = {
-  text: string;
-  disabled?: boolean;
-  onPress?: () => void;
-  backgroundColor?: string;
+    text: string;
+    disabled?: boolean;
+    onPress?: () => void;
+    backgroundColor?: string;
 };
-declare const WideButton: ({
-  text,
-  disabled,
-  onPress,
-  backgroundColor,
-}: ButtonProps) => JSX.Element;
-export {WideButton as WideButton};
+declare const WideButton: ({ text, disabled, onPress, backgroundColor, }: ButtonProps) => JSX.Element;
+export { WideButton as WideButton };