psammead-radio-schedule -

Description

The RadioSchedule component is designed to display radio schedule programs in their different states. Currently, the component comprises of a ProgramCard which is comprised of a link to the radio-schedule, a state label, brand and episode titles, a summary, and a duration.

Exports

/startTime - Adds a starting time of the program with a clock icon, timestamp and horizontal line.

Installation

npm install @bbc/psammead-radio-schedule --save

Components (WIP)

RadioSchedule

Props

Usage

This component displays radio schedule program-card and start-time component for all schedules passed in.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import RadioSchedule from '@bbc/psammead-radio-schedule';

const schedules = [
  {
    id: 1,
    state: 'live',
    startTime: 1566914061212,
    link: 'www.bbc.co.uk',
    brandTitle: 'This is a brand title',
    summary: 'This is a summary',
    duration: '45:00',
  },
];

<RadioSchedule
  schedules={schedules}
  locale="en-gb"
  timezone="Europe/London"
  script={latin}
  service="news"
  dir="ltr"
  liveLabel="LIVE"
  nextLabel="NEXT"
  durationLabel="Duration %duration%"
/>;

While the default link component is an a tag, it can be replaced with a react-router-dom Link component

import React from 'react';
import { Link } from 'react-router-dom';
import { latin } from '@bbc/gel-foundations/scripts';
import RadioSchedule from '@bbc/psammead-radio-schedule';

const schedules = [
  {
    id: 1,
    state: 'test',
    startTime: 1566914061212,
    link: 'www.bbc.co.uk',
    brandTitle: 'This is another brand title',
    summary: 'This is a longer summary',
    duration: '30:00',
  },
];

<RadioSchedule
  schedules={schedules}
  locale="en-gb"
  timezone="Europe/London"
  script={latin}
  service="news"
  dir="ltr"
  liveLabel="LIVE"
  nextLabel="NEXT"
  durationLabel="Duration %duration%"
  linkComponent={Link}
  linkComponentAttr="to"
/>;

ProgramCard

Props

Usage

This component displays a single link as program card with a brand title, an episode title, a summary and a duration. It also allows for an override of the link component in a manner similar to the RadioSchedule component above.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import ProgramCard from '@bbc/psammead-radio-schedule/ProgramCard';

<ProgramCard
  service="news"
  script={latin}
  dir="ltr"
  startTime="13:00"
  brandTitle="This is a brand title"
  summary="Could a computer ever create better art than a human?"
  duration="PT30M"
  durationLabel="Duration %duration%"
  state="live"
  liveLabel="LIVE"
  nextLabel="NEXT"
  link="https://bbc.com/arabic/articles/c1er5mjnznzo"
  timezone="Europe/London"
/>;

StartTime

Props

Usage

import React from 'react';
import StartTime from '@bbc/psammead-radio-schedule/startTime';
import { latin } from '@bbc/gel-foundations/scripts';

<StartTime
  script={latin}
  service="news"
  timestamp={1566914061212}
  timezone="Europe/London"
  locale="en-gb"
  dir="ltr"
/>;

When to use this component

This component is to be used initially on the front pages, and media pages.

When not to use this component

Accessibility notes

Roadmap

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead repository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.