@tactics/toddle-styleguide 1.2.3 → 1.2.4

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/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: {

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {useContext, useEffect, useState} from 'react';
-
-import {ThemeCtx} from '../../../context/theme.context';
-import {Dimensions, useWindowDimensions, View} from 'react-native';
+import {useEffect, useState} from 'react';
+import {Dimensions, Platform, StatusBar, View} from 'react-native';
 import {Stylesheet} from './popover.styles';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Modal, Foreground} from './components';
@@ -15,8 +13,6 @@ type PopoverProps = {
   children?: React.ReactNode;
 };
 
-const window = Dimensions.get('window');
-
 const Popover = ({
   isVisible,
   title,
@@ -24,20 +20,37 @@ const Popover = ({
   onClose,
   children,
 }: PopoverProps) => {
-  const {width, height} = useWindowDimensions();
+  const [windowHeight, setWindowHeight] = useState(
+    Dimensions.get('window').height
+  );
+
+  useEffect(() => {
+    const updateWindowHeight = () => {
+      let availableHeight = Dimensions.get('window').height;
+      if (Platform.OS === 'android') {
+        availableHeight += StatusBar.currentHeight ?? 0;
+      }
+      setWindowHeight(availableHeight);
+    };
+
+    updateWindowHeight();
+
+    const subscription = Dimensions.addEventListener(
+      'change',
+      updateWindowHeight
+    );
+
+    return () => subscription?.remove();
+  }, []);
 
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet();
 
   return (
-    <View
-      style={[styles.element, {width: width, height: height}]}
-      pointerEvents={isVisible ? 'auto' : 'none'}
-    >
+    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
       <Backdrop isVisible={isVisible} />
       <Foreground>
         <Modal
-          windowHeight={height}
+          windowHeight={windowHeight}
           isVisible={isVisible}
           onClose={onClose}
           title={title}