### Get Help for Orbit Tracking

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-tracking/README.md

Run orbit-tracking --help to view a list of available options and examples.

```bash
orbit-tracking --help
```

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

### Default Theme Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/02-foundation/04-color/03-theming.mdx

Illustrates the default theme usage in a React component. No specific setup is required for this basic example.

```jsx
<ReactExample exampleId="Theme-default" />
```

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

### Integrate React Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/pages/mdx-examples.mdx

Embed interactive React examples directly into MDX using the ReactExample component, referencing a specific example by its ID.

```jsx
<ReactExample exampleId="Wizard-default" />
```

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

### Default Pagination Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/11-navigation/pagination/01-guidelines.mdx

A standard example of the Pagination component. Use this for basic pagination needs.

```javascript
import { Pagination } from "@kiwicom/orbit-components";

function Example() {
  return (
    <Pagination
      pageCount={10}
      selectedPage={3}
      onPageChange={action('onPageChange')}
    />
  );
}
```

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

### BadgeList Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/03-information/badgelist/01-guidelines.mdx

A default example of the BadgeList component.

```javascript
<BadgeList
  items={[
    {
      icon: 'airplane',
      label: 'Direct flight',
    },
    {
      icon: 'check',
      label: 'Guaranteed transfer',
      type: 'success',
    },
    {
      icon: 'info-circle',
      label: 'Baggage allowance',
      type: 'info',
    },
    {
      icon: 'warning-triangle',
      label: 'Potential delay',
      type: 'warning',
    },
    {
      icon: 'close',
      label: 'Flight cancelled',
      type: 'critical',
    },
  ]}
/>
```

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

### ButtonMobileStore Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/01-action/buttonmobilestore/01-guidelines.mdx

This is the default implementation of the ButtonMobileStore component. Use it to encourage app downloads and installations.

```jsx
<ReactExample exampleId="ButtonMobileStore-default" />
```

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

### Install Orbit Design Tokens via npm

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-design-tokens/README.md

Install the package into your project using npm.

```bash
npm install --save @kiwicom/orbit-design-tokens
```

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

### Badge Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/03-information/badge/01-guidelines.mdx

A basic example of the Badge component. Use this for general information display.

```jsx
<ReactExample exampleId="Badge-default" />
```

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

### Install Orbit Design Tokens via Yarn

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-design-tokens/README.md

Install the package into your project using Yarn.

```bash
yarn add @kiwicom/orbit-design-tokens
```

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

### Install Orbit Tailwind Preset with npm

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-tailwind-preset/README.md

Install the Orbit Tailwind preset as a development dependency using npm.

```bash
npm install --save-dev @kiwicom/orbit-tailwind-preset
```

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

### Install Orbit-components with npm

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/README.md

Add the orbit-components package to your project using npm.

```bash
npm install --save @kiwicom/orbit-components
```

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

### Default Switch Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/07-interaction/switch/01-guidelines.mdx

A basic example of the Switch component. Use for simple on/off toggles where the effect is immediate and clear.

```javascript
import { Switch } from '@kiwicom/orbit-components';

function Example() {
  return <Switch label="Enable feature" />;
}
```

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

### Install Orbit Tailwind Preset with Yarn

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-tailwind-preset/README.md

Install the Orbit Tailwind preset as a development dependency using yarn.

```bash
yarn add -D @kiwicom/orbit-tailwind-preset
```

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

### Import README Component

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/02-foundation/11-tailwind/01-installation.mdx

This import statement brings in the README component, which likely contains detailed installation instructions and usage examples.

```javascript
import README from "@kiwicom/orbit-tailwind-preset/README.md";
```

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

### Install Orbit Tracking with NPM or Yarn

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-tracking/README.md

Install the orbit-tracking package as a development dependency using either NPM or Yarn.

```bash
npm install --save-dev @kiwicom/orbit-tracking
```

```bash
yarn add -D @kiwicom/orbit-tracking
```

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

### Default Seat Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/08-visuals/seat/01-guidelines.mdx

