npm - @tactics/toddle-styleguide - Versions diffs - 1.4.7 → 1.4.8 - Mend

@tactics/toddle-styleguide 1.4.7 → 1.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

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

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

@@ -76,81 +76,75 @@ const ChildListItem = React.memo(
         visualState={visualStateTimeTracker}
         textColor={textColor}
       />
-      } else {
-        return <View style={styles.timeTrackerSpacer}></View>
       }
     }
     return (
       <View style={styles.container}>
-        <Pressable
-          onPress={onPressSelectable}
-          style={styles.innerContainer}
-          onLongPress={onLongPressCallback}
-        >
-          <Avatar
-            source={sourceAvatar}
-            size={Size.MEDIUM}
-            isLoading={longPressExecuting}
-          />
-          <View style={styles.pressableText}>
-            <View style={styles.trackerContainer}>
-              {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
-            </View>
-            <View>
-              <Heading2
-                bold={true}
-                numberOfLines={1}
-                ellipsizeMode={'tail'}
-                textColor={
-                  isSelected ? context.colors.ui.white : context.colors.ui.black
-                }
-              >
-                {name}
-              </Heading2>
-              <SmallText
-                textColor={
-                  isSelected ? context.colors.ui.white : context.colors.ui.black
-                }
-              >
-                {department}
-              </SmallText>
-            </View>
-            {tags && (
-              <View
-                style={{
-                  flexDirection: 'row',
-                  gap: 6,
-                  flexWrap: 'wrap',
-                  marginTop: 10,
-                }}
-              >
-                {tags.map((tag) => {
-                  return (
-                    <ChildListTag
-                      key={`${id}--${tag}`}
-                      label={tag}
-                      isSelected={isSelected}
-                    />
-                  );
-                })}
-              </View>
-            )}
-          </View>
-        </Pressable>
-        {!selectable && (
+        <View style={styles.pressableContainer}>
           <Pressable
-            onPress={onPressArrowCallback}
-            style={styles.iconContainer}
+            onPress={onPressSelectable}
+            style={styles.innerContainer}
+            onLongPress={onLongPressCallback}
           >
-            <Icon
-              style={'regular'}
-              name={'chevron-right'}
-              size={20}
-              color={context.colors.ui.black}
+            <Avatar
+              source={sourceAvatar}
+              size={Size.MEDIUM}
+              isLoading={longPressExecuting}
             />
+            <View style={styles.pressableText}>
+              <View style={styles.trackerContainer}>
+                {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
+              </View>
+              <View>
+                <Heading2
+                  bold={true}
+                  numberOfLines={1}
+                  ellipsizeMode={'tail'}
+                  textColor={
+                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                  }
+                >
+                  {name}
+                </Heading2>
+                <SmallText
+                  textColor={
+                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                  }
+                >
+                  {department}
+                </SmallText>
+              </View>
+            </View>
           </Pressable>
+          {!selectable && (
+            <Pressable
+              onPress={onPressArrowCallback}
+              style={styles.iconContainer}
+            >
+              <Icon
+                style={'regular'}
+                name={'chevron-right'}
+                size={20}
+                color={context.colors.ui.black}
+              />
+            </Pressable>
+          )}
+        </View>
+        {tags && (
+          <View
+            style={styles.tagContainer}
+          >
+            {tags.map((tag) => {
+              return (
+                <ChildListTag
+                  key={`${id}--${tag}`}
+                  label={tag}
+                  isSelected={isSelected}
+                />
+              );
+            })}
+          </View>
         )}
       </View>
     );

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

@@ -5,7 +5,7 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         borderBottomRightRadius: number;
         borderTopLeftRadius: number;
         borderBottomLeftRadius: number;
-        flexDirection: "row";
+        flexDirection: "column";
         backgroundColor: any;
     };
     innerContainer: {
@@ -16,6 +16,12 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         borderBottomRightRadius: number;
         borderTopLeftRadius: number;
         borderBottomLeftRadius: number;
+        alignItems: "center";
+    };
+    pressableContainer: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
     };
     pressableText: {
         marginLeft: number;
@@ -37,4 +43,10 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         height: number;
         marginBottom: number;
     };
+    tagContainer: {
+        flexDirection: "row";
+        gap: number;
+        flexWrap: "wrap";
+        marginLeft: number;
+    };
 };

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

@@ -10,7 +10,7 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xl,
       borderBottomLeftRadius: Scale.xl,
-      flexDirection: 'row',
+      flexDirection: 'column',
       backgroundColor: isSelectedItem
         ? context.colors.main[6]
         : context.colors.ui.white,
@@ -23,10 +23,16 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
+      alignItems: 'center'
+    },
+    pressableContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
     },
     pressableText: {
       marginLeft: Scale.l,
-      flex: 1,
+      flex: 1
     },
     iconContainer: {
       alignItems: 'flex-end',
@@ -43,5 +49,11 @@ export const Stylesheet = (isSelectedItem, context) =>
     timeTrackerSpacer: {
       height: Scale.s,
       marginBottom: Scale.xxs
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      gap: Scale.s,
+      flexWrap: 'wrap',
+      marginLeft: Scale.xxxxl
     }
   });