Orbit is a SwiftUI component library which provides developers the easiest possible way of building Kiwi.com’s products.
Orbit Mission
Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.
Orbit is an open-source design system created for specific needs of Kiwi.com and together with that – for needs of travel projects.
This library allows you to integrate the Orbit design system into your iOS SwiftUI project.
Requirements
- iOS 13
- Xcode 13
- Swift Package Manager
Installation
Add Orbit package to your project by adding the package dependency:
.package(name: "Orbit", url: "https://github.com/kiwicom/orbit-swiftui.git", .upToNextMajor(from: "0.8.0")),
Usage
- Import fonts that are used in orbit-components.
Font.registerOrbitFonts()
- Include any of our components in your project and use them.
HStack {
Text("Hello Orbit!")
Button("Continue")
}
You can also check the OrbitStorybookComponentsScreen
preview to see all supported components.
File structure and naming conventions
File structure and component names reflect the Orbit design system structure.
As some Orbit components already exist in standard SwiftUI library (Text
for example), Orbit components shadows them. In order to access standard component, a SwifUI.
prefix can be used.
Components
To use Orbit components in SwiftUI, import the Orbit
library and use the components using their matching Orbit name.
import Orbit
...
VStack(spacing: .medium) {
Heading("Messages", style: .title2)
Illustration(.mailbox)
Text("...<strong>...</strong>...<a href="...">here</a>.")
Button("Continue", style: .secondary)
}
Foundation
Most Foundation types and values are accessed using extensions on related types.
Spacing
Use Spacing
enum with CGFloat
extensions to access values.
VStack(spacing: .medium) {
...
}
.padding(.large)
Colors
Use Color
and UIColor
extensions to access values.
.foregroundColor(.cloudDarker)
Borders
Use BorderRadius
and BorderWidth
enums.
Typography
Use Font
and UIFont
extensions. Orbit components use the Orbit font automatically.