Design Guide Updates
This commit is contained in:
parent
1bbc5a3171
commit
d1b805c485
|
@ -26,7 +26,7 @@ struct NavigationButtonStyle: ButtonStyle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private extension Button {
|
extension Button {
|
||||||
var navigationButtonStyle: some View {
|
var navigationButtonStyle: some View {
|
||||||
buttonStyle(
|
buttonStyle(
|
||||||
NavigationButtonStyle()
|
NavigationButtonStyle()
|
||||||
|
|
|
@ -29,21 +29,24 @@ struct TextAndPlaceholdersGuide: View {
|
||||||
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(
|
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
|
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))
|
.font(FontFamily.Rubik.light.textStyle(.footnote))
|
||||||
.fontWeight(.thin)
|
.fontWeight(.thin)
|
||||||
.foregroundColor(Asset.Colors.Text.titleText.color)
|
.foregroundColor(Asset.Colors.Text.titleText.color)
|
||||||
|
|
||||||
Text("Placeholder for circular view")
|
CircularFrame()
|
||||||
.frame(width: 370, height: 370, alignment: .center)
|
.frame(width: 300, height: 300, alignment: .center)
|
||||||
|
|
||||||
Text("Placeholder for rectangular view")
|
Text("Placeholder for rectangular view")
|
||||||
.frame(width: 386, height: 125, alignment: .center)
|
.frame(width: 386, height: 125, alignment: .center)
|
||||||
OnboardingProgressViewPreviewHelper()
|
|
||||||
|
ProgressView.init(value: 25.0, total: 100.0)
|
||||||
|
.onboardingProgressStyle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -52,38 +55,53 @@ struct SmallVisualElements: View {
|
||||||
let gridItems = [GridItem(.flexible(minimum: 40, maximum: 100)), GridItem(.flexible(minimum: 40, maximum: 100))]
|
let gridItems = [GridItem(.flexible(minimum: 40, maximum: 100)), GridItem(.flexible(minimum: 40, maximum: 100))]
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
VStack {
|
VStack(spacing: 75) {
|
||||||
Text("Navigation Buttons")
|
VStack {
|
||||||
.font(.caption)
|
Text("Navigation Buttons")
|
||||||
LazyVGrid(columns: gridItems) {
|
.font(.caption)
|
||||||
// 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") }
|
LazyVGrid(columns: gridItems) {
|
||||||
.buttonStyle(NavigationButtonStyle())
|
Button("Back") { dump("Example button") }
|
||||||
.frame(width: 80, height: 40)
|
.navigationButtonStyle
|
||||||
Button("Skip") { dump("Example button") }
|
.frame(width: 80, height: 40)
|
||||||
.buttonStyle(NavigationButtonStyle())
|
|
||||||
.frame(width: 80, height: 40)
|
Button("Skip") { dump("Example button") }
|
||||||
|
.navigationButtonStyle
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
|
||||||
|
// TODO: Change state to selected
|
||||||
|
Button("Back") { dump("Example button") }
|
||||||
|
.navigationButtonStyle
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
|
||||||
|
// TODO: Change state to selected
|
||||||
|
Button("Skip") { dump("Example button") }
|
||||||
|
.navigationButtonStyle
|
||||||
|
.frame(width: 80, height: 40)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Text("Recovery Phrase Chip")
|
VStack {
|
||||||
.font(.caption)
|
Text("Recovery Phrase Chip")
|
||||||
EnumeratedChip(index: 1, text: "Salami")
|
.font(.caption)
|
||||||
.frame(width: 100, height: 40)
|
|
||||||
EmptyChip()
|
EnumeratedChip(index: 1, text: "Salami")
|
||||||
.frame(width: 100, height: 40)
|
.frame(width: 100, height: 40)
|
||||||
Text("shield icon")
|
|
||||||
.frame(width: 76, height: 76)
|
EmptyChip()
|
||||||
Text("profile icon")
|
.frame(width: 100, height: 40)
|
||||||
.frame(width: 76, height: 76)
|
}
|
||||||
Text("listing icon")
|
|
||||||
.frame(width: 76, height: 76)
|
VStack(spacing: 25) {
|
||||||
|
Asset.Assets.Icons.shield.image
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
|
||||||
|
Asset.Assets.Icons.profile.image
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
|
||||||
|
Asset.Assets.Icons.list.image
|
||||||
|
.frame(width: 76, height: 76)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -93,7 +111,7 @@ struct ButtonGuide: View {
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
VStack(spacing: 30) {
|
VStack(spacing: 30) {
|
||||||
// Idle Primary Button
|
// Primary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Button")
|
Text("Primary Button")
|
||||||
}
|
}
|
||||||
|
@ -102,53 +120,56 @@ struct ButtonGuide: View {
|
||||||
|
|
||||||
// TODO: Pressed Primary Button
|
// TODO: Pressed Primary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Button")
|
Text("Pressed Primary Button")
|
||||||
}
|
}
|
||||||
.primaryButtonStyle
|
.primaryButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// Disabled Primary Button
|
// Disabled Primary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Button")
|
Text("Disabled Primary Button")
|
||||||
}
|
}
|
||||||
.primaryButtonStyle
|
.primaryButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
.disabled(true)
|
.disabled(true)
|
||||||
|
|
||||||
// Idle Primary Action Button
|
// Active Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Active Button")
|
Text("Active Button")
|
||||||
}
|
}
|
||||||
.createButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// TODO: Pressed Primary Action Button
|
// TODO: Pressed Active Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Active Button")
|
Text("Pressed Active Button")
|
||||||
}
|
}
|
||||||
.createButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// TODO: Pressed Primary Action Button
|
// TODO: Disabled Active Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Primary Active Button")
|
Text("Disabled Active Button")
|
||||||
}
|
}
|
||||||
.createButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
.disabled(true)
|
||||||
|
|
||||||
// Idle Secondary Button
|
// Secondary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Secondary Button")
|
Text("Secondary Button")
|
||||||
}
|
}
|
||||||
.secondaryButtonStyle
|
.secondaryButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// Action Button
|
// Disabled Secondary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Action Button")
|
Text("Disabled Secondary Button")
|
||||||
}
|
}
|
||||||
.activeButtonStyle
|
.secondaryButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
.disabled(true)
|
||||||
|
|
||||||
Spacer()
|
Spacer()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -156,14 +177,15 @@ struct ButtonGuide: View {
|
||||||
|
|
||||||
struct DesignGuide_Previews: PreviewProvider {
|
struct DesignGuide_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
DesignGuide()
|
Group {
|
||||||
.applyScreenBackground()
|
DesignGuide()
|
||||||
.preferredColorScheme(.dark)
|
.applyScreenBackground()
|
||||||
.previewLayout(.fixed(width: 420, height: 1080))
|
.preferredColorScheme(.dark)
|
||||||
|
|
||||||
DesignGuide()
|
DesignGuide()
|
||||||
.applyScreenBackground()
|
.applyScreenBackground()
|
||||||
.preferredColorScheme(.light)
|
.preferredColorScheme(.light)
|
||||||
.previewLayout(.fixed(width: 1086, height: 1080))
|
}
|
||||||
|
.previewLayout(.fixed(width: 1086, height: 1080))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue