fix(Carousel): Add missing inverse style option for the page bullets

* fix(Carousel): Add inverse style option for the page bullets * Run swiftformat
Telefonica · Apr 10, 2024 · b6086f0 · b6086f0
1 parent 41c3269
commit b6086f0
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 36 deletions.
diff --git a/MisticaCatalog/MisticaCatalog.xcodeproj/project.pbxproj b/MisticaCatalog/MisticaCatalog.xcodeproj/project.pbxproj
@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 52;
+	objectVersion = 54;
 	objects = {
 
 /* Begin PBXBuildFile section */

diff --git a/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/CarouselCatalogView.swift b/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/CarouselCatalogView.swift
@@ -17,6 +17,7 @@ struct CarouselCatalogView: View {
     @State var autoplayTimeIntervalOptions = [1, 3, 5]
     @State var hasPagination = true
     @State var hasControls = true
+    @State var bulletsInverseStyle = false
     @State var isEnabled = true
     @State var numberOfItems = 5
     @State var index = 0
@@ -31,6 +32,9 @@ struct CarouselCatalogView: View {
                 Toggle("Fullwidth Style", isOn: $hasFullWidthStyle)
                 Toggle("Has Pagination", isOn: $hasPagination)
                 Toggle("Has Controls", isOn: $hasControls)
+                if hasControls {
+                    Toggle("Bullets Inverse Style", isOn: $bulletsInverseStyle)
+                }
                 Toggle("Enabled", isOn: $isEnabled)
             }
             section("Items") {
@@ -64,6 +68,7 @@ struct CarouselCatalogView: View {
                 .autoplay(hasAutoplay ? .active(TimeInterval(autoplayTimeIntervalOptions[autoplayTimeIntervalSelectedIndex])) : .inactive)
                 .scrollStyle(hasPagination ? .paginated : .free)
                 .controlsStyle(hasControls ? .bullets : .disabled)
+                .bulletsStyle(bulletsInverseStyle ? .inverse : .normal)
                 .controlLeadingItem {
                     Button("Anterior", action: previous)
                         .buttonStyle(.misticaLink(small: true))
@@ -76,6 +81,7 @@ struct CarouselCatalogView: View {
                 }
                 .disabled(!isEnabled)
                 .navigationTitle("Carousel")
+                .background(Color.backgroundAlternative)
             }
         }
     }

diff --git a/Sources/MisticaSwiftUI/Components/Carousel/Carousel+Configuration.swift b/Sources/MisticaSwiftUI/Components/Carousel/Carousel+Configuration.swift
@@ -48,6 +48,11 @@ public enum CarouselControlStyle: CaseIterable {
     case bullets
 }
 
+public enum CarouselBulletsStyle: CaseIterable {
+    case normal
+    case inverse
+}
+
 public enum CarouselScrollDirection: CaseIterable {
     case forward
     case none

diff --git a/Sources/MisticaSwiftUI/Components/Carousel/Carousel.swift b/Sources/MisticaSwiftUI/Components/Carousel/Carousel.swift
@@ -25,6 +25,7 @@ public struct Carousel<Data: RandomAccessCollection, ID: Hashable, Content: View
     private var autoplay = CarouselAutoplay.inactive
     private var scrollStyle = CarouselScrollStyle.paginated
     private var controlStyle = CarouselControlStyle.bullets
+    private var bulletsStyle = CarouselBulletsStyle.normal
     private var controlLeadingItem: AnyView?
     private var controlTrailingItem: AnyView?
     private var controlSpacing: CGFloat = 0
@@ -101,6 +102,7 @@ public struct Carousel<Data: RandomAccessCollection, ID: Hashable, Content: View
             HStack(alignment: .center, spacing: controlSpacing) {
                 controlLeadingItem.map { TupleView(($0, Spacer())) }
                 PageControl(items: elements.count, selectedItem: $index)
+                    .bulletsStyleInverse(bulletsStyle == .inverse)
                 controlTrailingItem.map { TupleView((Spacer(), $0)) }
             }
         }
@@ -176,6 +178,12 @@ public extension Carousel {
         return carousel
     }
 
+    func bulletsStyle(_ bulletsStyle: CarouselBulletsStyle) -> Carousel {
+        var carousel = self
+        carousel.bulletsStyle = bulletsStyle
+        return carousel
+    }
+
     func controlLeadingItem<T: View>(
         @ViewBuilder content: () -> T
     ) -> Carousel {
@@ -252,40 +260,49 @@ public extension Carousel where ID == Data.Element.ID, Data.Element: Identifiabl
     @available(iOS 14.0, *)
     struct DataCardCarousel: View {
         @State var index = 0
+        var bulletsStyleInverse = false
 
         var body: some View {
-            Carousel(
-                0 ... 5,
-                id: \.self, index: $index,
-                spacing: 8,
-                headspace: 40,
-                leadingSpacing: 8,
-                trailingSpacing: 8
-            ) { index in
-                DataCard(
-                    assetType: .image(image: Image(systemName: "photo")),
-                    headline: { Tag(style: .promo, text: "headline") },
-                    title: index == 0 ? "title" : "large large large large large large large large title",
-                    subtitle: "subtitle",
-                    description: "description",
-                    primaryButton: {
-                        Button(action: {}, label: { Text("Primary") })
-                    }, linkButton: {
-                        Button(action: {}, label: { Text("Link") })
-                    }, fragmentView: {
-                        Spacer()
-                    }
-                )
-                .fixedVerticalContentSize(false)
+            ZStack {
+                Color(.secondarySystemBackground)
+                Carousel(
+                    0 ... 5,
+                    id: \.self, index: $index,
+                    spacing: 8,
+                    headspace: 40,
+                    leadingSpacing: 8,
+                    trailingSpacing: 8
+                ) { index in
+                    DataCard(
+                        assetType: .image(image: Image(systemName: "photo")),
+                        headline: { Tag(style: .promo, text: "headline") },
+                        title: index == 0 ? "title" : "large large large large large large large large title",
+                        subtitle: "subtitle",
+                        description: "description",
+                        primaryButton: {
+                            Button(action: {}, label: { Text("Primary") })
+                        }, linkButton: {
+                            Button(action: {}, label: { Text("Link") })
+                        }, fragmentView: {
+                            Spacer()
+                        }
+                    )
+                    .fixedVerticalContentSize(false)
+                }
+                .bulletsStyle(bulletsStyleInverse ? .inverse : .normal)
+                .frame(maxHeight: 350)
             }
-            .frame(maxHeight: 350)
         }
     }
 
     @available(iOS 14.0, *)
     struct Carousel_Previews: PreviewProvider {
         static var previews: some View {
             DataCardCarousel()
+                .previewDisplayName("Normal bullets")
+
+            DataCardCarousel(bulletsStyleInverse: true)
+                .previewDisplayName("Inverse bullets")
         }
     }
 

diff --git a/Sources/MisticaSwiftUI/Components/Carousel/PageControl.swift b/Sources/MisticaSwiftUI/Components/Carousel/PageControl.swift
@@ -23,6 +23,7 @@ private enum Constants {
 struct PageControl: View {
     @Binding var selectedItem: Int
     private let items: Int
+    private var inverseStyle = false
 
     // Contains how much the view has been move based on bullets distance.
     // For example, a value of 1 means that the view containing the bullets
@@ -58,6 +59,15 @@ struct PageControl: View {
     }
 }
 
+@available(iOS 14.0, *)
+extension PageControl {
+    func bulletsStyleInverse(_ inverse: Bool) -> PageControl {
+        var control = self
+        control.inverseStyle = inverse
+        return control
+    }
+}
+
 @available(iOS 14.0, *)
 private extension PageControl {
     func updateContentOffset(with index: Int) {
@@ -73,7 +83,11 @@ private extension PageControl {
     }
 
     func foregroundColor(at index: Int) -> Color {
-        index == selectedItem ? .controlActivated : .control
+        if inverseStyle {
+            index == selectedItem ? .controlInverse : .controlInverse.opacity(0.5)
+        } else {
+            index == selectedItem ? .controlActivated : .control
+        }
     }
 
     func scaleEffect(at index: Int) -> CGFloat {
@@ -126,17 +140,22 @@ private extension PageControl {
     struct PageControlWrapper: View {
         @State var index = 0
         @State var items = 3
+        var inverse = false
         var body: some View {
-            VStack {
-                HStack(alignment: .center) {
-                    Button("<") {
-                        guard index > 0 else { return }
-                        index -= 1
-                    }
-                    PageControl(items: items, selectedItem: $index)
-                    Button(">") {
-                        guard index < items - 1 else { return }
-                        index += 1
+            ZStack {
+                Color(.secondarySystemBackground)
+                VStack {
+                    HStack(alignment: .center) {
+                        Button("<") {
+                            guard index > 0 else { return }
+                            index -= 1
+                        }
+                        PageControl(items: items, selectedItem: $index)
+                            .bulletsStyleInverse(inverse)
+                        Button(">") {
+                            guard index < items - 1 else { return }
+                            index += 1
+                        }
                     }
                 }
             }
@@ -147,6 +166,10 @@ private extension PageControl {
     struct PageControl_Previews: PreviewProvider {
         static var previews: some View {
             PageControlWrapper()
+                .previewDisplayName("Style normal")
+
+            PageControlWrapper(inverse: true)
+                .previewDisplayName("Style inverse")
         }
     }
 #endif