BNG UI Kit

A comprehensive React component library for BNG web applications. This UI kit provides reusable, accessible, and well-tested components to ensure consistency across all BNG web projects.

Built on top of Skyscanner's Backpack Design System, providing a solid foundation of accessible, well-designed components.

Available Scripts

Build the library

npm run rollup

Publish the library

npm publish

Run tests

npm run test

Run storybook locally

npm run storybook

Build storybook

npm run build-storybook

Installation

Install the BNG UI Kit in your project:

npm install @bng/uikit

Usage

Import components from the BNG UI Kit:

import { Button, Input, Card, Select, Text, Spinner } from "@bng/uikit";

const MyApp = () => {
  return (
    <div>
      {/* Button */}
      <Button label="Click me" onClick={() => console.log("Button clicked!")} />

      {/* Input */}
      <Input
        id="email"
        name="email"
        type="email"
        placeholder="Enter your email"
        onChange={(e) => console.log("Email:", e.target.value)}
      />

      {/* Card */}
      <Card>
        <Text textStyle="lg">Card Title</Text>
        <Text>Card content goes here</Text>
      </Card>

      {/* Select */}
      <Select
        id="country"
        name="country"
        options={[
          { value: "", label: "Select a country" },
          { value: "us", label: "United States" },
          { value: "uk", label: "United Kingdom" },
        ]}
        onChange={(e) => console.log("Country:", e.target.value)}
      />

      {/* Text */}
      <Text textStyle="xl">Large Heading</Text>
      <Text>Regular paragraph text</Text>

      {/* Spinner */}
      <Spinner type="primary" />
    </div>
  );
};

Requirements

The BNG UI Kit is built on Skyscanner's Backpack Design System. Make sure to install the required peer dependencies:

npm install react react-dom @skyscanner/backpack-web

Components

The BNG UI Kit includes the following components built on Backpack:

• Button: Primary, secondary, destructive, and link button variants
• Input: Text input with validation states and multiple types (text, email, password, etc.)
• Card: Container component with padding options and click handlers
• Select: Dropdown select with options and validation states
• Text: Typography component with multiple text styles (xs, sm, base, lg, xl, xxl)
• Spinner: Loading spinner with primary, light, and dark variants

Features

• Built on Backpack: Components are built on Skyscanner's Backpack Design System for consistency and accessibility
• TypeScript Support: Full TypeScript definitions included
• Accessible: Components follow WCAG accessibility guidelines
• Tested: Comprehensive test coverage with Jest and React Testing Library
• Documented: Interactive component documentation with Storybook
• Styled: SCSS support for customizable styling
• Optimized: Minified bundles with tree-shaking support

Development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup

Clone the repository and install dependencies:

git clone <repository-url>
cd template-react-component-library
npm install

Building

Build the library:

npm run rollup

This will generate the distribution files in the dist directory.

Testing

Run the test suite:

npm run test

Storybook

View components in Storybook:

npm run storybook

Build Storybook for deployment:

npm run build-storybook

Contributing

Contributions are welcome! Please ensure that:

• All tests pass
• New components include tests
• Components are documented in Storybook
• Code follows the existing style guidelines

License

ISC