@tactics/toddle-styleguide 1.2.7 → 1.2.8

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

@@ -1,9 +1,14 @@
 type FilterTab = {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
-    filterValue: (value: string) => void;
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  setFilterValue: (value: string) => void;
+  setActivePage?: (index: number) => void;
 };
-export declare const FilterTab: ({ tabItem, filterValue }: FilterTab) => JSX.Element;
+export declare const FilterTab: ({
+  tabItem,
+  setFilterValue,
+  setActivePage,
+}: FilterTab) => JSX.Element;
 export {};

package/src/components/molecules/filter-tab/filter-tab.component.tsx

@@ -11,15 +11,19 @@ type FilterTab = {
     value: string;
     label: string;
   }[];
-  filterValue: (value: string) => void;
+  setFilterValue: (value: string) => void;
+  setActivePage?: (index: number) => void;
 };
 
-export const FilterTab = ({tabItem, filterValue}: FilterTab) => {
+export const FilterTab = ({
+  tabItem,
+  setFilterValue,
+  setActivePage,
+}: FilterTab) => {
   const [dimensions, setDimensions] = useState({width: 0, height: 0});
   const [translateValue] = useState(new Animated.Value(0));
 
   const [clickedButton, setClickedButton] = useState(0);
-  const [isActive, setIsActive] = useState(false);
 
   // Default from design.
   const minTabWidth = 95;
@@ -55,9 +59,9 @@ export const FilterTab = ({tabItem, filterValue}: FilterTab) => {
             style={styles.tab}
             onPress={() => {
               setClickedButton(index);
-              setIsActive(!isActive);
               translateTab(index, inRow);
-              filterValue(tab.value);
+              setFilterValue(tab.value);
+              setActivePage ? setActivePage(index) : null;
             }}
           >
             <Heading4

package/src/components/molecules/filter-tab/filter-tab.preview.tsx

@@ -70,10 +70,10 @@ export const FilterTabPreview = ({}: {}) => {
           marginBottom: 20,
         }}
       >
-        <FilterTab tabItem={tabs} filterValue={setFilterValue} />
+        <FilterTab tabItem={tabs} setFilterValue={setFilterValue} />
       </View>
       <View>
-        <FilterTab tabItem={data} filterValue={setFilterValue} />
+        <FilterTab tabItem={data} setFilterValue={setFilterValue} />
       </View>
     </View>
   );

package/src/components/molecules/filter-tab/filter-tab.test.js

@@ -15,7 +15,7 @@ describe('Filter tab test', () => {
       },
     ];
     const tree = render
-      .create(<FilterTab tabItem={tabs1} filterValue={() => 'NFC'} />)
+      .create(<FilterTab tabItem={tabs1} setFilterValue={() => 'NFC'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -35,7 +35,7 @@ describe('Filter tab test', () => {
       },
     ];
     const tree = render
-      .create(<FilterTab tabItem={tabs2} filterValue={() => 'M'} />)
+      .create(<FilterTab tabItem={tabs2} setFilterValue={() => 'M'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });

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

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

@@ -1,7 +1,11 @@
 type LanguageButtonProps = {
-    label: string;
-    onPress?: () => void;
-    textColor?: string;
+  label: string;
+  onPress?: () => void;
+  textColor?: string;
 };
-export declare const LanguageButton: ({ label, onPress, textColor, }: LanguageButtonProps) => JSX.Element;
+export declare const LanguageButton: ({
+  label,
+  onPress,
+  textColor,
+}: LanguageButtonProps) => JSX.Element;
 export {};

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

@@ -1,9 +1,13 @@
-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;
-    addAttachment: () => void;
+  keyboardType?: KeyBoardTypes;
+  onPressSend: () => void;
+  addAttachment: () => void;
 }
-declare const MessageInput: ({ keyboardType, onPressSend, ...props }: MessageInputProps) => JSX.Element;
-export { MessageInput };
+declare const MessageInput: ({
+  keyboardType,
+  onPressSend,
+  ...props
+}: MessageInputProps) => JSX.Element;
+export {MessageInput};

package/src/components/molecules/more-info-button/more-info-button.component.d.ts

@@ -1,7 +1,11 @@
 type MoreInfoButtonProps = {
-    label: string;
-    onPress?: () => void;
-    textColor?: string;
+  label: string;
+  onPress?: () => void;
+  textColor?: string;
 };
-export declare const MoreInfoButton: ({ label, onPress, textColor, }: MoreInfoButtonProps) => JSX.Element;
+export declare const MoreInfoButton: ({
+  label,
+  onPress,
+  textColor,
+}: MoreInfoButtonProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
-import { TextInputProps } from 'react-native';
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-interface PasswordInputProps extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
-    keyboardType?: KeyBoardTypes;
+import {TextInputProps} from 'react-native';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+interface PasswordInputProps
+  extends Omit<TextInputProps, 'secureTextEntry' | 'keyboardType'> {
+  keyboardType?: KeyBoardTypes;
 }
-export declare const PasswordInput: ({ keyboardType, ...props }: PasswordInputProps) => JSX.Element;
+export declare const PasswordInput: ({
+  keyboardType,
+  ...props
+}: PasswordInputProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type PillProps = {
-    visualState: VisualState;
-    label: string;
+  visualState: VisualState;
+  label: string;
 };
-declare const Pill: ({ visualState, label }: PillProps) => JSX.Element;
-export { Pill as Pill };
+declare const Pill: ({visualState, label}: PillProps) => JSX.Element;
+export {Pill as Pill};

package/src/components/molecules/pressable-icon/pressable-icon.component.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 type PressableIconProps = {
-    icon: React.ReactElement;
-    inverted?: boolean;
-    disabled?: boolean;
-    onPress?: () => void;
+  icon: React.ReactElement;
+  inverted?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
 };
-export declare const PressableIcon: ({ icon, inverted, disabled, onPress, }: PressableIconProps) => JSX.Element;
+export declare const PressableIcon: ({
+  icon,
+  inverted,
+  disabled,
+  onPress,
+}: PressableIconProps) => JSX.Element;
 export {};

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

@@ -1,11 +1,18 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type QuickFilterProps = {
-    id: string;
-    isLoading: boolean;
-    amount: number;
-    isSelected?: boolean;
-    onSelect: (id: string) => void;
-    visualState: VisualState;
+  id: string;
+  isLoading: boolean;
+  amount: number;
+  isSelected?: boolean;
+  onSelect: (id: string) => void;
+  visualState: VisualState;
 };
-declare const QuickFilter: ({ id, isLoading, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => JSX.Element;
-export { QuickFilter as QuickFilter };
+declare const QuickFilter: ({
+  id,
+  isLoading,
+  amount,
+  isSelected,
+  onSelect,
+  visualState,
+}: QuickFilterProps) => JSX.Element;
+export {QuickFilter as QuickFilter};

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

@@ -1,10 +1,16 @@
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 type SearchProps = {
-    placeholder?: string;
-    onchangeText?: (text: string) => void;
-    value: string;
-    keyboardType: KeyBoardTypes;
-    onPressSearch: (text: string) => void;
+  placeholder?: string;
+  onchangeText?: (text: string) => void;
+  value: string;
+  keyboardType: KeyBoardTypes;
+  onPressSearch: (text: string) => void;
 };
-declare const Search: ({ placeholder, onchangeText, value, keyboardType, onPressSearch, }: SearchProps) => JSX.Element;
-export { Search as Search };
+declare const Search: ({
+  placeholder,
+  onchangeText,
+  value,
+  keyboardType,
+  onPressSearch,
+}: SearchProps) => JSX.Element;
+export {Search as Search};

package/src/components/molecules/search-input/search.preview.d.ts

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

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

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

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 type SelectListProps = {
-    title: string;
-    subtitle?: string;
-    icon: React.ReactElement;
-    onPress?: () => void;
-    inverse?: boolean;
+  title: string;
+  subtitle?: string;
+  icon: React.ReactElement;
+  onPress?: () => void;
+  inverse?: boolean;
 };
-declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, }: SelectListProps) => JSX.Element;
-export { SelectListItem as SelectListItem };
+declare const SelectListItem: ({
+  title,
+  subtitle,
+  icon,
+  onPress,
+  inverse,
+}: SelectListProps) => JSX.Element;
+export {SelectListItem as SelectListItem};

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

@@ -1,11 +1,16 @@
 type PickerProps = {
-    placeholder?: string;
-    data: {
-        value: number | string;
-        label: string;
-    }[];
-    onChange: (item: string) => void;
-    defaultValue: string;
+  placeholder?: string;
+  data: {
+    value: number | string;
+    label: string;
+  }[];
+  onChange: (item: string) => void;
+  defaultValue: string;
 };
-export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => JSX.Element;
+export declare const SelectPicker: ({
+  placeholder,
+  data,
+  onChange,
+  defaultValue,
+}: PickerProps) => JSX.Element;
 export {};

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

@@ -1,12 +1,19 @@
-import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
-import { VisualState } from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type FailedBubbleProps = {
-    id: string;
-    text: string;
-    visualState: VisualState;
-    bubbleAlignment: BubbleAlignment;
-    onPressEdit: (id: string) => void;
-    onPressDelete: (id: string) => void;
+  id: string;
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+  onPressEdit: (id: string) => void;
+  onPressDelete: (id: string) => void;
 };
-declare const SendTextBubble: ({ id, text, visualState, bubbleAlignment, onPressEdit, onPressDelete, }: FailedBubbleProps) => JSX.Element;
-export { SendTextBubble };
+declare const SendTextBubble: ({
+  id,
+  text,
+  visualState,
+  bubbleAlignment,
+  onPressEdit,
+  onPressDelete,
+}: FailedBubbleProps) => JSX.Element;
+export {SendTextBubble};

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

@@ -1,7 +1,7 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type SnackbarProps = {
-    text: string;
-    visualState: VisualState;
+  text: string;
+  visualState: VisualState;
 };
-declare const Snackbar: ({ text, visualState }: SnackbarProps) => JSX.Element;
-export { Snackbar as Snackbar };
+declare const Snackbar: ({text, visualState}: SnackbarProps) => JSX.Element;
+export {Snackbar as Snackbar};

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import {ReactNode} from 'react';
 type SwipeProps = {
-    children: ReactNode;
-    onIndexChange?: (index: number) => void;
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({ children, onIndexChange }: SwipeProps) => JSX.Element;
-export { Swipe as Swipe };
+declare const Swipe: ({children, onIndexChange}: SwipeProps) => JSX.Element;
+export {Swipe as Swipe};

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

@@ -1,8 +1,13 @@
 type TagProps = {
-    value: string;
-    label: string;
-    onPress: (value: string, isSelected: boolean) => void;
-    isSelected: boolean;
+  value: string;
+  label: string;
+  onPress: (value: string, isSelected: boolean) => void;
+  isSelected: boolean;
 };
-declare const Tag: ({ label, onPress, value, isSelected }: TagProps) => JSX.Element;
-export { Tag as Tag };
+declare const Tag: ({
+  label,
+  onPress,
+  value,
+  isSelected,
+}: TagProps) => JSX.Element;
+export {Tag as Tag};

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -1,8 +1,13 @@
 interface TimePickerProps {
-    initialHours: string;
-    initialMinutes: string;
-    onChangeHours: (value: string) => void;
-    onChangeMinutes: (value: string) => void;
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
 }
-export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => JSX.Element;
+export declare const TimePicker: ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: TimePickerProps) => JSX.Element;
 export {};

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,8 +1,12 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
-    text: string;
-    textColor?: string;
-    visualState: VisualState;
+  text: string;
+  textColor?: string;
+  visualState: VisualState;
 };
-declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => JSX.Element;
-export { TimeTracker as TimeTracker };
+declare const TimeTracker: ({
+  text,
+  visualState,
+  textColor,
+}: TimeTrackerProps) => JSX.Element;
+export {TimeTracker as TimeTracker};

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

@@ -1,6 +1,9 @@
 type TimeLineProps = {
-    checkIn: string;
-    checkOut?: string;
+  checkIn: string;
+  checkOut?: string;
 };
-export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => JSX.Element;
+export declare const TimeLine: ({
+  checkIn,
+  checkOut,
+}: TimeLineProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TimestampProps = {
-    sent: ToddleDateTime;
+  sent: ToddleDateTime;
 };
-export declare const Timestamp: ({ sent }: TimestampProps) => JSX.Element;
+export declare const Timestamp: ({sent}: TimestampProps) => JSX.Element;
 export {};

package/src/components/molecules/wave-background/wave.component.d.ts

@@ -1,2 +1,7 @@
-import { WaveProps } from '../../atoms/static-wave/static-wave.component';
-export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;
+import {WaveProps} from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({
+  customWavePath,
+  customStyle,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => JSX.Element;

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

@@ -1,8 +1,13 @@
 type ButtonProps = {
-    text: string;
-    disabled?: boolean;
-    onPress?: () => void;
-    backgroundColor?: string;
+  text: string;
+  disabled?: boolean;
+  onPress?: () => void;
+  backgroundColor?: string;
 };
-declare const WideButton: ({ text, disabled, onPress, backgroundColor, }: ButtonProps) => JSX.Element;
-export { WideButton as WideButton };
+declare const WideButton: ({
+  text,
+  disabled,
+  onPress,
+  backgroundColor,
+}: ButtonProps) => JSX.Element;
+export {WideButton as WideButton};

package/src/components/organisms/child-list-item/__snapshots__/child-list-item.test.js.snap

@@ -10,7 +10,6 @@ exports[`test child list item component arrow appears when selectable is false 1
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }
@@ -278,7 +277,6 @@ exports[`test child list item component arrow appears when selectable is false 1
         "borderBottomRightRadius": 24,
         "borderTopRightRadius": 24,
         "justifyContent": "center",
-        "overflow": "hidden",
         "paddingRight": 8,
         "width": 48,
       }
@@ -355,7 +353,6 @@ exports[`test child list item component background is blue and text is white whe
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }
@@ -600,7 +597,6 @@ exports[`test child list item component make text that is too long end in ... 1`
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -1,20 +1,35 @@
 import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
+import {ImageSourcePropType} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {VisualState} from '../../../types/visual-state.enum';
 type ChildListItemProps = {
-    id: string;
-    name: string;
-    department: string;
-    selectable: boolean;
-    isSelected: boolean;
-    onPressArrow: (id: string) => void;
-    onPressText: (id: string) => void;
-    onLongPress: (id: string) => void;
-    onSelect: (id: string) => void;
-    sourceAvatar: ImageSourcePropType | Initials;
-    textTimeTracker: string;
-    visualStateTimeTracker: VisualState;
+  id: string;
+  name: string;
+  department: string;
+  selectable: boolean;
+  isSelected: boolean;
+  onPressArrow: (id: string) => void;
+  onPressText: (id: string) => void;
+  onLongPress: (id: string) => void;
+  onSelect: (id: string) => void;
+  sourceAvatar: ImageSourcePropType | Initials;
+  textTimeTracker: string;
+  visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element>;
-export { ChildListItem as ChildListItem };
+declare const ChildListItem: React.MemoExoticComponent<
+  ({
+    id,
+    name,
+    department,
+    selectable,
+    isSelected,
+    onPressArrow,
+    onPressText,
+    onLongPress,
+    onSelect,
+    sourceAvatar,
+    textTimeTracker,
+    visualStateTimeTracker,
+  }: ChildListItemProps) => JSX.Element
+>;
+export {ChildListItem as ChildListItem};

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -73,6 +73,7 @@ export const ChildListItemPreview = ({}: {}) => {
         flex: 1,
         padding: 16,
         justifyContent: 'center',
+        backgroundColor: 'white',
       }}
     >
       <View style={{alignItems: 'center', marginBottom: 28}}>

package/src/components/organisms/child-list-item/child-list-item.styles.js

@@ -10,7 +10,6 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
-      overflow: 'hidden',
       flexDirection: 'row',
       backgroundColor: isSelectedItem
         ? context.colors.main[6]
@@ -37,7 +36,6 @@ export const Stylesheet = (isSelectedItem, context) =>
       width: Scale.m * 3,
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
-      overflow: 'hidden',
     },
     trackerContainer: {
       flexDirection: 'row',

package/src/components/organisms/contact-item/contact-item.component.d.ts

@@ -1,8 +1,13 @@
 type ContactItemProps = {
-    name: string;
-    label: string;
-    onPress?: () => void;
-    isBlocked?: boolean;
+  name: string;
+  label: string;
+  onPress?: () => void;
+  isBlocked?: boolean;
 };
-declare const ContactItem: ({ name, label, onPress, isBlocked }: ContactItemProps) => JSX.Element;
-export { ContactItem as ContactItem };
+declare const ContactItem: ({
+  name,
+  label,
+  onPress,
+  isBlocked,
+}: ContactItemProps) => JSX.Element;
+export {ContactItem as ContactItem};