### Complete SCSS Component Example with Tokens and Mixins

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

A comprehensive example of a Backpack component ('bpk-my-component') utilizing SCSS. It demonstrates the integration of color tokens, spacing functions, border-radius functions, box-shadow functions, and typography mixins for different states and variations. It imports necessary modules from '../../bpk-mixins/tokens' and '../../bpk-mixins/typography'.

```scss
@use '../../bpk-mixins/tokens';
@use '../../bpk-mixins/typography';

.bpk-my-component {
  display: flex;
  flex-direction: column;
  padding: tokens.bpk-spacing-base();
  background-color: tokens.$bpk-canvas-day;
  border-radius: tokens.bpk-border-radius-md();
  border: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day;
  box-shadow: tokens.bpk-box-shadow-sm();

  &__title {
    @include typography.bpk-heading-3;
    color: tokens.$bpk-text-primary-day;
    margin-bottom: tokens.bpk-spacing-sm();
  }

  &__body {
    @include typography.bpk-body-default;
    color: tokens.$bpk-text-secondary-day;
    margin-bottom: tokens.bpk-spacing-base();
  }

  &__link {
    @include typography.bpk-link;
    @include typography.bpk-link-underlined;
  }

  &--compact {
    padding: tokens.bpk-spacing-sm();

    .bpk-my-component__title {
      @include typography.bpk-heading-4;
    }

    .bpk-my-component__body {
      @include typography.bpk-caption;
    }
  }
}
```

--------------------------------

### Development Commands - Bash

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Essential npm commands for Backpack development workflow. Includes dependency installation, package building, testing with Jest, Storybook development server, code linting, and TypeScript type checking.

```Bash
# Install dependencies
npm install

# Build all packages
npm run build

# Run tests
npm test

# Run Storybook
npm run storybook

# Lint code
npm run lint

# Type check
npm run typecheck
```

--------------------------------

### Basic BpkCardList Example in JavaScript

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-card-list/README.md

Demonstrates the fundamental usage of the BpkCardList component. It requires the BpkCardList and LAYOUTS from the backpack-web library. This example shows how to configure title, description, button, card content, and layout for desktop and mobile.

```javascript
import BpkCardList,
{
  LAYOUTS,
} from '@skyscanner/backpack-web/bpk-component-card-list';

export default () => (
  <BpkCardList
    title="We think you’ll like"
    description="Check out these destinations for a spring getaway"
    buttonContent="Click me"
    buttonHref="https://www.skyscanner.net" // without this, it's a <button>
    cardList={
      [
        <div key="1">Card 1</div>,
        <div key="2">Card 2</div>,
        <div key="3">Card 3</div>,
      ]
    }
    layoutDesktop={LAYOUTS.grid}
    layoutMobile={LAYOUTS.stack}
  />
);
```

--------------------------------

### Import Backpack Components and Tokens

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Shows TypeScript imports for component modules and SCSS @use for token mixins. Essential for building applications with Backpack's design system. Requires Backpack package installation; outputs integrated components or styles. Limitations include dependency on specific package versions.

```typescript
// Component imports
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
```

```scss
// Token imports
@use '@skyscanner/backpack-web/bpk-mixins/tokens';
```

--------------------------------

### React Popover Example

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-popover/README.md

Demonstrates using the BPKPopover component in a React application.  This example showcases opening and closing the popover using state and button clicks and setting up the target element.

```javascript
import { createRef } from 'react';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
import BpkText from '@skyscanner/backpack-web/bpk-component-text';

class App extends Component {
  constructor() {
    super();

    this.ref = createRef();
    this.state = {
      isOpen: false,
    };

  }

  openPopover = () => {
    this.setState({
      isOpen: true,
    });
  }

  closePopover = () => {
    this.setState({
      isOpen: false,
    });
  }

  const target = (
    <div ref={this.ref} className={'my-popover-target'}>
      <BpkButton
        onClick={this.openPopover}>
          Open
      </BpkButton>
    </div>
  )

  render() {
    return (
      <div id="popover-container">
        <BpkPopover
          id="my-popover"
          target={target}
          onClose={this.closePopover}
          isOpen={this.state.isOpen}
          label="My popover"
          closeButtonLabel="Close"
          closeButtonProps={{
            tabIndex: 0,
          }}
        >
          <BpkText>My popover content</BpkText>
        </BpkPopover>
      </div>
    );
  }
}
```

--------------------------------

### Implement overlay with Backpack component

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-overlay/README.md

Demonstrates how to use the BpkOverlay component from the Backpack design system. Shows basic usage with tint, invisible tint, and foreground content examples. Requires @skyscanner/backpack-web package.

