ba-flight-number
A simple component to show a customers flight number and the logo of the airline they are flying with.
Airframe
Web Components
React
React Native
Live Demo
<ba-flight-number name="british-airways" flight-number="BA 1234"></ba-flight-number>Guidelines
If ba-flight-number is used within ba-content the typography settings and size of the icon will be determined by the elenment it is nested in. For example if the component is nested withing a <h1> tag, then it will use the same typography settings as the <h1> element.
We currently only have icons that work correctly with white backgrounds. Do not use the other page-segment themes as the colour contrast ratio will not meet the wcag standards.
Accessibility
Screen readers may read out the flight number incorrectly. For example a flight number of BA 1234 may be read out as Ba one thousand two hundred and thirty four. This is by design as altering the text to be read of correctly for screen readers can hamper the accessibility of the component when trying to navigate through it. Also screen reader users are used to this kind of behaviour and can easily navigate through the text one character at a time if needed.
Code
Properties and Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
flightNumber(required) |
flight-number |
The flight number to show | string |
undefined |
name |
name |
Name of the icon to be shown | CarrierName | undefined |
'default' |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Parent components
ba-flight-number can be slotted into:
Usage
Basic usage
In most scenarios the flight-number will consist of a flight number and a icon
<ba-flight-number name="british-airways" flight-number="BA 1234"></ba-flight-number>
Using the fallback icon
If the airline does not have an icon available, simply do not provide the name prop to show a fallback icon.
Example
<ba-flight-number flight-number="BA 1234"></ba-flight-number>
If a name is provided that does not have a corresponding icon, or the image fails to load. The fallback icon will be shown
Example
<ba-flight-number name="unknown-icon" flight-number="BA 1234"></ba-flight-number>