diff --git a/Sources/Playbook/Components/Progress Pill/PBProgressPill.swift b/Sources/Playbook/Components/Progress Pill/PBProgressPill.swift index e33ac2603..ee5677c05 100644 --- a/Sources/Playbook/Components/Progress Pill/PBProgressPill.swift +++ b/Sources/Playbook/Components/Progress Pill/PBProgressPill.swift @@ -12,21 +12,52 @@ import SwiftUI public struct PBProgressPill: View { @Binding var active: Int let steps: Int + let title: String? + let value: String? public init( active: Binding = .constant(2), - steps: Int = 3 + steps: Int = 3, + title: String? = nil, + value: String? = nil ) { self._active = active self.steps = steps + self.title = title + self.value = value } public var body: some View { - progressView + titleProgressView } } extension PBProgressPill { - + var titleProgressView: some View { + VStack(alignment: .leading) { + titleValueView + progressView + } + } + var titleValueView: some View { + HStack { + titleView + valueView + } + } + @ViewBuilder + var titleView: some View { + if let title = title { + Text(title) + .pbFont(.title4) + } + } + @ViewBuilder + var valueView: some View { + if let value = value { + Text(value) + .pbFont(.body, color: .text(.light)) + } + } var progressView: some View { HStack { ForEach(1...steps, id: \.self) { step in diff --git a/Sources/Playbook/Components/Progress Pill/ProgressPillCatalog.swift b/Sources/Playbook/Components/Progress Pill/ProgressPillCatalog.swift index fab52c39a..788a5207d 100644 --- a/Sources/Playbook/Components/Progress Pill/ProgressPillCatalog.swift +++ b/Sources/Playbook/Components/Progress Pill/ProgressPillCatalog.swift @@ -11,11 +11,15 @@ import SwiftUI public struct ProgressPillCatalog: View { @State private var active: Int = 2 + @State private var active1: Int = 2 public var body: some View { PBDocStack(title: "Progress Pill", spacing: Spacing.medium) { PBDoc(title: "Default") { defaultView } + PBDoc(title: "Status") { + statusView + } } } } @@ -28,6 +32,15 @@ extension ProgressPillCatalog { ) } } + var statusView: some View { + VStack(alignment: .leading) { + PBProgressPill( + active: $active1, + title: "Status:", + value: "Orientation" + ) + } + } } #Preview {