@tactics/toddle-styleguide 1.6.0 → 1.7.0

package/package.json

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

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

@@ -16,6 +16,7 @@ type ChildListItemProps = {
     textTimeTracker?: string;
     visualStateTimeTracker?: VisualState;
     tags?: string[];
+    error: boolean;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, }: ChildListItemProps) => React.JSX.Element>;
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error }: ChildListItemProps) => React.JSX.Element>;
 export { ChildListItem as ChildListItem };

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

@@ -8,7 +8,7 @@ import {Size} from '../../../types/size.enum';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Avatar} from '../../molecules/avatar/avatar.component';
 import {Stylesheet} from './child-list-item.styles';
-import {SmallText, TinyText} from '../../atoms/paragraph-components';
+import {SmallText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
 import {TimeTracker} from '../../molecules/time-tracker/time-tracker.component';
 import {Icon} from '../../../icons/index';
@@ -28,6 +28,7 @@ type ChildListItemProps = {
   textTimeTracker?: string;
   visualStateTimeTracker?: VisualState;
   tags?: string[];
+  error: boolean;
 };
 
 const ChildListItem = React.memo(
@@ -45,6 +46,7 @@ const ChildListItem = React.memo(
     textTimeTracker,
     visualStateTimeTracker,
     tags,
+    error
   }: ChildListItemProps) => {
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
@@ -66,8 +68,10 @@ const ChildListItem = React.memo(
     }, [id, onLongPress]);
 
     const textColor = useMemo(() => {
-      return isSelected ? context.colors.ui.white : context.colors.ui.black;
-    }, [isSelected]);
+      return isSelected
+        ? context.colors.ui.white
+        : error ? context.colors.ui.error.default : context.colors.ui.black;
+    }, [isSelected, error]);
 
     const renderTimeTracker = (textTimeTracker?: string, visualStateTimeTracker?: VisualState) => {
       if (textTimeTracker && visualStateTimeTracker) {
@@ -83,7 +87,7 @@ const ChildListItem = React.memo(
       <View style={styles.container}>
         <View style={styles.pressableContainer}>
           <Pressable
-            onPress={onPressSelectable}
+            onPress={!error ? onPressSelectable : null}
             style={styles.innerContainer}
             onLongPress={onLongPressCallback}
           >
@@ -102,14 +106,14 @@ const ChildListItem = React.memo(
                   numberOfLines={1}
                   ellipsizeMode={'tail'}
                   textColor={
-                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                    textColor
                   }
                 >
                   {name}
                 </Heading2>
                 <SmallText
                   textColor={
-                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                    textColor
                   }
                 >
                   {department}

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

@@ -71,6 +71,7 @@ export const ChildListItemPreview = ({}: {}) => {
         // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
         sourceAvatar={Initials.for('Zeno', 'Driesen')}
         tags={item.tags}
+        error={true}
       />
     );
   };

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

@@ -32,6 +32,7 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         justifyContent: "center";
         paddingRight: number;
         width: number;
+        height: number;
         borderTopRightRadius: number;
         borderBottomRightRadius: number;
     };
@@ -48,5 +49,6 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         gap: number;
         flexWrap: "wrap";
         marginLeft: number;
+        marginBottom: number;
     };
 };

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

@@ -39,6 +39,7 @@ export const Stylesheet = (isSelectedItem, context) =>
       justifyContent: 'center',
       paddingRight: Scale.xs,
       width: Scale.m * 3,
+      height: Scale.m * 3,
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
     },

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

@@ -30,7 +30,7 @@ export const Modal = ({
     return () => subscription?.remove();
   });
 
-  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const maxHeight = Math.round(windowHeight / 100) * 90;
 
   const styles = Stylesheet();
 

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

@@ -35,7 +35,7 @@ const Modal = ({
 
   const elementHeight = Math.round(elementSize.height);
 
-  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const maxHeight = Math.round(windowHeight / 100) * 90;
   const translateYStartingPoint = windowHeight;
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;