Renders a default Seat component. No specific setup is required beyond importing the component.

```jsx
<ReactExample exampleId="Seat-default" />
```

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

### Default Drawer Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/drawer/01-guidelines.mdx

This is a basic example of a Drawer component. It's useful for displaying long content that needs to be kept out of sight initially.

```jsx
<ReactExample exampleId="Drawer-default" height={240} />
```

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

### InputGroup Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputgroup/01-guidelines.mdx

A default example of the InputGroup component.

```jsx
<InputGroup>
  <InputGroupItem>
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputField />
  </InputGroupItem>
</InputGroup>
```

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

### Table Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/02-structure/table/01-guidelines.mdx

A basic example of the Orbit Table component. Use this for presenting tabular information with a clear, repeating structure.

```javascript
<><TableLayout columns="2">
  <TableLayoutHeader>
    <TableLayoutHeaderCell>Baggage</TableLayoutHeaderCell>
    <TableLayoutHeaderCell>Availability</TableLayoutHeaderCell>
  </TableLayoutHeader>
  <TableLayoutRow>
    <TableLayoutCell>Carry on</TableLayoutCell>
    <TableLayoutCell>1</TableLayoutCell>
  </TableLayoutRow>
  <TableLayoutRow>
    <TableLayoutCell>Small bag</TableLayoutCell>
    <TableLayoutCell>1</TableLayoutCell>
  </TableLayoutRow>
  <TableLayoutRow>
    <TableLayoutCell>Checked baggage</TableLayoutCell>
    <TableLayoutCell>1</TableLayoutCell>
  </TableLayoutRow>
  <TableLayoutRow>
    <TableLayoutCell>Second checked baggage</TableLayoutCell>
    <TableLayoutCell>0</TableLayoutCell>
  </TableLayoutRow>
</TableLayout></>
```

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

### Default NavigationBar Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/11-navigation/navigationbar/01-guidelines.mdx

This is a default example of the NavigationBar component. Use it for top-level navigation and branding.

```jsx
<NavigationBar
  title="App Name"
  onBackClick={() => {}}
>
  <NavigationBar.Link href="#/">
    Home
  </NavigationBar.Link>
  <NavigationBar.Link href="#/">
    About
  </NavigationBar.Link>
  <NavigationBar.Link href="#/">
    Contact
  </NavigationBar.Link>
</NavigationBar>
```

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

### Input Field States Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputfield/01-guidelines.mdx

Illustrates various states of the InputField, such as error and help messages, to guide user input and provide feedback.

```javascript
<ReactExample exampleId="InputField-states" height={250} />
```

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

### Modal Title Examples (Do)

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/modal/01-guidelines.mdx

Examples of concise and action-oriented modal titles that set clear context for the user.

```text
Save payment card
Activate your plan
Priority Boarding
```

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

### Notification Badge Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/03-information/notificationbadge/01-guidelines.mdx

A basic example of the Notification Badge component.

```jsx
<NotificationBadge />
```

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

### Select Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/select/01-guidelines.mdx

A default Select component example. This is typically used when presenting many options where only one can be selected.

```javascript
<><Select label="Label" placeholder="Placeholder"> <Select.Option value="option1">Option 1</Select.Option> <Select.Option value="option2">Option 2</Select.Option> <Select.Option value="option3">Option 3</Select.Option> </Select></>
```

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

### Install Orbit-components with Yarn

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/README.md

Add the orbit-components package to your project using Yarn.

```bash
yarn add @kiwicom/orbit-components
```

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

### Search Layout Example

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Layout/README.md

Implement the Search layout, which consists of three columns for filters, main content, and promotion.

```jsx
import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";

const App = () => (
  <Layout type="Search">
    <LayoutColumn>The left SideBar for filters</LayoutColumn>
    <LayoutColumn>The main section for displaying the results</LayoutColumn>
    <LayoutColumn>The right SideBar for promotion</LayoutColumn>
  </Layout>
);
```

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

### Install ESLint Plugin

Source: https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/README.md

