Add: logos view to the menu card

WordPress/Classes/ViewRelated/Jetpack/Branding/Menu Card/JetpackBrandingMenuCardCell.swift

@@ -1,7 +1,17 @@
 import UIKit
+import Lottie
 
 class JetpackBrandingMenuCardCell: UITableViewCell {
 
+    // MARK: Private Variables
+
+    /// Sets the animation based on the language orientation
+    private var animation: Animation? {
+        traitCollection.layoutDirection == .leftToRight ?
+        Animation.named(Constants.animationLtr) :
+        Animation.named(Constants.animationRtl)
+    }
+
     // MARK: Lazy Loading Views
 
     private lazy var cardFrameView: BlogDashboardCardFrameView = {
@@ -33,13 +43,42 @@ class JetpackBrandingMenuCardCell: UITableViewCell {
         stackView.axis = .vertical
         stackView.alignment = .fill
         stackView.translatesAutoresizingMaskIntoConstraints = false
-        stackView.spacing = Constants.spacing
-        stackView.layoutMargins = Constants.containerMargins
+        stackView.spacing = Metrics.spacing
+        stackView.layoutMargins = Metrics.containerMargins
         stackView.isLayoutMarginsRelativeArrangement = true
-        stackView.addArrangedSubviews([descriptionLabel])
+        stackView.addArrangedSubviews([logosSuperview, descriptionLabel])
         return stackView
     }()
 
+    private lazy var logosSuperview: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = .clear
+        view.addSubview(logosAnimationView)
+
+        view.topAnchor.constraint(equalTo: logosAnimationView.topAnchor).isActive = true
+        view.bottomAnchor.constraint(equalTo: logosAnimationView.bottomAnchor).isActive = true
+        view.leadingAnchor.constraint(equalTo: logosAnimationView.leadingAnchor).isActive = true
+
+        return view
+    }()
+
+    private lazy var logosAnimationView: AnimationView = {
+        let view = AnimationView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.animation = animation
+
+        // Height Constraint
+        view.heightAnchor.constraint(equalToConstant: Metrics.animationsViewHeight).isActive = true
+
+        // Width constraint to achieve aspect ratio
+        let animationSize = animation?.size ?? .init(width: 1, height: 1)
+        let ratio = animationSize.width / animationSize.height
+        view.widthAnchor.constraint(equalTo: view.heightAnchor, multiplier: ratio).isActive = true
+
+        return view
+    }()
+
     private lazy var descriptionLabel: UILabel = {
         let label = UILabel()
         label.translatesAutoresizingMaskIntoConstraints = false
@@ -71,22 +110,29 @@ class JetpackBrandingMenuCardCell: UITableViewCell {
 
     private func setupViews() {
         contentView.addSubview(cardFrameView)
-        contentView.pinSubviewToAllEdges(cardFrameView, priority: Constants.cardFrameConstraintPriority)
+        contentView.pinSubviewToAllEdges(cardFrameView, priority: Metrics.cardFrameConstraintPriority)
         cardFrameView.add(subview: containerStackView)
     }
 
     private func setupContent() {
+        logosAnimationView.play()
         descriptionLabel.text = "Hello there!!!!!!!!!!!!!"
     }
 
 }
 
 private extension JetpackBrandingMenuCardCell {
 
-    enum Constants {
+    enum Metrics {
         static let spacing: CGFloat = 12
         static let containerMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
         static let cardFrameConstraintPriority = UILayoutPriority(999)
+        static let animationsViewHeight: CGFloat = 32
+    }
+
+    enum Constants {
+        static let animationLtr = "JetpackAllFeaturesLogosAnimation_ltr"
+        static let animationRtl = "JetpackAllFeaturesLogosAnimation_rtl"
     }
 }
 

WordPress/WordPress.xcodeproj/project.pbxproj

@@ -1575,6 +1575,8 @@
 		803DE821290642B4007D4E9C /* JetpackFeaturesRemovalCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 803DE820290642B4007D4E9C /* JetpackFeaturesRemovalCoordinator.swift */; };
 		803DE822290642B4007D4E9C /* JetpackFeaturesRemovalCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 803DE820290642B4007D4E9C /* JetpackFeaturesRemovalCoordinator.swift */; };
 		80535DB82946C79700873161 /* JetpackBrandingMenuCardCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 80535DB72946C79700873161 /* JetpackBrandingMenuCardCell.swift */; };
