@digitransit-component/digitransit-component-control-panel

CtrlPanel

CtrlPanel gathers multiple components to same area (desktop-size: left or mobile-size: bottom)

Parameters

• props Object

  • props.children node panel content (optional, default DEFAULT_CHILDREN)
  • props.position string 'left' or 'bottom'

Examples

<CtrlPanel language="fi" position="left">
   <CtrlPanel.SeparatorLine />
   <CtrlPanel.NearStopsAndRoutes
     modearray={['bus', 'tram', 'subway', 'rail', 'ferry', 'citybike']}
     language="fi"
   />
 </CtrlPanel>

CtrlPanel.NearStopsAndRoutes

Parameters

• props Object

  • props.modeArray Array<string> Names of transport modes to show buttons for. Should be in lower case. Also defines button order

  • props.language string Language used for accessible labels

  • props.title Object Custom titles per language

  • props.alertsContext Object

    • props.alertsContext.getModesWithAlerts function Function which should return an array of transport modes that have active alerts (e.g. [BUS, SUBWAY])
    • props.alertsContext.currentTime Number Time stamp with which the returned alerts are validated with
    • props.alertsContext.feedIds Number feedIds for which the alerts are fetched for

  • props.colors Object theme color configuration

  • props.urlPrefix string URL prefix for links

Examples

const alertsContext = {
   getModesWithAlerts: () => ({}),
   currentTime: 123456789,
   feedIds: [HSL]
}
<CtrlPanel.NearStopsAndRoutes
     modeArray={['bus', 'tram', 'subway', 'rail', 'ferry', 'citybike']}
     language="fi"
     alertsContext={alertsContext}
   />

---

This module is part of the Digitransit-ui project. It is maintained in the HSLdevcom/digitransit-ui repository, where you can create PRs and issues.

Installation

Install this module individually:

$ npm install @digitransit-component/digitransit-component-control-panel