@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/src/components/organisms/person-info-card/__snapshots__/person-info-card.test.js.snap

@@ -11,47 +11,51 @@ exports[`Person info card tests renders a person info card with initials and lab
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 38,
-                "lineHeight": 47.8,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
+            false,
+            false,
             {
-              "textTransform": "uppercase",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
       >
-        ZD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 38,
+                  "lineHeight": 47.8,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "textTransform": "uppercase",
+              },
+            ]
+          }
+        >
+          ZD
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -121,47 +125,51 @@ exports[`Person info card tests renders a person info card with initials and lab
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 38,
-                "lineHeight": 47.8,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
+            false,
+            false,
             {
-              "textTransform": "uppercase",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
       >
-        ZD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 38,
+                  "lineHeight": 47.8,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "textTransform": "uppercase",
+              },
+            ]
+          }
+        >
+          ZD
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -231,47 +239,51 @@ exports[`Person info card tests renders a person info card with initials and no
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 38,
-                "lineHeight": 47.8,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
+            false,
+            false,
             {
-              "textTransform": "uppercase",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
       >
-        ZD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 38,
+                  "lineHeight": 47.8,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "textTransform": "uppercase",
+              },
+            ]
+          }
+        >
+          ZD
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -339,47 +351,51 @@ exports[`Person info card tests renders a person info card with initials, label
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#F16868",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 38,
-                "lineHeight": 47.8,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#F16868",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
+            false,
+            false,
             {
-              "textTransform": "uppercase",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
       >
-        ZD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 38,
+                  "lineHeight": 47.8,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "textTransform": "uppercase",
+              },
+            ]
+          }
+        >
+          ZD
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -449,47 +465,51 @@ exports[`Person info card tests renders a person info card with initials, label
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#E5E8EB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <Text
+      <View
         style={
           [
-            [
-              {
-                "fontFamily": "SourceSansProBold",
-                "fontSize": 38,
-                "lineHeight": 47.8,
-              },
-            ],
             {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#E5E8EB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
+            false,
+            false,
             {
-              "textTransform": "uppercase",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
       >
-        ZD
-      </Text>
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansProBold",
+                  "fontSize": 38,
+                  "lineHeight": 47.8,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "textTransform": "uppercase",
+              },
+            ]
+          }
+        >
+          ZD
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -559,69 +579,73 @@ exports[`Person info card tests renders a person info card with picture and labe
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          false,
-          {
-            "borderRadius": 60,
-            "height": 120,
-            "width": 120,
-          },
-        ]
-      }
+      style={null}
     >
-      <ViewManagerAdapter_ExpoLinearGradient
-        proxiedProperties={
-          {
-            "colors": [
-              4281681564,
-              4284775115,
-              4292481661,
-            ],
-            "endPoint": [
-              0.9,
-              0.9,
-            ],
-            "locations": [
-              0,
-              0.55,
-              1,
-            ],
-            "startPoint": [
-              0.1,
-              0.1,
-            ],
-          }
-        }
+      <View
         style={
           [
             {
-              "height": "100%",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-          ]
-        }
-      />
-      <Image
-        source={1}
-        style={
-          [
+            false,
+            false,
             {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
+              "borderRadius": 60,
+              "height": 120,
+              "width": 120,
             },
           ]
         }
-      />
+      >
+        <ViewManagerAdapter_ExpoLinearGradient
+          proxiedProperties={
+            {
+              "colors": [
+                4281681564,
+                4284775115,
+                4292481661,
+              ],
+              "endPoint": [
+                0.9,
+                0.9,
+              ],
+              "locations": [
+                0,
+                0.55,
+                1,
+              ],
+              "startPoint": [
+                0.1,
+                0.1,
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <Image
+          source={1}
+          style={
+            [
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
+            ]
+          }
+        />
+      </View>
     </View>
   </View>
   <View

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

@@ -383,7 +383,7 @@ exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -772,7 +772,7 @@ exports[`test text-bubble given the visualState is DEFAULT return a light-blue c
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -1161,7 +1161,7 @@ exports[`test text-bubble given the visualState is ERROR return a red colored te
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -1546,7 +1546,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a text-bubble
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -1931,7 +1931,7 @@ exports[`test text-bubble given the visualState is RECEIVE return a textBubble w
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -2320,7 +2320,7 @@ exports[`test text-bubble given the visualState is WARNING return an orange colo
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>
@@ -2767,7 +2767,7 @@ exports[`test text-bubble return a text bubble, that will be send, but does not
         ]
       }
     >
-      25 May, 9:08
+      9:08
     </Text>
   </View>
 </View>

package/src/components/templates/modal/modal.component.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-
 import {Stylesheet} from './modal.styles';
 import {Dimensions, View} from 'react-native';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
-
 import {Animated} from 'react-native';
 import {Stylesheet} from './modal.styles';
 import {Close} from './close/close.component';

package/src/components/templates/popover/components/modal/modal.styles.d.ts

@@ -1,4 +1,4 @@
-export function Stylesheet(Context: any): {
+export function Stylesheet(context: any): {
   element: {
     position: 'relative';
     display: 'flex';
@@ -10,6 +10,7 @@ export function Stylesheet(Context: any): {
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
     backgroundColor: any;
+    minHeight: string;
   };
   inner: {
     display: 'flex';

package/src/components/templates/popover/components/modal/modal.styles.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../../../theme/scale';
 
-export const Stylesheet = (Context) =>
+export const Stylesheet = (context) =>
   StyleSheet.create({
     element: {
       position: 'relative',
@@ -14,7 +14,7 @@ export const Stylesheet = (Context) =>
       paddingRight: Scale.m,
       borderTopLeftRadius: Scale.l,
       borderTopRightRadius: Scale.l,
-      backgroundColor: Context.colors.ui.white,
+      backgroundColor: context.colors.ui.white,
       minHeight: '40%',
     },
     inner: {