+		80535DBB294ABBF000873161 /* JetpackAllFeaturesLogosAnimation_rtl.json in Resources */ = {isa = PBXBuildFile; fileRef = 80535DB9294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_rtl.json */; };
+		80535DBC294ABBF000873161 /* JetpackAllFeaturesLogosAnimation_ltr.json in Resources */ = {isa = PBXBuildFile; fileRef = 80535DBA294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_ltr.json */; };
 		8058730B28F7B70B00340C11 /* InfoPlist.strings in Resources */ = {isa = PBXBuildFile; fileRef = 8058730D28F7B70B00340C11 /* InfoPlist.strings */; };
 		8067340A27E3A50900ABC95E /* UIViewController+RemoveQuickStart.m in Sources */ = {isa = PBXBuildFile; fileRef = 8067340927E3A50900ABC95E /* UIViewController+RemoveQuickStart.m */; };
 		8067340B27E3A50900ABC95E /* UIViewController+RemoveQuickStart.m in Sources */ = {isa = PBXBuildFile; fileRef = 8067340927E3A50900ABC95E /* UIViewController+RemoveQuickStart.m */; };
@@ -6881,6 +6883,8 @@
 		803DE81E290636A4007D4E9C /* JetpackFeaturesRemovalCoordinatorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JetpackFeaturesRemovalCoordinatorTests.swift; sourceTree = "<group>"; };
 		803DE820290642B4007D4E9C /* JetpackFeaturesRemovalCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JetpackFeaturesRemovalCoordinator.swift; sourceTree = "<group>"; };
 		80535DB72946C79700873161 /* JetpackBrandingMenuCardCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JetpackBrandingMenuCardCell.swift; sourceTree = "<group>"; };
+		80535DB9294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_rtl.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = JetpackAllFeaturesLogosAnimation_rtl.json; sourceTree = "<group>"; };
+		80535DBA294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_ltr.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = JetpackAllFeaturesLogosAnimation_ltr.json; sourceTree = "<group>"; };
 		8058730C28F7B70B00340C11 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		8067340827E3A50900ABC95E /* UIViewController+RemoveQuickStart.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "UIViewController+RemoveQuickStart.h"; sourceTree = "<group>"; };
 		8067340927E3A50900ABC95E /* UIViewController+RemoveQuickStart.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = "UIViewController+RemoveQuickStart.m"; sourceTree = "<group>"; };
@@ -12487,6 +12491,8 @@
 				801D950A291AB3CE0051993E /* JetpackStatsLogoAnimation_rtl.json */,
 				3F4EB39128AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json */,
 				3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json */,
+				80535DBA294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_ltr.json */,
+				80535DB9294ABBEF00873161 /* JetpackAllFeaturesLogosAnimation_rtl.json */,
 			);
 			name = "Lottie Animations";
 			sourceTree = "<group>";
@@ -17997,6 +18003,7 @@
 				172F06BA2865C04F00C78FD4 /* spectrum-'[email protected] in Resources */,
 				FAC086D825EDFB1E00B94F2A /* ReaderRelatedPostsCell.xib in Resources */,
 				9A2B28F72192121F00458F2A /* RevisionOperation.xib in Resources */,
+				80535DBB294ABBF000873161 /* JetpackAllFeaturesLogosAnimation_rtl.json in Resources */,
 				9822A8552624D01800FD8A03 /* UserProfileSiteCell.xib in Resources */,
 				E66E2A6A1FE432BC00788F22 /* TitleBadgeDisclosureCell.xib in Resources */,
 				17222D87261DDDF90047B163 /* [email protected] in Resources */,
@@ -18055,6 +18062,7 @@
 				9835F16E25E492EE002EFF23 /* CommentsList.storyboard in Resources */,
 				17222D80261DDDF90047B163 /* celadon-classic-icon-app-76x76.png in Resources */,
 				1761F17A26209AEE000815EF /* [email protected] in Resources */,
+				80535DBC294ABBF000873161 /* JetpackAllFeaturesLogosAnimation_ltr.json in Resources */,
 				98563DDE21BF30C40006F5E9 /* TabbedTotalsCell.xib in Resources */,
 				5DFA7EC81AF814E40072023B /* PageListTableViewCell.xib in Resources */,
 				B5C66B781ACF073900F68370 /* NoteBlockImageTableViewCell.xib in Resources */,