161 lines
5.0 KiB
Swift
161 lines
5.0 KiB
Swift
//
|
|
// DesignGuide.swift
|
|
// secant-testnet
|
|
//
|
|
// Created by Francisco Gindre on 10/18/21.
|
|
// swiftlint:disable line_length
|
|
|
|
import SwiftUI
|
|
|
|
struct DesignGuide: View {
|
|
var body: some View {
|
|
HStack {
|
|
TextAndPlaceholdersGuide()
|
|
SmallVisualElements()
|
|
ButtonGuide()
|
|
}
|
|
}
|
|
}
|
|
|
|
struct TextAndPlaceholdersGuide: View {
|
|
var body: some View {
|
|
VStack(spacing: 30) {
|
|
Text("H1 Onboarding Rubik Light")
|
|
.font(FontFamily.Rubik.light.textStyle(.title))
|
|
.foregroundColor(Asset.Colors.Text.titleText.color)
|
|
Text(
|
|
"""
|
|
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)
|
|
|
|
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 {
|
|
Text("Navigation Buttons")
|
|
.font(.caption)
|
|
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)
|
|
|
|
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("Recovery Phrase Chip")
|
|
.font(.caption)
|
|
EnumeratedChip(index: 1, text: "Salami")
|
|
.frame(width: 100, 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: {}) {
|
|
Text("Primary Button")
|
|
}
|
|
.primaryButtonStyle
|
|
.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: {}) {
|
|
Text("Primary Active Button")
|
|
}
|
|
.createButtonStyle
|
|
.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: {}) {
|
|
Text("Secondary Button")
|
|
}
|
|
.secondaryButtonStyle
|
|
.frame(height: buttonHeight)
|
|
|
|
// Action Button
|
|
Button(action: {}) {
|
|
Text("Action Button")
|
|
}
|
|
.activeButtonStyle
|
|
.frame(height: buttonHeight)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
struct DesignGuide_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
DesignGuide()
|
|
.padding(30)
|
|
.applyScreenBackground()
|
|
.preferredColorScheme(.dark)
|
|
.previewLayout(.fixed(width: 1086, height: 1080))
|
|
|
|
DesignGuide()
|
|
.padding(30)
|
|
.applyScreenBackground()
|
|
.preferredColorScheme(.light)
|
|
.previewLayout(.fixed(width: 1086, height: 1080))
|
|
}
|
|
}
|