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: 15th October 2018 (Week 42)

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

 

Component Design Specification Development Documentation
Alert message βœ… βœ… βœ… βœ… /Β βœ…
Button βœ… βœ… βœ… βœ… /Β βœ…
ButtonLink βœ… βœ… βœ… ⏳ /Β βœ…
Card βœ… βœ… βœ… βœ… /Β βœ…
CardExpandable βœ… βœ… ⏳ ETA: W41 –Β / –
Carrier Logo βœ… βœ… βœ… βœ… /Β βœ…
Checkbox βœ… βœ… βœ… ⏳ /Β βœ…
Radio button βœ… βœ… βœ… ⏳ /Β βœ…
Select βœ… βœ… βœ… ⏳ /Β βœ…
Input field βœ… βœ… βœ… ⏳ /Β βœ…
Input file βœ… βœ… βœ… ⏳ /Β βœ…
Textarea βœ… βœ… βœ… ⏳ /Β βœ…
Modal βœ… βœ… βœ… –Β /Β βœ…
Tile βœ… βœ… βœ… – / –
TileExpandable βœ… βœ… βœ… – / –
Loading ⏳ βœ… βœ… – /Β βœ…
Country select βœ… –Β / –
Phone input βœ… –Β / –
Table βœ… βœ… βœ… –Β /Β βœ…
Tooltip βœ… βœ… ⏳ ETA: W44 –Β / –
Tags βœ… –Β / –
List βœ… βœ… βœ… –Β / –
Tabs ⏳ –Β / –
Calendar view ⏳ –Β / –
Pagination ⏳ – / –
Breadcrumbs ⏳ – / –
Input group βœ… βœ… βœ… – / –
Badge βœ… βœ… βœ… – / –
Illustration βœ… βœ… βœ… – / –
Separator βœ… βœ… βœ… – / –
Button group βœ… βœ… βœ… – / –
Stack
(only dev)
βœ… βœ… – /Β βœ…
Portal
(only dev)
βœ… – /Β βœ…
Timeline ⏳ – / –
TripSegment βœ… βœ… ⏳ ETA: W43 – / –
Share button βœ… ⏳ – / –
Stopover arrow βœ… βœ… ⏳ ETA: W42 – / –
Service logo βœ… βœ… βœ… – /Β βœ…
TripSector ⏳ ⏳ ⏳ ETA: W43 – / –
RatingStars βœ… βœ… ⏳ ETA: W42 – / –
InputStepper βœ… βœ… ⏳ ETA: W42 – / –
ActionTabs ⏳ – / –
DestinationCard βœ… – / –
DestinationHeader βœ… – / –
Slider βœ… – / –

In consideration

Component Domains, that could use it
Toast message Booking, Search

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.