diff --git a/MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogButtonsViewController.swift b/MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogButtonsViewController.swift index 07cc6c80d..3996ae8dc 100644 --- a/MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogButtonsViewController.swift +++ b/MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogButtonsViewController.swift @@ -24,6 +24,7 @@ class UICatalogButtonsViewController: UITableViewController { Style(buttonStyle: .secondaryInverse, title: "Secondary Inverse", isInverse: true, isSmall: false), Style(buttonStyle: .primaryBrand, title: "Primary Brand", isInverse: true, isSmall: false), Style(buttonStyle: .secondaryBrand, title: "Secondary Brand", isInverse: true, isSmall: false), + Style(buttonStyle: .linkBrand, title: "Link Brand", isInverse: true, isSmall: false), Style(buttonStyle: .linkInverse, title: "Link Inverse", isInverse: true, isSmall: false), Style(buttonStyle: .linkDangerInverse, title: "Link Danger Inverse", isInverse: true, isSmall: false), @@ -139,6 +140,7 @@ class UICatalogButtonsViewController: UITableViewController { let state = Constants.states[indexPath.row] let cell = UITableViewCell() + cell.contentView.setMisticaColorBackground(style.isInverse ? .backgroundBrand : .solid(.backgroundContainer)) let button = state.makeButton( style: style.buttonStyle, @@ -149,7 +151,6 @@ class UICatalogButtonsViewController: UITableViewController { rightImage: style.rightImage ) cell.configure(with: button) - cell.contentView.setMisticaColorBackground(style.isInverse ? .backgroundBrand : .solid(.backgroundContainer)) return cell } diff --git a/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ButtonCatalogView.swift b/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ButtonCatalogView.swift index e11fd71f1..9d1703390 100644 --- a/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ButtonCatalogView.swift +++ b/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ButtonCatalogView.swift @@ -24,6 +24,7 @@ struct ButtonsCatalogView: View { Style(buttonStyle: .misticaLinkInverse(), title: "Link Inverse", inverse: true), Style(buttonStyle: .misticaPrimaryBrand(), title: "Primary Brand", inverse: true), Style(buttonStyle: .misticaSecondaryBrand(), title: "Secondary Brand", inverse: true), + Style(buttonStyle: .misticaLinkBrand(), title: "Link Brand", inverse: true), Style(buttonStyle: .misticaPrimary(small: true), title: "Primary Small", inverse: false), Style(buttonStyle: .misticaSecondary(small: true), title: "Secondary Small", inverse: false), diff --git a/Sources/Mistica/Components/Button/ButtonStyle+Toolkit.swift b/Sources/Mistica/Components/Button/ButtonStyle+Toolkit.swift index bf959aa15..fc1cd84ce 100644 --- a/Sources/Mistica/Components/Button/ButtonStyle+Toolkit.swift +++ b/Sources/Mistica/Components/Button/ButtonStyle+Toolkit.swift @@ -213,6 +213,23 @@ public extension Button.Style { ) } + static var linkBrand: Button.Style { + let backgroundColor: UIColor = .clear + var style = Button.Style( + allowsBleedingAlignment: true, + stateStyleByState: [ + .normal: Button.StateStyle(textColor: .textLinkBrand, backgroundColor: backgroundColor, borderColor: backgroundColor), + .selected: Button.StateStyle(textColor: .textLinkBrand, backgroundColor: .buttonLinkBackgroundBrandPressed, borderColor: backgroundColor), + .disabled: Button.StateStyle(textColor: .textLinkBrand, backgroundColor: backgroundColor, borderColor: backgroundColor), + .loading: Button.StateStyle(textColor: .textLinkBrand, backgroundColor: backgroundColor, borderColor: backgroundColor) + ] + ) + + style.overriddenSizes = linkOverriddenSizes + + return style + } + func insets(isSmall: Bool) -> UIEdgeInsets { if let overriddenSizes = overriddenSizes { return overriddenSizes.insets diff --git a/Sources/MisticaSwiftUI/Components/Button/MisticaButtonStyle.swift b/Sources/MisticaSwiftUI/Components/Button/MisticaButtonStyle.swift index 32039e562..db94f6140 100644 --- a/Sources/MisticaSwiftUI/Components/Button/MisticaButtonStyle.swift +++ b/Sources/MisticaSwiftUI/Components/Button/MisticaButtonStyle.swift @@ -285,6 +285,43 @@ public extension ButtonStyle where Self == MisticaButtonStyle { ) } + static func misticaLinkBrand( + small: Bool = false, + bleedingAlignment: ButtonBleedingAlignment = .none, + withChevron: Bool = false + ) -> Self { + Self( + style: MisticaButton.Style( + bleedingAlignment: bleedingAlignment, + hasMinWidth: false, + styleByState: [ + .normal: MisticaButton.StateStyle( + textColor: .textLinkBrand, + backgroundColor: .clear, + borderColor: .clear + ), + .selected: MisticaButton.StateStyle( + textColor: .textLinkBrand, + backgroundColor: .buttonLinkBackgroundBrandPressed, + borderColor: .clear + ), + .disabled: MisticaButton.StateStyle( + textColor: .textLinkBrand.opacity(opacity), + backgroundColor: .clear, + borderColor: .clear + ), + .loading: MisticaButton.StateStyle( + textColor: .textLinkBrand, + backgroundColor: .clear, + borderColor: .clear + ) + ] + ), + small: small, + rightImage: withChevron ? .chevron : nil + ) + } + static func misticaSnackbar( small: Bool = false, bleedingAlignment: ButtonBleedingAlignment = .none diff --git a/Tests/MisticaSwiftUITests/UI/ButtonTests.swift b/Tests/MisticaSwiftUITests/UI/ButtonTests.swift index 4143dcf9c..07ee8185f 100644 --- a/Tests/MisticaSwiftUITests/UI/ButtonTests.swift +++ b/Tests/MisticaSwiftUITests/UI/ButtonTests.swift @@ -162,6 +162,13 @@ final class ButtonTests: XCTestCase { as: .image ) } + + func testSmallSizeWithLinkBrandWithChevron() { + assertSnapshot( + of: makeTemplateWithAllButtonStates(style: .misticaLinkBrand(small: true, withChevron: true), inverse: true), + as: .image + ) + } } // MARK: - Helpers diff --git a/Tests/MisticaSwiftUITests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevron.1.png b/Tests/MisticaSwiftUITests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevron.1.png new file mode 100644 index 000000000..f8d8aeb94 Binary files /dev/null and b/Tests/MisticaSwiftUITests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevron.1.png differ diff --git a/Tests/MisticaTests/UI/ButtonTests.swift b/Tests/MisticaTests/UI/ButtonTests.swift index 377fa13cc..689b21f18 100644 --- a/Tests/MisticaTests/UI/ButtonTests.swift +++ b/Tests/MisticaTests/UI/ButtonTests.swift @@ -219,6 +219,13 @@ final class ButtonTests: XCTestCase { ) } + func testSmallSizeWithLinkBrandWithChevronStyle() { + assertSnapshotForAllBrandsAndStyles( + as: .image, + viewBuilder: makeTemplateWithAllButtonStates(style: .linkBrand, isSmall: true, rightImage: .chevron) + ) + } + func testSmallSizeWithLinkWithLeftImageStyle() { assertSnapshotForAllBrandsAndStyles( as: .image, diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-dark-style.png new file mode 100644 index 000000000..551fef2c9 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-style.png new file mode 100644 index 000000000..93cecf123 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-blau-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-dark-style.png new file mode 100644 index 000000000..e340b0fc1 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-style.png new file mode 100644 index 000000000..e88df3f36 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistar-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-dark-style.png new file mode 100644 index 000000000..a4f5fe5cb Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-style.png new file mode 100644 index 000000000..3f40b398a Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-movistarNew-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-dark-style.png new file mode 100644 index 000000000..c96730a8e Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-style.png new file mode 100644 index 000000000..24bf35e41 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-o2New-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-dark-style.png new file mode 100644 index 000000000..d9e1b94e7 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-style.png new file mode 100644 index 000000000..24bf35e41 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-telefonica-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-dark-style.png new file mode 100644 index 000000000..18c1b3fad Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-style.png new file mode 100644 index 000000000..24bf35e41 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-tu-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-dark-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-dark-style.png new file mode 100644 index 000000000..56b9bd35e Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-dark-style.png differ diff --git a/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-style.png b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-style.png new file mode 100644 index 000000000..75bc743a5 Binary files /dev/null and b/Tests/MisticaTests/UI/__Snapshots__/ButtonTests/testSmallSizeWithLinkBrandWithChevronStyle.with-vivoNew-style.png differ