@tactics/toddle-styleguide 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/molecules/time-picker/time-picker.preview.tsx

@@ -50,7 +50,6 @@ export const TimePickerPreview = ({}: {}) => {
         subtitle={'Registratie aanpassen'}
         onClose={() => setPopoverIsVisible(false)}
         isVisible={popoverIsVisible}
-        scrollable={false}
       >
         <View>
           <View style={{alignItems: 'center', marginBottom: 16}}>

package/src/components/organisms/journal-entry/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from './entry-type-indicator/entry-type-indicator';
+export * from './entry-type-indicator/entry-type-indicator.component';
 export * from './journal-entry-type/journal-entry-type.component';

package/src/components/templates/modal/components/fade-panel.component.d.ts

@@ -6,7 +6,6 @@ type FadePanelProps = {
   onClose: () => void;
   maxHeight: number;
   children: React.ReactNode;
-  scrollable: boolean | undefined;
 };
 export declare const FadePanel: ({
   title,
@@ -15,6 +14,5 @@ export declare const FadePanel: ({
   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, View} from 'react-native';
+import {Animated} 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,7 +12,6 @@ type FadePanelProps = {
   onClose: () => void;
   maxHeight: number;
   children: React.ReactNode;
-  scrollable: boolean | undefined;
 };
 
 export const FadePanel = ({
@@ -22,7 +21,6 @@ export const FadePanel = ({
   onClose,
   maxHeight,
   children,
-  scrollable = true,
 }: FadePanelProps) => {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
@@ -49,11 +47,7 @@ export const FadePanel = ({
     <Animated.View style={styles.rootContainer}>
       <Close onPress={onClose} />
       <Heading title={title} subtitle={subtitle} />
-      {scrollable ? (
-        <ScrollView>{children}</ScrollView>
-      ) : (
-        <View>{children}</View>
-      )}
+      {children}
     </Animated.View>
   );
 };

package/src/components/templates/modal/components/fade-panel.styles.d.ts

@@ -4,6 +4,8 @@ export function Stylesheet(
   maxHeight: any
 ): {
   rootContainer: {
+    maxWidth: number;
+    width: string;
     maxHeight: any;
     paddingLeft: number;
     paddingTop: number;

package/src/components/templates/modal/components/fade-panel.styles.js

@@ -5,6 +5,8 @@ import {Scale} from '../../../../theme/scale/index';
 export const Stylesheet = (Context, fadeAnimation, maxHeight) =>
   StyleSheet.create({
     rootContainer: {
+      maxWidth: 560,
+      width: '100%',
       maxHeight: maxHeight,
       paddingLeft: Scale.m,
       paddingTop: Scale.l,

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

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

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

@@ -10,7 +10,6 @@ type ModalProps = {
   isVisible: boolean;
   onClose: () => void;
   children?: React.ReactNode;
-  scrollable?: boolean;
 };
 
 const window = Dimensions.get('window');
@@ -21,7 +20,6 @@ export const Modal = ({
   isVisible,
   onClose,
   children,
-  scrollable,
 }: ModalProps) => {
   const [windowHeight, setWindowHeight] = useState(window.height);
 
@@ -46,7 +44,6 @@ export const Modal = ({
           onClose={onClose}
           title={title}
           subtitle={subtitle}
-          scrollable={scrollable}
         >
           {children}
         </FadePanel>

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

@@ -25,47 +25,22 @@ export const ModalPreview = ({}: {}) => {
         <Button label="Open modal" onPress={() => setModalIsVisible(true)} />
       </View>
       <Modal
-        title={'Regioooooooooooooooooooooooooooooooooo'}
-        subtitle={'Hoe vind ik mijn regio?'}
+        title={'Mijn login'}
+        subtitle={'Hoe vind ik mijn login gegevens?'}
         isVisible={modalIsVisible}
         onClose={() => setModalIsVisible(false)}
       >
-        <Paragraph textAlign={'center'}>
-          U kan uw regio steeds vinden rechtsboven in de backend applicatie of
-          bevragen bij een leidinggevende. Hieronder vind u een lijst van alle
-          beschikbare regio's.
-        </Paragraph>
-        <View style={styles.regionsContainer}>
-          <Heading3 bold={true} addStyle={styles.regionTitleMargin}>
-            Leuven
-          </Heading3>
-          <Heading4 addStyle={styles.citiesMargin}>
-            Omvat de steden: Leuven, Heverlee, Kessel-Lo, Wilsele, ...
-          </Heading4>
-          <Heading3 bold={true} addStyle={styles.regionTitleMargin}>
-            Brussel
-          </Heading3>
-          <Heading4 addStyle={styles.citiesMargin}>
-            Omvat de steden: Leuven, Heverlee, Kessel-Lo, Wilsele, ...
-          </Heading4>
-          <Heading3 bold={true} addStyle={styles.regionTitleMargin}>
-            Brussel
-          </Heading3>
-          <Heading4 addStyle={styles.citiesMargin}>
-            Omvat de steden: Leuven, Heverlee, Kessel-Lo, Wilsele, ...
-          </Heading4>
-          <Heading3 bold={true} addStyle={styles.regionTitleMargin}>
-            Brussel
-          </Heading3>
-          <Heading4 addStyle={styles.citiesMargin}>
-            Omvat de steden: Leuven, Heverlee, Kessel-Lo, Wilsele, ...
-          </Heading4>
-          <Heading3 bold={true} addStyle={styles.regionTitleMargin}>
-            Brussel
-          </Heading3>
-          <Heading4 addStyle={styles.citiesMargin}>
-            Omvat de steden: Leuven, Heverlee, Kessel-Lo, Wilsele, ...
-          </Heading4>
+        <View
+          style={{
+            paddingBottom: 36,
+          }}
+        >
+          <Paragraph textAlign={'center'}>
+            Deze gegevens zijn dezelfde gegevens waarmee u de oorsponkelijke
+            aanvraag heeft gedaan in het ouderplatform. Indien u deze niet meer
+            weet kan u steeds naar de website gaan en uw wachtwoord resetten of
+            oontact opnemen met het verblijf om dit voor u te doen..{' '}
+          </Paragraph>
         </View>
       </Modal>
     </View>

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

@@ -7,11 +7,13 @@ export function Stylesheet(): {
     top: number;
     zIndex: number;
     alignItems: 'center';
+    justifyContent: 'center';
   };
   fadePanelContainer: {
     flex: number;
     justifyContent: 'center';
-    maxWidth: number;
+    alignItems: 'center';
+    width: string;
     paddingLeft: number;
     paddingTop: number;
     paddingRight: number;

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

@@ -12,11 +12,13 @@ export const Stylesheet = () =>
       top: 0,
       zIndex: 1000,
       alignItems: 'center',
+      justifyContent: 'center',
     },
     fadePanelContainer: {
       flex: 1,
       justifyContent: 'center',
-      maxWidth: 768,
+      alignItems: 'center',
+      width: '100%',
       paddingLeft: Scale.m,
       paddingTop: Scale.m * 4.5,
       paddingRight: Scale.m,