[PBIOS-566] Fix Online Status Color (#449)

**What does this PR do?** A clear and concise description with your runway ticket url. [PBIOS-566] Fix Online Status Color **Screenshots:** Screenshots to visualize your addition/change **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change ### Checklist - [x] **LABELS** - Add a label: `breaking`, `bug`, `improvement`, `documentation`, or `enhancement`. See [Labels](https://github.com/powerhome/playbook-apple/labels) for descriptions. - [x] **RELEASES** - Add the appropriate label: `Ready for Testing` / `Ready for Release` - [x] **TESTING** - Have you tested your story? --------- Co-authored-by: isis.silva <[email protected]>
powerhome · Sep 20, 2024 · 65f8874 · 65f8874
1 parent 43dcdae
commit 65f8874
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 17 deletions.
diff --git a/Sources/Playbook/Components/Avatar/AvatarCatalog.swift b/Sources/Playbook/Components/Avatar/AvatarCatalog.swift
@@ -21,6 +21,9 @@ public struct AvatarCatalog: View {
       PBDoc(title: "Status Size") {
         statusSize
       }
+      PBDoc(title: "Status color") {
+        statusColor
+      }
     }
   }
 }
@@ -50,9 +53,35 @@ extension AvatarCatalog {
 
   var statusSize: some View {
     VStack(alignment: .leading, spacing: Spacing.small) {
-      PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .online, statusSize: .small)
-      PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away, statusSize: .medium)
-      PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .offline, statusSize: .large)
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online, statusSize: .medium)
+        Text("Small").pbFont(.caption)
+      }
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away, statusSize: .medium)
+        Text("Medium").pbFont(.caption)
+      }
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .offline, statusSize: .medium)
+        Text("Large").pbFont(.caption)
+      }
+    }
+  }
+
+  var statusColor: some View {
+    VStack(alignment: .leading, spacing: Spacing.small) {
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .online, statusSize: .medium)
+        Text("Online").pbFont(.caption)
+      }
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away, statusSize: .medium)
+        Text("Away").pbFont(.caption)
+      }
+      VStack(spacing: Spacing.xxSmall) {
+        PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .offline, statusSize: .medium)
+        Text("Offline").pbFont(.caption)
+      }
     }
   }
 }

diff --git a/Sources/Playbook/Components/Online Status/PBOnlineStatus.swift b/Sources/Playbook/Components/Online Status/PBOnlineStatus.swift
@@ -10,15 +10,15 @@
 import SwiftUI
 
 public struct PBOnlineStatus: View {
-  let status: Status
+  let status: Status?
   let color: Color?
   let size: Size
   let borderColor: Color?
   let variant: Variant
   @Environment(\.colorScheme) var colorScheme
 
   public init(
-    status: Status = .online,
+    status: Status? = nil,
     color: Color? = nil,
     size: Size = .small,
     borderColor: Color? = .white,
@@ -56,10 +56,10 @@ public extension PBOnlineStatus {
     if let color = color {
       return color
     } else {
-      switch status {
-        case .online: return .status(.success)
-        case .offline: return .status(.error)
-        case .away: return . status(.warning)
+      if let status = status {
+        return status.color
+      } else {
+        return .status(.neutral)
       }
     }
   }
@@ -91,13 +91,27 @@ public extension PBOnlineStatus {
   }
 
   enum Status {
-    case online, offline, away
+    case away
+    case error
+    case info
+    case neutral
+    case offline
+    case online
+    case primary
+    case success
+    case warning
 
     var color: Color {
       switch self {
       case .online: return .status(.success)
       case .away: return .status(.warning)
       case .offline: return .status(.neutral)
+      case .error: return .status(.error)
+      case .info: return .status(.info)
+      case .neutral: return .status(.neutral)
+      case .primary: return .pbPrimary
+      case .success: return .status(.success)
+      case .warning: return .status(.warning)
       }
     }
   }

diff --git a/Sources/Playbook/Resources/Helper Files/Mocks.swift b/Sources/Playbook/Resources/Helper Files/Mocks.swift
@@ -11,20 +11,20 @@
 import SwiftUI
 
 enum Mocks {
-    static let andrew = PBUser(name: "Andrew Black", nameFont: .init(font: .title4, variant: .bold), image: Image("andrew", bundle: .module), size: .small, title: "Senior User Experience Engineer")
+  static let andrew = PBUser(name: "Andrew Black", nameFont: .init(font: .title4, variant: .bold), image: Image("andrew", bundle: .module), size: .small, title: "Senior User Experience Engineer")
   static let ana = PBUser(name: "Ana Black", nameFont: .init(font: .title4, variant: .bold), image: Image("Anna", bundle: .module), size: .small, title: "Senior User Experience Engineer")
   static let patric = PBUser(name: "Pat Black", nameFont: .init(font: .title4, variant: .bold), image: Image("Pat", bundle: .module), size: .small, title: "Senior User Experience Engineer")
   static let luccile = PBUser(name: "Luccile Black", nameFont: .init(font: .title4, variant: .bold), image: Image("Lu", bundle: .module), size: .small, title: "Senior User Experience Engineer")
   static let oneUser = [andrew]
   static let twoUsers = [andrew, ana]
   static let threeUsers = [andrew, ana, patric]
   static let multipleUsers = [andrew, ana, patric, luccile]
-    static let multipleUsersDictionary: [(String, (String, (() -> PBUser?)?)?)] = [
-        ("1", (andrew.name, { andrew })),
-        ("2", (ana.name, { ana })),
-        ("3", (patric.name, { patric })),
-        ("4", (luccile.name, { luccile }))
-    ]
+  static let multipleUsersDictionary: [(String, (String, (() -> PBUser?)?)?)] = [
+    ("1", (andrew.name, { andrew })),
+    ("2", (ana.name, { ana })),
+    ("3", (patric.name, { patric })),
+    ("4", (luccile.name, { luccile }))
+  ]
   static let avatarXSmall = PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall)
   static let avatarXSmallStatus = PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .online)
   static let userName = "Andrew Black"