Repository files navigation

Mistica is a framework that contains reusable UI components and utilities for the Telefonica Design System (Mistica)

• Installation
  • Swift Package Manager
  • Carthage
  • Cocoapods
• Configuration
• Fonts
• Components
• Demo app
• Contributing

This repo has contains three different packages:

• Mistica: It contains all the components of Mistica forUIKit.
• MisticaSwiftUI: It contains all the components of Mistica forSwiftUI.
• MisticaCommon: It contains all the common elements for both UIKit and SwiftUI implementation, including assets, colors and fonts. It is internal, so you won't need to import it in any case.

You can add Mistica to an Xcode project by adding it as a package dependency.

1. From theFile menu, selectSwift Package >Add Package Dependency.
2. Enter "https://github.com/Telefonica/mistica-ios" into the package repository URL text field.
3. From theAdd Package to App window, selectMisticaCommon andMistica orMisticaSwiftUI library.

You also can integrate Mitica to Swift Package, add the following as a dependency to yourPackage.swift:

.package(name:"Mistica", url:"https://github.com/Telefonica/mistica-ios.git",.from("2.0.0"))

and then specify"Mistica" or"MisticaSwiftUI" as dependencies of the target in which you wish to use Mistica.

Add Mistica to yourCartfile:

github "Telefonica/mistica-ios"

And then run:

carthage update --platform iOS --use-ssh --use-xcframeworks

More information about Carthage integrationhere

Add Mistica to yourPodfile:

pod 'MisticaSwiftUI', :git => 'git@github.com:Telefonica/mistica-ios.git'

or

pod 'Mistica', :git => 'git@github.com:Telefonica/mistica-ios.git'

And then run:

pod install

By default the framework components are created with the Movistar's brand style, to select a different one, configure the brand style:

MisticaConfig.brandStyle=.o2

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 theUIApplicationDelegate,

func application(_:UIApplication, didFinishLaunchingWithOptions _:[UIApplication.LaunchOptionsKey:Any]?)->Bool{    // Set up MisticaMisticaConfig.brandStyle=.vivoreturntrue}

For applications in iOS 13 and above, the initialization should be done in theSceneDelegate

func scene(_ scene:UIScene, willConnectTo _:UISceneSession, options _:UIScene.ConnectionOptions){guardlet windowScene=(sceneas?UIWindowScene)else{return}    // Configure brand style before initializing the UIMisticaConfig.brandStyle=.movistar}

Every component in mistica supports dark mode. In order to configure dark mode in you app, you can followApple guidelines.

By default mistica uses the system font, but if you need to use a custom font (Telefonica font, On-Air, etc) you can followthese instructions.

• Badge
• Button
• Cards
  • DataCard
  • [Not Implemented] PosterCard
  • MediaCard
  • HighlightedCard
• Checkbox
• Controls
• Snackbar
• EmptyState
• Feedbacks
• Filter
• Form
• Header
• InputFields
• Lists
• NavigationBar
• Popover
• RadioButton
• ScrollContentIndicator
• SectionTitle
• Stepper
• Switch
• Tabs
• Tag
• ViewStates

• Badge
• Button
• Cards
  • DataCard
  • PosterCard
  • [Not Implemented] MediaCard
  • [Not Implemented] HighlightedCard
• Checkbox
• Snackbar
• EmptyState
• Feedbacks
• [Not Implemented]Filter
• [Not Implemented]Header
• InputFields
• Lists
• Popover
• RadioButton
• ScrollContentIndicator
• SectionTitle
• Stepper
• Tabs
• Tag
• [Not Implemented]ViewStates

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 thislink or by using the following QR:

SeeCONTRIBUTING.md