button: add bitcoincapsule buttonstyle

README.md

@@ -124,15 +124,20 @@ view.addSubview(imageView)
 
 ### Button Styles
 
-Three button styles are implemented in SwiftUI; BitcoinFilled, BitcoinOutlined and BitcoinPlain.
+Four button styles are implemented in SwiftUI; BitcoinCapsule, BitcoinFilled, BitcoinOutlined and BitcoinPlain.
 They have a number of optional parameters, including: width, height, cornerRadius, tintColor, textColor, disabledFillColor and disabledTextColor depending on the type.
 
 <img src="https://github.com/reez/WalletUI/blob/main/Docs/button-dark.png?raw=true" height="400" alt='button-dark' />
 
 
 SwiftUI
 
-```swift
+```swift    
+Button("Capsule button") {
+    print("Button pressed!")
+}
+.buttonStyle(BitcoinCapsule())
+
 Button("Filled button") {
     print("Button pressed!")
 }

Sources/WalletUI/ButtonStyles.swift

@@ -17,6 +17,72 @@ public let defaultDisabledFillColor = Color.bitcoinNeutral2
 public let defaultDisabledTextColor = Color.bitcoinNeutral5
 public let defaultDisabledOutlineColor = Color.bitcoinNeutral4
 
+
+/// A `ButtonStyle` corresponding to a Capsule type not currently  in the Bitcoin Wallet UI Kit
+///
+/// ```swift
+/// Button("Label") {
+///     print("Button pressed!")
+/// }
+///.buttonStyle(BitcoinFilled())
+/// ```
+/// - Parameter width: The width of the button (optional, default is 315.0)
+/// - Parameter height: The width of the button (optional, default is 48.0)
+/// - Parameter cornerRadius: The corner radius of the button (optional, default is 5.0)
+/// - Parameter tintColor: The background color of the button (optional, default is .bitcoinOrange)
+/// - Parameter textColor: The text color of the button (optional, default is .bitcoinWhite)
+/// - Parameter disabledFillColor: The disabled background color of the button (optional, default is .bitcoinNeutral2)
+/// - Parameter disabledTextColor: The disabled text color of the button (optional, default is .bitcoinNeutral5)
+///
+public struct BitcoinCapsule: ButtonStyle {
+    @Environment(\.isEnabled) private var isEnabled
+
+    let width: CGFloat
+    let height: CGFloat
+    let tintColor: Color
+    let textColor: Color
+    let disabledFillColor: Color
+    let disabledTextColor: Color
+
+    public init(
+        width: CGFloat = defaultButtonWidth, height: CGFloat = defaultButtonHeight,
+        tintColor: Color = defaultTintColor,
+        textColor: Color = defaultTextColor, disabledFillColor: Color = defaultDisabledFillColor,
+        disabledTextColor: Color = defaultDisabledTextColor
+    ) {
+        self.width = width
+        self.height = height
+        self.tintColor = tintColor
+        self.textColor = textColor
+        self.disabledFillColor = disabledFillColor
+        self.disabledTextColor = disabledTextColor
+    }
+
+    public func makeBody(configuration: Configuration) -> some View {
+        let stateBackgroundColor = stateBackgroundColor(configuration: configuration)
+        configuration.label
+            .font(Font.body.bold())
+            .padding()
+            .frame(width: width, height: height)
+            .background(stateBackgroundColor.opacity(0.8))
+            .clipShape(Capsule())
+            .foregroundColor(stateTextColor())
+            .scaleEffect(configuration.isPressed ? 0.95 : 1)
+            .animation(.easeOut(duration: 0.1), value: configuration.isPressed)
+    }
+
+    private func stateBackgroundColor(configuration: Configuration) -> Color {
+        return isEnabled
+            ? configuration.isPressed ? tintColor.opacity(0.8) : tintColor : disabledFillColor
+    }
+
+    private func stateTextColor() -> Color {
+        return isEnabled ? textColor : disabledTextColor
+    }
+}
+
+
+
 /// A `ButtonStyle` corresponding to the Filled type in the Bitcoin Wallet UI Kit
 ///
 /// ```swift
@@ -214,6 +280,10 @@ struct ButtonStylesView: View {
           .padding(.top, .wallet_grid_vertical_20())
 
         Spacer()
+
+        Button("BitcoinCapsule") {}
+            .buttonStyle(BitcoinCapsule())
+            .padding()
 
         Button("BitcoinFilled") {}
           .buttonStyle(BitcoinFilled())