connection-slot

Props

Prop name	Type	Default	Description
`extraClasses`	`string \| undefined`		Injection in className.
`children`	`ReactNode`		Free content for the slot.
`current`	`boolean \| undefined`	`false`	Sets the current position of the live marker and enables live mode.
`InlineIcon`	`IconComponent \| undefined`		Override the current stop marker.
`innerRef`	`Ref<HTMLLIElement> \| undefined`		React ref forwarded to the "list" element.

The ConnectionSlot component renders a connection with a free slot for content as children.

It is commonly used to add the "Show/Hide Stations" button or extra information about the connection.

It's also possible to toggle the live position icon on any of the slots, this might be useful if you want to position the marker in between the stations.

Following are some examples:

import { Connection, ConnectionStop, ConnectionSlot, Box, Text, Tag, Button } from '@flixbus/honeycomb-react';
import { Icon, IconArrowDown, IconBus, IconWifi, IconSocket, IconLuggage, IconEntertainment, IconTime } from '@flixbus/honeycomb-icons-react';

<Connection>
  <ConnectionStop station="Start" />
  <ConnectionSlot extraClasses="onboard-services">
    <div style={{ display: 'flex', gap: 'var(--hcr-spacing-1)' }}>
      <Tag display="outlined" small><Icon InlineIcon={IconWifi} aria-hidden="true" /> Free Wi-Fi</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconSocket} aria-hidden="true" /> Sockets</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconEntertainment} aria-hidden="true" /> Entertainment</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconLuggage} aria-hidden="true" /> 1 Hold luggage</Tag>
    </div>
  </ConnectionSlot>
  <ConnectionSlot current>
    <Box small>
      <Icon appearance="primary" size={4} InlineIcon={IconBus} aria-hidden="true" /> Bus
      <Text small>Direction Dresden central bus station</Text>
    </Box>
  </ConnectionSlot>
  <ConnectionSlot extraClasses="station-toggle">
    <Button appearance="link">
      Hide 2 stops <Icon InlineIcon={IconArrowDown} aria-hidden="true" />
    </Button>
  </ConnectionSlot>
  <ConnectionSlot extraClasses="timezone-warning">
    <Box small>
      <Icon appearance="primary" size={4} InlineIcon={IconTime} aria-hidden="true" /> Timezone: PST (+1:00)
    </Box>
  </ConnectionSlot>
  <ConnectionStop station="Finish" />
</Connection>
import { Connection, ConnectionStop, ConnectionSlot, Box, Text, Tag, Button } from '@flixbus/honeycomb-react';
import { Icon, IconArrowDown, IconBus, IconWifi, IconSocket, IconLuggage, IconEntertainment, IconTime } from '@flixbus/honeycomb-icons-react';

<Connection>
  <ConnectionStop station="Start" />
  <ConnectionSlot extraClasses="onboard-services">
    <div style={{ display: 'flex', gap: 'var(--hcr-spacing-1)' }}>
      <Tag display="outlined" small><Icon InlineIcon={IconWifi} aria-hidden="true" /> Free Wi-Fi</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconSocket} aria-hidden="true" /> Sockets</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconEntertainment} aria-hidden="true" /> Entertainment</Tag>
      <Tag display="outlined" small><Icon InlineIcon={IconLuggage} aria-hidden="true" /> 1 Hold luggage</Tag>
    </div>
  </ConnectionSlot>
  <ConnectionSlot current>
    <Box small>
      <Icon appearance="primary" size={4} InlineIcon={IconBus} aria-hidden="true" /> Bus
      <Text small>Direction Dresden central bus station</Text>
    </Box>
  </ConnectionSlot>
  <ConnectionSlot extraClasses="station-toggle">
    <Button appearance="link">
      Hide 2 stops <Icon InlineIcon={IconArrowDown} aria-hidden="true" />
    </Button>
  </ConnectionSlot>
  <ConnectionSlot extraClasses="timezone-warning">
    <Box small>
      <Icon appearance="primary" size={4} InlineIcon={IconTime} aria-hidden="true" /> Timezone: PST (+1:00)
    </Box>
  </ConnectionSlot>
  <ConnectionStop station="Finish" />
</Connection>