One Design iOS Widgets

Introduced by TMB Bank by creating iOS Component based on user daily use activity to aim for Clean cut design and easy to use in Daily Transactions Do not use it for any commercials

Created by Primary Banking1 iOS
Last updated 23 Mar 2021

Systems Requirements

• iOS/ iPadOS version 10 or above
• Xcode 11 or above with Swift Package Manager

Use it wisely

Installation

Follow the instruction of adding Swift Package Manager by using url to TMB Local Git Repository https://bitbucket.tmbbank.local:7990/scm/one/oneapp-ios-widgets.git
than use version 0.0.14 - Next Major Follow the step until complete adding package to Project file

Dependency

iOS Widgets comes with 2 dependency below for now
NO NEED TO ADD to swift package manager

• SDWebImage version 5.1.0 - Next Major link
• Juanpe/SkeletonView version 1.7.0 - Next Major link

Components

iOS Widgets has been developed to response user’s behaviour by remaining clean but professional. Each of element uses depends on behaviour follow the TMB One Design Guideline. Now it has all these elements below

PrimaryButton

Inherit From UIButton. Remaining the same functionality and APIs

• PrimaryBigButton: Big rounded square button with logo on top of the title
• PrimaryLargeButton: The biggest mandatory refreshing orange button always use as the main action of each Views
• PrimaryMediumButton: Same like PrimaryLargeButton smaller size but not the smallest one
• PrimarySmallButton: The smallest button in PrimaryButton series

Usage

• Drag and Drop UIButton to the UIView than adjust width and height
• Go to Custom Class side view to Override UIButton Class
• Change it to PrimaryBigButton PrimaryLargeButton PrimaryMediumButton or PrimarySmallButton
• Change Module to iOSWidgets
• DONE!
  **Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh

SecondaryButton

Inherit From UIButton. Remaining the same functionality and APIs

• SecondaryLargeButton: The biggest secondary button always use as the second action of each Views
• SecondaryMediumButton: Same like SecondaryLargeButton but comes with image icon on the left/ right side of title not yet support
• SecondarySmallButton: The smallest button in SecondaryButton series comes with Image icon same as SecondaryMediumButton

Usage

• Drag and Drop UIButton to the UIView than adjust width and height
• Go to Custom Class side view to Override UIButton Class
• Change it to SecondaryLargeButton SecondaryMediumButton or SecondarySmallButton
• Change Module to iOSWidgets
• DONE!
  **Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh

GhostButton

Inherit From UIButton. Remaining the same functionality and APIs but comes with Dark Mode!

• GhostLargeButton: The biggest button with rounded border without background color
• GhostMediumButton: Same like GhostLargeButton but comes with image icon on the left/ right side of title not yet support
• GhostSmallButton: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton

Usage

• Drag and Drop UIButton to the UIView than adjust width and height
• Go to Custom Class side view to Override UIButton Class
• Change it to SecondaryLargeButton SecondaryMediumButton or SecondarySmallButton
• Change Module to iOSWidgets
• DONE!
• Can select Dark Mode from Interface builder or set it via Variable
  **Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh
  **Dark Mode always use with the hight color density background like Black , Grey or Navy

PrimaryPillsCategory

Series of rounded button support only one selection with horizontal scrollable view. Easy to use Inherit from UIView

Conforms PrimaryPillCategorySourceProtocol by

	func createPill(source: Pills) -> [String]?
	func sizeForItem(source: Pills, at index: Int) -> CGSize?
	func didSelected(source: Pills, item: String, index: Int)
	func didDeselected(source: Pills, item: String, index: Int)

Usage

• Drag and Drop UIView to the UIView than adjust width and height
• Go to Custom Class side view to Override UIButton Class
• Change it to SecondaryLargeButton SecondaryMediumButton or SecondarySmallButton
• Change Module to iOSWidgets
• Link element to ViewController and don’t forget to

    import iOSWidgets

• set source variable like this

    pillsSelection.source = self

• than make View Controller conform PrimaryPillCategorySourceProtocol by extension like this

extension OwnTransferViewController: PrimaryPillCategorySourceProtocol {
	func createPill(source: Pills) -> [String]? {
		return  [Array Of String Items]
	}
	func sizeForItem(source: Pills, at index: Int) -> CGSize? {
		[Size for each items, return nil to dynamic width 30px height]
		return CGSize() ?? nil
	}
	func didSelected(source: Pills, item: String, index: Int) {
		///Do something
	}
	func didDeselected(source: Pills, item: String, index: Int) {
		///Do something
	}
}

• You can customize the button font and item spacing by set these value

	pillsSelection.font = UIFont.system
	pillsSelection.spacing = 8.0
	pillsSelection.deselectable = true

PrimaryTextField

Inherit From UITextField. Remaining the same functionality and APIs but comes with theses! ps. support only single line

• icon image: set by .icon: UIImage
• folding Title: set by .title = "Input Here"
• action item: with .action() closure
• helping text with icon: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton
• error: support error by throw in the error that conforms PrimaryError
• counting label: not yet support

Usage

• Drag and Drop UIButton to the UIView than adjust width and height
• Go to Custom Class side view to Override UITextField Class
• Change it to PrimaryTextField
• Change Module to iOSWidgets
• Set and Design TextField’s attribute including the list above through Xcode Interface Builder
• DONE!

**Also can create programmatically in Code same as UITextField but beware of constraints of width and heigh

Error Handling

Create struct, class or enum that conforms PrimaryError like this

	protocol PrimaryError: Error {
		var description: String? { get}
	}

create Enum to conforms above by

	enum TransferValidationError: PrimaryError {
	    case amountIsNeeded
	    case insufficientAmount
	    case needToAccount
	    case noteIsTooLonge
    <span class="token keyword">var</span> description<span class="token punctuation">:</span> <span class="token builtin">String</span><span class="token operator">?</span> <span class="token punctuation">{</span>
        <span class="token keyword">switch</span> <span class="token keyword">self</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token punctuation">.</span>amountIsNeeded<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Please enter an amount."</span>
        <span class="token keyword">case</span> <span class="token punctuation">.</span>insufficientAmount<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Your account has insufficient funds for this transaction."</span>
        <span class="token keyword">case</span> <span class="token punctuation">.</span>needToAccount<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Please select destination account"</span>
        <span class="token keyword">case</span> <span class="token punctuation">.</span>noteIsTooLonge<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Note is too long"</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

That’s it! Now you’re ready…

PrimayTextView

Inherit From UITextView with the design but Remaining the same functionality and APIs. Support multiple lines with no scrollview but EXTEND THE HEIGHT! and last but not least also support PLACEHOLDERrrrrr

• icon image: set by .icon: UIImage
• folding Title: set by .title = "Input Here"
• placeholder: set by .placeholder = "This is optional"
• action item: with .action() closure
• helping text with icon: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton buggy
• error: support error by throw in the error that conforms PrimaryError same as PrimaryTextFields
• counting label: not yet support

Usage

• Drag and Drop UIButton to the UIView than adjust width and height
• Go to Custom Class side view to Override UITextView Class
• Change it to PrimaryTextView
• Change Module to iOSWidgets
• Set and Design TextField’s attribute including the list above through Xcode Interface Builder
• DONE!

**Also can create programmatically in Code same as UITextView but beware of constraints of width and heigh

ps. PrimaryTextFields and PrimaryTextView have the same mother

AccountCardsView

LoadableNib

TTBBaseDesign

TTBBaseBlueDesign
TTBBaseWhiteDesign