[Horizon] Icon Buttons

[reabbotted]

No description provided.

[inst-danger]

Horizon Build QR Code:

[inst-danger]

	Fails
🚫	Please add a release note. If no release note is wanted, use none. Example: release note: Fixed a bug that prevented users from enjoying the app.
🚫	Please add which apps this change affects. Example: affects: Teacher, Student or affects: none
🚫	Please add a reference to a Jira ticket. For example: refs: MBL-10023
🚫	Build failed, skipping coverage check

❌ XCTest failed: CoreTests/AssignmentCellViewModelTests/testSubmissionStatusAndIconAndColor

XCTAssertEqual failed: ("#6a7883") is not equal to ("#697783")
XCTAssertEqual failed: ("#03893d") is not equal to ("#03893c")

Generated by 🚫 dangerJS against 80af03c

[Ahmed-Naguib93]

Nice work, but i set some comments

[Ahmed-Naguib93]

Thanks for your work, is working fine for me, but i have one question and one suggestion
1- Question: In the case where the icon button is disabled but has a badge, should we set the opacity for the badge view or hide it? I couldn’t find this scenario in Figma. We can ask the team about it after your holiday.

2- Suggestion: What is your opinion on using a scenario for showing the icon button that makes it more readable and usable?

public extension HorizonUI {
    struct IconButton: View {
        let type: HorizonUI.ButtonStyles.ButtonType
        let isSmall: Bool
        let badgeNumber: String?
        let icon: Image?
        let onTap: () -> Void

        public init(
            type: HorizonUI.ButtonStyles.ButtonType,
            isSmall: Bool = false,
            badgeNumber: String? = nil,
            icon: Image? = nil,
            onTap: @escaping () -> Void
        ) {
            self.type = type
            self.isSmall = isSmall
            self.badgeNumber = badgeNumber
            self.icon = icon
            self.onTap = onTap
        }

        public var body: some View {
            Button("") {
                onTap()
            }
            .buttonStyle(
                HorizonUI.ButtonStyles.icon(type, isSmall: isSmall, badgeNumber: badgeNumber, icon: icon)
            )
        }
    }
}

[Ahmed-Naguib93]

Please make if let icon this is enough & create two functions for each branch as you did before, it was more readable

if let icon {
iconButton()
} else {
normalButton()
}