secant-ios-wallet/secant/UI Components/DesignGuide.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))
    }
}