@tactics/toddle-styleguide 1.2.8 → 1.3.0

package/src/components/atoms/text-input/__snapshots__/text-input.test.js.snap

@@ -1,16 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test input texts show an input field with a border and placeholder text 1`] = `
-<View
+<TextInput
+  keyboardType="email-address"
+  onChangeText={[Function]}
+  placeholder="Text input field with a border"
+  placeholderTextColor="#9AA5B1"
   style={
     [
       {
-        "alignItems": "flex-start",
         "backgroundColor": "#FFFFFF",
         "borderRadius": 8,
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
         "height": 44,
         "justifyContent": "center",
-        "overflow": "hidden",
+        "lineHeight": 20,
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -24,36 +30,25 @@ exports[`test input texts show an input field with a border and placeholder text
       },
     ]
   }
->
-  <TextInput
-    keyboardType="email-address"
-    onChangeText={[Function]}
-    placeholder="Text input field with a border"
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "lineHeight": 20,
-        "width": "100%",
-      }
-    }
-  />
-</View>
+/>
 `;
 
 exports[`test input texts show an input field with a border and without placeholder text 1`] = `
-<View
+<TextInput
+  keyboardType="email-address"
+  onChangeText={[Function]}
+  placeholderTextColor="#9AA5B1"
   style={
     [
       {
-        "alignItems": "flex-start",
         "backgroundColor": "#FFFFFF",
         "borderRadius": 8,
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
         "height": 44,
         "justifyContent": "center",
-        "overflow": "hidden",
+        "lineHeight": 20,
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -67,35 +62,26 @@ exports[`test input texts show an input field with a border and without placehol
       },
     ]
   }
->
-  <TextInput
-    keyboardType="email-address"
-    onChangeText={[Function]}
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "lineHeight": 20,
-        "width": "100%",
-      }
-    }
-  />
-</View>
+/>
 `;
 
 exports[`test input texts shows placeholder when provided 1`] = `
-<View
+<TextInput
+  keyboardType="default"
+  onChangeText={[Function]}
+  placeholder="dummy placeholder"
+  placeholderTextColor="#9AA5B1"
   style={
     [
       {
-        "alignItems": "flex-start",
         "backgroundColor": "#FFFFFF",
         "borderRadius": 8,
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
         "height": 44,
         "justifyContent": "center",
-        "overflow": "hidden",
+        "lineHeight": 20,
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -105,36 +91,25 @@ exports[`test input texts shows placeholder when provided 1`] = `
       undefined,
     ]
   }
->
-  <TextInput
-    keyboardType="default"
-    onChangeText={[Function]}
-    placeholder="dummy placeholder"
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "lineHeight": 20,
-        "width": "100%",
-      }
-    }
-  />
-</View>
+/>
 `;
 
 exports[`test input texts text input field without placeholder text 1`] = `
-<View
+<TextInput
+  keyboardType="email-address"
+  onChangeText={[Function]}
+  placeholderTextColor="#9AA5B1"
   style={
     [
       {
-        "alignItems": "flex-start",
         "backgroundColor": "#FFFFFF",
         "borderRadius": 8,
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
         "height": 44,
         "justifyContent": "center",
-        "overflow": "hidden",
+        "lineHeight": 20,
         "paddingBottom": 8,
         "paddingLeft": 16,
         "paddingRight": 16,
@@ -144,20 +119,5 @@ exports[`test input texts text input field without placeholder text 1`] = `
       undefined,
     ]
   }
->
-  <TextInput
-    keyboardType="email-address"
-    onChangeText={[Function]}
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "lineHeight": 20,
-        "width": "100%",
-      }
-    }
-  />
-</View>
+/>
 `;

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

@@ -4,19 +4,21 @@ export function Stylesheet(
 ):
   | StyleSheet.NamedStyles<any>
   | StyleSheet.NamedStyles<{
-      container: (
+      input: (
         | {
-            width: string;
-            height: number;
-            borderRadius: number;
-            overflow: string;
+            lineHeight: number;
+            color: any;
             paddingLeft: number;
             paddingTop: number;
             paddingRight: number;
             paddingBottom: number;
             backgroundColor: any;
+            borderRadius: number;
+            fontFamily: string;
+            fontSize: number;
+            height: number;
+            width: string;
             justifyContent: string;
-            alignItems: string;
             borderStyle?: undefined;
             borderWidth?: undefined;
             borderColor?: undefined;
@@ -25,25 +27,7 @@ export function Stylesheet(
             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: {
-        lineHeight: number;
-        color: any;
-        fontFamily: string;
-        fontSize: number;
-        width: string;
-      };
     }>;
-import {StyleSheet} from 'react-native';
+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/day/__snapshots__/day.test.js.snap

@@ -5,7 +5,6 @@ exports[`Test for the day component renders a day component that is also selecte
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "#F5F7FA",
       "justifyContent": "center",
     }
   }
