HealthGoalCard Component

The OCHealthGoalCard is a component used for creating different states health goal. It supports 3 types of card styles, mainly large, small, thin.. These cards display information about health goals, including titles, progress bars, completion dates, and bonus points.

Features

• For each card style the contents are organised in different styles with accessibility sort order.

• Some card styles do not support all the OCHealthGoalCardState.

• Both portrait and landscape are supported by the component.

• There are 3 Alt-Text which can be customised at client side. 1 Partner Info icon and 2 Bottom Info icons.

• The component accepts mainly 2 parameters: healthGoalCardInformation and healthGoalCardState

• Based on the card type, the child view components are added to hierarchy.

• Different elements like pills, progress bars, and bonus information are displayed conditionally based on the type of health goal.

• The Composable uses a configuration object to customise the content of the card, including text, icons, and progress values.

• The Composable function is defined with parameters to customise the card's content and behaviour

  /// - Parameters: /// - healthGoalCardInformation: Health goal card information /// - healthGoalCardState: Different health goal card state

Installation

1. Copy the HealthGoalCard component folder into your Xcode project.

2. Use the OCHealthGoalCardView view in your SwiftUI code:

import SwiftUI

struct ContentView: View {
    let partnerInfoConfiguration: OCInfoItemConfiguration = OCInfoItemConfiguration(title: "In Kooperation mit", titleFont: .caption1Regular,
                                                                                    iconType: .local(image: .infoItemIconPlaceholder),
                                                                                    isIconLeading: false)
    let progressBarConfiguration: OCGoalProgressBarConfiguration = OCGoalProgressBarConfiguration(currentProgress: 2, totalProgress: 5, progressBarTitle: "2 von 5 Challenges geschafft")
    let statusPillConfiguration: OCInfoItemConfiguration = OCInfoItemConfiguration(title: "Noch [x] Tage verfügbar", iconType: .local(image: Image("TickIcon")))
    let footerInfoItems: [OCInfoItemConfiguration] = [OCInfoItemConfiguration(title: "1500 Bonuspunkte"), OCInfoItemConfiguration(title: "max. 90 Tage")]
    
    var body: some View {
            OCHealthGoalCard(
                        healthGoalCardInformation: OCHealthGoalCardInformation(cardType: .thin(imageType: .local(image: Image("someImage"))),
                                                                               tags: [],
                                                                               title: "Stärke Deine Muskeln",
                                                                               statusPillConfiguration: statusPillConfiguration,
                                                                               partnerInfoConfiguration: partnerInfoConfiguration,
                                                                               footerInfoConfigurations: footerInfoItems,
                                                                               progressBarConfiguration: progressBarConfiguration),
                        healthGoalCardState: state)
    }
}