diff --git a/Sources/Playbook/Components/Avatar/AvatarCatalog.swift b/Sources/Playbook/Components/Avatar/AvatarCatalog.swift index 499ab059..7b6a80a6 100644 --- 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 index 0d7a558d..75a6f840 100644 --- a/Sources/Playbook/Components/Online Status/PBOnlineStatus.swift +++ b/Sources/Playbook/Components/Online Status/PBOnlineStatus.swift @@ -10,7 +10,7 @@ import SwiftUI public struct PBOnlineStatus: View { - let status: Status + let status: Status? let color: Color? let size: Size let borderColor: Color? @@ -18,7 +18,7 @@ public struct PBOnlineStatus: View { @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 index f746baf5..d726f43f 100644 --- a/Sources/Playbook/Resources/Helper Files/Mocks.swift +++ b/Sources/Playbook/Resources/Helper Files/Mocks.swift @@ -11,7 +11,7 @@ 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") @@ -19,12 +19,12 @@ enum Mocks { 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"