Add status text to ListRowLabel.avatar (#66)

Sources/Compound/List/ListRow.swift

@@ -394,6 +394,12 @@ public struct ListRow_Previews: PreviewProvider, PrefireProvider {
                                    description: "@bob:element.io",
                                    icon: Circle().foregroundStyle(.compound.decorativeColors[1].background)),
                     kind: .multiSelection(isSelected: false) { })
+            ListRow(label: .avatar(title: "Dan",
+                                   status: "Pending",
+                                   description: "@dan:element.io",
+                                   icon: Circle().foregroundStyle(.compound.decorativeColors[3].background)),
+                    kind: .multiSelection(isSelected: false) { })
+                .disabled(true)
             ListRow(label: .avatar(title: "@charlie:fake.com",
                                    description: "This user can't be found, so the invite may not be received.",
                                    icon: Circle().foregroundStyle(.compound.decorativeColors[2].background),

Sources/Compound/List/ListRowLabel.swift

@@ -62,6 +62,7 @@ public struct ListRowLabel<Icon: View>: View {
     @ScaledMetric private var iconSize = 30.0
 
     var title: String?
+    var status: String?
     var description: String?
     var icon: Icon?
 
@@ -87,6 +88,10 @@ public struct ListRowLabel<Icon: View>: View {
     }
     var titleLineLimit: Int? { layout == .avatar ? 1 : lineLimit }
 
+    var statusColor: Color {
+        isEnabled ? .compound.textSecondary : .compound.textDisabled
+    }
+
     var descriptionColor: Color {
         isEnabled ? .compound.textSecondary : .compound.textDisabled
     }
@@ -166,10 +171,21 @@ public struct ListRowLabel<Icon: View>: View {
     var titleAndDescription: some View {
         VStack(alignment: .leading, spacing: 2) {
             if let title {
-                Text(title)
-                    .font(.compound.bodyLG)
-                    .foregroundColor(titleColor)
-                    .lineLimit(titleLineLimit)
+                HStack(alignment: .firstTextBaseline, spacing: 8) {
+                    Text(title)
+                        .font(.compound.bodyLG)
+                        .foregroundColor(titleColor)
+                        .lineLimit(titleLineLimit)
+
+                    // Status is only available in the avatar init which requires a title,
+                    // so no need to worry about the outer `if let` being nil in this instance.
+                    if let status {
+                        Text(status)
+                            .font(.compound.bodySM)
+                            .foregroundColor(statusColor)
+                            .lineLimit(1)
+                    }
+                }
             }
 
             if let description {
@@ -282,10 +298,12 @@ public struct ListRowLabel<Icon: View>: View {
 
     /// A label that displays an avatar as it's icon, such as a user profile row or for a room picker.
     public static func avatar(title: String,
+                              status: String? = nil,
                               description: String? = nil,
                               icon: Icon,
                               role: ListRowLabel.Role? = nil) -> ListRowLabel {
         ListRowLabel(title: title,
+                     status: status,
                      description: description,
                      icon: icon,
                      role: role,
@@ -343,6 +361,10 @@ struct ListRowLabel_Previews: PreviewProvider, PrefireProvider {
                 ListRowLabel.avatar(title: "Alice",
                                     description: "@alice:example.com",
                                     icon: Circle().foregroundStyle(.compound.decorativeColors[0].background))
+                ListRowLabel.avatar(title: "Alice",
+                                    status: "Pending",
+                                    description: "@alice:example.com",
+                                    icon: Circle().foregroundStyle(.compound.decorativeColors[0].background))
                 ListRowLabel.avatar(title: "@bob:idontexist.com",
                                     description: "This user can't be found, so the invite may not be received.",
                                     icon: Circle().foregroundStyle(.compound.decorativeColors[0].background),