```jsx
import BpkText from '@skyscanner/backpack-web/bpk-component-text';
import BpkOverlay, { OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';

export default () => (
  <div>
    { /* Basic example with tint */}
    <BpkOverlay
      overlayType={OVERLAY_TYPES.solidLow}
    >
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With the tint invisible */}
    <BpkOverlay>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With foreground content */}
    <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
      <BpkImage
        altText="altText here"
        aspectRatio={16}
        src="" />
    </BpkOverlay>
  </div>
);
```

--------------------------------

### Design Token Architecture - SCSS

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Centralized design token architecture in Backpack. Shows how to forward tokens from the foundations package and implement the token system for consistent design system values.

```SCSS
@forward '@skyscanner/bpk-foundations-web/tokens/base.default';
```

--------------------------------

### React Button Component Usage

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-button/docs/button-v1-readme.md

Demonstrates how to use the Backpack button component in a React application. Includes examples of different button styles and sizes. Requires @skyscanner/backpack-web dependencies.

```javascript
import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));

export default () => (
  <div>
    <BpkButton>Primary</BpkButton>
    <BpkButton large>Large primary</BpkButton>
    <BpkButton secondary>Secondary</BpkButton>
    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
    <BpkButton link>Link</BpkButton>
    <BpkButton linkOnDark>LinkOnDark</BpkButton>
    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
    <BpkButton iconOnly>
      <AlignedArrowIcon />
      <span className="visually-hidden">Search</span>
    </BpkButton>
  </div>
);
```

--------------------------------

### Transition component's initial mount with TransitionInitialMount in React

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-react-utils/README.md

This utility wraps `react-transition-group` to simplify transitioning a component's initial mount. It requires `appearClassName`, `appearActiveClassName`, and `transitionTimeout` props to define the animation. The example shows how to apply appear and appear-active classes for a fade-in effect.

```javascript
import { TransitionInitialMount } from '@skyscanner/backpack-web/bpk-react-utils';

const MyComponent = (props) => (
  <TransitionInitialMount
    appearClassName="my-transition-class--appear"
    appearActiveClassName="my-transition-class--appear-active"
    transitionTimeout={300}
  >
    <div>Some text.</div>
  </TransitionInitialMount>
);

```

```scss
@import '~@skyscanner/backpack-web/bpk-mixins/index.scss';

.my-transition-class {
  transition: opacity $bpk-duration-sm ease-in-out;
  opacity: 1;

  &--appear {
    opacity: 0;
  }

  &--appear-active {
    opacity: 1;
  }
}

```

--------------------------------

### Basic Link Usage with Anchor and Button Tags (JavaScript)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-link/README.md

Demonstrates how to import and use BpkLink and BpkButtonLink components from the Backpack UI library. These components can be rendered as standard anchor tags or button tags, respectively. Ensure the '@skyscanner/backpack-web/bpk-component-link' module is installed.

```javascript
import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';

export default () => (
  <div>
    Links can be both <BpkLink href="http://www.skyscanner.net/">anchor tags</BpkLink> as well
    as <BpkButtonLink onClick={() => console.log('link button click!')}>button tags</BpkButtonLink>.
  </div>
)
```

--------------------------------

### Using Backpack Skeleton Component in JavaScript

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-skeleton/README.md

This snippet shows how to import and render the Backpack skeleton component in a React application using JSX. It requires the 'bpk-component-skeleton' package and accepts props for type, size, and style to display image and text placeholders. The example outputs a div with two skeleton elements; limitations include dependency on Backpack's React setup.

```javascript
import BpkSkeleton, {
  SKELETON_TYPES,
  SIZE_TYPES, 
  IMAGE_SKELETON_STYLE 
} from '../../packages/bpk-component-skeleton';

export default () => (
  <div>
    <BpkSkeleton type={SKELETON_TYPES.image} size={{width: '7rem', height: '6rem'}} style={IMAGE_SKELETON_STYLE.rounded} />
    <BpkSkeleton type={SKELETON_TYPES.bodyText} size={SIZE_TYPES.small} />
  </div>
);

```

--------------------------------

### React Bottom Sheet Example

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-bottom-sheet/README.md

This example demonstrates how to implement a bottom sheet using the BpkBottomSheet component in React. It includes opening and closing the bottom sheet via a button and customizing its content and appearance.