Install the plugin using npm or yarn. This command adds the package as a development dependency.

```sh
# npm
npm install @kiwicom/eslint-plugin-orbit-components --save-dev
```

```sh
# yarn
yarn add @kiwicom/eslint-plugin-orbit-components --dev
```

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

### Render Default Itinerary

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/02-structure/itinerary/01-guidelines.mdx

Use this example to render the default Itinerary component.

```jsx
<Itinerary defaultExpandable />
```

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

### Input Labels

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputgroup/01-guidelines.mdx

Example showing how to use labels within an InputGroup.

```jsx
<InputGroup label="Date of birth">
  <InputGroupItem>
    <InputLabel label="Day" />
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputLabel label="Month" />
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputLabel label="Year" />
    <InputField />
  </InputGroupItem>
</InputGroup>
```

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

### Textarea Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/textarea/01-guidelines.mdx

A basic example of a Textarea component. Use for collecting longer answers or detailed information from users.

```jsx
<Textarea label="Label" placeholder="Placeholder" />
```

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

### Install Orbit Design Tokens

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/02-foundation/05-design-tokens/02-installation.mdx

Install the design tokens package using npm or yarn. This is necessary if you are not using Orbit components, which include the tokens as a dependency.

```shell
# Using npm
npm install --save @kiwicom/orbit-design-tokens
```

```shell
# Using yarn
yarn add @kiwicom/orbit-design-tokens
```

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

### Input Help and Error Messages

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputgroup/01-guidelines.mdx

Example demonstrating how to apply help and error messages to an InputGroup.

```jsx
<InputGroup label="Departure" error="Select a date" help="Select a date of departure">
  <InputGroupItem>
    <InputLabel label="Date" />
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputLabel label="Time" />
    <InputField />
  </InputGroupItem>
</InputGroup>
```

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

### Booking Layout Example

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Layout/README.md

Implement the Booking layout, which consists of two columns for the booking form and a summary sidebar.

```jsx
import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";

const App = () => (
  <Layout type="Booking">
    <LayoutColumn>The main section for Booking form</LayoutColumn>
    <LayoutColumn>The left SideBar for displaying the summary</LayoutColumn>
  </Layout>
);
```

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

### Drawer Accessibility Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/drawer/03-accessibility.mdx

This example demonstrates how to integrate a Drawer with a toggle button, ensuring proper ARIA attributes for accessibility. It manages the drawer's open state and links it to the toggle button using `aria-controls`.

```jsx
const [drawerOpen, setDrawerOpen] = React.useState(false);
const drawerId = "my-drawer";

return (
  <>
    <Button
      onClick={() => setDrawerOpen(true)}
      aria-haspopup="dialog"
      aria-expanded={drawerOpen}
      aria-controls={drawerOpen ? drawerId : undefined}
    >
      Open Settings
    </Button>
    <Drawer
      id={drawerId}
      shown={drawerOpen}
      onClose={() => setDrawerOpen(false)}
      title="Settings"
    >
      {/* Drawer content */}
    </Drawer>
  </>
);
```

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

### Input Field Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputfield/01-guidelines.mdx

Demonstrates the default appearance and usage of the InputField component.

```javascript
<ReactExample exampleId="InputField-default" />
```

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

### Tooltip Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/tooltip/01-guidelines.mdx

Demonstrates the default appearance and behavior of the Tooltip component.

```jsx
<ReactExample exampleId="Tooltip-default" height={300} />
```

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

### Input Background Link

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputgroup/01-guidelines.mdx

Example demonstrating the use of background links within an InputGroup.

```jsx
<InputGroup label="Flight number">
  <InputGroupItem>
    <InputLabel label="Airline" />
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputLabel label="Number" />
    <InputField />
  </InputGroupItem>
  <InputBackgroundLink
    href="#"
    label="Find flight number"
  />
</InputGroup>
```

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

### Badge with Icon Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/03-information/badge/01-guidelines.mdx

Demonstrates how to use an icon within a badge. Icons should generally be placed on the left.

