In Progress - Design Guide
This commit is contained in:
parent
e6503e5b7f
commit
31973d7a2b
|
@ -3,54 +3,152 @@
|
||||||
// secant-testnet
|
// secant-testnet
|
||||||
//
|
//
|
||||||
// Created by Francisco Gindre on 10/18/21.
|
// Created by Francisco Gindre on 10/18/21.
|
||||||
//
|
// swiftlint:disable line_length
|
||||||
|
|
||||||
import SwiftUI
|
import SwiftUI
|
||||||
|
|
||||||
struct DesignGuide: View {
|
struct DesignGuide: View {
|
||||||
|
var body: some View {
|
||||||
|
HStack {
|
||||||
|
TextAndPlaceholdersGuide()
|
||||||
|
SmallVisualElements()
|
||||||
|
ButtonGuide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
struct TextAndPlaceholdersGuide: View {
|
||||||
var body: some View {
|
var body: some View {
|
||||||
VStack(spacing: 30) {
|
VStack(spacing: 30) {
|
||||||
Text("H1 Onboarding Rubik Light")
|
Text("H1 Onboarding Rubik Light")
|
||||||
.font(FontFamily.Rubik.light.textStyle(.title))
|
.font(FontFamily.Rubik.light.textStyle(.title))
|
||||||
.foregroundColor(Asset.Colors.Text.titleText.color)
|
.foregroundColor(Asset.Colors.Text.titleText.color)
|
||||||
Text("H1 Onboarding Rubik medium")
|
Text(
|
||||||
.font(FontFamily.Rubik.medium.textStyle(.title))
|
"""
|
||||||
|
Rubik 16 regular #93A4BE Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
||||||
|
"""
|
||||||
|
)
|
||||||
|
.font(FontFamily.Rubik.light.textStyle(.footnote))
|
||||||
|
.fontWeight(.thin)
|
||||||
.foregroundColor(Asset.Colors.Text.titleText.color)
|
.foregroundColor(Asset.Colors.Text.titleText.color)
|
||||||
|
|
||||||
|
Text("Placeholder for circular view")
|
||||||
|
.frame(width: 370, height: 370, alignment: .center)
|
||||||
|
|
||||||
|
Text("Placeholder for rectangular view")
|
||||||
|
.frame(width: 386, height: 125, alignment: .center)
|
||||||
|
OnboardingProgressViewPreviewHelper()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
struct SmallVisualElements: View {
|
||||||
|
let gridItems = [GridItem(.flexible(minimum: 40, maximum: 100)), GridItem(.flexible(minimum: 40, maximum: 100))]
|
||||||
|
var body: some View {
|
||||||
|
VStack {
|
||||||
|
LazyVGrid(columns: gridItems) {
|
||||||
|
// TODO: Change state to selected
|
||||||
|
Button("Back") { dump("Example button") }
|
||||||
|
.buttonStyle(NavigationButtonStyle())
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
Button("Skip") { dump("Example button") }
|
||||||
|
.buttonStyle(NavigationButtonStyle())
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
|
||||||
|
// Active Navigation Buttons
|
||||||
|
Button("Back") { dump("Example button") }
|
||||||
|
.buttonStyle(NavigationButtonStyle())
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
Button("Skip") { dump("Example button") }
|
||||||
|
.buttonStyle(NavigationButtonStyle())
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
}
|
||||||
|
Text("shield icon")
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
Text("profile icon")
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
Text("listing icon")
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
struct ButtonGuide: View {
|
||||||
|
let buttonHeight: CGFloat = 60
|
||||||
|
var body: some View {
|
||||||
|
VStack(spacing: 30) {
|
||||||
|
// Idle Primary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Button")
|
Text("Primary Button")
|
||||||
}
|
}
|
||||||
.primaryButtonStyle
|
.primaryButtonStyle
|
||||||
.frame(height: 50)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// TODO: Pressed Primary Button
|
||||||
|
Button(action: {}) {
|
||||||
|
Text("Primary Button")
|
||||||
|
}
|
||||||
|
.primaryButtonStyle
|
||||||
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// Disabled Primary Button
|
||||||
|
Button(action: {}) {
|
||||||
|
Text("Primary Button")
|
||||||
|
}
|
||||||
|
.primaryButtonStyle
|
||||||
|
.frame(height: buttonHeight)
|
||||||
|
.disabled(true)
|
||||||
|
|
||||||
|
// Idle Primary Action Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Active Button")
|
Text("Primary Active Button")
|
||||||
}
|
}
|
||||||
.createButtonStyle
|
.createButtonStyle
|
||||||
.frame(height: 50)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// TODO: Pressed Primary Action Button
|
||||||
|
Button(action: {}) {
|
||||||
|
Text("Primary Active Button")
|
||||||
|
}
|
||||||
|
.createButtonStyle
|
||||||
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// TODO: Pressed Primary Action Button
|
||||||
|
Button(action: {}) {
|
||||||
|
Text("Primary Active Button")
|
||||||
|
}
|
||||||
|
.createButtonStyle
|
||||||
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// Idle Secondary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Secondary Button")
|
Text("Secondary Button")
|
||||||
}
|
}
|
||||||
.secondaryButtonStyle
|
.secondaryButtonStyle
|
||||||
.frame(height: 50)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
|
// Action Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Action Button")
|
Text("Action Button")
|
||||||
}
|
}
|
||||||
.activeButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: 50)
|
.frame(height: buttonHeight)
|
||||||
|
Spacer()
|
||||||
}
|
}
|
||||||
.padding(.horizontal, 30)
|
|
||||||
.applyScreenBackground()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
struct DesignGuide_Previews: PreviewProvider {
|
struct DesignGuide_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
DesignGuide()
|
DesignGuide()
|
||||||
|
.padding(30)
|
||||||
|
.applyScreenBackground()
|
||||||
.preferredColorScheme(.dark)
|
.preferredColorScheme(.dark)
|
||||||
|
.previewLayout(.fixed(width: 1086, height: 1080))
|
||||||
|
|
||||||
DesignGuide()
|
DesignGuide()
|
||||||
|
.padding(30)
|
||||||
|
.applyScreenBackground()
|
||||||
.preferredColorScheme(.light)
|
.preferredColorScheme(.light)
|
||||||
|
.previewLayout(.fixed(width: 1086, height: 1080))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue