@tactics/toddle-styleguide 2.0.3 → 2.0.4

package/src/components/molecules/department_logo/department-logo.component.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 type DepartmentLogoProps = {
-    department: string;
+  department: string;
 };
-declare const DepartmentLogo: ({ department }: DepartmentLogoProps) => React.JSX.Element;
-export { DepartmentLogo as DepartmentLogo };
+declare const DepartmentLogo: ({
+  department,
+}: DepartmentLogoProps) => React.JSX.Element;
+export {DepartmentLogo as DepartmentLogo};

package/src/components/molecules/failed-to-send/failed-bubble.component.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 type FailedBubbleProps = {
-    id: string;
-    text: string;
-    onPressRefresh?: (id: string) => void;
-    onPressDelete?: (id: string) => void;
+  id: string;
+  text: string;
+  onPressRefresh?: (id: string) => void;
+  onPressDelete?: (id: string) => void;
 };
-declare const FailedTextBubble: ({ id, text, onPressRefresh, onPressDelete, }: FailedBubbleProps) => React.JSX.Element;
-export { FailedTextBubble };
+declare const FailedTextBubble: ({
+  id,
+  text,
+  onPressRefresh,
+  onPressDelete,
+}: FailedBubbleProps) => React.JSX.Element;
+export {FailedTextBubble};

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

@@ -1,11 +1,18 @@
 import React from 'react';
 type FilterRangeProps = {
-    value: number | number[];
-    onChange: (value: number | number[]) => void;
-    minValue: number;
-    maxValue: number;
-    prefix?: string;
-    suffix?: string;
+  value: number | number[];
+  onChange: (value: number | number[]) => void;
+  minValue: number;
+  maxValue: number;
+  prefix?: string;
+  suffix?: string;
 };
-export declare const FilterRange: ({ value, minValue, maxValue, onChange, prefix, suffix, }: FilterRangeProps) => React.JSX.Element;
+export declare const FilterRange: ({
+  value,
+  minValue,
+  maxValue,
+  onChange,
+  prefix,
+  suffix,
+}: FilterRangeProps) => React.JSX.Element;
 export {};

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.component.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 type FilterTab = {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
-    setFilterValue: (value: string) => void;
-    setActivePage?: (index: number) => void;
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  setFilterValue: (value: string) => void;
+  setActivePage?: (index: number) => void;
 };
-export declare const FilterTab: ({ tabItem, setFilterValue, setActivePage, }: FilterTab) => React.JSX.Element;
+export declare const FilterTab: ({
+  tabItem,
+  setFilterValue,
+  setActivePage,
+}: FilterTab) => React.JSX.Element;
 export {};

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.d.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
 type InfoProps = {
-    label?: string;
-    description: string;
-    active?: boolean;
+  label?: string;
+  description: string;
+  active?: boolean;
 };
-declare const Info: ({ label, description, active }: InfoProps) => React.JSX.Element;
-export { Info as Info };
+declare const Info: ({
+  label,
+  description,
+  active,
+}: InfoProps) => React.JSX.Element;
+export {Info as Info};

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;
+  };
 };

package/src/components/molecules/inline-error/inline-error.component.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 type InlineErrorProps = {
-    label: string;
+  label: string;
 };
-declare const InlineError: ({ label }: InlineErrorProps) => React.JSX.Element;
-export { InlineError as InlineError };
+declare const InlineError: ({label}: InlineErrorProps) => React.JSX.Element;
+export {InlineError as InlineError};

package/src/components/molecules/inline-error/inline-error.component.tsx

@@ -5,7 +5,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './inline-error.styles';
 import {SmallText} from '../../atoms/paragraph-components';
-import { Icon } from '../../../icons';
+import {Icon} from '../../../icons';
 
 type InlineErrorProps = {
   label: string;
@@ -17,8 +17,15 @@ const InlineError = ({label}: InlineErrorProps) => {
 
   return (
     <View style={styles.container}>
-      <Icon name='exclamation-circle' style='regular' color={context.colors.ui.error.dark} />
-      <SmallText addStyle={styles.label} textColor={context.colors.ui.error.dark}>
+      <Icon
+        name="exclamation-circle"
+        style="regular"
+        color={context.colors.ui.error.dark}
+      />
+      <SmallText
+        addStyle={styles.label}
+        textColor={context.colors.ui.error.dark}
+      >
         {label}
       </SmallText>
     </View>

package/src/components/molecules/inline-error/inline-error.preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineError } from './inline-error.component';
+import {InlineError} from './inline-error.component';
 const {View} = require('react-native');
 
 export const InlineErrorPreview = ({}: {}) => {
@@ -13,7 +13,9 @@ export const InlineErrorPreview = ({}: {}) => {
       }}
     >
       <InlineError
-        label={'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'}
+        label={
+          'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'
+        }
       />
     </View>
   );

package/src/components/molecules/inline-error/inline-error.styles.d.ts

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

package/src/components/molecules/inline-error/inline-error.styles.js

@@ -17,6 +17,6 @@ export const Stylesheet = (context) =>
       paddingBottom: Scale.m,
     },
     label: {
-      flex: 1
-    }
+      flex: 1,
+    },
   });

