[AI-707]: Update CardCarousel making drag window smaller (#2048)

* Update BPKCardCarousel.swift

* Retake snapshots

* Record snapshots

* Updated snapshots

* Record snapshots

* Updated snapshots

* Record snapshots

* Record snapshots

* Updated snapshots

* Record snapshots

* Record snapshots

* Updated snapshots

* Updated snapshots

* Record snapshots

* Record snapshots

* Updated snapshots

* rerun tests

* Update BPKCardCarouselTests.swift

* Add some comments

---------

Co-authored-by: Mathew Reynolds <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Backpack-SwiftUI/CardCarousel/Classes/BPKCardCarousel.swift

@@ -46,13 +46,24 @@ public struct BPKCardCarousel<Content: View>: View {
 }
 
 internal struct InternalCardCarousel<Content: View>: View {
+    private let numberOfCardsForLandscape: CGFloat = 3.0
     @Binding private var currentIndex: Int
     @State private var currentInternalIndex: Int
     @AccessibilityFocusState private var focusOnCard: Int?
+
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+
     private let content: [Content]
+    private let size: CGSize
 
     private let cardCount: Int
-    private let cardWidth: CGFloat
+    private var cardWidth: CGFloat {
+        if horizontalSizeClass == .regular {
+            size.width / numberOfCardsForLandscape
+        } else {
+            size.width * 0.8
+        }
+    }
     private let dragAnimation: Animation = .spring(
         response: 0.5,
         dampingFraction: 0.825,
@@ -66,11 +77,15 @@ internal struct InternalCardCarousel<Content: View>: View {
         content: [Content],
         currentIndex: Binding<Int>
     ) {
+        self.size = size
         self._currentIndex = currentIndex
-        self.cardWidth = size.width * 0.8
         self.cardCount = content.count
         self._currentInternalIndex = State(initialValue: cardCount + 1 + currentIndex.wrappedValue)
+
+        // This is to ensure enough cards to create illusion of
+        // infinite scroll
         self.content = content + content
+
         focusOnCard = .init(currentInternalIndex)
     }
 
@@ -82,7 +97,7 @@ internal struct InternalCardCarousel<Content: View>: View {
                         .frame(width: cardWidth)
                         .offset(x: isDragging ? totalDrag : getContentOffset(
                             for: index,
-                            spacing: BPKSpacing.base.value
+                            spacing: horizontalSizeClass == .regular ? 0 : BPKSpacing.base.value
                         ))
                         .animation(dragAnimation, value: totalDrag)
                         .scaleEffect(scaleEffect(for: index))
@@ -96,6 +111,13 @@ internal struct InternalCardCarousel<Content: View>: View {
 
             cardIndicator()
         }
+        .if(horizontalSizeClass == .regular, transform: {view in
+            view
+                .frame(
+                    width: cardWidth * numberOfCardsForLandscape
+                )
+                .clipped()
+        })
     }
 
     private var offset: CGFloat {
@@ -143,7 +165,7 @@ internal struct InternalCardCarousel<Content: View>: View {
 
     private func onDragEnded(value: DragGesture.Value) {
         withAnimation(dragAnimation) {
-            let draggingWindow = (cardWidth / 2.0)
+            let draggingWindow = (cardWidth / 4.0)
             if value.translation.width < -draggingWindow {
                 handleLeftSwipe()
             } else if value.translation.width > draggingWindow {

Backpack-SwiftUI/Tests/CardCarousel/BPKCardCarouselTests.swift

@@ -34,16 +34,88 @@ class BPKCardCarouselTests: XCTestCase {
         )
     }
 
+    // This test will assert that the carousel looks as expected in the different aspect ratios of iPad screen sizes
+    func testCardCarouselIPad() {
+        let cardCarousel = BPKCardCarousel(
+            cards: [
+                createCard(),
+                createCard(),
+                createCard()
+            ],
+            currentIndex: .constant(0)
+        )
+
+        // Then
+        // IPad Landscape
+        // Full
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 1112, height: 834)
+            ,
+            testName: "ipad_landscape_full"
+        )
+
+        // Two thirds
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 782, height: 834)
+            ,
+            testName: "ipad_landscape_two_thirds"
+        )
+
+        // One half
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 551, height: 834)
+            ,
+            testName: "ipad_landscape_half"
+        )
+
+        // One third
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 320, height: 834)
+            ,
+            testName: "ipad_landscape_third"
+        )
+
+        // iPad Potrait
+        // Full
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 834, height: 1112)
+            ,
+            testName: "ipad_potrait_full"
+        )
+
+        // Two thirds
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 504, height: 1112)
+            ,
+            testName: "ipad_potrait_two_thirds"
+        )
+
+        // One third
+        assertSnapshot(
+            cardCarousel
+                .frame(width: 320, height: 1112)
+            ,
+            testName: "ipad_potrait_third"
+        )
+    }
+
     func test_accessibility() {
-        let card = BPKCardCarousel(
+        let cardCarousel = BPKCardCarousel(
             cards: [
                 createCard(),
                 createCard(),
                 createCard()
             ],
             currentIndex: .constant(0)
         ).frame(width: 300, height: 530)
-        assertA11ySnapshot(card)
+
+        assertA11ySnapshot(cardCarousel)
     }
 
     private func createCard() -> BPKCarouselCard<AnyView> {

Example/Backpack/SwiftUI/Components/CardCarousel/CardCarouselExampleView.swift

@@ -22,24 +22,48 @@ import Backpack_SwiftUI
 
 struct CardCarouselExampleView: View {
     @State private var currentIndex: Int = 0
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
 
     var body: some View {
-        BPKCardCarousel(
-            cards: [
-                createCard(image: "graphic_promo"),
-                createCard(image: "Dublin-TempleBar"),
-                createCard(image: "canadian_rockies_canada")
-            ],
-            currentIndex: $currentIndex
-        )
+        GeometryReader { reader in
+            HStack(alignment: .center, spacing: .zero) {
+                BPKCardCarousel(
+                    cards: [
+                        createCard(image: "graphic_promo"),
+                        createCard(image: "Dublin-TempleBar"),
+                        createCard(image: "canadian_rockies_canada")
+                    ],
+                    currentIndex: $currentIndex
+                )
+                .if( // This is to demonstrate IPad that isnt portrait
+                    horizontalSizeClass == .regular && reader.size.width < reader.size.height,
+                    transform: { view in
+                        view.frame(
+                            width: reader.size.width * 0.8,
+                            height: reader.size.height * 0.5
+                        )
+                    }
+                )
+                .if( // This is to demonstrate IPad that is landscape
+                    horizontalSizeClass == .regular && reader.size.width > reader.size.height,
+                    transform: { view in
+                        view.frame(
+                            width: reader.size.width * 0.8,
+                            height: reader.size.height * 0.8
+                        )
+                    }
+                )
+                .position(x: reader.size.width / 2, y: reader.size.height / 2)
+            }
+        }
     }
 
     private func createCard(image: String) -> some View {
         BPKCarouselCard(
             content: {
                 Image(image)
-                    .resizable()
-                    .scaledToFill()
+
+                    .aspectRatio(contentMode: .fill)
             },
             title: "Someone Walking",
             description: "Look at the views",