Add UI for accessibility widgets

Author: Ecarrion

WooCommerce/StoreWidgets/StoreInfoWidget.swift

@@ -33,14 +33,17 @@ private struct StoreInfoView: View {
     // Entry to render
     let entry: StoreInfoData
 
+    // Current size category
+    @Environment(\.sizeCategory) var category
+
     var body: some View {
         ZStack {
             // Background
             Color(.brand)
 
-            VStack(spacing: Layout.sectionSpacing) {
+            VStack(alignment: .leading, spacing: Layout.sectionSpacing) {
 
-                VStack(spacing: Layout.cardSpacing) {
+                VStack(alignment: .leading, spacing: Layout.cardSpacing) {
                     // Store Name
                     HStack {
                         Text(entry.name)
@@ -55,53 +58,93 @@ private struct StoreInfoView: View {
                     // Updated at
                     Text(Localization.updatedAt(entry.updatedTime))
                         .statRangeStyle()
-                        .frame(maxWidth: .infinity, alignment: .leading)
                 }
 
-                // Revenue & Visitors
-                HStack() {
-                    VStack(alignment: .leading, spacing: Layout.cardSpacing) {
-                        Text(Localization.revenue)
-                            .statTitleStyle()
+                if category.isAccessibilityCategory {
+                    AccessibilityStatsCard(entry: entry)
+                } else {
+                    StatsCard(entry: entry)
+                }
+            }
+            .padding(.horizontal)
+        }
+    }
+}
 
-                        Text(entry.revenue)
-                            .statValueStyle()
+/// Stats card sub view.
+/// To be used inside `StoreInfoView`.
+///
+private struct StatsCard: View {
+    // Entry to render
+    let entry: StoreInfoData
 
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
+    var body: some View {
+        Group {
+            // Revenue & Visitors
+            HStack() {
+                VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
+                    Text(StoreInfoView.Localization.revenue)
+                        .statTitleStyle()
 
-                    VStack(alignment: .leading, spacing: Layout.cardSpacing) {
-                        Text(Localization.visitors)
-                            .statTitleStyle()
+                    Text(entry.revenue)
+                        .statValueStyle()
 
-                        Text(entry.visitors)
-                            .statValueStyle()
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
                 }
+                .frame(maxWidth: .infinity, alignment: .leading)
 
-                // Orders & Conversion
-                HStack {
-                    VStack(alignment: .leading, spacing: Layout.cardSpacing) {
-                        Text(Localization.orders)
-                            .statTitleStyle()
+                VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
+                    Text(StoreInfoView.Localization.visitors)
+                        .statTitleStyle()
 
-                        Text(entry.orders)
-                            .statValueStyle()
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(entry.visitors)
+                        .statValueStyle()
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+            }
 
-                    VStack(alignment: .leading, spacing: Layout.cardSpacing) {
-                        Text(Localization.conversion)
-                            .statTitleStyle()
+            // Orders & Conversion
+            HStack {
+                VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
+                    Text(StoreInfoView.Localization.orders)
+                        .statTitleStyle()
 
-                        Text(entry.conversion)
-                            .statValueStyle()
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(entry.orders)
+                        .statValueStyle()
                 }
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+                VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
+                    Text(StoreInfoView.Localization.conversion)
+                        .statTitleStyle()
+
+                    Text(entry.conversion)
+                        .statValueStyle()
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
             }
-            .padding(.horizontal)
+        }
+    }
+}
+
+/// Accessibility card sub view.
+/// To be used inside `StoreInfoView`.
+///
+private struct AccessibilityStatsCard: View {
+    // Entry to render
+    let entry: StoreInfoData
+
+    var body: some View {
+        Group {
+            VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
+                Text(StoreInfoView.Localization.revenue)
+                    .statTitleStyle()
+
+                Text(entry.revenue)
+                    .statValueStyle()
+            }
+
+            Text(StoreInfoView.Localization.viewMore)
+                .statButtonStyle()
         }
     }
 }
@@ -198,6 +241,11 @@ private extension StoreInfoView {
             value: "Conversion",
             comment: "Conversion title label for the store info widget"
         )
+        static let viewMore = AppLocalizedString(
+            "storeWidgets.infoView.viewMore",
+            value: "View More",
+            comment: "Title for the button indicator to display more stats in the Today's Stat widget when using accessibility fonts."
+        )
         static func updatedAt(_ updatedTime: String) -> LocalizedString {
             let format = AppLocalizedString("storeWidgets.infoView.updatedAt",
                                             value: "As of %1$@",
@@ -266,6 +314,18 @@ struct StoreWidgets_Previews: PreviewProvider {
         )
         .previewContext(WidgetPreviewContext(family: .systemMedium))
 
+        StoreInfoView(
+            entry: StoreInfoData(range: "Today",
+                                 name: "Ernest Shop",
+                                 revenue: "$132.234",
+                                 visitors: "67",
+                                 orders: "23",
+                                 conversion: "37%",
+                                 updatedTime: "10:24 PM")
+        )
+        .previewContext(WidgetPreviewContext(family: .systemMedium))
+        .environment(\.sizeCategory, .accessibilityMedium)
+
         NotLoggedInView()
             .previewContext(WidgetPreviewContext(family: .systemMedium))