```javascript
import { Component } from 'react';
import BpkBottomSheet, { PADDING_TYPE } from '@skyscanner/backpack-web/bpk-component-bottom-sheet';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

class App extends Component {\n  constructor() {\n    super();\n    this.state = {\n      isOpen: false,\n    };\n  }\n
  onOpen = () => {\n    this.setState({\n      isOpen: true,\n    });\n  };\n
  onClose = () => {\n    this.setState({\n      isOpen: false,\n    });\n  };\n
  render() {\n    return (\n      <div id="bottom-sheet-container">\n        <div id="pagewrap">\n          <BpkButton onClick={this.onOpen}>Open bottom sheet</BpkButton>\n        </div>\n        <BpkBottomSheet\n          id="my-bottom-sheet"\n          isOpen={this.state.isOpen}\n          onClose={this.onClose}\n          title="Bottom sheet title"\n          closeLabel="Close bottom sheet"\n          getApplicationElement={() => document.getElementById('pagewrap')}\n          renderTarget={() => document.getElementById('bottom-sheet-container')}\n        >\n          This is a bottom sheet. You can put anything you want in here.\n        </BpkBottomSheet>\n      </div>\n    );\n  }\n}
```

--------------------------------

### Correct Sass Mixin Import (Modern API)

Source: https://github.com/skyscanner/backpack/blob/main/decisions/modern-sass-api.md

Illustrates the recommended way to import Sass mixins using the modern API's `@use` rule. This example shows granular importing of the 'tokens' partial from 'bpk-mixins', promoting better modularity and build performance.

```scss
// BpkAwesomeComponent.module.scss
@use '../bpk-mixins/tokens';

.bpk-awesome-component {
  margin-right: tokens.bpk-spacing-md();
}
```

--------------------------------

### Component Development Patterns - TypeScript & SCSS

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Standard prop interface patterns for TypeScript React components and SCSS styling with design tokens. Defines common prop patterns including children, className, onClick, and component-specific props. SCSS architecture shows how to import tokens and typography mixins for consistent styling across the Backpack design system.

```TypeScript
// Standard prop patterns
interface BpkComponentProps {
  children?: React.ReactNode;
  className?: string;
  onClick?: (event: React.MouseEvent) => void;
  // ... component-specific props
}
```

```SCSS
@use '../../bpk-mixins/tokens';
@use '../../bpk-mixins/typography';

.my-component {
  // Size-based typography
  &__small-text {
    @include typography.bpk-text-xs;    // Extra small
    @include typography.bpk-text-sm;    // Small
    @include typography.bpk-text-base;  // Base/default
    @include typography.bpk-text-lg;    // Large
    @include typography.bpk-text-xl;    // Extra large
    @include typography.bpk-text-xxl;   // 2x large
    @include typography.bpk-text-xxxl;  // 3x large
  }
}
```

--------------------------------

### BpkDataTable Column Migration (JS)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-datatable/docs/migrating.md

Demonstrates the migration of BpkDataTable configuration from using BpkDataTableColumn children to the new 'columns' prop array. This change simplifies column definition and introduces new prop names.

```javascript
export default () => (
  <BpkDataTable rows={rows} height={"12.5rem"} onRowClick={onRowClick}>
    <BpkDataTableColumn
      label={'Name'}
      dataKey={'name'}
      width={"6.25rem"}
      disableSort
    />
    <BpkDataTableColumn
      label={'Description'}
      dataKey={'description'}
      width={"6.25rem"}
      flexGrow={1}
    />
  </BpkDataTable>
);

```

```javascript
export default () => (
  <BpkDataTable
    rows={rows}
    height={"12.5rem"}
    onRowClick={onRowClick}
    columns={[
      {
        label: 'name',
        accessor: 'name',
        width: '6.25rem',
        disableSortBy: true
      },
      ...
    ]}
    />
);

```

--------------------------------

### React Split Input Component Usage

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-split-input/README.md

Demonstrates how to import and use the BpkSplitInput component in a React application. It shows basic configuration with input type, name, ID, label, and event handlers for onChange and onSubmit. Assumes the Backpack-web library is installed.

```javascript
import BpkSplitInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-split-input';

export default () => (
  <BpkSplitInput
    type={INPUT_TYPES.number}
    name="otpInput"
    id="otpInput"
    label="otp input"
    onChange={(e) => console.log('On Input Change')}
    onSubmit={(e) => console.log('On Submit')}
  />
);
```

--------------------------------

### React Fieldset Usage with Input

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-fieldset/README.md

Demonstrates how to use the BpkFieldset component in a React application. It requires React and the Backpack web components for input and fieldset. The example shows how to manage input state and display validation messages.

```jsx
import { Component } from 'react';
import BpkFieldset from '@skyscanner/backpack-web/bpk-component-fieldset';
import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';

class FieldsetContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
    };

  }

  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const isValid = this.state.value !== '';

    return (
      <BpkFieldset
        label="Name"
        validationMessage="Please enter a name"
      >
        <BpkInput
          id="name_input"
          name="name"
          type={INPUT_TYPES.text}
          placeholder="e.g. Joe Bloggs"
          value={this.state.value}
          valid={isValid}
        />
      </BpkFieldset>
    );
  }
}

```

