diff --git a/README.md b/README.md index db5ae68..c57ee25 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ 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. button-dark @@ -132,7 +132,12 @@ They have a number of optional parameters, including: width, height, cornerRadiu SwiftUI -```swift +```swift +Button("Capsule button") { + print("Button pressed!") +} +.buttonStyle(BitcoinCapsule()) + Button("Filled button") { print("Button pressed!") } diff --git a/Sources/WalletUI/ButtonStyles.swift b/Sources/WalletUI/ButtonStyles.swift index a06d1ad..ec24612 100644 --- a/Sources/WalletUI/ButtonStyles.swift +++ b/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())