Feat HintView Alignment & Button Customization (#283)

* Add alignment

* Can set hintview button and format code

* Update sample

* Use configuration for button style

* Update CharcoalButton.swift

CharcoalSwiftUISample/Sources/CharcoalSwiftUISample/HintsView.swift

@@ -7,6 +7,8 @@ public struct HintsView: View {
     @State var isPresented2 = true
 
     @State var isPresented3 = true
+
+    @State var isPresented4 = true
 
     public var body: some View {
         ScrollView {
@@ -17,7 +19,11 @@ public struct HintsView: View {
 
                 CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresented2)
 
-                CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented3)
+                CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented3, alignment: .leading)
+
+                CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented4, buttonStyle: .default, action: CharcoalAction(title: "Button") {
+                    isPresented = false
+                })
             }
             .padding()
         }

CharcoalUIKitSample/Sources/CharcoalUIKitSample/Views/Hints/Hints.swift

@@ -73,7 +73,6 @@ final class HintsViewController: UIViewController {
             hint.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
         }
     }
-
 }
 
 @available(iOS 17.0, *)

Sources/CharcoalSwiftUI/Components/Buttons/CharcoalButton.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+
+public protocol CharcoalButtonModifier: ViewModifier {}
+
+public enum CharcoalButtonStyle {
+    case primary(Configuration)
+    case `default`
+
+    @ViewBuilder
+    func apply<Content: View>(_ content: Content) -> some View {
+        switch self {
+        case let .primary(configuration):
+            content.charcoalPrimaryButton(size: configuration.size, isFixed: configuration.isFixed, primaryColor: configuration.primaryColor)
+        case .default:
+            content.charcoalDefaultButton(size: .medium, isFixed: true)
+        }
+    }
+}
+
+extension CharcoalButtonStyle {
+    public struct Configuration {
+        public var size: CharcoalButtonSize
+        public var isFixed: Bool
+        public var primaryColor: Color
+
+        public init(size: CharcoalButtonSize = .medium, isFixed: Bool = true, primaryColor: Color) {
+            self.size = size
+            self.isFixed = isFixed
+            self.primaryColor = primaryColor
+        }
+    }
+}
+
+extension View {
+    func charcoalButtonStyle(_ style: CharcoalButtonStyle) -> some View {
+        style.apply(self)
+    }
+}

Sources/CharcoalSwiftUI/Components/Buttons/CharcoalNavigationButton.swift

