Component status πŸš€

A detailed breakdown of our components and their current phases follows below. This component status reflects the state of our current UI components at Kiwi.com.

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

Components

Last update: 8th April 2019 (Week 15)

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

Component Design Specification React
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 βœ… βœ… βœ…
Tags βœ… βœ… βœ…
List βœ… βœ… βœ…
Tabs ⏳    
Calendar view ⏳    
Pagination βœ… ⏳ Β 
Breadcrumbs βœ… βœ… βœ…
Input group βœ… βœ… βœ…
Badge βœ… βœ… βœ…
Illustration βœ… βœ… βœ…
Separator βœ… βœ… βœ…
Button group βœ… βœ… βœ…
Timeline ⏳    
TripSegment βœ… βœ… βœ…
Share button βœ… ⏳ Β 
Stopover arrow βœ… βœ… βœ…
Service logo βœ… βœ… βœ…
TripSector ⏳ βœ… βœ…
RatingStars βœ… βœ… βœ…
InputStepper βœ… βœ… βœ…
ActionTabs ⏳    
DestinationCard βœ… βœ… βœ…
DestinationHeader βœ… βœ… βœ…
Slider βœ… Β  ⏳ ETA: W18
ListChoice βœ… βœ… βœ…
Stepper βœ… βœ… βœ…
Toast message ⏳    
ChoiceGroup βœ… βœ… βœ…
Popover βœ… βœ… βœ…
CalloutCard ⏳    
PasswordField βœ… ⏳ Β 
AccessibleMenu ⏳    

Utility components

Utility Specification React
Sticky βœ… βœ…
Hide Β  βœ…
FormControl ⏳ ⏳
Stack βœ… βœ…
Portal βœ…
Grid ⏳ ⏳
Layout ⏳  

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.