```jsx
<ReactExample exampleId="Badge-icon" />
```

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

### InputGroup States Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputgroup/01-guidelines.mdx

Demonstrates various states for the InputGroup component, including error and help messages.

```jsx
<InputGroup error="Some error message" help="Some help message">
  <InputGroupItem>
    <InputField />
  </InputGroupItem>
  <InputGroupItem>
    <InputField />
  </InputGroupItem>
</InputGroup>
```

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

### Sample Text Code Block

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/pages/mdx-examples.mdx

A basic text code block example.

```txt
Sample text here...
```

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

### Render ItinerarySegmentStop

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/02-structure/itinerary/01-guidelines.mdx

Use this example to render the ItinerarySegmentStop component, which is part of the Itinerary component.

```jsx
<ItinerarySegmentStop />
```

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

### Basic Popover Usage

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Popover/README.md

This is a basic example of how to use the Popover component. It requires content and a reference element (children).

```jsx
<Popover content="Your content">
  <Button />
</Popover>
```

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

### Basic Wizard Implementation

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/10-progress-indicators/wizard/03-accessibility.mdx

This example shows a basic implementation of the Wizard component with multiple steps. Ensure proper aria-labels and roles are used for screen reader compatibility.

```jsx
<Wizard
  id="booking-wizard"
  activeStep={1}
  completedSteps={2}
  labelProgress="Step 2 of 5"
  onChangeStep={stepIndex => setActiveStep(stepIndex)}
>
  <WizardStep title="Search flights" />
  <WizardStep title="Passenger details" />
  <WizardStep title="Select seats" />
  <WizardStep title="Add extras" />
  <WizardStep title="Payment" />
</Wizard>
```

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

### Switch with Icons Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/07-interaction/switch/01-guidelines.mdx

Demonstrates using icons with the Switch component to visually indicate the current state. Ensure the function is clear even without icons.

```javascript
import { Switch } from '@kiwicom/orbit-components';
import { Airplane, Cloud } from '@kiwicom/orbit-components/lib/icons';

function Example() {
  return (
    <Switch
      label="Enable feature"
      prefix={<Airplane aria-label="Airplane icon" />}
      suffix={<Cloud aria-label="Cloud icon" />}
    />
  );
}
```

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

### Run Orbit Tracking (Default)

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-tracking/README.md

Execute the orbit-tracking command without arguments to fetch and parse all available repositories.

```bash
orbit-tracking
```

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

### Layout Booking Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/12-layout/layout/01-guidelines.mdx

Demonstrates the Booking layout, a two-column layout on larger screens that stacks columns on smaller screens.

```javascript
<ReactExample exampleId="Layout-booking" />
```

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

### Basic NavigationBar Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/11-navigation/navigationbar/03-accessibility.mdx

Demonstrates a basic NavigationBar with a nested nav element and links. Ensure descriptive `openTitle` is used for the menu button.

```jsx
<NavigationBar id="main-navigation" openTitle="Open navigation menu">
  <Stack as="nav" aria-label="Main site navigation">
    <LinkList direction="row">
      <TextLink href="/flights" iconLeft={<Airplane />}>
        Flights
      </TextLink>
      <TextLink href="/about">About</TextLink>
      <TextLink href="/contact">Contact</TextLink>
    </LinkList>
  </Stack>
</NavigationBar>
```

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

### InputFile Component: Codemod Translation Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/05-development/04-migration-guides/05-v23.mdx

Example of how the codemod injects 'intl.formatMessage' for the 'labelRemove' prop in the InputFile component.

```jsx
intl.formatMessage({
  id: "common.screenreader.remove_file.button",
  defaultMessage: "Remove file",
});
```

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

### Modal Title Examples (Don't)

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/modal/01-guidelines.mdx

Examples of modal titles to avoid, which are too verbose or lack clear user direction.

```text
Your payment card is safe with us
Great! Your email has been verified. Now activate your plan.
All details about Priority Boarding
```

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

### ListChoice Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/listchoice/01-guidelines.mdx