--------------------------------

### SCSS Spacing Tokens (Function-based) for Components

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Illustrates how to use Skyscanner's Backpack SCSS spacing functions to apply consistent padding, margins, and gaps. These functions return values in 'rem' units, promoting scalable and accessible spacing. They are imported from a 'tokens' SCSS module and support single or multiple value assignments.

```scss
.my-component {
  // Spacing functions return values in rem
  padding: tokens.bpk-spacing-base();     // 1rem (16px)
  margin: tokens.bpk-spacing-lg();        // 1.5rem (24px)
  gap: tokens.bpk-spacing-sm();           // 0.5rem (8px)

  // Multiple values
  padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-base();
  margin: tokens.bpk-spacing-md() 0;

  // Full spacing scale
  padding: tokens.bpk-spacing-none();     // 0
  padding: tokens.bpk-spacing-sm();       // 0.5rem
  padding: tokens.bpk-spacing-base();     // 1rem
  padding: tokens.bpk-spacing-md();       // 1.25rem
  padding: tokens.bpk-spacing-lg();       // 1.5rem
  padding: tokens.bpk-spacing-xl();       // 2rem
}
```

--------------------------------

### BpkInput with Open Events for Popovers

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-input/README.md

Illustrates how to use the `withOpenEvents` higher-order component to integrate the BpkInput component with a BpkPopover. This pattern is useful for creating interactive inputs that trigger popovers or modals. The example shows managing the popover's open state and handling open/close events, written in JavaScript with React.

```javascript
import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';

const EnhancedInput = withOpenEvents(BpkInput);

export default () => {
  constructor() {
    super();

    this.state = { isOpen: false };
  }

  onOpen = () => {
    this.setState({ isOpen: true });
  }

  onClose = () => {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <BpkPopover
        id="popover"
        target={
          <EnhancedInput
            id="input"
            value="An input?"
            isOpen={this.state.isOpen}
            onOpen={this.onOpen}
            onChange={() => null}
          />
        }
        onClose={this.onClose}
        isOpen={this.state.isOpen}
        label="Popover"
        closeButtonText="Close"
      >
        A popover!
      </BpkPopover>
    );
  }
}
```

--------------------------------

### React BpkConfigurableNudger Component Usage

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-nudger/README.md

Illustrates the use of the `BpkConfigurableNudger` component in React, which allows for custom value increments, decrements, comparisons, and formatting beyond simple numerical ranges. It requires `react`, `@skyscanner/backpack-web/bpk-component-label`, and `@skyscanner/backpack-web/bpk-component-nudger`. This example shows configuration for selectable travel classes.

```javascript
import { Component } from 'react';
import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
import { BpkConfigurableNudger } from '@skyscanner/backpack-web/bpk-component-nudger';

const options = ['economy', 'premium', 'business', 'first'];

const compareValues = (value1, value2) => {
    const [aIndex, bIndex] = [options.indexOf(value1), options.indexOf(value2)];
    return aIndex - bIndex;
  };

const incrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) + 1];
    return options[aIndex];
  };

const decrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) - 1];
    return options[aIndex];
  };

const formatValue = currentValue => currentValue.toString();

class App extends Component {
  constructor() {
    super();

    this.state = {
      value: 1,
    };
  }

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    return (
      <div>
        <BpkLabel htmlFor="nudger">Number of passengers</BpkLabel>
        <BpkConfigurableNudger
          id="nudger"
          min="economy"
          max="first"
          value={this.state.value}
          onChange={this.handleChange}
          decreaseButtonLabel="Decrease"
          increaseButtonLabel="Increase"
          compareValues={compareValues}
          incrementValue={incrementValue}
          decrementValue={decrementValue}
          formatValue={formatValue}
        />
      </div>
    );
  }
}
```

--------------------------------

### Using BpkTooltip Component (JavaScript/React)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-tooltip/README.md

Demonstrates how to use the BpkTooltip component from the Skyscanner Backpack design system. The component requires a target element, which can be created using React refs and JSX. It accepts props like ariaLabel for accessibility, id for unique identification, and target for the element to attach the tooltip to. The example shows a complete implementation with text display inside the tooltip.

```javascript
import { useRef } from 'react';
import BpkText from '@skyscanner/backpack-web/bpk-component-text';
import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';

const App = () => (
  const targetRef = useRef(null);
  const target = (
    <div ref={targetRef} className={'my-tooltip-target'}>
      <BpkText textStyle="lg">LHR</BpkText>
    </div>
  );

  <BpkTooltip
    ariaLabel="London Heathrow"
    id="my-tooltip"
    target={target}
  >
    London Heathrow
  </BpkTooltip>
);
```

