ArticleTeasers

Show a row of article teasers according to a list of article IDs.

Installation

yarn add @ta-interaktiv/react-article-teasers

API

Table of Contents

• ArticleCard
• ArticleTeasers
  • downloadNewArticle
• SortMode
• sortMode

ArticleCard

Renders a single teaser card.

Parameters

• props object
  • props.url string The (article) URL to link to.
  • props.imageSrc string The source URL of the teaser image.
  • props.title string The title of the article.
  • props.authors string? A string with the author information
  • props.lead string The lead of the article
  • props.className string? Any additional class names the card should receive (optional, default '')
  • props.commentary Node? A comment for this teaser. Displayed on the bottom of the teaser in a blue message box.
  • props.commentaryIcon string? An optional icon to go with the commentary
  • props.openInNewWindow

Examples

import {ArticleCard} from '@ta-interaktiv/react-article-teasers'
function MyComponent (props) {
  return (
    <ArticleCard
      url='https://www.tagesanzeiger.ch'
      imageSrc='https://interaktiv.tagesanzeiger.ch/teaser.jpg'
      title='Schlagzeile'
      lead='<p>Das müssen Sie gelesen haben.</p>'
      authors='Interaktiv-Team'
    />
  )
}

ArticleTeasers

Extends React.Component

Article Teaser component: downloads the teaser information and stores the downloaded data in its state.

Parameters

• props
  • props.articleIds Array<string> An array of CD article IDs, as strings.
  • props.numberOfCards string How many article teaser should be shown in a row on desktop devices. As a number word. ('one', 'two', 'three', etc.) (optional, default two)
  • props.sorting SortMode The sorting mode. Choose from one of the options from sortMode. (optional, default manual)
  • props.className string? Additional class names for the group div.
  • props.itemClassName string? Additional class names for the individual cards.
  • props.additionalClasses string? Additional classes to be passed to the cards element. As defined in the Card documentation. Will be phased out eventually, use props.className instead.
• forceDomain string? force a domain to use (e.g. derbund.ch or tagesanzeiger.ch) instead of relying on the automatic domain name resolution.

Examples

import ArticleTeasers, {sortMode} from
'@ta-interaktiv/react-article-teasers';

// more code ...

class YourComponent extends React.Component {
 render() {

   return (
     <ArticleTeasers
       sorting={sortMode.REVERSE_CHRONOLOGICALLY_BY_CREATION_DATE}
       articleIds={['16008934', '21426105', '17814575']}/>
   )
 }
}

Meta

• version: 1.1

downloadNewArticle

Loads new, previously not downloaded articles. Updates the component state.

Parameters

• articleID string

Returns void

SortMode

The possible string values that can be used to sort the articles.

Type: ("none" | "manual" | "chronologically by creation date" | "reverse chronologically by creation date" | "chronologically by update date" | "reverse chronologically by update date")

sortMode

• See: SortMode

Helper object in case you don't use flow – the string values as an object of the various SortModes

Properties

• NONE "none" No sorting applied, teaser will be listed in the order their data has been downloaded.
• MANUAL "manual" Use the same order as passed into the props.
• CHRONOLOGICALLY_BY_CREATION_DATE "chronologically by creation date" Order teasers in chronological order using their first_published_at timestamp.
• REVERSE_CHRONOLOGICALLY_BY_CREATION_DATE "reverse chronologically by creation date" Order teasers in reverse chronological order using their first_published_at timestamp.
• CHRONOLOGICALLY_BY_UPDATE_DATE "chronologically by update date" Order teasers in chronological order using their timestamp_updated_at timestamp.
• REVERSE_CHRONOLOGICALLY_BY_UPDATE_DATE "reverse chronologically by update date" Order teasers in reverse chronological order using their timestamp_updated_at timestamp.

Contributing

Code resides in /src.

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

yarn run fix

Type checking is provided by Flow.

yarn run flow

Styling

Styles reside in /style and/or /scss.

Testing

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.

Automated tests are written for Jest and can be found in /test. Run the test suite using

yarn run test

Transpiling

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

yarn run dist

Documentation

Documentation is generated from source, using both JSDoc comments as well as Flow type annotations. Update the documentation in this file using

yarn run docs

Changelog

The changelog is generated from git commits. In order to update the changelog, you may use

yarn run changelog

– however, ever better is

Versioning

For correct tagging, updating the changelog etc. you can use the appropriate NPM scripts.

These scripts will

1. Bump the package.json version number
2. Update the documentation
3. Update the changelog
4. Commit these changes
5. Tag the commit with the correct version number

For project changes that improve the code in some way, but don't change the API in any way, use

npm version patch

For project changes that add to the API or add functionality but will not affect the functioning of older implementations, use

npm version minor

For project changes that change the component in a fundamental way that would require code that implemented an older version of this component to be rewritten, use

npm version major