Installation

Prerequisites

1. Install cocoapods and cocoapods-art.
2. (Optional) Install Bundler to manage your cocoapod gem installation.
3. (Optional) Install rbenv to manage your Ruby versions.
4. Set up your repo user by following the Getting started for iOS.

Set up dependencies

1. To download the design system dependencies, add the Backbase Cocoapod repository for the design system as follows:

                                                        
                                                        
                                                            pod repo-art add backbase-pods-retail3 https://repo.backbase.com/api/pods/ios-retail3
                                                        pod repo-art add backbase-pods-design https://repo.backbase.com/artifactory/api/pods/design-ios
                                                        pod repo-art update backbase-pods-design
                                                        pod repo-art update backbase-pods-retail3
                                                        
                                                            

1. Then, in the Podfile add the following:

                                                        
                                                        
                                                            plugin 'cocoapods-art', sources: %w[
                                                          backbase-pods-design
                                                          backbase-pods-retail3
                                                        ]
                                                        
                                                            

1. Now, you can run pod install in your console to download the Backbase Design System Cocoapods.

Initialize the Design System

1. First, import the BackbaseDesignSystem package into your app.

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

1. Now you will be able to use Design System via DesignSystem.shared
2. If you want to load a custom theme, see apply a theme.

Example usage

The following example shows how you can create create a component using the Backbase Design System and how to style it:

                                                        
                                                        
                                                            let primaryButton: Button = {
                                                            let button = Button()
                                                            DesignSystem.shared.styles.primaryButton(button)
                                                            button.setTitle("Button primary", for: .normal)
                                                            return button
                                                        }()
                                                        
                                                        let input: TextInput = {
                                                            let input = TextInput(accessibilityLabel: "Text input", usesTextFieldPaddingsForHeight: true)
                                                            input.titleLabel.text = "Title"
                                                            input.helperLabel.text = "Helper text"
                                                            input.errorImage = UIImage(named: DesignSystem.Assets.icError, in: .design, compatibleWith: nil)
                                                            DesignSystem.shared.styles.textInput(input)
                                                            input.textField.accessibilityLabel = "defaultTextInput"
                                                            return input
                                                        }()