--------------------------------

### SCSS Color Tokens for Components

Source: https://github.com/skyscanner/backpack/blob/main/AGENTS.md

Demonstrates the usage of Skyscanner's Backpack SCSS color tokens for various UI elements like text, backgrounds, borders, and brands. These tokens provide semantic naming for colors, ensuring consistency across the application. They are typically imported from a 'tokens' SCSS module.

```scss
.my-component {
  // Text colors
  color: tokens.$bpk-text-primary-day;
  color: tokens.$bpk-text-secondary-day;
  color: tokens.$bpk-text-disabled-day;
  color: tokens.$bpk-text-on-dark-day;

  // Background colors
  background-color: tokens.$bpk-canvas-day;
  background-color: tokens.$bpk-canvas-contrast-day;
  background-color: tokens.$bpk-surface-highlight-day;

  // Brand colors
  background-color: tokens.$bpk-core-primary-day;
  background-color: tokens.$bpk-core-accent-day;

  // Border colors
  border-color: tokens.$bpk-line-day;
  border-color: tokens.$bpk-line-on-dark-day;
}
```

--------------------------------

### Combined Lazy Loading and Loading Behavior HOCs for BpkImage in React

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-image/README.md

Demonstrates combining both `withLazyLoading` and `withLoadingBehavior` HOCs for the `BpkImage` component. This creates an image that is lazily loaded and displays a spinner while loading, providing a seamless user experience. The example correctly handles SSR compatibility.

```javascript
import BpkImage, { withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
import { breakpointDesktop, breakpointTablet } from '@skyscanner/backpack-foundations-web/tokens/base.es6';

const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingLazyLoadedImage = withLoadingBehavior(withLazyLoading(BpkImage, documentIfExists));

export default () => (
  <FadingLazyLoadedImage
    altText="image description"
    aspectRatio={816 / 544}
    src="./path/to/image_1640.jpg"
  />
);
```

--------------------------------

### Apply Theme with BpkThemeProvider - JavaScript/React

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-theming/README.md

Demonstrates how to wrap Backpack components with BpkThemeProvider to apply custom themes. The example shows creating a link theme with specific colors for different states (default, hover, active, visited) and applying it to BpkLink component. Requires @skyscanner/backpack-web/bpk-theming and @skyscanner/backpack-web/bpk-component-link packages. The theme object contains color properties and must be combined with appropriate themeAttributes for the target component.

```javascript
import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';

import BpkLink, { themeAttributes as linkThemeAttributes } from '@skyscanner/backpack-web/bpk-component-link';

const theme = {
  linkColor: '#c00',
  linkneapolis MN 55402,
  United States
```

--------------------------------

### Implement BpkSlider with dual range values

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-slider/README.md

Example usage of the BpkSlider component showing how to create a dual-thumb range slider with minimum and maximum values, step configuration, change event handling, and ARIA labeling. The slider supports input type 'range' and 'number' events, with change events firing on mouseup/click for mouse interactions and keyup for keyboard interactions.

```javascript
import { Component } from 'react';
import BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';

const Slider = () => (
  <BpkSlider
    min={0}
    max={100}
    value={[20, 80]}
    step={10}
    onChange={(value) => alert('Actual value: ' + value)}
    ariaLabel={['min', 'max']}
  />
);
```

--------------------------------

### Implementing Autosuggest for Office Suggestions in React

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-autosuggest/README.md

This React component example demonstrates using BpkAutosuggest to filter and display office suggestions based on user input. It relies on Backpack components like BpkLabel, BpkAutosuggestSuggestion, and icons; inputs include user-typed values and props like suggestions array, outputs render filtered suggestions with names, codes, and countries. Limitations include client-side filtering and dependency on Backpack's RTL support for icons.

