@tactics/toddle-styleguide 1.2.8 → 1.2.9

package/src/components/atoms/static-wave/static-wave.component.d.ts

@@ -1,13 +1,8 @@
-import {ViewStyle} from 'react-native';
+import { ViewStyle } from 'react-native';
 export type WaveProps = {
-  customStyle?: ViewStyle;
-  customWavePath?: string;
-  heightSvgContainer?: number;
-  positionTop?: number;
+    customStyle?: ViewStyle;
+    customWavePath?: string;
+    heightSvgContainer?: number;
+    positionTop?: number;
 };
-export declare const StaticWave: ({
-  customStyle,
-  customWavePath,
-  heightSvgContainer,
-  positionTop,
-}: WaveProps) => JSX.Element;
+export declare const StaticWave: ({ customStyle, customWavePath, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,12 +1,8 @@
-import {TextInputProps as NativeTextInputProps} from 'react-native';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import { TextInputProps as NativeTextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 interface TextInputProps extends NativeTextInputProps {
-  keyboardType: KeyBoardTypes;
-  border?: boolean;
+    keyboardType: KeyBoardTypes;
+    border?: boolean;
 }
-declare const TextInput: ({
-  keyboardType,
-  border,
-  ...props
-}: TextInputProps) => JSX.Element;
-export {TextInput as TextInput};
+declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => JSX.Element;
+export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.component.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useContext} from 'react';
 
 import {
-  View,
   TextInput as NativeTextInput,
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
@@ -20,14 +19,12 @@ const TextInput = ({keyboardType, border, ...props}: TextInputProps) => {
   const styles = Stylesheet(context, border);
 
   return (
-    <View style={styles.container}>
-      <NativeTextInput
-        placeholderTextColor={context.colors.ui.grey}
-        style={styles.input}
-        keyboardType={keyboardType}
-        {...props}
-      />
-    </View>
+    <NativeTextInput
+      placeholderTextColor={context.colors.ui.grey}
+      style={styles.input}
+      keyboardType={keyboardType}
+      {...props}
+    />
   );
 };
 export {TextInput as TextInput};

package/src/components/atoms/text-input/text-input.preview.d.ts

@@ -1 +1 @@
-export declare const TextInputPreview: ({}: {}) => JSX.Element;
+export declare const TextInputPreview: ({}?: {}) => JSX.Element;

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {TextInput} from './text-input.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {SafeAreaView} from 'react-native';
+import {View} from 'react-native';
 
 export const TextInputPreview = ({} = {}) => {
   return (
-    <SafeAreaView style={{flex: 1, justifyContent: 'space-around'}}>
+    <View style={{flex: 1, justifyContent: 'space-around', padding: 32}}>
       <TextInput
         onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
@@ -36,6 +36,6 @@ export const TextInputPreview = ({} = {}) => {
         onChangeText={(text: string) => console.log('text: ' + text)}
         border={true}
       />
-    </SafeAreaView>
+    </View>
   );
 };

package/src/components/atoms/text-input/text-input.styles.d.ts

@@ -1,49 +1,25 @@
-export function Stylesheet(
-  context: any,
-  border: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: (
-        | {
-            width: string;
-            height: number;
-            borderRadius: number;
-            overflow: string;
-            paddingLeft: number;
-            paddingTop: number;
-            paddingRight: number;
-            paddingBottom: number;
-            backgroundColor: any;
-            justifyContent: string;
-            alignItems: string;
-            borderStyle?: undefined;
-            borderWidth?: undefined;
-            borderColor?: undefined;
-          }
-        | {
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: any;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-            overflow?: undefined;
-            paddingLeft?: undefined;
-            paddingTop?: undefined;
-            paddingRight?: undefined;
-            paddingBottom?: undefined;
-            backgroundColor?: undefined;
-            justifyContent?: undefined;
-            alignItems?: undefined;
-          }
-      )[];
-      input: {
+export function Stylesheet(context: any, border: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    input: ({
         lineHeight: number;
         color: any;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        backgroundColor: any;
+        borderRadius: number;
         fontFamily: string;
         fontSize: number;
+        height: number;
         width: string;
-      };
-    }>;
-import {StyleSheet} from 'react-native';
+        justifyContent: string;
+        borderStyle?: undefined;
+        borderWidth?: undefined;
+        borderColor?: undefined;
+    } | {
+        borderStyle: string;
+        borderWidth: number;
+        borderColor: any;
+    })[];
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

package/src/components/atoms/text-input/text-input.styles.js

@@ -1,24 +1,24 @@
 import React from 'react';
-
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 import {Font} from '../../../theme/font';
 
 export const Stylesheet = (context, border) =>
   StyleSheet.create({
-    container: [
+    input: [
       {
+        height: Scale.m * 2.75,
         width: '100%',
-        height: 44,
-        borderRadius: Scale.xs,
-        overflow: 'hidden',
+        justifyContent: 'center',
+        ...Font.medium,
+        lineHeight: 20,
+        color: context.colors.ui.black,
         paddingLeft: Scale.m,
         paddingTop: Scale.xs,
         paddingRight: Scale.m,
         paddingBottom: Scale.xs,
         backgroundColor: context.colors.ui.white,
-        justifyContent: 'center',
-        alignItems: 'flex-start',
+        borderRadius: Scale.xs,
       },
       border && {
         borderStyle: 'solid',
@@ -26,10 +26,4 @@ export const Stylesheet = (context, border) =>
         borderColor: context.colors.ui.lightgrey,
       },
     ],
-    input: {
-      width: '100%',
-      ...Font.medium,
-      lineHeight: 20,
-      color: context.colors.ui.black,
-    },
   });

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

@@ -1,20 +1,13 @@
-import {ImageSourcePropType} from 'react-native';
-import {Size} from '../../../types/size.enum';
-import {Initials} from '../../../models/initials.model';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
 type AvatarProps = {
-  source: ImageSourcePropType | Initials;
-  size: Size;
-  isBlocked?: boolean;
-  isActive?: boolean;
-  isLoading?: boolean;
-  hasShadow?: boolean;
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
+    isActive?: boolean;
+    isLoading?: boolean;
+    hasShadow?: boolean;
 };
-declare const Avatar: ({
-  source,
-  size,
-  isBlocked,
-  isActive,
-  isLoading,
-  hasShadow,
-}: AvatarProps) => JSX.Element;
-export {Avatar as Avatar};
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => JSX.Element;
+export { Avatar as Avatar };

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

@@ -1,7 +1,5 @@
 type BlockedMessageProps = {
-  message: string;
+    message: string;
 };
-export declare const BlockedMessage: ({
-  message,
-}: BlockedMessageProps) => JSX.Element;
+export declare const BlockedMessage: ({ message }: BlockedMessageProps) => JSX.Element;
 export {};

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

@@ -1,23 +1,14 @@
-import {PressableProps} from 'react-native';
-import {IconNameType, IconStyleType} from '../../../types/icontype.type';
+import { PressableProps } from 'react-native';
+import { IconNameType, IconStyleType } from '../../../types/icontype.type';
 type ButtonType = 'regular' | 'error' | 'success' | 'light';
 interface ButtonProps extends PressableProps {
-  label: string;
-  icon?: boolean;
-  iconStyle?: IconStyleType;
-  iconName?: IconNameType;
-  iconSize?: number;
-  disabled?: boolean;
-  type?: ButtonType;
+    label: string;
+    icon?: boolean;
+    iconStyle?: IconStyleType;
+    iconName?: IconNameType;
+    iconSize?: number;
+    disabled?: boolean;
+    type?: ButtonType;
 }
-declare const Button: ({
-  label,
-  icon,
-  iconStyle,
-  iconName,
-  iconSize,
-  disabled,
-  type,
-  ...props
-}: ButtonProps) => JSX.Element;
-export {Button as Button};
+declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, type, ...props }: ButtonProps) => JSX.Element;
+export { Button as Button };

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

@@ -1,14 +1,9 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarSelectProps = {
-  onPressDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  pressChevronRight: (date: ToddleDateTime) => void;
-  pressChevronLeft: (date: ToddleDateTime) => void;
+    onPressDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    pressChevronRight: (date: ToddleDateTime) => void;
+    pressChevronLeft: (date: ToddleDateTime) => void;
 };
-declare const CalendarSelect: ({
-  onPressDate,
-  startDate,
-  pressChevronLeft,
-  pressChevronRight,
-}: CalendarSelectProps) => JSX.Element;
-export {CalendarSelect as CalendarSelect};
+declare const CalendarSelect: ({ onPressDate, startDate, pressChevronLeft, pressChevronRight, }: CalendarSelectProps) => JSX.Element;
+export { CalendarSelect as CalendarSelect };

package/src/components/molecules/cancel-link/cancel-link.component.d.ts

@@ -1,6 +1,6 @@
 type CancelLinkProps = {
-  label: string;
-  onPress: () => void;
+    label: string;
+    onPress: () => void;
 };
-declare const CancelLink: ({label, onPress}: CancelLinkProps) => JSX.Element;
-export {CancelLink as CancelLink};
+declare const CancelLink: ({ label, onPress }: CancelLinkProps) => JSX.Element;
+export { CancelLink as CancelLink };

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

@@ -1,11 +1,7 @@
 type CheckboxProps = {
-  value: boolean;
-  onValueChange: () => void;
-  label: string;
+    value: boolean;
+    onValueChange: () => void;
+    label: string;
 };
-declare const Checkbox: ({
-  value,
-  onValueChange,
-  label,
-}: CheckboxProps) => JSX.Element;
-export {Checkbox as Checkbox};
+declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
+export { Checkbox as Checkbox };

package/src/components/molecules/contact-role/contact-role.component.d.ts

@@ -1,9 +1,6 @@
 type ContactRoleProps = {
-  name: string;
-  role?: string;
+    name: string;
+    role?: string;
 };
-export declare const ContactRole: ({
-  name,
-  role,
-}: ContactRoleProps) => JSX.Element;
+export declare const ContactRole: ({ name, role }: ContactRoleProps) => JSX.Element;
 export {};

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

@@ -1,10 +1,7 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DateInputProps = {
-  onPress: () => void;
-  value: ToddleDateTime;
+    onPress: () => void;
+    value: ToddleDateTime;
 };
-export declare const DateInput: ({
-  onPress,
-  value,
-}: DateInputProps) => JSX.Element;
+export declare const DateInput: ({ onPress, value }: DateInputProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
-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) => JSX.Element;
-export {Day as Day};
+declare const Day: ({ onSelect, date, isSelected }: DayProps) => JSX.Element;
+export { Day as Day };

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

@@ -20,12 +20,17 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
       ToddleDateTime.now().toFormat('yyyy-MM-dd')
     );
   };
-  const styles = Stylesheet(context, isSelected, isToday());
+  const styles = Stylesheet(context, isSelected);
 
   return (
     <View style={styles.container}>
       <View style={styles.dayNameContainer}>
-        <Heading4 textColor={context.colors.ui.grey}>
+        <Heading4
+          textColor={
+            isToday() ? context.colors.main[5] : context.colors.ui.grey
+          }
+          bold={isToday()}
+        >
           {date.weekdayShort.toUpperCase().slice(0, 2)}
         </Heading4>
       </View>
@@ -33,7 +38,11 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
         <Pressable style={styles.dayCircle} onPress={() => onSelect(date)}>
           <Heading4
             textColor={
-              isSelected ? context.colors.main[9] : context.colors.ui.grey
+              isSelected
+                ? context.colors.main[9]
+                : !isSelected && isToday()
+                ? context.colors.main[5]
+                : context.colors.ui.grey
             }
             textAlign={'center'}
           >
@@ -42,7 +51,11 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
 
           <TinyText
             textColor={
-              isSelected ? context.colors.main[9] : context.colors.ui.grey
+              isSelected
+                ? context.colors.main[9]
+                : !isSelected && isToday()
+                ? context.colors.main[5]
+                : context.colors.ui.grey
             }
             textAlign={'center'}
           >

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

@@ -1,44 +1,27 @@
-export function Stylesheet(
-  context: any,
-  isSelected: any,
-  isToday: any
-): {
-  container: {
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-  };
-  dayCircle: {
-    width: number;
-    height: number;
-    borderRadius: number;
-    padding: number;
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-    borderColor: any;
-    borderWidth: number;
-  };
-  dayNumber: {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-  monthNumber: {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-  selectedDate: {
-    color: any;
-  };
-  dayNameContainer: {
-    marginBottom: number;
-  };
-  dayName: {
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-};
+export function Stylesheet(context: any, isSelected: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    dayCircle: ({
+        width: number;
+        height: number;
+        borderRadius: number;
+        padding: number;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor?: undefined;
+    } | {
+        backgroundColor: any;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+        padding?: undefined;
+        alignItems?: undefined;
+        justifyContent?: undefined;
+    })[];
+    dayNameContainer: {
+        marginBottom: number;
+    };
+}>;
+import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";

package/src/components/molecules/day/day.styles.js

@@ -2,28 +2,25 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 
-export const Stylesheet = (context, isSelected, isToday) =>
+export const Stylesheet = (context, isSelected) =>
   StyleSheet.create({
     container: {
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: context.colors.ui.xlightgrey,
-    },
-    dayCircle: {
-      width: Scale.xxl,
-      height: Scale.xxl,
-      borderRadius: Scale.xxl / 2,
-      padding: Scale.s,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: isSelected
-        ? context.colors.main[5]
-        : context.colors.ui.xlightgrey,
-      borderColor: isToday
-        ? context.colors.ui.grey
-        : context.colors.ui.xlightgrey,
-      borderWidth: 1,
     },
+    dayCircle: [
+      {
+        width: Scale.xxl,
+        height: Scale.xxl,
+        borderRadius: Scale.xxl / 2,
+        padding: Scale.s,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      isSelected && {
+        backgroundColor: context.colors.main[5],
+      },
+    ],
     dayNameContainer: {
       marginBottom: Scale.s,
     },

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

@@ -1,9 +1,6 @@
 type DefaultSelectProps = {
-  label: string;
-  onPress: () => void;
+    label: string;
+    onPress: () => void;
 };
-export declare const DefaultSelect: ({
-  label,
-  onPress,
-}: DefaultSelectProps) => JSX.Element;
+export declare const DefaultSelect: ({ label, onPress }: DefaultSelectProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,5 @@
 type DepartmentLogoProps = {
-  department: string;
+    department: string;
 };
-declare const DepartmentLogo: ({
-  department,
-}: DepartmentLogoProps) => JSX.Element;
-export {DepartmentLogo as DepartmentLogo};
+declare const DepartmentLogo: ({ department }: DepartmentLogoProps) => JSX.Element;
+export { DepartmentLogo as DepartmentLogo };

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

@@ -1,13 +1,8 @@
 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) => JSX.Element;
-export {FailedTextBubble};
+declare const FailedTextBubble: ({ id, text, onPressRefresh, onPressDelete, }: FailedBubbleProps) => JSX.Element;
+export { FailedTextBubble };

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

@@ -1,17 +1,10 @@
 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) => JSX.Element;
+export declare const FilterRange: ({ value, minValue, maxValue, onChange, prefix, suffix, }: FilterRangeProps) => JSX.Element;
 export {};

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

@@ -1,14 +1,10 @@
 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) => JSX.Element;
+export declare const FilterTab: ({ tabItem, setFilterValue, setActivePage, }: FilterTab) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 type InfoProps = {
-  label: string;
-  description: string;
+    label: string;
+    description: string;
 };
-declare const Info: ({label, description}: InfoProps) => JSX.Element;
-export {Info as Info};
+declare const Info: ({ label, description }: InfoProps) => JSX.Element;
+export { Info as Info };