React Publication Info

Displays publication meta data (like publication and update date as well as version number).

API

Table of Contents

• NameValueItem
  • Parameters
  • Examples
• PublicationInfo
  • Parameters
• TimestampFormatter
  • Parameters
  • Examples
• VersionFormatter
  • Parameters
  • Examples

NameValueItem

Generic key-value component.

Parameters

• props object
  • props.name string? The name or key of the information.
  • props.value string? The value. If null or undefined, the component will not render.
  • props.itemClassName string? Class name(s) for the whole item. (optional, default '')
  • props.nameClassName string? Class names(s) for the key part. (optional, default '')
  • props.valueClassName string? Class names(s) for the value part. (optional, default '')

Examples

import { NameValueItem }from '@ta-interaktiv/react-publication-info'

function Component(props) {
  return(
    <NameValueItem
      name='Version'
      value='1.0.0'
      itemClassName='ui label'
      valueClassName='detail'
    />
  )
}

// returns <span className="name-value-item ui label">
//           <span className="name ">Version</span>
//           <span className="value detail">1.0.0</span>
//         </span>

Returns (React.Element<any> | null)

PublicationInfo

Show all information regarding a publication: when it has been first published, when it was updated, and what version it is.

Parameters

• props object
  • props.publicationDate string Unix timestamp when the project has been first published (optional, default window.project.publicationDate)
  • props.changeDate string Unix timestamp when the project has been last updated. (optional, default window.project.changeDate)
  • props.version string Version number of the project (optional, default window.project.version)
  • props.className string? CSS class name of the whole object. (optional, default '')
  • props.itemClassName string? CSS class names for the individual items. (optional, default '')
  • props.nameClassName string? CSS class names for the key/name of the individual items. (optional, default '')
  • props.valueClassName string? CSS class names for the value of the individual items. (optional, default '')

Returns React.Element<any>

TimestampFormatter

• See: NameValueItem for additional className parameters to be passed into this component.

Provides a formatted timestamp, with an optional prefix. Modeled after the common article suffix on tagesanzeiger.ch articles, it will return something like "Erstellt: 25.07.2017, 11:47 Uhr" with the appropriate prefix.

Parameters

• props object
  • props.timestamp number? A UNIX timestamp, in seconds. If not provided, the element will not render.
  • props.prefix string? A string that precedes the date, like "Erstellt:" or "Aktualisiert:"
  • props.locale ("de" | "fr") The locale to use to format the string. (optional, default de)

Examples

import { TimestampFormatter } from '@ta-interaktiv/react-publication-date'

function Component (props) {
  return (
    <TimestampFormatter prefix='Erstellt:' timestamp={1500986249} />
  )
}

Returns (Element<any> | null)

VersionFormatter

• See: NameValueItem for additional className props that can be passed in.

Provides a formatted version, with an optional prefix.

Parameters

• props object
  • props.version number A semantic version string. If not provided, the element will not render.
  • props.prefix string A string that precedes the version. (optional, default Version)

Examples

import { VersionFormatter } from '@ta-interaktiv/react-publication-date'

function Component (props) {
  return (
    <VersionFormatter version='1.0.0' />
  )
}

Returns (React.Element<any> | null)

Contributing

Development

Code resides in /src. Test cases are provided using Storybook. Add test cases in /stories/index.js, and run them with

yarn run storybook

They will appear on http://localhost:9001.

This repository follows the Standard JS style. To fix your code, run

yarn run fix

Building & Releasing

Babel is used to provide ES5 compatible code. To compile run

yarn run dist

Changes should go into the changelog. The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

Update the Readme with the current API using

yarn run docs