feat: introduced HubMenuBadge view in HubMenuElement

Author: pmusolino

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -30,7 +30,8 @@ struct HubMenu: View {
 
                 LazyVGrid(columns: gridItemLayout, spacing: Constants.itemSpacing) {
                     ForEach(viewModel.menuElements, id: \.self) { menu in
-                        HubMenuElement(image: menu.icon, imageColor: menu.iconColor, text: menu.title, onTapGesture: {
+                        let badgeCount = menu == .reviews ? viewModel.reviewsNotificationBadgeCount : 0
+                        HubMenuElement(image: menu.icon, imageColor: menu.iconColor, text: menu.title, badge: badgeCount, onTapGesture: {
                             switch menu {
                             case .woocommerceAdmin:
                                 ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "admin_menu"])

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuElement.swift

@@ -6,6 +6,7 @@ struct HubMenuElement: View {
     let image: UIImage
     let imageColor: UIColor
     let text: String
+    let badge: Int
     let onTapGesture: (() -> Void)
 
     @ScaledMetric var imageSize: CGFloat = 58
@@ -15,30 +16,56 @@ struct HubMenuElement: View {
         Button {
             onTapGesture()
         } label: {
-            VStack {
-                ZStack {
-                    Color(UIColor(light: .listBackground,
-                                  dark: .secondaryButtonBackground))
-                    Image(uiImage: image)
-                        .renderingMode(.template)
-                        .resizable()
-                        .scaledToFit()
-                        .foregroundColor(Color(imageColor))
-                        .frame(width: iconSize, height: iconSize)
+            ZStack(alignment: .topTrailing) {
+
+                VStack {
+                    ZStack {
+                        Color(UIColor(light: .listBackground,
+                                      dark: .secondaryButtonBackground))
+                        Image(uiImage: image)
+                            .renderingMode(.template)
+                            .resizable()
+                            .scaledToFit()
+                            .foregroundColor(Color(imageColor))
+                            .frame(width: iconSize, height: iconSize)
+                    }
+                    .frame(width: imageSize, height: imageSize, alignment: .center)
+                    .cornerRadius(imageSize/2)
+                    .padding(.bottom, Constants.paddingBetweenElements)
+                    Text(text)
+                        .bodyStyle()
                 }
-                .frame(width: imageSize, height: imageSize, alignment: .center)
-                .cornerRadius(imageSize/2)
-                .padding(.bottom, Constants.paddingBetweenElements)
-                Text(text)
+                .frame(width: Constants.itemSize, height: Constants.itemSize)
+                HubMenuBadge(value: badge)
+                    .padding([.top, .trailing], 8)
+                    .renderedIf(badge > 0)
+            }
+        }
+    }
+
+    private struct HubMenuBadge: View {
+        let value: Int
+
+        var body: some View {
+            ZStack (alignment: .center) {
+                Rectangle()
+                    .fill(.purple)
+                    .cornerRadius(Constants.cornerRadius)
+                Text(String(value))
+                    .foregroundColor(.white)
                     .bodyStyle()
+                    .padding([.leading, .trailing], Constants.paddingBetweenElements)
             }
-            .frame(width: Constants.itemSize, height: Constants.itemSize)
+            .frame(height: Constants.badgeSize)
+            .fixedSize()
         }
     }
 
     enum Constants {
         static let paddingBetweenElements: CGFloat = 8
         static let itemSize: CGFloat = 160
+        static let badgeSize: CGFloat = 24
+        static let cornerRadius: CGFloat = badgeSize/2
     }
 }
 
@@ -47,6 +74,7 @@ struct HubMenuElement_Previews: PreviewProvider {
         HubMenuElement(image: .starOutlineImage(),
                        imageColor: .blue,
                        text: "Menu",
+                       badge: 1,
                        onTapGesture: {})
             .previewLayout(.fixed(width: 160, height: 160))
             .previewDisplayName("Hub Menu Element")