[Horizon] Icon Buttons

packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift

@@ -52,6 +52,7 @@ public extension HorizonUI {
                     .huiTypography(.tag)
                     .frame(minWidth: 19, minHeight: 19)
                     .padding(.huiSpaces.primitives.xxSmall)
+                    .multilineTextAlignment(.center)
             case .icon(let icon):
                 icon
                     .resizable()

packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.Button.swift

@@ -0,0 +1,99 @@
+//
+// This file is part of Canvas.
+// Copyright (C) 2025-present  Instructure, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+//
+
+import SwiftUI
+
+extension HorizonUI {
+    struct PrimaryButton: View {
+        private let label: String
+        private let type: HorizonUI.ButtonStyles.ButtonType
+        private let isSmall: Bool
+        private let fillsWidth: Bool
+        private let leading: Image?
+        private let trailing: Image?
+        private let action: () -> Void
+
+        init(
+            _ label: String,
+            type: HorizonUI.ButtonStyles.ButtonType = .blue,
+            isSmall: Bool = false,
+            fillsWidth: Bool = false,
+            leading: Image? = nil,
+            trailing: Image? = nil,
+            action: @escaping () -> Void
+        ) {
+            self.label = label
+            self.type = type
+            self.isSmall = isSmall
+            self.fillsWidth = fillsWidth
+            self.leading = leading
+            self.trailing = trailing
+            self.action = action
+        }
+
+        var body: some View {
+            Button(self.label, action: action)
+                .buttonStyle(
+                    HorizonUI.ButtonStyles.primary(
+                        type,
+                        isSmall: isSmall,
+                        fillsWidth: isSmall,
+                        leading: leading,
+                        trailing: trailing
+                    )
+                )
+        }
+    }
+}
+
+public extension HorizonUI {
+    struct IconButton: View {
+        private let type: HorizonUI.ButtonStyles.ButtonType
+        private let isSmall: Bool
+        private let badgeNumber: String?
+        private let icon: Image?
+        private let action: () -> Void
+
+        public init(
+            _ icon: Image?,
+            type: HorizonUI.ButtonStyles.ButtonType = .blue,
+            isSmall: Bool = false,
+            badgeNumber: String? = nil,
+            action: @escaping () -> Void
+        ) {
+            self.type = type
+            self.isSmall = isSmall
+            self.badgeNumber = badgeNumber
+            self.icon = icon
+            self.action = action
+        }
+
+        public var body: some View {
+            Button("", action: action)
+                .labelStyle(.iconOnly)
+                .buttonStyle(
+                    HorizonUI.ButtonStyles.icon(
+                        type,
+                        isSmall: isSmall,
+                        badgeNumber: badgeNumber,
+                        icon: icon
+                    )
+                )
+        }
+    }
+}

packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift

@@ -19,109 +19,71 @@
 import SwiftUI
 
 extension HorizonUI.ButtonStyles {
+    private struct StorybookConfiguration: Identifiable {
+        var id: String { title }
+
+        let isSmall: Bool
+        let isDisabled: Bool
+        let title: String
+    }
+
     struct Storybook: View {
         var body: some View {
             ScrollView {
                 VStack(alignment: .leading, spacing: 24) {
-                    Section(header: header("Regular Height - Relative Width Buttons")) {
-                        VStack(alignment: .leading, spacing: 16) {
-                            Button("Black Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.black(
-                                        leading: HorizonUI.icons.addCircle,
-                                        trailing: HorizonUI.icons.addCircle
-                                    )
-                                )
-
-                            Button("White Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.white(
-                                        leading: HorizonUI.icons.addCircle,
-                                        trailing: HorizonUI.icons.addCircle
-                                    )
-                                )
-                                .huiElevation(level: .level3)
-
-                            Button("AI Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.ai())
-
-                            Button("Blue Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.blue())
-
-                            Button("Beige Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.beige())
-                                .huiElevation(level: .level3)
-                        }
-                    }
-
-                    Section(header: header("Small Height - Block Width Buttons")) {
-                        VStack(alignment: .leading, spacing: 16) {
-                            Button("Small Black Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.black(
-                                        isSmall: true,
-                                        fillsWidth: true
-                                    )
-                                )
-                            Button("Small White Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.white(
-                                        isSmall: true,
-                                        fillsWidth: true
-                                    )
-                                )
-                                .huiElevation(level: .level3)
-                            Button("Small AI Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.ai(
-                                        isSmall: true,
-                                        fillsWidth: true
-                                    )
-                                )
-                            Button("Small Blue Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.blue(
-                                        isSmall: true,
-                                        fillsWidth: true
-                                    )
-                                )
-                            Button("Small Beige Button") {}
-                                .buttonStyle(
-                                    HorizonUI.ButtonStyles.beige(
-                                        isSmall: true,
-                                        fillsWidth: true
-                                    )
-                                )
-                                .huiElevation(level: .level3)
-                        }
+                    ForEach(
+                        [
+                            StorybookConfiguration(
+                                isSmall: false,
+                                isDisabled: false,
+                                title: "Regular Height - Relative Width Buttons"
+                            ),
+                            StorybookConfiguration(
+                                isSmall: true, isDisabled: false, title: "Small Height - Block Width Buttons"),
+                            StorybookConfiguration(isSmall: false, isDisabled: true, title: "Disabled Buttons"),
+                        ]
+                    ) { storybookConfiguration in
+                        section(storybookConfiguration)
                     }
+                    .padding(16)
+                }
+                .background(Color(red: 88 / 100, green: 88 / 100, blue: 88 / 100))
+                .navigationTitle("Buttons")
+                .navigationBarTitleDisplayMode(.large)
+            }
+        }
 
-                    Section(header: header("Disabled Buttons")) {
-                        VStack(alignment: .leading, spacing: 16) {
-                            Button("Disabled Black Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.black())
-                                .disabled(true)
-                            Button("Disabled White Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.white())
-                                .disabled(true)
-                                .huiElevation(level: .level3)
-                            Button("Disabled AI Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.ai())
-                                .disabled(true)
-                            Button("Disabled Blue Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.blue())
-                                .disabled(true)
-                            Button("Disabled Beige Button") {}
-                                .buttonStyle(HorizonUI.ButtonStyles.beige())
-                                .disabled(true)
-                                .huiElevation(level: .level3)
-                        }
+        private func section(_ storybookConfiguration: StorybookConfiguration) -> some View {
+            Section(header: header(storybookConfiguration.title)) {
+                VStack(alignment: .leading, spacing: 16) {
+                    ForEach(HorizonUI.ButtonStyles.ButtonType.allCases) { type in
+                        row(
+                            type: type, isSmall: storybookConfiguration.isSmall,
+                            isDisabled: storybookConfiguration.isDisabled)
                     }
                 }
-                .padding(16)
             }
-            .navigationTitle("Buttons")
-            .navigationBarTitleDisplayMode(.large)
+        }
+
+        private func row(
+            type: HorizonUI.ButtonStyles.ButtonType,
+            isSmall: Bool,
+            isDisabled: Bool
+        ) -> some View {
+            HStack(spacing: 16) {
+                HorizonUI.IconButton(
+                    HorizonUI.icons.add,
+                    type: type,
+                    isSmall: isSmall
+                ) {}
+                .disabled(isDisabled)
+
+                HorizonUI.PrimaryButton("\(type.rawValue) Button",
+                                        type: type,
+                                        isSmall: isSmall,
+                                        fillsWidth: isSmall) {}
+                .disabled(isDisabled)
+            }
         }
 
         private func header(_ title: String) -> some View {