-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 26c9973
Showing
46 changed files
with
2,502 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.DS_Store | ||
/.build | ||
/Packages | ||
/*.xcodeproj | ||
xcuserdata/ | ||
DerivedData/ | ||
.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
// swift-tools-version:5.3 | ||
// The swift-tools-version declares the minimum version of Swift required to build this package. | ||
|
||
import PackageDescription | ||
|
||
let package = Package( | ||
name: "DesignSystem", | ||
platforms: [.iOS(.v14), .macOS(.v11), .tvOS(.v14)], | ||
products: [ | ||
// Products define the executables and libraries a package produces, and make them visible to other packages. | ||
.library( | ||
name: "DesignSystem", | ||
targets: ["DesignSystem"]), | ||
], | ||
dependencies: [ | ||
// Dependencies declare other packages that this package depends on. | ||
// .package(url: /* package url */, from: "1.0.0"), | ||
], | ||
targets: [ | ||
// Targets are the basic building blocks of a package. A target can define a module or a test suite. | ||
// Targets can depend on other targets in this package, and on products in packages this package depends on. | ||
.target( | ||
name: "DesignSystem", | ||
dependencies: [], | ||
resources: [ | ||
.process("Resources") | ||
]), | ||
.testTarget( | ||
name: "DesignSystemTests", | ||
dependencies: ["DesignSystem"]), | ||
] | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# DesignSystem | ||
|
||
A description of this package. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
// | ||
// ButtonGroupContainer.swift | ||
// DesignSystem | ||
// | ||
// Copyright © 2020 by a cool group. All rights reserved. | ||
// | ||
|
||
import Foundation | ||
import SwiftUI | ||
|
||
|
||
/// Struct to create a row of formatted buttons | ||
public struct DesignSystemButtonGroup: View { | ||
|
||
var icon : Image? | ||
var buttonItems : Int | ||
var text: String = "" | ||
var colorStyle : ColorStyle | ||
var size : Size | ||
|
||
public enum Size { | ||
case giant, large, medium, small, tiny | ||
|
||
public var style: DesignSystemButtonGroupStyle.SizeStyle { | ||
switch self { | ||
case .giant: return DesignSystemButtonGroupStyle.SizeStyle.giant | ||
case .large: return DesignSystemButtonGroupStyle.SizeStyle.large | ||
case .medium: return DesignSystemButtonGroupStyle.SizeStyle.medium | ||
case .small: return DesignSystemButtonGroupStyle.SizeStyle.small | ||
case .tiny: return DesignSystemButtonGroupStyle.SizeStyle.tiny | ||
} | ||
} | ||
} | ||
|
||
public typealias ColorStyle = DesignSystemButtonGroupStyle.Style | ||
|
||
public init(icon: Image? = nil, buttonItems: Int, text: String = "", colorStyle: DesignSystemButtonGroup.ColorStyle, size: DesignSystemButtonGroup.Size) { | ||
self.icon = icon | ||
self.buttonItems = buttonItems | ||
self.text = text | ||
self.colorStyle = colorStyle | ||
self.size = size | ||
} | ||
|
||
public var body : some View { | ||
VStack { | ||
HStack(spacing: 1) { | ||
ForEach(0..<buttonItems) { i in | ||
Button( | ||
action: {}, | ||
label: { | ||
Group { | ||
if self.icon != nil { | ||
self.icon!.designSystemSquare(width: self.size.style.iconScale) | ||
} else { | ||
Text(self.text) | ||
} | ||
} | ||
} | ||
).buttonStyle(DesignSystemButtonGroupStyle(sizesStyle: self.size.style, colorStyle: self.colorStyle)) | ||
} | ||
|
||
}.cornerRadius(self.size.style.frameWidth / 10) | ||
.overlay(RoundedRectangle(cornerRadius: ((colorStyle == ColorStyle.outline)) ? (self.size.style.frameWidth / 10) : 0).stroke(Color.designSystemActiveBasic, lineWidth:(colorStyle == ColorStyle.outline) ? 1 : 0)) | ||
} | ||
} | ||
} | ||
|
||
|
||
struct ButtonGroup_Previews: PreviewProvider { | ||
static var previews: some View { | ||
VStack { | ||
|
||
DesignSystemButtonGroup(icon: Image(systemName: "star"), buttonItems: 5, text: "won't read me", colorStyle: .primary, size: .giant) | ||
|
||
DesignSystemButtonGroup(icon: nil, buttonItems: 5, text: "L", colorStyle: .basic, size: .large) | ||
|
||
DesignSystemButtonGroup(icon: Image(systemName: "person"), buttonItems: 5, text: "hi", colorStyle: .outline, size: .medium) | ||
|
||
DesignSystemButtonGroup(icon: nil, buttonItems: 5, text: "S", colorStyle: .primary, size: .small) | ||
|
||
DesignSystemButtonGroup(icon: Image(systemName: "umbrella.fill"), buttonItems: 5, text: "T", colorStyle: .basic, size: .tiny) | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,180 @@ | ||
// | ||
// Buttons.swift | ||
// DesignSystem | ||
// | ||
// Copyright © 2020 by a cool group. All rights reserved. | ||
// | ||
|
||
import SwiftUI | ||
|
||
// MARK: - Custom Button Styles | ||
|
||
struct DesignSystemButtonStyle: ButtonStyle { | ||
var color: Color | ||
var style: DesignSystemButton.Style | ||
|
||
func makeBody(configuration: ButtonStyle.Configuration) -> some View { | ||
switch style { | ||
case .fill: return AnyView(FillButton(color: color, configuration: configuration)) | ||
case .outline: return AnyView(OutlineButton(color: color, configuration: configuration)) | ||
case .ghost: return AnyView(GhostButton(color: color, configuration: configuration)) | ||
} | ||
} | ||
|
||
private struct FillButton: View { | ||
var color: Color | ||
let configuration: ButtonStyle.Configuration | ||
@Environment(\.isEnabled) private var isEnabled: Bool | ||
var body: some View { | ||
configuration.label | ||
.designSystemTypography(.s1) | ||
.foregroundColor(isEnabled ? .white : .designSystemFontDisabled) | ||
.padding() | ||
.frame(minHeight: 56) | ||
.background(isEnabled ? color : Color.designSystemBasic.opacity(0.2)) | ||
.cornerRadius(4) | ||
.opacity(configuration.isPressed ? 0.7 : 1) | ||
} | ||
} | ||
|
||
private struct OutlineButton: View { | ||
var color: Color | ||
let configuration: ButtonStyle.Configuration | ||
@Environment(\.isEnabled) private var isEnabled: Bool | ||
var body: some View { | ||
configuration.label | ||
.designSystemTypography(.s1) | ||
.foregroundColor(isEnabled ? color : .designSystemFontDisabled) | ||
.padding() | ||
.frame(minHeight: 56) | ||
.background(isEnabled ? color.opacity(0.2) : Color.designSystemBasic.opacity(0.15)) | ||
.cornerRadius(4) | ||
.overlay( | ||
RoundedRectangle(cornerRadius: 4) | ||
.stroke(isEnabled ? color : Color.designSystemBasic.opacity(0.5), lineWidth: 1) | ||
) | ||
.opacity(configuration.isPressed ? 0.7 : 1) | ||
} | ||
} | ||
|
||
private struct GhostButton: View { | ||
var color: Color | ||
let configuration: ButtonStyle.Configuration | ||
@Environment(\.isEnabled) private var isEnabled: Bool | ||
var body: some View { | ||
configuration.label | ||
.designSystemTypography(.s1) | ||
.foregroundColor(isEnabled ? color : .designSystemFontDisabled) | ||
.padding() | ||
.frame(minHeight: 56) | ||
.background(Color.white) | ||
.cornerRadius(4) | ||
.opacity(configuration.isPressed ? 0.7 : 1) | ||
} | ||
} | ||
} | ||
|
||
// MARK: - Usage | ||
|
||
extension Button { | ||
/// Changes the appearance of the button | ||
public func style(_ style: DesignSystemButton.Style, color: Color) -> some View { | ||
self.buttonStyle(DesignSystemButtonStyle(color: color, style: style)) | ||
} | ||
} | ||
|
||
public struct DesignSystemButton: View { | ||
public enum Style { | ||
case fill, outline, ghost | ||
} | ||
|
||
var titleKey: LocalizedStringKey? | ||
var image: Image? | ||
var style: Style = .fill | ||
var color: Color = .designSystemPrimary | ||
var action: () -> Void | ||
var textAndImage: Bool { titleKey != nil && image != nil } | ||
|
||
public init(_ titleKey: LocalizedStringKey?, image: Image? = nil, style: DesignSystemButton.Style = .fill, color: Color = .designSystemPrimary, action: @escaping () -> Void) { | ||
self.titleKey = titleKey | ||
self.image = image | ||
self.style = style | ||
self.color = color | ||
self.action = action | ||
} | ||
|
||
public init(_ text: String?, image: Image? = nil, style: DesignSystemButton.Style = .fill, color: Color = .designSystemPrimary, action: @escaping () -> Void) { | ||
self.titleKey = LocalizedStringKey(text ?? "") | ||
self.image = image | ||
self.style = style | ||
self.color = color | ||
self.action = action | ||
} | ||
|
||
public init(image: Image? = nil, style: DesignSystemButton.Style = .fill, color: Color = .designSystemPrimary, action: @escaping () -> Void) { | ||
self.image = image | ||
self.style = style | ||
self.color = color | ||
self.action = action | ||
} | ||
|
||
public var body: some View { | ||
Button(action: action, label: { | ||
HStack() { | ||
Spacer() | ||
HStack(spacing: textAndImage ? 12 : 0) { | ||
Text(titleKey ?? LocalizedStringKey("")) | ||
image | ||
} | ||
Spacer() | ||
} | ||
}) | ||
.style(style, color: color) | ||
} | ||
} | ||
|
||
|
||
// MARK: - Preview | ||
|
||
public struct DesignSystemInput_Previews: PreviewProvider { | ||
static let cloudImg = Image(systemName: "cloud.sun") | ||
|
||
public static var previews: some View { | ||
VStack(spacing: 40) { | ||
|
||
HStack(spacing: 5) { | ||
DesignSystemButton("Fill", style: .fill, action: { print("click") }) | ||
DesignSystemButton("Outline", style: .outline, action: { print("click") }) | ||
DesignSystemButton("Ghost", style: .ghost, action: { print("click") }) | ||
} | ||
|
||
HStack(spacing: 5) { | ||
DesignSystemButton("Danger", color: .designSystemDanger, action: { print("click") }) | ||
DesignSystemButton("Warning", color: .designSystemWarning, action: { print("click") }) | ||
DesignSystemButton("Success", color: .designSystemSuccess, action: { print("click") }) | ||
} | ||
|
||
HStack(spacing: 5) { | ||
DesignSystemButton("Disabled", style: .fill, action: { print("click") }) | ||
.disabled(true) | ||
DesignSystemButton("Disabled", style: .outline, action: { print("click") }) | ||
.disabled(true) | ||
DesignSystemButton("Disabled", style: .ghost, action: { print("click") }) | ||
.disabled(true) | ||
} | ||
|
||
HStack(spacing: 5) { | ||
DesignSystemButton("Text", action: { print("click") }) | ||
DesignSystemButton("Text", image: cloudImg, action: { print("click") }) | ||
DesignSystemButton(image: cloudImg, action: { print("click") }) | ||
} | ||
|
||
Divider() | ||
Text("Button style") | ||
|
||
Button(action: { print("click") }, label: { Text("Custom") }) | ||
.style(.outline, color: .designSystemFontBtn) | ||
} | ||
.padding(10) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
// | ||
// Cards.swift | ||
// DesignSystem | ||
// | ||
// Created by Samuel Kebis on 11/05/2020. | ||
// Copyright © 2020 Fabio Staiano. All rights reserved. | ||
// | ||
|
||
import SwiftUI | ||
|
||
public struct DesignSystemCard: View { | ||
public init(image: Image? = nil, title: String, subtitle: String = "", text: String, caption: String = "") { | ||
self.image = image | ||
self.title = title | ||
self.subtitle = subtitle | ||
self.text = text | ||
self.caption = caption | ||
} | ||
|
||
var image: Image? = nil | ||
var title: String | ||
var subtitle: String = "" | ||
var text: String | ||
var caption: String = "" | ||
|
||
public var body: some View { | ||
VStack(alignment: .leading, spacing: 0) { | ||
image? | ||
.resizable() | ||
.aspectRatio(contentMode: .fit) | ||
Text(title) | ||
.designSystemTypography(.h6) | ||
.padding(.horizontal) | ||
.padding(.top, 14) | ||
.padding(.bottom, 6) | ||
if !subtitle.isEmpty { | ||
Text(subtitle) | ||
.designSystemTypography(.s2) | ||
.padding(.horizontal) | ||
} | ||
Divider() | ||
.padding(.vertical, 16) | ||
Text(text) | ||
.designSystemTypography(.p1) | ||
.opacity(0.8) | ||
.padding(.horizontal) | ||
if !caption.isEmpty { | ||
Divider() | ||
.padding(.vertical, 16) | ||
Text(caption) | ||
.designSystemTypography(.c2) | ||
.padding(.horizontal) | ||
} | ||
} | ||
} | ||
} | ||
|
||
struct DesignSystemCards_Previews: PreviewProvider { | ||
static let img = Image("bricks_banner", bundle: .module) | ||
static let text = "A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way." | ||
|
||
static var previews: some View { | ||
Group { | ||
DesignSystemCard(image: img, title: "Title", subtitle: "Subtitle", text: text, caption: "Caption") | ||
DesignSystemCard(image: img, title: "Title", subtitle: "Subtitle", text: text) | ||
DesignSystemCard(title: "Title", subtitle: "Subtitle", text: text) | ||
DesignSystemCard(title: "Title", text: text) | ||
} | ||
.previewLayout(.fixed(width: 300, height: 330)) | ||
} | ||
} |
Oops, something went wrong.