Getting Started

Setup your environment, get access to components, learn about accessibility and implementation.

With a javascript framework

When using a framework you can install the BAgel component library with:

npm install @britishairways-ent/bagel

Note: this will not work unless you have set up a GitHub personal access token with read:pakages scope enabled.

Angular

When using BAgel within an Angular project install the BAgel package as per the above instruction.

If you are using reactive forms in your project there is a interface package that maps BAgel's input events to work with Angular. This can be installed with the following.

npm install @britishairways-ent/angular-bagel-interface

More information on this package and how to use it can be found in the packages readme

React and Next.js

The following versions of React and Next.js support BAgel

React v19+
Next.js v15+

React v18 does has partial support but does not support events on web components. A full list of supported components can be found here

When using BAgel within a React or next.js project we recommend installing BAgel via our CDN version. (Our CDN version is currently under construction, but we do have an example version that you can use if you get in touch with us.)

This will allow you to use the web components as native html elements within your jsx templates.

If you would like typescript typings for your IDE simply install the BAgel package using npm install @britishairways-ent/bagel and then copy the types file from @britishairways-ent/bagel/dist/bagel-react-types/bagel-jsx-element-types.d.ts to the root of your project.

Events with React/Next.js

Events work the same in React and Next.js, except you need to prefix the event with `on`.

If you want to listen to click events on ba-button for example, the event that gets emitted is `baClick`. You should prefix this event with `on` so that it becomes `onbaClick` as shown below.

Example of using an event in React or Next.js

  <ba-button onbaClick={() => BaClickEventHandler()}>Submit</ba-button>

Please note that events on BAgel components are only supported in React v19+

Self hosting

If you prefer to self-host BAgel, you can follow these steps:

Clone the BAgel repository from GitHub: git clone https://github.com/BritishAirways-Ent/bagel.git
Build the BAgel library: npm run build
Once the build is complete, you can find the compiled BAgel library in the `dist` and `css` directories.
Include the BAgel library in your project by referencing the compiled JavaScript and CSS files.
You can now use BAgel components in your project by importing and using them as needed.

CDN

We're working on a cdn version, please get in touch if you want to use it.

Critical CSS

There is a critical css stylesheet which loads critical styles first to help prevent flashes of unstyled content.

To use the stylesheet simply copy the contents of the critical.css file within the BAgel package to a style tag in the head of your page

The stylesheet can be found at this path within the package node_modules/@britishairways-ent/bagel/css/ba.critical.css

Snippet to be included in the head of your page

  <head>
    <style>
      html:not(.hydrated)...
    </style>
  </head>

GitHub Actions

To use the BAgel package in your own build pipelines within GitHub Actions you need to request access.

To gain access simply send the BAgel team a message with the name of your repository and that you require GitHub Actions access, and one of the team will give your repository access.

Static assets

If you are using BAgel with a bundler such as webpack some of its assets will not get copied across to the correct directory

This is currently only an issue with ba-loading-page

To correct this simply copy the asset from within the BAgel package and move it to the public directory in your project.

Custom location for BAgel assets

If you would like to move the assets to a custom location you can do so by setting the BAGEL_ASSETS_PATH variable to the location where you have copied assets.

For example if you have copied the assets to a folder called `bagel-assets` in the root of your project you would set the variable like so in the head your page:

<head>
  <script>
    window.BAGEL_ASSETS_PATH = "www.yourdomain.com/bagel-assets"
  </cript>
</head>