[PBIOS-457] Progress Simple Width

Sources/Playbook/Components/Progress Simple/PBProgressSimple.swift

@@ -14,19 +14,22 @@ public struct PBProgressSimple: View {
   @Binding var value: Int
   let maxValue: Int
   let progressColor: Color
+  let progressWidth: CGFloat?
   let variant: Variant
 
   public init(
     progress: Binding<Double> = .constant(0.0),
     value: Binding<Int> = .constant(2),
     maxValue: Int = 10,
     progressColor: Color = .pbPrimary,
+    progressWidth: CGFloat? = nil,
     variant: Variant = .default
   ) {
     self._progress = progress
     self._value = value
     self.maxValue = maxValue
     self.progressColor = progressColor
+    self.progressWidth = progressWidth
     self.variant = variant
   }
 
@@ -39,15 +42,16 @@ public extension PBProgressSimple {
   enum Variant {
     case `default`, settingValue
   }
-  
+
   var variantView: some View {
-    HStack {
+    Group {
       switch variant {
       case .default: ProgressView(value: progress, total: 1)
       case .settingValue: ProgressView(value: CGFloat(value), total: CGFloat(maxValue))
       }
     }
     .tint(progressColor)
+    .frame(width: progressWidth)
   }
 }
 #Preview {

Sources/Playbook/Components/Progress Simple/ProgressSimpleCatalog.swift

@@ -12,15 +12,34 @@ import SwiftUI
 public struct ProgressSimpleCatalog: View {
   @State private var progress: Double = 0.45
   @State private var progress1: Double = 0.68
+  @State private var progress2: Double = 0.40
+  @State private var progress3: Double = 0.64
+  @State private var progress4: Double = 0.9
+  @State private var progress5: Double = 0.1
+  @State private var progress6: Double = 0.4
+  @State private var progress7: Double = 0.68
+  @State private var progress8: Double = 0.45
+  @State private var progress9: Double = 0.45
+  @State private var progress10: Double = 0.45
   @State private var value: Int = 2
-  public var body: some View {
+
+    public var body: some View {
     PBDocStack(title: "Progress Simple", spacing: Spacing.medium) {
       PBDoc(title: "Default") {
         defaultView
       }
       PBDoc(title: "Setting Values") {
         settingValueView
       }
+      PBDoc(title: "Progress Bar Width") {
+        progressWidthView
+      }
+      PBDoc(title: "Variants") {
+        progressColorView
+      }
+      PBDoc(title: "Align") {
+        alignmentView
+      }
     }
   }
 }
@@ -29,11 +48,11 @@ public extension ProgressSimpleCatalog {
   var defaultView: some View {
     VStack(alignment: .leading) {
       PBProgressSimple(
-        progress: $progress,
-        progressColor: .pbPrimary
+        progress: $progress
       )
     }
   }
+
   var settingValueView: some View {
     VStack(alignment: .leading) {
       PBProgressSimple(
@@ -48,7 +67,66 @@ public extension ProgressSimpleCatalog {
       )
     }
   }
+  var progressWidthView: some View {
+    VStack(alignment: .leading, spacing: Spacing.medium) {
+      PBProgressSimple(
+        progress: $progress2,
+        progressColor: .pbPrimary,
+        progressWidth: 100
+      )
+    }
+  }
+  var progressColorView: some View {
+    VStack(alignment: .leading, spacing: Spacing.medium) {
+      PBProgressSimple(
+        progress: $progress3,
+        progressColor: .pbPrimary
+      )
+      PBProgressSimple(
+        progress: $progress4,
+        progressColor: .status(.success)
+      )
+      PBProgressSimple(
+        progress: $progress5,
+        progressColor: .status(.error)
+      )
+      PBProgressSimple(
+        progress: $progress6,
+        progressColor: .status(.warning)
+      )
+      PBProgressSimple(
+        progress: $progress7,
+        progressColor: .status(.neutral)
+      )
+    }
+  }
+  var alignmentView: some View {
+    VStack(alignment: .leading, spacing: Spacing.medium) {
+      HStack {
+        PBProgressSimple(
+          progress: $progress8,
+          progressWidth: 100
+        )
+      }
+      .frame(maxWidth: .infinity, alignment: .leading)
+      HStack {
+        PBProgressSimple(
+          progress: $progress9,
+          progressWidth: 100
+        )
+      }
+      .frame(maxWidth: .infinity, alignment: .center)
+      HStack {
+        PBProgressSimple(
+          progress: $progress10,
+          progressWidth: 100
+        )
+      }
+      .frame(maxWidth: .infinity, alignment: .trailing)
+    }
+  }
 }
+
 #Preview {
   registerFonts()
   return ProgressSimpleCatalog()