diff --git a/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButton.swift b/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButton.swift new file mode 100644 index 00000000..3953c042 --- /dev/null +++ b/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButton.swift @@ -0,0 +1,40 @@ +import SwiftUI + +public struct DMSButton: View { + var text: String + var style: DMSButtonStyle.Style + var color: Color + var action: () -> Void + + public init( + text: String = "", + style: DMSButtonStyle.Style = .contained, + color: Color = .blue, + action: @escaping () -> Void = {} + ) { + self.text = text + self.style = style + self.color = color + self.action = action + } + + public var body: some View { + Button(action: action) { + Text(text) + } + .buttonStyle(DMSButtonStyle(style: style, color: color)) + } +} + +struct DMSButton_Previews: PreviewProvider { + static var previews: some View { + VStack(spacing: 20) { + DMSButton(text: "Contained") + DMSButton(text: "Outlined", style: .outlined) + DMSButton(text: "Text", style: .text) + DMSButton(text: "Underline", style: .underline) + } + .padding() + .background(Color.GrayScale.gray9) + } +} diff --git a/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButtonStyle.swift b/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButtonStyle.swift new file mode 100644 index 00000000..798a30d5 --- /dev/null +++ b/Projects/UsertInterfaces/DesignSystem/Sources/Button/DMSButtonStyle.swift @@ -0,0 +1,133 @@ +import SwiftUI + +public struct DMSButtonStyle: ButtonStyle { + public enum Style { + case contained + case outlined + case text + case underline + } + + var style: Style + var color: Color + + public func makeBody(configuration: Configuration) -> some View { + switch style { + case .contained: + return AnyView(ContainedButton(configuration: configuration, color: color)) + + case .outlined: + return AnyView(OutlinedButton(configuration: configuration, color: color)) + + case .text: + return AnyView(TextButton(configuration: configuration, color: color)) + + case .underline: + return AnyView(UnderlineButton(configuration: configuration, color: color)) + } + } +} + +// MARK: - Usage +extension Button { + func dmsStyle(_ style: DMSButtonStyle.Style, color: Color) -> some View { + self.buttonStyle(DMSButtonStyle(style: style, color: color)) + } +} + +// MARK: - Contained +extension DMSButtonStyle { + struct ContainedButton: View { + let configuration: ButtonStyle.Configuration + let color: Color + @Environment(\.isEnabled) private var isEnabled: Bool + + var body: some View { + configuration.label + .padding(.vertical, 14) + .padding(.horizontal, 16) + .dmsFont(.button(.default)) + .background(color) + .foregroundColor(.GrayScale.gray1) + .cornerRadius(5) + .opacity( + isEnabled ? + configuration.isPressed ? 0.7 : 1.0 : + 0.5 + ) + } + } +} + +// MARK: - Outlined +extension DMSButtonStyle { + struct OutlinedButton: View { + let configuration: ButtonStyle.Configuration + let color: Color + @Environment(\.isEnabled) private var isEnabled: Bool + + var body: some View { + configuration.label + .padding(.vertical, 14) + .padding(.horizontal, 16) + .dmsFont(.button(.default)) + .background(.clear) + .foregroundColor(color) + .overlay { + RoundedRectangle(cornerRadius: 5) + .stroke(color, lineWidth: 1) + } + .opacity( + isEnabled ? + configuration.isPressed ? 0.7 : 1.0 : + 0.5 + ) + } + } +} + +// MARK: - Text +extension DMSButtonStyle { + struct TextButton: View { + let configuration: ButtonStyle.Configuration + let color: Color + @Environment(\.isEnabled) private var isEnabled: Bool + + var body: some View { + configuration.label + .dmsFont(.button(.default)) + .foregroundColor(color) + .opacity( + isEnabled ? + configuration.isPressed ? 0.7 : 1.0 : + 0.5 + ) + } + } +} + +// MARK: - Underline +extension DMSButtonStyle { + struct UnderlineButton: View { + let configuration: ButtonStyle.Configuration + let color: Color + @Environment(\.isEnabled) private var isEnabled: Bool + + var body: some View { + configuration.label + .dmsFont(.button(.default)) + .foregroundColor(color) + .overlay(alignment: .bottom) { + Rectangle() + .foregroundColor(color) + .frame(height: 1) + .offset(y: 1) + } + .opacity( + isEnabled ? + configuration.isPressed ? 0.7 : 1.0 : + 0.5 + ) + } + } +}