@@ -71,17 +70,19 @@ exports[`Test for the day component renders a day component that is also selecte
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "borderColor": "#F5F7FA",
-          "borderRadius": 24,
-          "borderWidth": 1,
-          "height": 48,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 48,
-        }
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 24,
+            "height": 48,
+            "justifyContent": "center",
+            "padding": 12,
+            "width": 48,
+          },
+          {
+            "backgroundColor": "#647ACB",
+          },
+        ]
       }
     >
       <Text
@@ -136,7 +137,6 @@ exports[`Test for the day component renders a day component that is not selected
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "#F5F7FA",
       "justifyContent": "center",
     }
   }
@@ -202,17 +202,17 @@ exports[`Test for the day component renders a day component that is not selected
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#F5F7FA",
-          "borderColor": "#F5F7FA",
-          "borderRadius": 24,
-          "borderWidth": 1,
-          "height": 48,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 48,
-        }
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 24,
+            "height": 48,
+            "justifyContent": "center",
+            "padding": 12,
+            "width": 48,
+          },
+          false,
+        ]
       }
     >
       <Text

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,35 @@
 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;
-  };
-};
+  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/failed-to-send/failed-bubble.component.d.ts

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

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

@@ -12,8 +12,8 @@ import {SmallText} from '../../atoms/paragraph-components';
 type FailedBubbleProps = {
   id: string;
   text: string;
-  onPressRefresh: (id: string) => void;
-  onPressDelete: (id: string) => void;
+  onPressRefresh?: (id: string) => void;
+  onPressDelete?: (id: string) => void;
 };
 
 const FailedTextBubble = ({
@@ -37,24 +37,32 @@ const FailedTextBubble = ({
 
     return (
       <View style={styles.swipedRow}>
-        <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={() => onPressRefresh(id)} testID="refresh-button">
-            <Icon
-              style={'regular'}
-              name={'refresh'}
-              color={context.colors.ui.error.xlight}
-            />
-          </Pressable>
-        </Animated.View>
-        <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
-            <Icon
-              style={'regular'}
-              name={'trash'}
-              color={context.colors.ui.error.xlight}
-            />
-          </Pressable>
-        </Animated.View>
+        {onPressRefresh && (
+          <Animated.View style={[styles.swipedIcon, {opacity}]}>
+            <Pressable
+              onPress={() => onPressRefresh(id)}
+              testID="refresh-button"
+            >
+              <Icon
+                style={'regular'}
+                name={'refresh'}
+                color={context.colors.ui.error.xlight}
+              />
+            </Pressable>
+          </Animated.View>
+        )}
+
+        {onPressDelete && (
+          <Animated.View style={[styles.swipedIcon, {opacity}]}>
+            <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
+              <Icon
+                style={'regular'}
+                name={'trash'}
+                color={context.colors.ui.error.xlight}
+              />
+            </Pressable>
+          </Animated.View>
+        )}
       </View>
     );
   };
@@ -71,11 +79,20 @@ const FailedTextBubble = ({
       </View>
 
       <View style={styles.textBubbleContainer}>
-        <Swipeable renderRightActions={RenderRefreshDeleteAction}>
+        {onPressRefresh && onPressDelete ? (
+          <Swipeable renderRightActions={RenderRefreshDeleteAction}>
+            <SmallText
+              textColor={context.colors.ui.white}
+              addStyle={styles.text}
+            >
+              {text}
+            </SmallText>
+          </Swipeable>
+        ) : (
           <SmallText textColor={context.colors.ui.white} addStyle={styles.text}>
             {text}
           </SmallText>
-        </Swipeable>
+        )}
       </View>
     </GestureHandlerRootView>
   );