A default example of the ListChoice component. Use this for presenting similar choices with structured information.

```jsx
<ReactExample exampleId="ListChoice-default" height={240} />
```

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

### Default Popover Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/04-overlay/popover/01-guidelines.mdx

This is a default example of the Popover component. It's used to showcase the basic implementation and appearance.

```jsx
<ReactExample exampleId="Popover-default" height={240} />
```

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

### Layout Search Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/12-layout/layout/01-guidelines.mdx

Shows the Search layout, a three-column layout on larger screens that stacks columns on smaller screens.

```javascript
<ReactExample exampleId="Layout-search" />
```

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

### Button Component Usage

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Button/README.md

Demonstrates the basic import and usage of the Button component.

```jsx
import Button from "@kiwicom/orbit-components/lib/Button";

<Button>Hello World!</Button>
```

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

### Card Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/02-structure/card/01-guidelines.mdx

A basic example of a Card component. Use when you have long sections of content with a similar structure that need to be organized into related groups.

```jsx
<Card>
  <Card.Section title="Section 1">
    Content for section 1
  </Card.Section>
  <Card.Section title="Section 2">
    Content for section 2
  </Card.Section>
</Card>
```

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

### Text Component Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/09-text/text/01-guidelines.mdx

Demonstrates the default appearance and usage of the Text component. This is the base for all text styling.

```javascript
import { Text } from '@kiwicom/orbit-components';

<Text>This is a default text.</Text>
```

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

### FakeRadio Component Example

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Radio/README.md

Example of using FakeRadio for visual representation, often used with custom controls. Ensure to handle the onChange event at a parent level.

```jsx
import * as React from "react";

<div role="radio" onChange={() => {}}>
  <Text>Item title</Text>
  <FakeRadio checked={selected} disabled={disabled} />
</div>;
```

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

### Seat Sizes Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/08-visuals/seat/01-guidelines.mdx

Demonstrates how to use different sizes of the Seat component. Use small seats for small screens and medium seats for larger ones. Media queries or the useMediaQuery hook can assist with responsive sizing.

```jsx
<ReactExample exampleId="Seat-sizes" />
```

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

### Default ChoiceGroup Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/choicegroup/01-guidelines.mdx

This example demonstrates the default appearance and behavior of the ChoiceGroup component. It is typically used to group a small set of closely related options.

```jsx
<ChoiceGroup label="Choose your favorite">\n  <Radio label="Apple" value=\"apple\" />\n  <Radio label="Banana" value=\"banana\" />\n  <Radio label="Orange" value=\"orange\" />\n</ChoiceGroup>
```

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

### NavigationBar Focus Management Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/11-navigation/navigationbar/03-accessibility.mdx

Implements focus management for an accessible drawer pattern. This pattern connects the button and drawer with matching IDs, communicates drawer state to screen readers, and manages focus for keyboard users.

```tsx
const App = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const drawerLabelId = "navigation-drawer-title";

  const handleDrawerOpen = () => setDrawerOpen(true);
  const handleDrawerClose = () => {
    setDrawerOpen(false);
    // Return focus to button when drawer closes
    if (buttonRef.current) buttonRef.current.focus();
  };

  return (
    <>
      <NavigationBar
        onMenuOpen={handleDrawerOpen}
        menuButtonRef={buttonRef}
        menuId="main-navigation-drawer"
        menuExpanded={isDrawerOpen}
      >
        {/* navigation content */}
      </NavigationBar>

      <Drawer
        id="main-navigation-drawer"
        shown={isDrawerOpen}
        onClose={handleDrawerClose}
        aria-labelledby={drawerLabelId}
      >
        <Stack direction="column">
          <h2 id={drawerLabelId}>Navigation Menu</h2>
          <TextLink>Home</TextLink>
          <TextLink>Products</TextLink>
          <TextLink>Contact</TextLink>
        </Stack>
      </Drawer>
    </>
  );
};

```

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

### Select States Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/select/01-guidelines.mdx

Demonstrates various states of the Select component, including error and help messages. Use this to show users feedback on their selection.

