@tactics/toddle-styleguide 1.2.2 → 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/modal/components/fade-panel.component.d.ts

@@ -6,6 +6,7 @@ type FadePanelProps = {
     onClose: () => void;
     maxHeight: number;
     children: React.ReactNode;
+    scrollable: boolean | undefined;
 };
-export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, }: FadePanelProps) => JSX.Element;
+export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, scrollable, }: FadePanelProps) => JSX.Element;
 export {};

package/src/components/templates/modal/components/fade-panel.component.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import {Animated, ScrollView} from 'react-native';
+import {Animated, ScrollView, View} from 'react-native';
 import {ThemeCtx} from '../../../../context/theme.context';
 import {Stylesheet} from './fade-panel.styles';
 import {Heading} from '../../popover/components/modal/heading/heading.component';
@@ -12,6 +12,7 @@ type FadePanelProps = {
   onClose: () => void;
   maxHeight: number;
   children: React.ReactNode;
+  scrollable: boolean | undefined;
 };
 
 export const FadePanel = ({
@@ -21,6 +22,7 @@ export const FadePanel = ({
   onClose,
   maxHeight,
   children,
+  scrollable = true,
 }: FadePanelProps) => {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
@@ -47,7 +49,11 @@ export const FadePanel = ({
     <Animated.View style={styles.rootContainer}>
       <Close onPress={onClose} />
       <Heading title={title} subtitle={subtitle} />
-      <ScrollView>{children}</ScrollView>
+      {scrollable ? (
+        <ScrollView>{children}</ScrollView>
+      ) : (
+        <View>{children}</View>
+      )}
     </Animated.View>
   );
 };

package/src/components/templates/modal/modal.component.d.ts

@@ -5,6 +5,7 @@ type ModalProps = {
     isVisible: boolean;
     onClose: () => void;
     children?: React.ReactNode;
+    scrollable?: boolean;
 };
-export declare const Modal: ({ title, subtitle, isVisible, onClose, children, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ title, subtitle, isVisible, onClose, children, scrollable, }: ModalProps) => JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ type ModalProps = {
   isVisible: boolean;
   onClose: () => void;
   children?: React.ReactNode;
+  scrollable?: boolean;
 };
 
 const window = Dimensions.get('window');
@@ -21,21 +22,20 @@ export const Modal = ({
   isVisible,
   onClose,
   children,
+  scrollable,
 }: ModalProps) => {
   const [windowHeight, setWindowHeight] = useState(window.height);
-  const [windowWidth, setWindowWidth] = useState(window.width);
 
   useEffect(() => {
     const subscription = Dimensions.addEventListener('change', ({window}) => {
       setWindowHeight(window.height);
-      setWindowWidth(window.width);
     });
     return () => subscription?.remove();
   });
 
   const maxHeight = Math.round(windowHeight / 100) * 80;
 
-  const styles = Stylesheet(windowWidth, windowHeight);
+  const styles = Stylesheet();
 
   return (
     <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
@@ -47,6 +47,7 @@ export const Modal = ({
           onClose={onClose}
           title={title}
           subtitle={subtitle}
+          scrollable={scrollable}
         >
           {children}
         </FadePanel>

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

@@ -1,10 +1,7 @@
-export function Stylesheet(
-  windowWidth: any,
-  windowHeight: any
-): {
+export function Stylesheet(): {
   element: {
-    width: any;
-    height: any;
+    width: string;
+    height: string;
     position: 'absolute';
     left: number;
     top: number;

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

@@ -2,11 +2,11 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (windowWidth, windowHeight) =>
+export const Stylesheet = () =>
   StyleSheet.create({
     element: {
-      width: windowWidth,
-      height: windowHeight,
+      width: '100%',
+      height: '100%',
       position: 'absolute',
       left: 0,
       top: 0,

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';
@@ -68,8 +67,6 @@ const Modal = ({
 
   const transform = [{translateY: translateY}];
 
-  console.log(maxHeight);
-
   return (
     <Animated.View
       style={[styles.element, {maxHeight: maxHeight}, {transform: transform}]}

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';