panel

import {
  Button,
  Fieldset,
  Switch,
  Panel,
  PanelHeader,
  PanelContent,
  PanelFooter,
  PanelFooterColumn
} from '@flixbus/honeycomb-react';
const targetRef = React.useRef(null);
const [foodPanelActive, setFoodPanelActive] = React.useState(false);
const togglePanel = () => setFoodPanelActive(!foodPanelActive);

<>
  <Button innerRef={targetRef} appearance="primary" onClick={togglePanel}>
    Food Preferences
  </Button>

  <Panel
    id="food-panel"
    active={foodPanelActive}
    hasOverlay
    onOverlayClick={togglePanel}
    targetRef={targetRef}
  >
    <PanelHeader
      backButtonProps={{ label: 'Back', onClick: togglePanel }}
      closeButtonProps={{ label: 'Close', onClick: togglePanel }}
    >
      Food Preferences
    </PanelHeader>
    <PanelContent>
      <Fieldset>
        <Switch
          label="Notify about breakfast"
          id="switch-breakfast"
          value="breakfast"
        />
        <Switch
          label="Notify about lunch"
          id="switch-lunch"
          value="lunch"
        />
        <Switch
          label="Notify about dinner"
          id="switch-dinner"
          value="dinner"
        />
      </Fieldset>
    </PanelContent>
    <PanelFooter>
      <PanelFooterColumn>
        <Button
          appearance="primary"
          display="block"
          onClick={togglePanel}
        >
          Confirm
        </Button>
      </PanelFooterColumn>
    </PanelFooter>
  </Panel>
</>

import { Button, ButtonGroup, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn, Grid, GridCol, Text, Spinner, alignmentHelpers } from '@flixbus/honeycomb-react';
import { Icon, IconSeat } from '@flixbus/honeycomb-icons-react';

const seatMap = [
  { row: '1', seats: [{ n: 'A', free: false }, { n: 'B', free: false }, { n: 'C', free: false }, { n: 'D', free: false }] },
  { row: '2', seats: [{ n: 'A', free: true  }, { n: 'B', free: true  }, { n: 'C', free: false }, { n: 'D', free: false }] },
  { row: '3', seats: [{ n: 'A', free: false }, { n: 'B', free: false }, { n: 'C', free: false }, { n: 'D', free: false }] },
  { row: '4', seats: [{ n: 'A', free: false }, { n: 'B', free: true  }, { n: 'C', free: true  }, { n: 'D', free: false }] },
  { row: '5', seats: [{ n: 'A', free: false }, { n: 'B', free: false }, { n: 'C', free: false }, { n: 'D', free: true  }] },
  { row: '6', seats: [{ n: 'A', free: true  }, { n: 'B', free: true  }, { n: 'C', free: true  }, { n: 'D', free: true  }] },
];

const targetRef = React.useRef(null);
const [seatsPanelActive, setSeatsPanelActive] = React.useState(false);
const [seatsPanelLoading, setSeatsPanelLoading] = React.useState(true);
const [selectedSeat, setSelectedSeat] = React.useState();
const [reservedSeat, setReservedSeat] = React.useState();

function closePanel() {
  setSeatsPanelActive(false);
  setSeatsPanelLoading(true);
  setSelectedSeat();
}

function loadSeatsPanel() {
  setSeatsPanelActive(true);

  setTimeout(() => {
    setSeatsPanelLoading(false);
  }, 2000);
}

function reserveSeat(event) {
  if (seatsPanelLoading) return;

  setSeatsPanelLoading(true);

  setTimeout(() => {
    setReservedSeat(selectedSeat);
    setSeatsPanelActive(false);
    setSeatsPanelLoading(true);
  }, 2000);
}

<>
  <Button innerRef={targetRef} appearance="primary" onClick={loadSeatsPanel}>
    {reservedSeat ? `Seat: ${reservedSeat}` : 'Choose a seat'}
  </Button>

  <Panel
    id="panel-second-example"
    active={seatsPanelActive}
    onOverlayClick={closePanel}
    targetRef={targetRef}
    loading={seatsPanelLoading}
  >
    <PanelHeader closeButtonProps={{ label: 'Close', onClick: closePanel }}>
      Seat Map
    </PanelHeader>
    <PanelContent>
      {seatsPanelLoading ? (
        <Grid justify="center" align="center">
          <GridCol inline>
            <Spinner />
            <Text small style={{ textAlign: 'center' }}>Loading...</Text>
          </GridCol>
        </Grid>
      ) : seatMap.map(({ row, seats }) => (
        <ButtonGroup alignment="center" key={`row-${row}`}>
          {seats.map(({ n, free }) => {
            const seatNumber = `${row}${n}`;
            return (
              <Button
                key={`seat-${seatNumber}`}
                disabled={!free}
                display="stacked"
                size="lg"
                aria-pressed={selectedSeat === seatNumber}
                appearance={selectedSeat === seatNumber ? 'primary' : undefined }
                onClick={(event) => setSelectedSeat(seatNumber)}
              >
                <Icon InlineIcon={IconSeat} size={4} />
                {seatNumber}
              </Button>
            )
          })}
        </ButtonGroup>
      ))}
    </PanelContent>
    <PanelFooter>
      <PanelFooterColumn>
        <Button
          id="save-seat-selection-button"
          appearance="primary"
          display="block"
          onClick={reserveSeat}
          disabled={seatsPanelLoading}
        >
          {selectedSeat ? `Reserve seat ${selectedSeat}` : 'Select a seat'}
        </Button>
      </PanelFooterColumn>
    </PanelFooter>
  </Panel>
</>

import { Button, ButtonGroup, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn, Heading, Text } from '@flixbus/honeycomb-react';
const targetRef = React.useRef(null);
const [bottomSheetActive, setBottomSheetActive] = React.useState(false);
const togglePanel = () => setBottomSheetActive(!bottomSheetActive);

<>
  <Button innerRef={targetRef} appearance="primary" onClick={togglePanel}>Send a Panel through a Portal</Button>

  <Panel
    id="panel-third-example"
    fullSize
    position="bottom"
    active={bottomSheetActive}
    onOverlayClick={togglePanel}
    portalId="render-panel-inside-this-div"
    targetRef={targetRef}
  >
    <PanelHeader>
      The 🎂 is a lie!
    </PanelHeader>
    <PanelContent>
      <Heading size={4}>Now you're thinking with Portals</Heading>
      <Text>
        If you give "portalId" an ID of some other element, the portal will render the Panel on that element.
      </Text>
    </PanelContent>
    <PanelFooter>
      <PanelFooterColumn narrow>
        Some auxiliary footer text
      </PanelFooterColumn>
      <PanelFooterColumn narrow>
        <ButtonGroup>
          <Button onClick={togglePanel}>Cancel</Button>
          <Button appearance="primary" onClick={togglePanel}>Success</Button>
        </ButtonGroup>
      </PanelFooterColumn>
    </PanelFooter>
  </Panel>
  <div id="render-panel-inside-this-div"></div>
</>