```javascript
<><Select label="Label" placeholder="Placeholder" error="Error message"> <Select.Option value="option1">Option 1</Select.Option> <Select.Option value="option2">Option 2</Select.Option> </Select><br/><br/><Select label="Label" placeholder="Placeholder" help="Help message"> <Select.Option value="option1">Option 1</Select.Option> <Select.Option value="option2">Option 2</Select.Option> </Select></>
```

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

### Get Modal Scroll Position

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Modal/README.md

Demonstrates how to get the current scroll position of a Modal component using the `getScrollPosition` method. This is recommended over constant reading for performance.

```jsx
class Component extends React.Component {
  const modalRef = React.useRef<React.ElementRef<typeof Modal> | null>(null)

  const getScroll = () => {
    if (modalRef.current) {
      setLocalScrollPosition(modalRef.current.getScrollPosition());
    }
  };

  render() {
    return (
      <Modal ref={modalRef}>
        Some content.
      </Modal>
    );
  }
}
```

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

### InputFile Default Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/05-input/inputfile/01-guidelines.mdx

This is the default InputFile component. It is used to collect files from users and provide clear guidance on what should be attached.

```jsx
<InputFile />
```

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

### Displaying Destination Images in a Grid

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/06-kiwi-use/02-content/04-social-media/02-visual-treatment.mdx

This example demonstrates how to use the Orbit Grid component to lay out images for destination showcases. It defines columns, rows, and gaps for responsive image arrangement.

```jsx
<Grid columns="200px 200px 296px;" rows="minmax(100px, auto) minmax(100px, auto);" gap="10px;">

<ImageInGrid column="1 / 3" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-island.png)

</ImageInGrid>

<ImageInGrid column="3 / 3" row="1 / 3">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-hiker.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-shoes.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-clotheslines.png)

</ImageInGrid>

</Grid>
```

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

### Layout MMB Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/12-layout/layout/01-guidelines.mdx

Illustrates the MMB layout, which is a single-column layout.

```javascript
<ReactExample exampleId="Layout-mmb" />
```

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

### Timeline Step Types Example

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/10-progress-indicators/timeline/01-guidelines.mdx

Demonstrates different step types (success, warning, critical) for completed steps in a Timeline. Use these types to provide context about the outcome of each step.

```jsx
<Timeline
  data={[
    {
      title: 'Step 1',
      description: 'This step was successful',
      status: 'done',
      type: 'success',
    },
    {
      title: 'Step 2',
      description: 'This step had a warning',
      status: 'done',
      type: 'warning',
    },
    {
      title: 'Step 3',
      description: 'This step was critical',
      status: 'done',
      type: 'critical',
    },
    {
      title: 'Step 4',
      description: 'This step is pending',
      status: 'pending',
    },
  ]}/>
```

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

### BadgeList with Disclosure

Source: https://github.com/kiwicom/orbit/blob/master/docs/src/documentation/03-components/03-information/badgelist/01-guidelines.mdx

Example of BadgeList with progressive disclosure using a tooltip.

```javascript
<BadgeList
  items={[
    {
      icon: 'airplane',
      label: 'Direct flight',
      ariaLabel: 'Direct flight details',
      component: (
        <Tooltip content="No layovers">
          <TextLink standalone>Details</TextLink>
        </Tooltip>
      ),
    },
    {
      icon: 'check',
      label: 'Guaranteed transfer',
      type: 'success',
    },
  ]}
/>
```

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

### Basic Wizard Implementation

Source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/Wizard/README.md

Use the Wizard component as a container for multiple WizardStep components to create a multi-step process. Configure the active and completed steps, and provide a callback for step changes.

```jsx
<Wizard id="wizard" completedSteps={3} activeStep={3} onChangeStep={() => {}}>
  <WizardStep title="Search" />
  <WizardStep title="Passenger details" />
  <WizardStep title="Ticket fare" />
  <WizardStep title="Customize your trip" />
  <WizardStep title="Overview & Payment" />
</Wizard>
```