@tactics/toddle-styleguide 2.0.3 → 3.0.0

package/src/components/molecules/calendar-select/calendar-select.styles.d.ts

@@ -1,33 +1,33 @@
 export function Stylesheet(context: any): {
-    container: {
-        width: "auto";
-        color: any;
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: any;
-        borderRadius: number;
-        gap: number;
-    };
-    dateContainer: {
-        flexDirection: "row";
-        backgroundColor: any;
-        borderRadius: number;
-        paddingTop: number;
-        paddingBottom: number;
-        paddingLeft: number;
-        paddingRight: number;
-        justifyContent: "space-between";
-        alignItems: "center";
-        width: number;
-    };
-    arrowContainer: {
-        width: number;
-        height: number;
-        alignItems: "center";
-        justifyContent: "center";
-    };
-    icon: {
-        marginRight: number;
-    };
+  container: {
+    width: 'auto';
+    color: any;
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+    borderRadius: number;
+    gap: number;
+  };
+  dateContainer: {
+    flexDirection: 'row';
+    backgroundColor: any;
+    borderRadius: number;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    justifyContent: 'space-between';
+    alignItems: 'center';
+    width: number;
+  };
+  arrowContainer: {
+    width: number;
+    height: number;
+    alignItems: 'center';
+    justifyContent: 'center';
+  };
+  icon: {
+    marginRight: number;
+  };
 };

package/src/components/molecules/calendar-select/calendar-select.styles.js

@@ -2,36 +2,36 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context) =>
-    StyleSheet.create({
-        container: {
-            width: 'auto',
-            color: context.colors.ui.white,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: context.colors.main[0],
-            borderRadius: Scale.xl,
-            gap: Scale.s
-        },
-        dateContainer: {
-            flexDirection: 'row',
-            backgroundColor: context.colors.main[0],
-            borderRadius: Scale.xl,
-            paddingTop: Scale.s,
-            paddingBottom: Scale.s,
-            paddingLeft: Scale.m,
-            paddingRight: Scale.m,
-            justifyContent: 'space-around',
-            alignItems: 'center',
-            width: 185,
-        },
-        arrowContainer: {
-            width: Scale.xxl,
-            height: Scale.xxl,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        icon: {
-            marginRight: Scale.m,
-        },
-    });
+  StyleSheet.create({
+    container: {
+      width: 'auto',
+      color: context.colors.ui.white,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: context.colors.main[0],
+      borderRadius: Scale.xl,
+      gap: Scale.s,
+    },
+    dateContainer: {
+      flexDirection: 'row',
+      backgroundColor: context.colors.main[0],
+      borderRadius: Scale.xl,
+      paddingTop: Scale.s,
+      paddingBottom: Scale.s,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.m,
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      width: 185,
+    },
+    arrowContainer: {
+      width: Scale.xxl,
+      height: Scale.xxl,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    icon: {
+      marginRight: Scale.m,
+    },
+  });

package/src/components/molecules/context-label/context-label.component.tsx

@@ -5,35 +5,33 @@ import {View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './context-label.styles';
 import {Paragraph} from '../../atoms/paragraph-components';
-import {LoadingIndicator} from "../../organisms/loading-indicator/loading-indicator.component";
+import {LoadingIndicator} from '../../organisms/loading-indicator/loading-indicator.component';
 
 type ContextLabelProps = {
-    label: string;
-    isLoading: boolean
+  label: string;
+  isLoading: boolean;
 };
 
 const ContextLabel = ({label, isLoading}: ContextLabelProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-    return (
-        <View style={styles.container}>
-            {
-                (isLoading ?
-                        <LoadingIndicator size={4} color={context.colors.ui.grey} />
-                        :
-                        <Paragraph
-                            bold={true}
-                            textAlign={'center'}
-                            ellipsizeMode={'tail'}
-                            numberOfLines={1}
-                        >
-                            {label}
-                        </Paragraph>
-                )
-            }
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      {isLoading ? (
+        <LoadingIndicator size={4} color={context.colors.ui.grey} />
+      ) : (
+        <Paragraph
+          bold={true}
+          textAlign={'center'}
+          ellipsizeMode={'tail'}
+          numberOfLines={1}
+        >
+          {label}
+        </Paragraph>
+      )}
+    </View>
+  );
 };
 
 export {ContextLabel as ContextLabel};

package/src/components/molecules/context-label/context-label.preview.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ContextLabel } from './context-label.component';
-import { Avatar } from '../avatar/avatar.component';
-import { Size } from '../../../types/size.enum';
-import { Initials } from '../../../models/initials.model';
-import { Scale } from '../../../theme/scale';
-import { Paragraph } from '../../atoms/paragraph-components';
+import {ContextLabel} from './context-label.component';
+import {Avatar} from '../avatar/avatar.component';
+import {Size} from '../../../types/size.enum';
+import {Initials} from '../../../models/initials.model';
+import {Scale} from '../../../theme/scale';
+import {Paragraph} from '../../atoms/paragraph-components';
 const {View} = require('react-native');
 
 export const ContextLabelPreview = ({}: {}) => {
@@ -17,39 +17,54 @@ export const ContextLabelPreview = ({}: {}) => {
         backgroundColor: 'white',
       }}
     >
-        <ContextLabel isLoading={false} label='Dirk Dingles' />
+      <ContextLabel isLoading={false} label="Dirk Dingles" />
 
-        <View
+      <View
         style={{
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'white',
-            flexDirection: 'row',
-            gap: Scale.xs
-          }}
-        >
-            <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'Dingles')} />
-            <ContextLabel isLoading={false} label='Dirk Dingles' />
-        </View>
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'white',
+          flexDirection: 'row',
+          gap: Scale.xs,
+        }}
+      >
+        <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'Dingles')} />
+        <ContextLabel isLoading={false} label="Dirk Dingles" />
+      </View>
 