```javascript
import { Component } from 'react';
import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';
import BpkAutosuggest, { BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';

const BpkFlightIcon = withRtlSupport(FlightIcon);

const offices = [
  {
    name: 'Barcelona',
    code: 'BCN',
    country: 'Spain',
  },
  ...
];

const getSuggestions = (value) => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : offices.filter(office =>
    office.name.toLowerCase().indexOf(inputValue) !== -1,
  );
};

const getSuggestionValue = ({ name, code }) => `${name} (${code})`;

const renderSuggestion = suggestion => (
  <BpkAutosuggestSuggestion
    value={getSuggestionValue(suggestion)}
    subHeading={suggestion.country}
    tertiaryLabel="Airport"
    indent={suggestion.indent}
    icon={BpkFlightIcon}
  />
);

class MyComponent extends Component {
  constructor() {
    super();

    this.state = {
      value: '',
      suggestions: [],
    };

  }

  onChange = (e, { newValue }) => {
    this.setState({
      value: newValue,
    });
  }

  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value),
    });
  }

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: [],
    });
  }

  render() {
    const { value, suggestions } = this.state;

    const inputProps = {
      id: 'my-autosuggest',
      name: 'my-autosuggest',
      placeholder: 'Enter an office name',
      value,
      onChange: this.onChange,
    };

    return (
      <div>
        <BpkLabel htmlFor="my-autosuggest">Office</BpkLabel>
        <BpkAutosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          inputProps={inputProps}
        />
      </div>
    );
  }
}
```

--------------------------------

### React Bottom Sheet Padding Configuration

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-bottom-sheet/README.md

This example shows how to override the default padding styles for the BpkBottomSheet component in React, allowing for customization of top, bottom, start, and end padding.

```javascript
  <BpkBottomSheet\n    {...properties}\n    paddingStyles={{ \n      top: PADDING_TYPE.base,\n      start: PADDING_TYPE.lg,\n      end: PADDING_TYPE.xxl,\n      bottom: PADDING_TYPE.xxl\n    }}\n  >\n
```

```javascript
  <BpkBottomSheet\n    {...properties}\n    paddingStyles={{ \n      top: PADDING_TYPE.lg,\n    }}\n  >\n
```

--------------------------------

### React Chip Component Usage

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-chip/README.md

Demonstrates how to import and use different types of Backpack chip components in a React application. Includes examples for selectable, dismissible, dropdown, and icon chips, with and without leading accessories. Assumes Backpack UI library is installed.

```tsx
import BpkSelectableChip,
  BpkDismissibleChip,
  BpkDropdownChip,
  BpkIconChip,
  CHIP_TYPES,
} from '@skyscanner/backpack-web/bpk-component-chip';
import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';

export default () => (
  <div style={{ display: 'flex' }}>
    {' '}
    // IMPORTANT: Flex styles make sure chips align with each other // Standard selectable
    chip.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => {
        /* Use state to set 'selected={true}' */
      }}
    >
      Toggle me
    </BpkSelectableChip>
    // Selectable chip with an icon.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => {
        /* Use state to set 'selected={true}' */
      }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Toggle me
    </BpkSelectableChip>
    // Standard dropdown chip.
    <BpkDropdownChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => {
        /* Use state to set 'selected={true}' */
      }}
    >
      Toggle me
    </BpkDropdownChip>
    // Dropdown chip with an icon.
    <BpkDropdownChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => {
        /* Use state to set 'selected={true}' */
      }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Toggle me
    </BpkDropdownChip>
    // Standard dismissible chip.
    <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => {
        /* Use state to handle removing this chip. */
      }}
    >
      Dismiss me
    </BpkDismissibleChip>
    // Dismissible chip with an icon.
    <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => {
        /* Use state to handle removing this chip. */
      }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Dismiss me
    </BpkDismissibleChip>
    <BpkIconChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => {
        /* Use state to set 'selected={true}' */
      }}
      leadingAccessoryView={<BeachIconSm />}
    />
  </div>
);

```

--------------------------------

### Render Content Cards with TSX - Backpack

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-content-cards/README.md

Example of how to import and use the BpkContentCards component in a React application using TypeScript. It demonstrates how to pass a heading and an array of card objects, each with image, headline, description, and link properties. Assumes the Backpack UI library is installed.

```tsx
import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';

<BpkContentCards
    heading='Heading'
    cards=[
        {
            image: {
                url: 'http://skyscanner.net/card-1-image-link.jpg',
                alt: 'People surfing in the ocean',
            },
            headline: 'Card headline',
            description: 'Card description',
            href: 'http://skyscanner.net/card-1-cta-link.html',
        },
    ]
/>

export default () => <BpkContentCards />;
```

--------------------------------

### Use Action Utility (JavaScript)

Source: https://github.com/skyscanner/backpack/blob/main/examples/bpk-storybook-utils/README.md

The `action` utility logs actions, defaulting to `@storybook/addon-actions` if available, and falling back to `console.log` if not. This supports usage within and outside Storybook environments.

```javascript
import { action } from '@skyscanner/backpack-web/bpk-storybook-utils';

... 

action("Thing");
```

--------------------------------

### Create scrimmed portal with withScrimmedPortal

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-scrim-utils/README.md

Wraps a component in a React portal with a scrim, providing SSR/CSR compatibility. Includes isPortalReady prop to handle post-render operations like focus management.

