Fix some styles/padding on Card List

Improve card list example view with another type of content (location instead of just snippet)
Skyscanner · Aug 1, 2023 · 53dac63 · 53dac63
1 parent 0aa3660
commit 53dac63
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 28 deletions.
diff --git a/Backpack-SwiftUI/CardList/Classes/BPKCardList.swift b/Backpack-SwiftUI/CardList/Classes/BPKCardList.swift
@@ -66,6 +66,7 @@ public struct BPKCardList<Content: View>: View {
     public var body: some View {
         VStack(alignment: .leading, spacing: .base) {
             sectionHeader
+                .padding()
             if totalElements > 0 {
                 cardsLayout {
                     ForEach(0 ..< cardsShown, id: \.self, content: cardForIndex)
@@ -100,13 +101,17 @@ public struct BPKCardList<Content: View>: View {
             case .button(let button):
                 BPKButton(button.title, action: button.action)
                     .buttonStyle((button.style == .default) ? .primary : .primaryOnDark)
+                    .stretchable()
             case .expand(let expandingText, let collapsingText):
                 BPKButton(
                     (showingAllCards) ? collapsingText : expandingText
                 ) {
-                    showingAllCards.toggle()
+                    withAnimation {
+                        showingAllCards.toggle()
+                    }
                 }
                 .buttonStyle(.link)
+                .stretchable()
             }
         }
     }
@@ -118,13 +123,13 @@ public struct BPKCardList<Content: View>: View {
                 HStack(spacing: .base) {
                     cardsContent()
                 }
-                .padding(.base)
+                .padding(.horizontal)
             }
         case .stack:
-            Group {
-                cardsContent()
-                accessoryView
-            }
+            cardsContent()
+                .padding(.horizontal)
+            accessoryView
+                .padding(.horizontal)
         }
     }
 }
diff --git a/Example/Backpack/SwiftUI/Components/CardList/CardListExampleView.swift b/Example/Backpack/SwiftUI/Components/CardList/CardListExampleView.swift
@@ -26,42 +26,42 @@ struct CardListExampleView: View {
     let layout: BPKCardListLayout
     let showSectionHeaderButton: Bool
     let totalElements: Int
+    let contentType: ContentType
 
     init(
         initiallyShownCards: Int = 3,
         layout: BPKCardListLayout,
         showSectionHeaderButton: Bool = false,
-        totalElements: Int
+        totalElements: Int,
+        contentType: ContentType = .snippet
     ) {
         self.initiallyShownCards = initiallyShownCards
         self.layout = layout
         self.showSectionHeaderButton = showSectionHeaderButton
         self.totalElements = totalElements
+        self.contentType = contentType
     }
 
     var body: some View {
         ScrollView {
-            VStack(alignment: .leading, spacing: .base) {
-                if let sectionHeaderButton {
-                    BPKCardList(
-                        title: "Section title",
-                        description: "Description about this section (optional)",
-                        sectionHeaderButton: sectionHeaderButton,
-                        layout: BPKCardListLayoutWithSectionHeaderButton(layout: layout),
-                        initiallyShownCards: initiallyShownCards,
-                        totalElements: 9,
-                        cardForIndex: content(index:))
-                } else {
-                    BPKCardList(
-                        title: "Section title",
-                        description: "Description about this section (optional)",
-                        layout: layout,
-                        initiallyShownCards: initiallyShownCards,
-                        totalElements: 9,
-                        cardForIndex: content(index:))
-                }
+            if let sectionHeaderButton {
+                BPKCardList(
+                    title: "Section title",
+                    description: "Description about this section (optional)",
+                    sectionHeaderButton: sectionHeaderButton,
+                    layout: BPKCardListLayoutWithSectionHeaderButton(layout: layout),
+                    initiallyShownCards: initiallyShownCards,
+                    totalElements: 9,
+                    cardForIndex: content(index:))
+            } else {
+                BPKCardList(
+                    title: "Section title",
+                    description: "Description about this section (optional)",
+                    layout: layout,
+                    initiallyShownCards: initiallyShownCards,
+                    totalElements: 9,
+                    cardForIndex: content(index:))
             }
-            .padding()
         }
     }
 
@@ -77,7 +77,20 @@ struct CardListExampleView: View {
         }
     }
 
-    private func content(index: Int) -> some View {
+    @ViewBuilder private func content(index: Int) -> some View {
+        if contentType == .location {
+            locationContent(index: index)
+        } else {
+            switch layout {
+            case .rail:
+                railSnippet(index: index)
+            case .stack:
+                stackSnippet(index: index)
+            }
+        }
+    }
+
+    private func railSnippet(index: Int) -> some View {
         BPKSnippet(
             image: Image("dialog_image"),
             accessibilityLabel: "London at dawn",
@@ -87,6 +100,36 @@ struct CardListExampleView: View {
             imageOrientation: .square)
         .frame(width: 281)
     }
+
+    private func stackSnippet(index: Int) -> some View {
+        BPKSnippet(
+            image: Image("dialog_image"),
+            accessibilityLabel: "London at dawn",
+            headline: "Headline Text \(index)",
+            description: "Subheading \(index)",
+            bodyText: "Body Text \(index)",
+            imageOrientation: .square)
+    }
+
+    private func locationContent(index: Int) -> some View {
+        BPKCard(padding: .none) {
+            HStack {
+                Image("carousel_placeholder_\(index % 4 + 1)")
+                    .resizable()
+                    .aspectRatio(1, contentMode: .fit)
+                VStack {
+                    Text("Location \(index)")
+                }
+                Spacer()
+            }
+        }
+        .frame(height: 90)
+    }
+
+    enum ContentType {
+        case snippet
+        case location
+    }
 }
 
 struct CardListExampleView_Previews: PreviewProvider {