Mistica is a framework that contains reusable UI components and utilities for the Telefonica Design System (Mistica)
Instalation
Swift Package Manager
You can add Mistica to an Xcode project by adding it as a package dependency.
- From the File menu, select Swift Package > Add Package Dependency.
- Enter "https://github.com/Telefonica/mistica-ios" into the package repository URL text field.
- From the Add Package to App window, select Mistica library.
You also can integrate Mitica to Swift Package, add the following as a dependency to your Package.swift
:
.package(name: "Mistica", url: "https://github.com/Telefonica/mistica-ios.git", .from("2.0.0"))
and then specify "Mistica"
as a dependency of the Target in which you wish to use Mistica.
Carthage
Add Mistica to your Cartfile
:
github "Telefonica/mistica-ios"
And then run:
carthage update --platform iOS --use-ssh
More information about Carthage integration here
Cocoapods
Add Mistica to your Podfile
:
pod 'Mistica', :git => 'git@github.com:Telefonica/mistica-ios.git'
And then run:
pod install
Configuration
By default the framework components are created with the Movistar's brand style and the standard
theme variant, to select a different one, configure the brand style and/or variant:
MisticaConfig.brandStyle = .o2
MisticaConfig.themeVariant = .prominent
Remember to initialize Mistica with you desired brand style before the initialize the UI of your app.
In applications before iOS 13, the initialziation should be done in the UIApplicationDelegate,
func application(_: UIApplication, didFinishLaunchingWithOptions _: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Set up Mistica
MisticaConfig.brandStyle = .vivo
return true
}
For applications in iOS 13 and above, the initialization should be done in the SceneDelegate
func scene(_ scene: UIScene, willConnectTo _: UISceneSession, options _: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
// Configure brand style before initializing the UI
MisticaConfig.brandStyle = .movistar
}
Every component in mistica supports dark mode. In order to configure dark mode in you app, you can follow Apple guidelines.
Components
- Badge
- Button
- Cards
- Checkbox
- Controls
- Crouton
- Feedbacks
- Form
- Header
- InputFields
- Lists
- NavigationBar
- Popover
- RadioButton
- ScrollContentIndicator
- SectionTitle
- SegmentSelector
- Stepper
- Switch
- Tabs
- Tag
- ViewStates
Demo app
Included in this repository there's a demo app showcasing all implemented components. With each new release, a new version of the mistica catalog app is created. It can be installed with this link or by using the following QR:
Contributing
See CONTRIBUTING.md