plannedworktheme

MTA Planned Work Theme Card Template

A React component in the form of a designed card! The text can be filled out by passing a 'template' object to props. The prop 'flyerWidth' takes a Number that will set the scale of the component in your flow. The inline 'Route Bubble' designs can be added directly into text by injecting a string pattern that is identified by regex.

Props

template - object
flyerWidth - number(of px)

The following keys of the template object will set the text:

  topHeader: 'A string'
  subDate: ['An Array of up to two strings'] 
  routeBubbles: ['An Array of up to two strings']
  colorSpecs: ['An Optional Array of up to two named color strings or hex values']
  capsHeader: 'A string'
  infoHeader: ['An Array of many strings']
  bulletin: ['An Array of many strings']

Example:

const template1 = {

  topHeader: 'Weekend',
  subDate: ['Rockaway Beach'],
  routeBubbles: ['Q', 'X'],
  colorSpecs: [null, 'salmon'],
  capsHeader: `TRACKS ON FIRE REALLY`,
  infoHeader: ['{bubble@G>green>www.google.com} Service suspended between Metropolitan and Nostrand.', 'another header for boys and girls'],
  bulletin: ['These keys on the template {bubble@p>violet}rop take arrays:  subDate, routeBubbles, colorSpecs, infoHeader, bulletin. topHeader and capsHeader expect strings.',
   'To create an inline {bubble@R>red}oute bubble, enclose letter>color>hyperlink between a {bubble@ and an }, and inject it within your string',
  'Service is suspended in every burrough, take {bubble@U>black>http://uber.com}bers leaving from sheepshead bay', 
  'stand clear of the closing doors please'],
}

To create route bubble letter:

Route bubbles are identified by ${bubble@ } enclosing brackets. Within them should go specifications for 1.a character 2. a string for color (named or hex) 3. an optional href for a link. They are split by > characters. The result in action looks like this:

${bubble@G>#4286f4>http://google.com}

This will produce a blue colored route bubble that says G and links to google.com when clicked.

To Demo:

npm i
npm run docs