Add SelectionStyle to TitleAndValueRow

ealeksandrov · ealeksandrov · commit 5fbd0bd0ec39 · 2022-02-14T20:27:46.000+03:00
diff --git a/WooCommerce/Classes/View Modifiers/WooStyleModifiers.swift b/WooCommerce/Classes/View Modifiers/WooStyleModifiers.swift
@@ -101,6 +101,14 @@ struct LinkStyle: ViewModifier {
     }
 }
 
+struct HeadlineLinkStyle: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .font(.headline)
+            .foregroundColor(Color(.accent))
+    }
+}
+
 // MARK: View extensions
 extension View {
     /// - Parameters:
@@ -143,4 +151,8 @@ extension View {
     func linkStyle() -> some View {
         self.modifier(LinkStyle())
     }
+
+    func headlineLinkStyle() -> some View {
+        self.modifier(HeadlineLinkStyle())
+    }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Coupons/CouponDetails/CouponDetails.swift b/WooCommerce/Classes/ViewRelated/Coupons/CouponDetails/CouponDetails.swift
@@ -112,7 +112,7 @@ struct CouponDetails: View {
                         ForEach(detailRows) { row in
                             TitleAndValueRow(title: row.title,
                                              value: .content(row.content),
-                                             selectable: true,
+                                             selectionStyle: .disclosure,
                                              action: row.action)
                                 .padding(.vertical, Constants.verticalSpacing)
                                 .padding(.horizontal, insets: geometry.safeAreaInsets)
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Creation/PaymentSection/OrderPaymentSection.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Creation/PaymentSection/OrderPaymentSection.swift
@@ -22,10 +22,10 @@ struct OrderPaymentSection: View {
                 .headlineStyle()
                 .padding()
 
-            TitleAndValueRow(title: Localization.productsTotal, value: .content(viewModel.itemsTotal), selectable: false) {}
+            TitleAndValueRow(title: Localization.productsTotal, value: .content(viewModel.itemsTotal), selectionStyle: .none) {}
 
             if viewModel.shouldShowShippingTotal {
-                TitleAndValueRow(title: Localization.shippingTotal, value: .content(viewModel.shippingTotal), selectable: true) {
+                TitleAndValueRow(title: Localization.shippingTotal, value: .content(viewModel.shippingTotal), selectionStyle: .highlight) {
                     saveShippingLineClosure(nil)
                 }
             } else {
@@ -42,7 +42,7 @@ struct OrderPaymentSection: View {
                 .padding()
             }
 
-            TitleAndValueRow(title: Localization.orderTotal, value: .content(viewModel.orderTotal), bold: true, selectable: false) {}
+            TitleAndValueRow(title: Localization.orderTotal, value: .content(viewModel.orderTotal), bold: true, selectionStyle: .none) {}
 
             Text(Localization.taxesInfo)
                 .footnoteStyle()
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Address Edit/EditOrderAddressForm.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Address Edit/EditOrderAddressForm.swift
@@ -302,7 +302,7 @@ struct SingleAddressForm: View {
 
                 TitleAndValueRow(title: Localization.countryField,
                                  value: .init(placeHolder: Localization.placeholderSelectOption, content: fields.country),
-                                 selectable: true) {
+                                 selectionStyle: .disclosure) {
                     showCountrySelector = true
                 }
                 Divider()
@@ -321,7 +321,7 @@ struct SingleAddressForm: View {
         if showStateFieldAsSelector {
             TitleAndValueRow(title: Localization.stateField,
                              value: .init(placeHolder: Localization.placeholderSelectOption, content: fields.state),
-                             selectable: true) {
+                             selectionStyle: .disclosure) {
                 showStateSelector = true
             }
         } else {
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Customs/ItemDetails/ShippingLabelCustomsFormItemDetails.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Customs/ItemDetails/ShippingLabelCustomsFormItemDetails.swift
@@ -125,7 +125,7 @@ struct ShippingLabelCustomsFormItemDetails: View {
             // Origin country
             VStack(spacing: 0) {
                 VStack(spacing: 0) {
-                    TitleAndValueRow(title: Localization.originTitle, value: .placeholder(viewModel.originCountry.name), selectable: true) {
+                    TitleAndValueRow(title: Localization.originTitle, value: .placeholder(viewModel.originCountry.name), selectionStyle: .disclosure) {
                         isShowingCountries.toggle()
                     }
                     .sheet(isPresented: $isShowingCountries, content: {
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Customs/ShippingLabelCustomsFormInput.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Customs/ShippingLabelCustomsFormInput.swift
@@ -66,7 +66,7 @@ struct ShippingLabelCustomsFormInput: View {
 
     private var contentRows: some View {
         VStack(spacing: 0) {
-            TitleAndValueRow(title: Localization.contentTypeTitle, value: .placeholder(viewModel.contentsType.localizedName), selectable: true) {
+            TitleAndValueRow(title: Localization.contentTypeTitle, value: .placeholder(viewModel.contentsType.localizedName), selectionStyle: .disclosure) {
                 showingContentTypes.toggle()
             }
             .sheet(isPresented: $showingContentTypes, content: {
@@ -99,7 +99,9 @@ struct ShippingLabelCustomsFormInput: View {
 
     private var restrictionRows: some View {
         VStack(spacing: 0) {
-            TitleAndValueRow(title: Localization.restrictionTypeTitle, value: .placeholder(viewModel.restrictionType.localizedName), selectable: true) {
+            TitleAndValueRow(title: Localization.restrictionTypeTitle,
+                             value: .placeholder(viewModel.restrictionType.localizedName),
+                             selectionStyle: .disclosure) {
                 showingRestrictionTypes.toggle()
             }
             .sheet(isPresented: $showingRestrictionTypes, content: {
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/Multi-package/ShippingLabelSinglePackage.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/Multi-package/ShippingLabelSinglePackage.swift
@@ -42,7 +42,7 @@ struct ShippingLabelSinglePackage: View {
                 VStack(spacing: 0) {
                     Divider()
 
-                    TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectable: true) {
+                    TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectionStyle: .disclosure) {
                         isShowingPackageSelection.toggle()
                     }
                     .padding(.horizontal, insets: safeAreaInsets)
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/Package Selection/Package Creation/ShippingLabelCustomPackageForm.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/Package Selection/Package Creation/ShippingLabelCustomPackageForm.swift
@@ -20,7 +20,7 @@ struct ShippingLabelCustomPackageForm: View {
                         // Package type
                         TitleAndValueRow(title: Localization.packageTypeLabel,
                                          value: .placeholder(viewModel.packageType.localizedName),
-                                         selectable: true) {
+                                         selectionStyle: .disclosure) {
                             showingPackageTypes.toggle()
                         }
                         .sheet(isPresented: $showingPackageTypes, content: {
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/ShippingLabelPackageDetails.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Package Details/ShippingLabelPackageDetails.swift
@@ -45,7 +45,7 @@ struct ShippingLabelPackageDetails: View {
                     VStack(spacing: 0) {
                         Divider()
 
-                        TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectable: true) {
+                        TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectionStyle: .disclosure) {
                             showingPackageSelection.toggle()
                         }
                         .padding(.horizontal, insets: geometry.safeAreaInsets)
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Simple Payments/Summary/SimplePaymentsSummary.swift b/WooCommerce/Classes/ViewRelated/Orders/Simple Payments/Summary/SimplePaymentsSummary.swift
@@ -166,7 +166,7 @@ private struct PaymentsSection: View {
                     .headlineStyle()
                     .padding([.horizontal, .top])
 
-                TitleAndValueRow(title: SimplePaymentsSummary.Localization.subtotal, value: .content(viewModel.providedAmount), selectable: false) {}
+                TitleAndValueRow(title: SimplePaymentsSummary.Localization.subtotal, value: .content(viewModel.providedAmount), selectionStyle: .none) {}
 
                 TitleAndToggleRow(title: SimplePaymentsSummary.Localization.chargeTaxes, isOn: $viewModel.enableTaxes)
                     .padding(.horizontal)
@@ -181,17 +181,17 @@ private struct PaymentsSection: View {
                         ForEach(viewModel.taxLines) { taxLine in
                             TitleAndValueRow(title: taxLine.title,
                                              value: .content(taxLine.value),
-                                             selectable: false) {}
+                                             selectionStyle: .none) {}
                         }
                     } else {
                         TitleAndValueRow(title: SimplePaymentsSummary.Localization.taxRate(viewModel.taxRate),
                                          value: .content(viewModel.taxAmount),
-                                         selectable: false) {}
+                                         selectionStyle: .none) {}
                     }
                 }
                 .renderedIf(viewModel.enableTaxes)
 
-                TitleAndValueRow(title: SimplePaymentsSummary.Localization.total, value: .content(viewModel.total), bold: true, selectable: false) {}
+                TitleAndValueRow(title: SimplePaymentsSummary.Localization.total, value: .content(viewModel.total), bold: true, selectionStyle: .none) {}
             }
             .padding(.horizontal, insets: safeAreaInsets)
             .background(Color(.listForeground))
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndValueRow.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndValueRow.swift
@@ -4,10 +4,16 @@ import SwiftUI
 ///
 struct TitleAndValueRow: View {
 
+    enum SelectionStyle {
+        case none
+        case disclosure
+        case highlight
+    }
+
     let title: String
     let value: Value
     var bold: Bool = false
-    let selectable: Bool
+    let selectionStyle: SelectionStyle
     var action: () -> Void
 
     var body: some View {
@@ -17,31 +23,31 @@ struct TitleAndValueRow: View {
             HStack {
                 AdaptiveStack(horizontalAlignment: .leading) {
                     Text(title)
-                        .style(bold: bold)
+                        .style(bold: bold, highlighted: selectionStyle == .highlight)
                         .multilineTextAlignment(.leading)
 
                     Text(value.text)
-                        .style(for: value, bold: bold)
+                        .style(for: value, bold: bold, highlighted: false)
                         .multilineTextAlignment(.trailing)
                         .frame(maxWidth: .infinity, alignment: .trailing)
                         .padding(.vertical, Constants.verticalPadding)
                 }
 
                 Image(uiImage: .chevronImage)
                     .flipsForRightToLeftLayoutDirection(true)
-                    .renderedIf(selectable)
+                    .renderedIf(selectionStyle == .disclosure)
                     .frame(width: Constants.imageSize, height: Constants.imageSize)
                     .foregroundColor(Color(UIColor.gray(.shade30)))
             }
             .contentShape(Rectangle())
         })
-        .disabled(!selectable)
+        .disabled(selectionStyle == .none)
         .frame(minHeight: Constants.minHeight)
         .padding(.horizontal, Constants.horizontalPadding)
         .accessibilityElement()
         .accessibilityLabel(Text(title))
         .accessibilityValue(Text(value.text))
-        .accessibilityAddTraits(selectable ? .isButton : [])
+        .accessibilityAddTraits(selectionStyle != .none ? .isButton : [])
     }
 }
 
@@ -75,14 +81,18 @@ extension TitleAndValueRow {
 private extension Text {
     /// Styles the text based on the type of content.
     ///
-    @ViewBuilder func style(for value: TitleAndValueRow.Value = .content(""), bold: Bool) -> some View {
-        switch (value, bold) {
-        case (.placeholder, _):
+    @ViewBuilder func style(for value: TitleAndValueRow.Value = .content(""), bold: Bool, highlighted: Bool) -> some View {
+        switch (value, bold, highlighted) {
+        case (.placeholder, _, _):
             self.modifier(SecondaryBodyStyle())
-        case (.content, true):
+        case (.content, true, false):
             self.modifier(HeadlineStyle())
-        case (.content, false):
+        case (.content, true, true):
+            self.modifier(HeadlineLinkStyle())
+        case (.content, false, false):
             self.modifier(BodyStyle(isEnabled: true))
+        case (.content, false, true):
+            self.modifier(LinkStyle())
         }
     }
 }
@@ -99,22 +109,22 @@ private extension TitleAndValueRow {
 
 struct TitleAndValueRow_Previews: PreviewProvider {
     static var previews: some View {
-        TitleAndValueRow(title: "Package selected", value: .placeholder("Small package 1"), selectable: true, action: { })
+        TitleAndValueRow(title: "Package selected", value: .placeholder("Small package 1"), selectionStyle: .disclosure, action: { })
             .previewLayout(.fixed(width: 375, height: 100))
             .previewDisplayName("Row Selectable")
 
-        TitleAndValueRow(title: "Package selected", value: .placeholder("Small package 2"), selectable: false, action: { })
+        TitleAndValueRow(title: "Package selected", value: .placeholder("Small package 2"), selectionStyle: .none, action: { })
             .previewLayout(.fixed(width: 375, height: 100))
             .previewDisplayName("Row Not Selectable")
 
         TitleAndValueRow(title: "This is a really long title which will take multiple lines",
                          value: .placeholder("This is a really long value which will take multiple lines"),
-                         selectable: false,
+                         selectionStyle: .none,
                          action: { })
             .previewLayout(.fixed(width: 375, height: 150))
             .previewDisplayName("Long title and value")
 
-        TitleAndValueRow(title: "Package selected", value: .placeholder("Small"), selectable: true, action: { })
+        TitleAndValueRow(title: "Package selected", value: .placeholder("Small"), selectionStyle: .disclosure, action: { })
             .environment(\.sizeCategory, .accessibilityExtraLarge)
             .previewLayout(.fixed(width: 375, height: 150))
             .previewDisplayName("Dynamic Type: Large Font Size")

Original file line number	Diff line number	Diff line change
`@@ -101,6 +101,14 @@ struct LinkStyle: ViewModifier {`
`101`	`101`	`}`
`102`	`102`	`}`
`103`	`103`
	`104`	`+struct HeadlineLinkStyle: ViewModifier {`
	`105`	`+ func body(content: Content) -> some View {`
	`106`	`+ content`
	`107`	`+ .font(.headline)`
	`108`	`+ .foregroundColor(Color(.accent))`
	`109`	`+ }`
	`110`	`+}`
	`111`	`+`
`104`	`112`	`// MARK: View extensions`
`105`	`113`	`extension View {`
`106`	`114`	`/// - Parameters:`
`@@ -143,4 +151,8 @@ extension View {`
`143`	`151`	`func linkStyle() -> some View {`
`144`	`152`	`self.modifier(LinkStyle())`
`145`	`153`	`}`
	`154`	`+`
	`155`	`+ func headlineLinkStyle() -> some View {`
	`156`	`+ self.modifier(HeadlineLinkStyle())`
	`157`	`+ }`
`146`	`158`	`}`
Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@ struct ShippingLabelCustomsFormItemDetails: View {`
`125`	`125`	`// Origin country`
`126`	`126`	`VStack(spacing: 0) {`
`127`	`127`	`VStack(spacing: 0) {`
`128`		`- TitleAndValueRow(title: Localization.originTitle, value: .placeholder(viewModel.originCountry.name), selectable: true) {`
	`128`	`+ TitleAndValueRow(title: Localization.originTitle, value: .placeholder(viewModel.originCountry.name), selectionStyle: .disclosure) {`
`129`	`129`	`isShowingCountries.toggle()`
`130`	`130`	`}`
`131`	`131`	`.sheet(isPresented: $isShowingCountries, content: {`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ struct ShippingLabelSinglePackage: View {`
`42`	`42`	`VStack(spacing: 0) {`
`43`	`43`	`Divider()`
`44`	`44`
`45`		`- TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectable: true) {`
	`45`	`+ TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectionStyle: .disclosure) {`
`46`	`46`	`isShowingPackageSelection.toggle()`
`47`	`47`	`}`
`48`	`48`	`.padding(.horizontal, insets: safeAreaInsets)`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ struct ShippingLabelCustomPackageForm: View {`
`20`	`20`	`// Package type`
`21`	`21`	`TitleAndValueRow(title: Localization.packageTypeLabel,`
`22`	`22`	`value: .placeholder(viewModel.packageType.localizedName),`
`23`		`- selectable: true) {`
	`23`	`+ selectionStyle: .disclosure) {`
`24`	`24`	`showingPackageTypes.toggle()`
`25`	`25`	`}`
`26`	`26`	`.sheet(isPresented: $showingPackageTypes, content: {`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ struct ShippingLabelPackageDetails: View {`
`45`	`45`	`VStack(spacing: 0) {`
`46`	`46`	`Divider()`
`47`	`47`
`48`		`- TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectable: true) {`
	`48`	`+ TitleAndValueRow(title: Localization.packageSelected, value: .placeholder(viewModel.selectedPackageName), selectionStyle: .disclosure) {`
`49`	`49`	`showingPackageSelection.toggle()`
`50`	`50`	`}`
`51`	`51`	`.padding(.horizontal, insets: geometry.safeAreaInsets)`