-        <View
+      <View
         style={{
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'white',
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'white',
+          flexDirection: 'row',
+          gap: Scale.xs,
+          width: 250,
+        }}
+      >
+        <View style={{width: '100%'}}>
+          <Paragraph>Toddle Logo</Paragraph>
+        </View>
+        <View
+          style={{
+            flexWrap: 'nowrap',
             flexDirection: 'row',
+            alignItems: 'center',
             gap: Scale.xs,
-            width: 250
           }}
         >
-            <View style={{width: '100%'}}><Paragraph>Toddle Logo</Paragraph></View>
-            <View style={{ flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center', gap: Scale.xs,}}>
-                <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'DingleslangereNaam')} />
-                <ContextLabel isLoading={false} label='Dirk DingleslangereNaamMaarDanEchtSuperLang' />
-            </View>
+          <Avatar
+            size={Size.SMALL}
+            source={Initials.for('Dirk', 'DingleslangereNaam')}
+          />
+          <ContextLabel
+            isLoading={false}
+            label="Dirk DingleslangereNaamMaarDanEchtSuperLang"
+          />
         </View>
+      </View>
     </View>
   );
 };

package/src/components/molecules/context-label/context-label.styles.d.ts

@@ -1,5 +1,7 @@
-export function Stylesheet(context: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
-    container: {
+export function Stylesheet(context: any):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
         flex: number;
         borderRadius: number;
         alignItems: string;
@@ -11,6 +13,6 @@ export function Stylesheet(context: any): StyleSheet.NamedStyles<any> | StyleShe
         paddingRight: number;
         paddingBottom: number;
         backgroundColor: any;
-    }[];
-}>;
-import { StyleSheet } from 'react-native';
+      }[];
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/molecules/date-input/date-input.styles.d.ts

@@ -1,18 +1,18 @@
 export function Stylesheet(Context: any): {
-    dateInputContainer: {
-        width: "100%";
-        height: number;
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "space-between";
-        backgroundColor: any;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        paddingLeft: number;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: any;
-        borderRadius: number;
-    };
+  dateInputContainer: {
+    width: '100%';
+    height: number;
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'space-between';
+    backgroundColor: any;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
 };

package/src/components/molecules/day/day.component.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DayProps = {
-    date: ToddleDateTime;
-    onSelect: (date: ToddleDateTime) => void;
-    isSelected?: boolean;
+  date: ToddleDateTime;
+  onSelect: (date: ToddleDateTime) => void;
+  isSelected?: boolean;
 };
-declare const Day: ({ onSelect, date, isSelected }: DayProps) => React.JSX.Element;
-export { Day as Day };
+declare const Day: ({
+  onSelect,
+  date,
+  isSelected,
+}: DayProps) => React.JSX.Element;
+export {Day as Day};

package/src/components/molecules/default-select/default-select.styles.d.ts

@@ -1,13 +1,13 @@
 export function Stylesheet(): {
-    container: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "space-between";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        borderRadius: number;
-    };
+  container: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'space-between';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    borderRadius: number;
+  };
 };

package/src/components/molecules/filter-range/filter-range.styles.d.ts

@@ -1,22 +1,22 @@
 export function Stylesheet(Context: any): {
-    container: {
-        width: "100%";
-    };
-    slider: {
-        marginLeft: number;
-        marginRight: number;
-    };
-    thumb: {
-        backgroundColor: any;
-        width: number;
-        height: number;
-    };
-    track: {
-        height: number;
-        borderRadius: number;
-    };
-    textContainer: {
-        flexDirection: "row";
-        justifyContent: "space-between";
-    };
+  container: {
+    width: '100%';
+  };
+  slider: {
+    marginLeft: number;
+    marginRight: number;
+  };
+  thumb: {
+    backgroundColor: any;
+    width: number;
+    height: number;
+  };
+  track: {
+    height: number;
+    borderRadius: number;
+  };
+  textContainer: {
+    flexDirection: 'row';
+    justifyContent: 'space-between';
+  };
 };