```javascript
import { withScrimmedPortal } from '@skyscanner/backpack-web/bpk-scrim-utils';

const Box = props => {
  const dialogRef = useRef(null);
  const { isPortalReady, onClose } = props;

  useEffect(() => {
    if (isPortalReady) {
      dialogRef.current?.focus();
    }
  }, [isPortalReady]);

  return (
    <div>
      <BpkButton ref={dialogRef} onClick={onClose}>Close</BpkButton>
      Hello in a portal
    </div>
  );
};

const BoxWithScrimmedPortal = withScrimmedPortal(Box);
```

--------------------------------

### Render Floating Notification with Icon

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-floating-notification/README.md

Basic usage example showing how to render a floating notification with custom icon, call-to-action text, and handler. The component requires the @skyscanner/backpack-web package and supporting icon components.

```jsx
import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';

export default () => (
  <BpkFloatingNotification
    ctaText="View"
    icon={BpkIconHeart}
    onClick={() => {}}
    text="Killer Combo saved to New York and Miami 🎉"
  />
);
```

--------------------------------

### Use BpkDarkExampleWrapper (JavaScript)

Source: https://github.com/skyscanner/backpack/blob/main/examples/bpk-storybook-utils/README.md

The `BpkDarkExampleWrapper` component provides a dark background for displaying components that need it.  It's useful for components that have visual issues or display problems with light backgrounds.

```javascript
import { BpkDarkExampleWrapper } from '@skyscanner/backpack-web/bpk-storybook-utils';

... 

<BpkDarkExampleWrapper>
  <p style={{ color: 'white' }}>
    This white text is only visible on dark backgrounds.
  </p>
</BpkDarkExampleWrapper>
```

--------------------------------

### Implement Infinite Scroll with ArrayDataSource in JavaScript

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-infinite-scroll/README.md

Demonstrates how to use the `withInfiniteScroll` higher-order component with an `ArrayDataSource` to create a list that loads more items as the user scrolls. It includes examples of custom loading and 'see more' components.

```javascript
import PropTypes from 'prop-types';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkSpinner, { SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
import withInfiniteScroll, {
  ArrayDataSource,
} from '@skyscanner/backpack-web/bpk-component-infinite-scroll';

const SomeList = ({ elements }) => (
  <div id="list">
    {elements.map(element => (
      <div key={element} style={{ height: '50px' }}>
        {element}
      </div>
    ))}
  </div>
);

const elementsArray = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5',
  'element 6',
  'element 7',
  'element 8',
  'element 9',
  'element 10',
];

const CustomLoading = () => (
  <div>
    <BpkSpinner type={SPINNER_TYPES.primary} />
  </div>
);

const CustomSeeMore = ({ onSeeMoreClick }) => (
  <div>
    <BpkButton onClick={onSeeMoreClick}>See More</BpkButton>
  </div>
);

const InfiniteList = withInfiniteScroll(SomeList);
const dataSource = new ArrayDataSource(elementsArray);

export default () => (
  <InfiniteList
    dataSource={dataSource}
    renderLoadingComponent={CustomLoading}
    renderSeeMoreComponent={CustomSeeMore}
    seeMoreAfter={1}
  />
);
```

--------------------------------

### Basic Icon Usage with SCSS Styling

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-icon/README.md

Demonstrates how to import and use small and large flight and accessibility icons from the Backpack component library. It also shows how to apply custom SCSS styles for icon fill colors.

```javascript
import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';

import './icons.scss';

export default () => (
  <div>
    <BpkSmallFlightIcon className="abc-icon__flight" />
    <BpkLargeAccessibilityIcon className="abc-icon__a11y" />
  </div>
);
```

```scss
@import '~@skyscanner/backpack-web/bpk-mixins/index.scss';

.abc-icon__flight {
  fill: currentColor; // see https://css-tricks.com/currentcolor/
}

.abc-icon__a11y {
  fill: $bpk-color-sky-blue;
}
```

--------------------------------

### BpkDataTable Column Schema Definition (JS)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-datatable/docs/migrating.md

Defines the schema for the 'columns' prop in BpkDataTable v32. This object structure replaces the previous BpkDataTableColumn component, offering enhanced flexibility and new configuration options.

```javascript
{
  Header: function({disableSortBy, accessor, label}),
  accessor: string,
  Cell: function({rowData, rowIndex, accessor, columnIndex, cellData}),
  className: string,
  disableSortBy: boolean,
  defaultSortDirection: oneOf('ASC', 'DESC'),
  flexGrow: number,
  headerClassName: string,
  headerStyle: Object,
  label: string,
  minWidth: string,
  style: Object,
  width: string,
}

```

