Skip to content

Commit 2fb9a85

Browse files
RachelRadford21isismsilva
RachelRadford21
and
isismsilva
authored
[PBIOS-468] Online Status Kit (#422)
**What does this PR do?** [PBIOS-468] Online Status Kit **Screenshots:** ![Simulator Screenshot - iPhone 15 Pro Max - 2024-07-24 at 13 27 49](https://github.com/user-attachments/assets/7226bb41-6e10-4f42-8249-bfcbc2f052f3) ### 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: Ísis <[email protected]>
1 parent f336e05 commit 2fb9a85

File tree

3 files changed

+240
-0
lines changed

3 files changed

+240
-0
lines changed

Diff for: ‎Sources/Playbook/Components/Online Status/OnlineStatusCatalog.swift

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
//
2+
// Playbook Swift Design System
3+
//
4+
// Copyright © 2024 Power Home Remodeling Group
5+
// This software is distributed under the ISC License
6+
//
7+
// OnlineStatusCatalog.swift
8+
//
9+
10+
import SwiftUI
11+
12+
public struct OnlineStatusCatalog: View {
13+
public var body: some View {
14+
PBDocStack(title: "Online Status", spacing: Spacing.medium) {
15+
PBDoc(title: "Small") {
16+
smallStatusView
17+
}
18+
PBDoc(title: "Medium") {
19+
mediumStatusView
20+
}
21+
PBDoc(title: "Large") {
22+
largeStatusView
23+
}
24+
PBDoc(title: "Borderless") {
25+
borderlessStatusView
26+
}
27+
}
28+
}
29+
}
30+
31+
extension OnlineStatusCatalog {
32+
var smallStatusView: some View {
33+
HStack(spacing: Spacing.xxSmall) {
34+
PBOnlineStatus(
35+
borderColor: .white
36+
)
37+
PBOnlineStatus(
38+
color: .status(.success),
39+
borderColor: .white
40+
)
41+
PBOnlineStatus(
42+
color: .status(.warning),
43+
borderColor: .white
44+
)
45+
PBOnlineStatus(
46+
color: .status(.error),
47+
borderColor: .white
48+
)
49+
PBOnlineStatus(
50+
color: .status(.info),
51+
borderColor: .white
52+
)
53+
PBOnlineStatus(
54+
color: .status(.primary),
55+
borderColor: .white
56+
)
57+
}
58+
}
59+
var mediumStatusView: some View {
60+
HStack(spacing: Spacing.xxSmall) {
61+
PBOnlineStatus(
62+
size: .medium,
63+
borderColor: .white
64+
)
65+
PBOnlineStatus(
66+
color: .status(.success),
67+
size: .medium,
68+
borderColor: .white
69+
)
70+
PBOnlineStatus(
71+
color: .status(.warning),
72+
size: .medium,
73+
borderColor: .white
74+
)
75+
PBOnlineStatus(
76+
color: .status(.error),
77+
size: .medium,
78+
borderColor: .white
79+
)
80+
PBOnlineStatus(
81+
color: .status(.info),
82+
size: .medium,
83+
borderColor: .white)
84+
PBOnlineStatus(
85+
color: .status(.primary),
86+
size: .medium,
87+
borderColor: .white
88+
)
89+
}
90+
}
91+
var largeStatusView: some View {
92+
HStack(spacing: Spacing.xxSmall) {
93+
PBOnlineStatus(
94+
size: .large,
95+
borderColor: .white
96+
)
97+
PBOnlineStatus(
98+
color: .status(.success),
99+
size: .large,
100+
borderColor: .white
101+
)
102+
PBOnlineStatus(
103+
color: .status(.warning),
104+
size: .large,
105+
borderColor: .white
106+
)
107+
PBOnlineStatus(
108+
color: .status(.error),
109+
size: .large,
110+
borderColor: .white
111+
)
112+
PBOnlineStatus(
113+
color: .status(.info),
114+
size: .large,
115+
borderColor: .white
116+
)
117+
PBOnlineStatus(
118+
color: .status(.primary),
119+
size: .large,
120+
borderColor: .white
121+
)
122+
}
123+
}
124+
var borderlessStatusView: some View {
125+
126+
HStack(spacing: Spacing.xxSmall) {
127+
PBOnlineStatus(
128+
size: .small,
129+
variant: .borderless
130+
)
131+
PBOnlineStatus(
132+
color: .status(.success),
133+
size: .small,
134+
variant: .borderless
135+
)
136+
PBOnlineStatus(
137+
color: .status(.warning),
138+
size: .small,
139+
variant: .borderless
140+
)
141+
PBOnlineStatus(
142+
color: .status(.error),
143+
size: .small,
144+
variant: .borderless
145+
)
146+
PBOnlineStatus(
147+
color: .status(.info),
148+
size: .small,
149+
variant: .borderless
150+
)
151+
PBOnlineStatus(
152+
color: .status(.primary),
153+
size: .small,
154+
variant: .borderless
155+
)
156+
}
157+
}
158+
}
159+
#Preview {
160+
registerFonts()
161+
return OnlineStatusCatalog()
162+
}

Diff for: ‎Sources/Playbook/Components/Online Status/PBOnlineStatus.swift

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
//
2+
// Playbook Swift Design System
3+
//
4+
// Copyright © 2024 Power Home Remodeling Group
5+
// This software is distributed under the ISC License
6+
//
7+
// PBOnlineStatus.swift
8+
//
9+
10+
import SwiftUI
11+
12+
public struct PBOnlineStatus: View {
13+
let color: Color
14+
let size: Size
15+
let borderColor: Color?
16+
let variant: Variant
17+
public init(
18+
color: Color = .status(.neutral),
19+
size: Size = .small,
20+
borderColor: Color? = .white,
21+
variant: Variant = .border
22+
) {
23+
self.borderColor = borderColor
24+
self.color = color
25+
self.size = size
26+
self.variant = variant
27+
}
28+
public var body: some View {
29+
statusView
30+
}
31+
}
32+
33+
public extension PBOnlineStatus {
34+
enum Variant {
35+
case border, borderless
36+
}
37+
private var hasBorder: Bool {
38+
return borderColor != nil
39+
}
40+
41+
private var statusView: some View {
42+
Circle()
43+
.stroke(_borderColor, lineWidth: borderWidth)
44+
.background(Circle().fill(color))
45+
.frame(width: _size, height: _size)
46+
}
47+
48+
var _borderColor: Color {
49+
switch variant {
50+
case .border: return borderColor ?? .clear
51+
case .borderless: return .clear
52+
}
53+
}
54+
var borderWidth: CGFloat {
55+
switch variant {
56+
case .border: return 2
57+
case .borderless: return 0
58+
}
59+
}
60+
private var _size: CGFloat {
61+
switch size {
62+
case .small: return hasBorder ? 8 : 6
63+
case .medium: return hasBorder ? 10 : 8
64+
case .large: return hasBorder ? 12 : 10
65+
}
66+
}
67+
68+
enum Size {
69+
case small, medium, large
70+
}
71+
}
72+
73+
#Preview {
74+
registerFonts()
75+
return PBOnlineStatus()
76+
}

Diff for: ‎Sources/Playbook/Resources/Helper Files/Components.swift

+2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ public enum Components: String, CaseIterable {
4343
case multipleUsersIndicator = "Multiple Users Indicator"
4444
case multipleUserStacked = "Multiple Users Stacked"
4545
case nav
46+
case onlineStatus = "Online Status"
4647
case person
4748
case personContact = "Person Contact"
4849
case pill
@@ -103,6 +104,7 @@ public enum Components: String, CaseIterable {
103104
case .multipleUsersIndicator: MultipleUsersIndicatorCatalog()
104105
case .multipleUserStacked: MultipleUsersStackedCatalog()
105106
case .nav: NavCatalog()
107+
case .onlineStatus: OnlineStatusCatalog()
106108
case .person: PersonCatalog()
107109
case .personContact: PersonContactCatalog()
108110
case .pill: PillCatalog()

0 commit comments

Comments
 (0)