[28][25] Nice buttons

[AZielinsky95]

For: #28 #25

NiceButton

This PR introduces NiceButton, a protocol that adds a bunch of flexibility and useful default behaviour to all button components.

Some problems addressed by NiceButton:

Firstly, every button component had the exact same view body constructed with the only difference being the button style.
The shared body is now constructed in an extension to NiceButton within a viewBuilder property called defaultBody. This allows easy conformance to NiceButton without needing to duplicate code. DefaultBody will also be helpful for the eventual next step of this component which will be to allow a viewBuilder constructor to be passed in.

Secondly, tweaking properties of button components has been quite tedious and verbose. There was pretty much no way to do this other than reconstruct the ButtonStyle object and re-setting the same properties for the most part. Also, depending on the border-style of your button, it would require you to remember to tweak other related properties. For instance if you styled your button to be pill shaped and you wanted to change the height, you would have to remember to change the cornerRadius as well in order to keep the uniform pill shape.

Changing the primary button height before:

let largeButtonStyle = ButtonStyle(
    textStyle: primaryStyle.textStyle,
    height: 56,
    surfaceColor: primaryStyle.surfaceColor,
    onSurfaceColor: primaryStyle.onSurfaceColor,
    border: BorderStyle(radius: 28) // Don't forget this! 
)
PrimaryButton("Large button", style: largeButtonStyle) { }

New way of changing button height:

PrimaryButton("Large button", height: 56) { }

The borderRadius is automatically set for you because the border theme is set to .capsule.

You can also set any other properties of buttons on the fly, without needing to reconstruct an entire ButtonStyle object.

Thirdly, I found it a bit odd that you would replace your entire button with an entirely new button for supporting disabled states. If you had a PrimaryButton you would need to explicitly code your disabled condition to instead render InActiveButton when disabled. This has changed so that you now pass your disabled flag into the button component.

PrimaryButton("Button", disabled: isDisabled) 

The styling is set by new properties in NiceButtonStyle. (disabledSurfaceColor & disabledOnSurfaceColor)

NiceBorderStyle:

BorderStyle has been replaced with an enum for easier use/initialization and extra helpful behaviour. ( StrokeStyle now supported as well )

public enum NiceBorderStyle {
    case none
    case capsule(borderWidth: CGFloat?, borderColor: Color?)
    case rounded(radius: CGFloat, borderWidth: CGFloat?, borderColor: Color?)
    case border(borderWidth: CGFloat, borderColor: Color)
    case stroke(strokeStyle: StrokeStyle)
}

You can now add Left/Right icons to button components like this:

PrimaryButton("Primary") {
    print("Tapped")
}.withRightImage(
    ResizableImage.init(systemIcon: "heart.fill", width: 14, height: 14, tintColor: .red),
    spacing: 8.0 // Default
)

Bug Fixes:

• Fixed NiceButtonStyle crash
• Fixed borders getting cut off from buttons

[brendanlensink]

This is a huge improvement! 🎉

One small suggestion, then don't forget to update the version number and changelog before merging.

[brendanlensink]

can we switch to using inactive over disabled?