package/src/components/molecules/filter-tab/filter-tab.styles.d.ts

@@ -1,54 +1,59 @@
-export function Stylesheet(Context: any, inRow: any, ElementWidth: any, ItemWidth: any): {
-    container: {
-        width: "100%";
-        display: "flex";
-        paddingRight: number;
-        paddingLeft: number;
-        paddingTop: number;
-        paddingBottom: number;
-        borderRadius: number;
-        backgroundColor: any;
-    };
-    inner: {
-        display: "flex";
-        width: "100%";
-    };
-    tabs: {
-        display: "flex";
-        flexDirection: "row" | "column";
-        alignItems: "center" | "stretch";
-        width: "100%";
-        position: "relative";
-    };
-    tab: {
-        width: any;
-        paddingRight: number;
-        paddingLeft: number;
-        paddingTop: number;
-        paddingBottom: number;
-        borderRadius: number;
-        alignItems: "center";
-        backgroundColor: string;
-    };
-    slidingTab: {
-        width: any;
-        maxHeight: number;
-        marginTop: number;
-        paddingRight: number;
-        paddingLeft: number;
-        paddingTop: number;
-        paddingBottom: number;
-        borderRadius: number;
-        zIndex: number;
-        position: "absolute";
-        backgroundColor: any;
-    };
-    textHidden: {
-        opacity: number;
-    };
-    text: {
-        width: "100%";
-        maxHeight: number;
-        overflow: "hidden";
-    };
+export function Stylesheet(
+  Context: any,
+  inRow: any,
+  ElementWidth: any,
+  ItemWidth: any
+): {
+  container: {
+    width: '100%';
+    display: 'flex';
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    backgroundColor: any;
+  };
+  inner: {
+    display: 'flex';
+    width: '100%';
+  };
+  tabs: {
+    display: 'flex';
+    flexDirection: 'row' | 'column';
+    alignItems: 'center' | 'stretch';
+    width: '100%';
+    position: 'relative';
+  };
+  tab: {
+    width: any;
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    alignItems: 'center';
+    backgroundColor: string;
+  };
+  slidingTab: {
+    width: any;
+    maxHeight: number;
+    marginTop: number;
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    zIndex: number;
+    position: 'absolute';
+    backgroundColor: any;
+  };
+  textHidden: {
+    opacity: number;
+  };
+  text: {
+    width: '100%';
+    maxHeight: number;
+    overflow: 'hidden';
+  };
 };

package/src/components/molecules/info/info.component.tsx

@@ -10,7 +10,7 @@ import {SmallText} from '../../atoms/paragraph-components';
 type InfoProps = {
   label?: string;
   description: string;
-  active?: boolean
+  active?: boolean;
 };
 
 const Info = ({label, description, active}: InfoProps) => {
@@ -19,10 +19,18 @@ const Info = ({label, description, active}: InfoProps) => {
 
   return (
     <View style={styles.container}>
-      {label && <Heading3 bold={true} addStyle={styles.label}>
-        {label}
-      </Heading3>}
-      <SmallText textColor={active !== undefined && active === false ? context.colors.ui.grey : context.colors.ui.darkgrey}>
+      {label && (
+        <Heading3 bold={true} addStyle={styles.label}>
+          {label}
+        </Heading3>
+      )}
+      <SmallText
+        textColor={
+          active !== undefined && active === false
+            ? context.colors.ui.grey
+            : context.colors.ui.darkgrey
+        }
+      >
         {description}
       </SmallText>
     </View>

package/src/components/molecules/info/info.preview.tsx

@@ -18,12 +18,11 @@ export const InfoPreview = ({}: {}) => {
         description={'Volg hier de dag van uw kinderen'}
       />
       <Info
-        description={'Luca was heel de dag wat flauw en voelde zich niet lekker. Mama is haar vroeger komen halen.'}
-      />
-      <Info
-        active={false}
-        description={'Geen opmerking voor deze dag.'}
+        description={
+          'Luca was heel de dag wat flauw en voelde zich niet lekker. Mama is haar vroeger komen halen.'
+        }
       />
+      <Info active={false} description={'Geen opmerking voor deze dag.'} />
     </View>
   );
 };

package/src/components/molecules/info/info.styles.d.ts

@@ -1,16 +1,16 @@
 export function Stylesheet(context: any): {
-    container: {
-        width: "100%";
-        backgroundColor: any;
-        borderRadius: number;
-        alignItems: "flex-start";
-        justifyContent: "flex-start";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-    };
-    label: {
-        marginBottom: number;
-    };
+  container: {
+    width: '100%';
+    backgroundColor: any;
+    borderRadius: number;
+    alignItems: 'flex-start';
+    justifyContent: 'flex-start';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+  };
+  label: {
+    marginBottom: number;
+  };
 };