Component status πŸš€

A detailed breakdown of our components and their current phases follows below. This component status reflects the state of our current UI at Kiwi.com. Development is critically dependant on the roadmap of the BLKN and FAQ projects.

The individual phases are not directly dependent on each other, the design part of documentation could be published before development.

Components

Last update: 3rd December 2018 (Week 49)

Legend:
βœ…Β (done), ⏳ (in progress)
ETA: Estimated release week

Component Design Specification React React Native
Alert message βœ… βœ… βœ…
Button βœ… βœ… βœ…  ⏳
ButtonLink βœ… βœ… βœ…  ⏳
Card βœ… βœ… βœ…  ⏳
Card expandable section βœ… βœ… βœ…
Carrier Logo βœ… βœ… βœ…
Checkbox βœ… βœ… βœ…
Radio button βœ… βœ… βœ…
Select βœ… βœ… βœ…
InputField βœ… βœ… βœ…  ⏳
InputFile βœ… βœ… βœ…
Textarea βœ… βœ… βœ…
Modal βœ… βœ… βœ…
Tile βœ… βœ… βœ…
TileExpandable βœ… βœ… βœ…
Loading βœ… βœ… βœ…
Country select βœ… ⏳
Phone input βœ… ⏳
Table βœ… βœ… βœ…
Tooltip βœ… βœ… ⏳ ETA: W12019
Tags βœ… βœ… βœ…
List βœ… βœ… βœ…
Tabs ⏳
Calendar view ⏳
Pagination ⏳
Breadcrumbs βœ… βœ… βœ…
Input group βœ… βœ… βœ…
Badge βœ… βœ… βœ…
Illustration βœ… βœ… βœ…
Separator βœ… βœ… βœ…
Button group βœ… βœ… βœ…
Stack
(only dev)
βœ… βœ…
Portal
(only dev)
βœ…
Timeline ⏳
TripSegment βœ… βœ… βœ…
Share button βœ… ⏳
Stopover arrow βœ… βœ… βœ…
Service logo βœ… βœ… βœ…
TripSector ⏳ βœ… βœ…
RatingStars βœ… βœ… βœ…
InputStepper βœ… βœ… βœ…
ActionTabs ⏳
DestinationCard βœ… βœ… ⏳ ETA: W50
DestinationHeader βœ… βœ… ⏳ ETA: W50
Slider βœ…
FormControl
(only dev)
⏳ ⏳
ListChoice βœ… βœ… βœ…
Stepper βœ… βœ… ⏳ ETA: W51
Dropdown ⏳ ⏳
Toast message ⏳
RadioGroup βœ… βœ… ⏳ ETA: W51
Hide
(only dev)
⏳ ETA: W51
Popover βœ… βœ… ⏳ ETA: W51
CalloutCard ⏳
PasswordField βœ… ⏳

Basic guidelines

Components Design Specification Development Documentation
Colors βœ… βœ… βœ… βœ… /βœ…
Typography
(Heading, Text)
βœ… βœ… βœ… βœ… /βœ…
Icons βœ… βœ… βœ… βœ… /βœ…
Design tokens
(Theming)
βœ… βœ… βœ… βœ… /Β βœ…
Layout / Spacing βœ… βœ… βœ… ⏳ / –
Shadows / Layers βœ… βœ… βœ… ⏳ / –

Explanation of each phase

  • Design – Component is placed intoΒ Orbit UI library
  • Specification – Detailed documentation what should be a function(s) of each component (and all variants)
  • Development – Implementation into Orbit Components
  • Documentation – (Design / Developer) Design documentation should contain guidelines on how to work with each component, developer documentation is an explanation of how to use a component.