PashaKit contains native UIKit components aligned with Pasha Bank's design system.
- iOS 12.0+
- Swift 5.7
To integrate PashaKit, specify it as a dependency in your XCode project or Package.swift file:
dependencies: [
.package(url: "https://github.com/PB-Digital/PashaKit.git", exact: "1.0.0"),
],After the library has been added you can import the module to use it:
import PashaKitFollowing list of components are general purpose ones.
- PBUIButton
- PBUITextField
- PBRowView
- PBPaddingLabel
- PBGradientView
- PBContactRowView
- PBCardInputView
- PBAttentionView
- PBElevatedView
- PBSelectableRowView
Beside them, kit also includes more specific components which has been used in our mobile applications. These include
- PBTemplateView
- PBPaymentRowView
- PBCardRowView
- PBTransactionRowView
- PBSelectableCardView
- PBAccountSelectField
PashaKit has dependency from InputMask library for making textfield text to get formatted real-time based on predefined rules. At the moment it uses 6.1.0 version of InputMask.
PBUIButton is one of the fundamental component of library. It comes with 4 different styles:
- Plain - with clear background color
- Tinted - with pale background color
- Filled - with solid background color
- Outlined - with clear background color and solid border color
To use PBUIButton you can initialize and customize it as following:
import PashaKit
private lazy var button: PBUIButton = {
// If you didn't specify the style of button, it automatically sets its style as .filled
let button = PBUIButton(localizableTitle: "Filled", styleOfButton: .filled)
self.view.addSubview(button)
return button
}()Since PBUIButton is subclass of UIButton you are free to add button target to it. If you like working with gesture recognizers rather than targets, just set isUserInteractionEnabled value to true and start adding instructions.
PBUITextfield has 2 different styles:
- Rounded
- Underlined
To use PBUIButton you can initialize and customize it as following:
private lazy var textField: PBUITextField = {
// If you didn't specify the style of textfield, it automatically sets its style as rounded
let view = PBUITextField(style: .underlined)
view.placeholderText = "Card Number"
// Setting footer text beforehand, puts assigned text under border. It can be changed if
// you also did specify footer text invalid state. If yes, default footerlabel text gets
// replaced with invalid state's text and returns back to default state once its input is valid
view.footerLabelText = "Enter the 16 digits of card"
// Puts an image to the right side of the textfield
view.icon = UIImage(named: "ic_card_scaner_private")
// Right side image varies in their sizes. Based on your design choice, you can choose
// - small - 16x16
// - regular - 24x24
// - custom one
view.iconSize = .regular
// As specified abouve we are using input mask for masking textfield text real-time.
// In this example we just set the text format for displaying card number grouped
// into 4 numbered digits
view.maskFormat = "[0000] [0000] [0000] [0000]"
view.setKeyboardType(.decimalPad)
return view
}()PBRowView is a type of component which can be used as single view and also as table view cell.
Using it as a UITableViewCell cell just requires you to subclass table view cell and adding rowview as a subview to that cell. most of the time you can just make constraints equal to cell from all sides.
Usage
private lazy var rowView: PBRowView = {
let view = PBRowView()
// Layout preference allows you to swap order of subtitle and title texts.
// By default its value is 'titleFirst' which shows title text above subtitle
view.textLayoutPreference = .subtitleFirst
view.titleText = "Title"
view.subtitleText = "Subtitle"
// Left icon is just for setting the image or icon on the left side of row view.
view.leftIcon = UIImage(named: "image")
// Sets leftIcon's parent view shape.
// Right now it has 2 option:
// - circle
// - roundedRect(cornerRadius: CGFloat)
// If not setted explicitly leftIcon's parent view draws itself as a circle
view.leftIconStyle = .circle
// By default edge insets of icon is equal to zero from all sides.
// Use this property when you need smaller icon without changing size of parent view
view.leftIconContentInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
// By default left icon's parent view comes with pale gray color. If you have icon with clear background it can show unwanted results.
// For making the icon look as intented change this property's value
view.leftIconBackgroundColor = .clear
// The rightmost side of row view is for chevron icon. Change this property if you don't want chevron icon.
view.isChevronIconVisible = false
// Row view supports skeleton view. By calling this function it will show animated skeleton. Don't forget to call hideSkeletonAnimation()
view.showSkeletonAnimation()
return view
}()PBGradientView can be used as subview to any UIView with the help of setGradientBackground(gradientConfig: GradientBackgroundRepresentable) function. It fills your view's background with configured gradient view setup.
This property was used to display small gradient version of our customer's card in PBCardRowView component.
public func setData(card: PBCardRepresentable) {
self.balanceLabel.text = card.balance
self.descriptionLabel.text = card.displayName
self.issuerLogo.image = card.issuerLogoClear
self.cardImageView.setGradientBackground(gradientConfig: card.backgroundConfig)
}Contact row view is very similar component to row view. But the main difference between is their left icons and right view. On contact view left icon is a UILabel with rounded corners shaped as a circle with text. It gets the texts from the first letters of title and subtitle text. On the right side it shows the user's short card info. These include:
- card issuer logo
- last 4 digits of customer's card
private lazy var contactView: PBContactRowView = {
let view = PBContactRowView()
self.contentView.addSubview(view)
// By default contact row view shows card issuer logo and its last 4 digits on the right side. If you don't need this view just set showsCardInfo to false
view.showsCardInfo = false
// By default contact rowview has pale gray background color.
view.backgroundColor = .clear
// You can use this property to set the background color for circle UILabel which used for displaying the first letters of contact's for name and surname
view.shortLabelBackgroundColor = .systemBlue
return view
}()