status variant

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<Int> = .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

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 {