@@ -92,7 +92,7 @@ struct CharcoalNavigationButtonStyleModifier: ViewModifier {
 
 public extension View {
     /// Set the style of the button to Charcoal's navigation button
-    /// 
+    ///
     /// - Parameters:
     ///   - size: The size of the button
     ///   - isFixed: Whether the button should have a fixed width

Sources/CharcoalSwiftUI/Components/CharcoalSpinner.swift

@@ -115,33 +115,33 @@ public extension View {
 }
 
 #if compiler(>=6.0)
-@available(iOS 17, *)
-#Preview {
-    @Previewable @State var isPresenting = true
-    @Previewable @State var isBigPresenting = true
-    @Previewable @State var isTransparentPresenting = true
-
-    ZStack {
-        Color.gray.opacity(0.2)
-        VStack {
-            Button {
-                isPresenting.toggle()
-            } label: {
-                Text("Toggle Spinner")
-            }
-            VStack {}
-                .frame(width: 100, height: 100)
-                .charcoalSpinner(isPresenting: $isPresenting)
+    @available(iOS 17, *)
+    #Preview {
+        @Previewable @State var isPresenting = true
+        @Previewable @State var isBigPresenting = true
+        @Previewable @State var isTransparentPresenting = true
 
-            VStack {}
-                .frame(width: 100, height: 150)
-                .charcoalSpinner(isPresenting: $isBigPresenting, spinnerSize: 100)
+        ZStack {
+            Color.gray.opacity(0.2)
+            VStack {
+                Button {
+                    isPresenting.toggle()
+                } label: {
+                    Text("Toggle Spinner")
+                }
+                VStack {}
+                    .frame(width: 100, height: 100)
+                    .charcoalSpinner(isPresenting: $isPresenting)
 
-            VStack {}
-                .frame(width: 100, height: 100)
-                .charcoalSpinner(isPresenting: $isTransparentPresenting, transparentBackground: true)
+                VStack {}
+                    .frame(width: 100, height: 150)
+                    .charcoalSpinner(isPresenting: $isBigPresenting, spinnerSize: 100)
+
+                VStack {}
+                    .frame(width: 100, height: 100)
+                    .charcoalSpinner(isPresenting: $isTransparentPresenting, transparentBackground: true)
+            }
         }
+        .ignoresSafeArea()
     }
-    .ignoresSafeArea()
-}
 #endif

Sources/CharcoalSwiftUI/Components/CharcoalTextField.swift

@@ -89,37 +89,37 @@ public extension View {
 }
 
 #if compiler(>=6.0)
-@available(iOS 17, *)
-#Preview {
-    @Previewable @State var text1 = ""
-    @Previewable @State var text2 = ""
+    @available(iOS 17, *)
+    #Preview {
+        @Previewable @State var text1 = ""
+        @Previewable @State var text2 = ""
 
-    VStack(spacing: 16) {
-        TextField("Simple text field", text: $text1)
-            .charcoalTextField()
-        TextField("Placeholder", text: $text2)
-            .charcoalTextField(
-                label: .constant("Label"),
-                countLabel: .init(
-                    get: { "\(text2.count)/10" },
-                    set: { _ in }
-                ),
-                assistiveText: .init(
-                    get: { text2.count > 10 ? "Error" : "OK" },
-                    set: { _ in }
-                ),
-                hasError: .init(
-                    get: { text2.count > 10 },
-                    set: { _ in }
+        VStack(spacing: 16) {
+            TextField("Simple text field", text: $text1)
+                .charcoalTextField()
+            TextField("Placeholder", text: $text2)
+                .charcoalTextField(
+                    label: .constant("Label"),
+                    countLabel: .init(
+                        get: { "\(text2.count)/10" },
+                        set: { _ in }
+                    ),
+                    assistiveText: .init(
+                        get: { text2.count > 10 ? "Error" : "OK" },
+                        set: { _ in }
+                    ),
+                    hasError: .init(
+                        get: { text2.count > 10 },
+                        set: { _ in }
+                    )
                 )
-            )
-        TextField("", text: .constant("Text"))
-            .disabled(true)
-            .charcoalTextField(
-                label: .constant("Label"),
-                countLabel: .constant("0/10"),
-                assistiveText: .constant("Assistive text")
-            )
-    }.padding()
-}
+            TextField("", text: .constant("Text"))
+                .disabled(true)
+                .charcoalTextField(
+                    label: .constant("Label"),
+                    countLabel: .constant("0/10"),
+                    assistiveText: .constant("Assistive text")
+                )
+        }.padding()
+    }
 #endif

Sources/CharcoalSwiftUI/Components/Hint/CharcoalHint.swift

@@ -1,15 +1,15 @@
 import SwiftUI
 
 public struct CharcoalHint: View {
-    /// The text of the tooltip
+    /// The text of the  hint view
     let text: String
 
-    /// The text of the tooltip
+    /// The subtitle text of the  hint view
     let subtitle: String?
 
     let icon: CharcoalAsset.Images = .info16
 
-    /// The corner radius of the tooltip
+    /// The corner radius of the  hint view
     let cornerRadius: CGFloat = 8
 
     let maxWidth: CGFloat?
@@ -19,20 +19,27 @@ public struct CharcoalHint: View {
 
     let action: CharcoalAction?
 
-    @State var timer: Timer?
+    /// The alignment of hint view
+    let alignment: Alignment
+
+    let buttonStyle: CharcoalButtonStyle
 
     public init(
         text: String,
         subtitle: String? = nil,
         maxWidth: CGFloat? = nil,
         isPresenting: Binding<Bool>,
+        alignment: Alignment = .center,
+        buttonStyle: CharcoalButtonStyle = .primary(.init(primaryColor: Color(CharcoalAsset.ColorPaletteGenerated.brand.color))),
         action: CharcoalAction? = nil
     ) {
         self.text = text
         self.subtitle = subtitle
         self.maxWidth = maxWidth
         _isPresenting = isPresenting
         self.action = action
+        self.alignment = alignment
+        self.buttonStyle = buttonStyle
     }
 
     public var body: some View {
@@ -53,11 +60,10 @@ public struct CharcoalHint: View {
                         action.actionCallback()
                     }) {
                         Text(action.title)
-                    }
-                    .charcoalPrimaryButton(size: .small)
+                    }.charcoalButtonStyle(buttonStyle)
                 }
             }
-            .frame(maxWidth: maxWidth)
+            .frame(maxWidth: maxWidth, alignment: alignment)
             .padding(EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16))
             .background(charcoalColor: .surface3)
             .cornerRadius(cornerRadius, corners: .allCorners)
@@ -66,23 +72,27 @@ public struct CharcoalHint: View {
 }
 
 #if compiler(>=6.0)
-@available(iOS 17, *)
-#Preview {
-    @Previewable @State var isPresenting = true
-    @Previewable @State var isPresenting2 = true
-    @Previewable @State var isPresenting3 = true
+    @available(iOS 17, *)
+    #Preview {
+        @Previewable @State var isPresenting = true
+        @Previewable @State var isPresenting2 = true
+        @Previewable @State var isPresenting3 = true
+        @Previewable @State var isPresenting4 = true
+        @Previewable @State var textOfLabel = "Hello"
 
-    @Previewable @State var textOfLabel = "Hello"
+        VStack {
+            CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting, action: CharcoalAction(title: "Button", actionCallback: {
+                isPresenting = false
+            }))
 
-    VStack {
-        CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting, action: CharcoalAction(title: "Button", actionCallback: {
-            isPresenting = false
-        }))
+            CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting2, buttonStyle: .default, action: CharcoalAction(title: "Button", actionCallback: {
+                isPresenting2 = false
+            }))
 
-        CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting2)
+            CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting3)
 
-        CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresenting3)
+            CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresenting4, alignment: .leading)
 
-    }.padding()
-}
+        }.padding()
+    }
 #endif