--------------------------------

### Migrate BpkPriceMarker: Original v1 Component

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-map/docs/migrating-from-v1-v2.md

This snippet shows the original implementation of the BpkPriceMarker component using v1.

```jsx
import { BpkPriceMarker } from '@skyscanner/backpack-web/bpk-component-map';

const MyComponent = () => (
  <BpkPriceMarker
    label="£120"
    position={{ latitude: 27.9881, longitude: 86.925 }}
    onClick={() => {
      console.log('Price marker pressed.');
    }}
    status={PRICE_MARKER_STATUSES.focused}
    disabled
  />
)
```

--------------------------------

### Import and use BpkLoadingButton in React

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-loading-button/README.md

Demonstrates how to import and use the BpkLoadingButton component with different configurations including primary, secondary, large, and icon-only buttons. Also shows how to integrate custom icons using withButtonAlignment and withRtlSupport.

```javascript
import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

const AlignedBaggageIcon = withButtonAlignment(withRtlSupport(BaggageIcon));
const icon = <AlignedBaggageIcon />;

export default () => (
  <div>
    <BpkLoadingButton>Primary</BpkLoadingButton>
    <BpkLoadingButton large>Large primary</BpkLoadingButton>
    <BpkLoadingButton secondary>Secondary</BpkLoadingButton>
    <BpkLoadingButton iconOnly>
      <span className="visually-hidden">Search</span>
    </BpkLoadingButton>
    <BpkLoadingButton icon={icon} iconDisabled={icon}>Custom Icon</BpkLoadingButton>
  </div>
);
```

--------------------------------

### React Usage of bpk-segmented-control

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-segmented-control/README.md

This code snippet demonstrates how to import and use the BpkSegmentedControl component in a React application. It shows the necessary props such as buttonContents, label, onItemClick, selectedIndex, and type. Ensure the component is installed correctly before use.

```javascript
import BpkSegmentedControl from '@skyscanner/backpack-web/bpk-component-segmented-control';

export default () => (
  <BpkSegmentedControl
  buttonContents={buttonContent}
  label='Trip type' // Accessible name, this should be localised
  onItemClick={() => {}}
  selectedIndex={1} // button selected on load
  type={SEGMENT_TYPES.SurfaceContrast}
  shadow
  />
)
```

--------------------------------

### Usage of BpkDrawer React Component

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-drawer/README.md

Demonstrates how to import and use the BpkDrawer component in a React application. It shows state management for opening and closing the drawer and how to integrate it with a button. Dependencies include React, BpkButton, and BpkDrawer from the Backpack UI library.

```javascript
import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
import { BpkButtonV2 as BpkButton } from '@skyscanner/backpack-web/bpk-component-button';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  render() {
    return (
      <div>
        <div id="pagewrap">
          <BpkButton onClick={() => setIsOpen(true)}>Open drawer</BpkButton>
        </div>
        <BpkDrawer
          id="my-drawer"
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Drawer title"
          closeLabel="Close drawer"
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          This is a drawer. You can put anything you want in here.
        </BpkDrawer>
      </div>
    );
  }
}
```

--------------------------------

### Import and Use BpkSectionHeader Component (JavaScript)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-section-header/README.md

Demonstrates how to import and use the BpkSectionHeader component in a React application. It takes a 'title' prop to display the section heading. Ensure you have the Backpack web components installed.

```javascript
import BpkSectionHeader from '@skyscanner/backpack-web/bpk-component-section-header';

export default () => (
  <BpkSectionHeader title="Section title" />
);
```

--------------------------------

### Render Content Based on Breakpoint Using BpkBreakpoint (JavaScript)

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-breakpoint/README.md

Demonstrates how to import BpkBreakpoint and BREAKPOINTS to render different JSX based on the current viewport. The component accepts a query prop and provides a render‑prop indicating active state. Useful for responsive UI components.

```JavaScript
import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';

export default () => (
  <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
    {isActive => (isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
  </BpkBreakpoint>

  <BpkBreakpoint query={POINTS.TABLET}>
    <span>Tablet viewport is active</span>
  </BpkBreakpoint>
);
```

--------------------------------

### Import and use BpkSwitch React component

Source: https://github.com/skyscanner/backpack/blob/main/packages/bpk-component-switch/README.md

Demonstrates importing and rendering the BpkSwitch component with different states. Shows usage of label and checked props. Requires the @skyscanner/backpack-web package.

```jsx
import BpkSwitch from '@skyscanner/backpack-web/bpk-component-switch';

export default () => (
  <div>
    <BpkSwitch label="Switched on" checked />
    <BpkSwitch label="Turned off" />
  </div>
)
```