package/src/components/molecules/inline-notice/inline-notice.component.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 type InlineNoticeProps = {
-    label: string;
+  label: string;
 };
-declare const InlineNotice: ({ label }: InlineNoticeProps) => React.JSX.Element;
-export { InlineNotice as InlineNotice };
+declare const InlineNotice: ({label}: InlineNoticeProps) => React.JSX.Element;
+export {InlineNotice as InlineNotice};

package/src/components/molecules/inline-notice/inline-notice.component.tsx

@@ -5,23 +5,27 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './inline-notice.styles';
 import {SmallText} from '../../atoms/paragraph-components';
-import { Icon } from '../../../icons';
+import {Icon} from '../../../icons';
 
 type InlineNoticeProps = {
-    label: string;
+  label: string;
 };
 
 const InlineNotice = ({label}: InlineNoticeProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-    return (
-        <View style={styles.container}>
-            <Icon name='exclamation-circle' style='regular' color={context.colors.main[0]} />
-            <SmallText addStyle={styles.label} textColor={context.colors.main[0]}>
-                {label}
-            </SmallText>
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      <Icon
+        name="exclamation-circle"
+        style="regular"
+        color={context.colors.main[0]}
+      />
+      <SmallText addStyle={styles.label} textColor={context.colors.main[0]}>
+        {label}
+      </SmallText>
+    </View>
+  );
 };
 export {InlineNotice as InlineNotice};

package/src/components/molecules/inline-notice/inline-notice.preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineNotice } from './inline-notice.component';
+import {InlineNotice} from './inline-notice.component';
 const {View} = require('react-native');
 
 export const InlineNoticePreview = ({}: {}) => {
@@ -13,7 +13,9 @@ export const InlineNoticePreview = ({}: {}) => {
       }}
     >
       <InlineNotice
-        label={'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'}
+        label={
+          'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'
+        }
       />
     </View>
   );

package/src/components/molecules/inline-notice/inline-notice.styles.d.ts

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

package/src/components/molecules/inline-notice/inline-notice.styles.js

@@ -2,21 +2,21 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 
 export const Stylesheet = (context) =>
-    StyleSheet.create({
-        container: {
-            flexDirection: 'row',
-            gap: Scale.m,
-            width: '100%',
-            backgroundColor: context.colors.main[9],
-            borderRadius: Scale.s,
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            paddingLeft: Scale.m,
-            paddingTop: Scale.m,
-            paddingRight: Scale.m,
-            paddingBottom: Scale.m,
-        },
-        label: {
-            flex: 1
-        }
-    });
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      gap: Scale.m,
+      width: '100%',
+      backgroundColor: context.colors.main[9],
+      borderRadius: Scale.s,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.m,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m,
+    },
+    label: {
+      flex: 1,
+    },
+  });

package/src/components/molecules/language-button/language-button.component.d.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
 type LanguageButtonProps = {
-    label: string;
-    onPress?: () => void;
-    textColor?: string;
+  label: string;
+  onPress?: () => void;
+  textColor?: string;
 };
-export declare const LanguageButton: ({ label, onPress, textColor, }: LanguageButtonProps) => React.JSX.Element;
+export declare const LanguageButton: ({
+  label,
+  onPress,
+  textColor,
+}: LanguageButtonProps) => React.JSX.Element;
 export {};

package/src/components/molecules/message-input/message-input.component.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
-import { TextInputProps } from 'react-native';
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+import {TextInputProps} from 'react-native';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 interface MessageInputProps extends TextInputProps {
-    keyboardType?: KeyBoardTypes;
-    onPressSend: () => void;
+  keyboardType?: KeyBoardTypes;
+  onPressSend: () => void;
 }
-declare const MessageInput: ({ keyboardType, onPressSend, ...props }: MessageInputProps) => React.JSX.Element;
-export { MessageInput };
+declare const MessageInput: ({
+  keyboardType,
+  onPressSend,
+  ...props
+}: MessageInputProps) => React.JSX.Element;
+export {MessageInput};