@knotel/transportation

Reusable Component in Knotel's Design System

Usage no npm install needed!

<script type="module">
  import knotelTransportation from 'https://cdn.skypack.dev/@knotel/transportation';
</script>

README

Cinderblock Transportation Card

Reusable Component in Knotel's Design System

Import
Required external dependencies
Usage
Properties

Import

  import TransitCard from '@knotel/transportation'

Required external dependencies

@knotel/cinderblock
prop-types
react-dom
react-map-gl
react
styled-components

Usage

<TransitCard
  mapboxToken="XXXX"
  clientID="XXXX"
  clientSecret="XXXX"
  lat={51.516}
  lng={-0.133}
  zoom={{ desktop: 10, mobile: 15 }}
/>

Properties

Prop Type Default Note
mapboxToken string! Mapbox API access token for MapboxGL.
clientID string! Client id for Foursquare API.
clientSecret string! Client secret for Foursquare API.
zoom number or object 15 Initial the zoom level of the map on desktop version. If passed a number, it's set as initial value on desktop and mobile version. If passed a object, you can set the zoom level as on mobile version as on desktop version separately. For example { desktop: 15, mobile: 15 }
lat number! The latitude of the center of the map.
lng number! The longitude of the center of the map.

Storybook

Triggering a (nohup) Build (by changing the next line):

2