Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@bbc/psammead-radio-schedule

BBC-News854Apache-2.0deprecated5.1.35

This package is no longer maintained.

Component package for radio schedule components

bbc, radio, schedule

readme

psammead-radio-schedule - Known Vulnerabilities Dependency Status peerDependencies Status Storybook GitHub license npm version PRs Welcome

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

Argument Type Required Default Example
schedules array yes N/A [{ id: '1', state: 'live', stateLabel: 'Live', startTime: '1566914061212', link: 'www.bbc.co.uk', brandTitle: 'This is a brand title', episodeTitle: 'This is an episode title', summary: 'This is a summary', duration: '45:00'}]
service string yes N/A 'news'
script object yes N/A { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }
locale string no N/A 'en-gb'
timezone string no N/A 'Europe/London'
durationLabel string yes N/A 'Duration %duration%'
liveLabel string yes N/A 'LIVE'
nextLabel string yes N/A 'NEXT'
dir string no "ltr" "rtl"
linkComponent elementType | string no "a" ReactRouterLink
linkComponentAttr string no "href" "to"

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

Argument Type Required Default Example
brandTitle string yes N/A 'This is a brand title'
summary string no null 'This is a summary'
duration string yes N/A 'PT30M'
durationLabel string yes N/A 'Duration %duration%'
state string yes N/A 'live'
liveLabel string yes N/A 'LIVE'
nextLabel string yes N/A 'NEXT'
link string yes N/A 'https://bbc.com/arabic/articles/c1er5mjnznzo'
startTime number yes N/A 1566914061212
service string yes N/A 'news'
script object yes N/A { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }
dir string no "ltr" "rtl"
timezone string no 'GMT' 'Europe/London'
locale string no 'en-gb' 'fa'
linkComponent elementType | string no "a" ReactRouterLink
linkComponentAttr string no "href" "to"

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

Argument Type Required Default Example
timestamp number yes N/A 1530947227000
timezone string no 'Europe/London' 'Europe/Vienna'
locale string no 'en-gb' 'fa'
script object yes N/A { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }
service string yes N/A news
dir string no 'ltr' 'rtl'

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.

changelog

Radio Schedule Changelog

Version Description
5.1.35 PR#4497 Bump psammead-styles
5.1.34 PR#4486 upgrade minor/patch dependencies
5.1.33 PR#4484 Bump psammead-grid to 3.1.0
5.1.32 PR#4428 Break schedule item header into own component
5.1.30 PR#4420 bumps 3rd-party dependencies
5.1.29 PR#4376 Improve screenreader behaviour
5.1.28 PR#4368 use Yarn Workspaces
5.1.27 PR#4335 switch to yarn for package management
5.1.26 PR#4306 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.25 PR#4305 Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-live-label, @bbc/psammead-timestamp-container
5.1.24 PR#4304 Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-assets, @bbc/psammead-grid, @bbc/psammead-live-label, @bbc/psammead-styles, @bbc/psammead-timestamp-container, @bbc/psammead-detokeniser
5.1.23 PR#4303 Trigger rebuild following babel config update for emotion 11
5.1.22 PR#4273 Talos - Bump Dependencies - @bbc/psammead-live-label
5.1.21 PR#4271 change react peer dep to >=16.9.0
5.1.20 PR#4268 Talos - Bump Dependencies - @bbc/psammead-live-label, @bbc/psammead-timestamp-container
5.1.19 PR#4266 Talos - Bump Dependencies - @bbc/psammead-assets
5.1.18 PR#4263 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.17 PR#4261 Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-live-label, @bbc/psammead-timestamp-container
5.1.16 PR#4259 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.15 PR#4260 Talos - Bump Dependencies - @bbc/gel-foundations
5.1.14 PR#4258 Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-live-label
5.1.13 PR#4256 Talos - Bump Dependencies - @bbc/psammead-styles
5.1.12 PR#4255 Fix package-lock.json issue causing npm install error
5.1.11 PR#4193 Upgrade Emotion to v11
5.1.10 PR#4228 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.9 PR#4227 Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-live-label
5.1.8 PR#4226 Talos - Bump Dependencies - @bbc/psammead-styles
5.1.7 PR#4198 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.6 PR#4197 Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-live-label
5.1.5 PR#4189 Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-styles
5.1.4 PR#4184 Talos - Bump Dependencies - @bbc/psammead-grid
5.1.3 PR#4113 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.1.2 PR#4091 Set correct propTypes for radio schedules link component
5.1.1 PR#4087 Talos - Bump Dependencies - @bbc/psammead-assets
5.1.0 PR#4075 Update RadioSchedules to be able to use client side routing
5.0.16 PR#4074 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.0.15 PR#4073 Talos - Bump Dependencies - @bbc/psammead-live-label
5.0.14 PR#4072 Talos - Bump Dependencies - @bbc/psammead-styles
5.0.13 PR#4054 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.0.12 PR#4053 Talos - Bump Dependencies - @bbc/psammead-live-label, @bbc/psammead-timestamp-container
5.0.11 PR#4052 Talos - Bump Dependencies - @bbc/gel-foundations
5.0.10 PR#4032 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.0.9 PR#4030 Talos - Bump Dependencies - @bbc/psammead-live-label
5.0.8 PR#4029 Talos - Bump Dependencies - @bbc/psammead-styles
5.0.7 PR#4010 Talos - Bump Dependencies - @bbc/psammead-assets
5.0.6 PR#3991 Remove L/R Padding below 600px
5.0.5 PR#3945 Talos - Bump Dependencies - @bbc/psammead-live-label
5.0.4 PR#3944 Talos - Bump Dependencies - @bbc/psammead-styles
5.0.3 PR#3936 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
5.0.2 PR#3928 Talos - Bump Dependencies - @bbc/psammead-live-label
5.0.1 PR#3925 Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-live-label, @bbc/psammead-styles
5.0.0 PR#3921 Migrate to emotion.
4.0.5 PR#3891 Update snapshots.
4.0.4 PR#3885 Talos - Bump Dependencies - @bbc/psammead-live-label
4.0.3 PR#3883 Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-styles
4.0.2 PR#3855 Talos - Bump Dependencies - @bbc/gel-foundations
4.0.1 PR#3854 Talos - Bump Dependencies - @bbc/psammead-styles
4.0.0-alpha.0 PR#3843 Bump Dependencies - @bbc/psammead-styles alpha version
3.0.26 PR#3836 Talos - Bump Dependencies - @bbc/psammead-styles
3.0.25 PR#3831 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.24 PR#3829 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.23 PR#3816 Talos - Bump Dependencies
3.0.22 PR#3728 Tweaks following Storybook v5.3.19 to v6.0.22 update
3.0.21 PR#3811 Talos - Bump Dependencies - @bbc/psammead-styles
3.0.20 PR#3799 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.19 PR#3798 Talos - Bump Dependencies
3.0.18 PR#3785 Talos - Bump Dependencies - @bbc/gel-foundations
3.0.17 PR#3713 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.16 PR#3712 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.15 PR#3710 Talos - Bump Dependencies - @bbc/psammead-styles
3.0.14 PR#3707 Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-timestamp-container
3.0.13 PR#3626 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.12 PR#3623 Talos - Bump Dependencies - @bbc/gel-foundations
3.0.11 PR#3613 Talos - Bump Dependencies - @bbc/psammead-assets
3.0.10 PR#3608 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.9 PR#3605 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.8 PR#3604 Talos - Bump Dependencies - @bbc/gel-foundations
3.0.7 PR#3598 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.6 PR#3525 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.5 PR#3485 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.4 PR#3475 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.3 PR#3467 Talos - Bump Dependencies - @bbc/psammead-styles
3.0.2 PR#3459 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
3.0.1 PR#3454 Update radio schedule props
3.0.0 PR#3408 Use detokenizer to construct duration label
2.0.2 PR#3427 Updating tests with dependency bump
2.0.1 PR#3414 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
2.0.0 PR#3377 Remove episodeTitle prop. In ProgramCard, generate episodeTitle with moment using startTime
1.0.8 PR#3400 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
1.0.7 PR#3398 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
1.0.6 PR#3397 Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-timestamp-container
1.0.5 PR#3390 Bump prettier major version and disable rule for brackets around a single prop
1.0.4 PR#3387 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
1.0.3 PR#3381 Talos - Bump Dependencies - @bbc/psammead-assets
1.0.2 PR#3379 Talos - Bump Dependencies - @bbc/psammead-storybook-helpers adding timezone
1.0.1 PR#3354 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
1.0.0 PR#3350 Remove alpha tag
0.1.0-alpha.33 PR#3348 Add wrapping span with role text around the headline
0.1.0-alpha.32 PR#3345 Remove border from Program Card
0.1.0-alpha.31 PR#3326 Update Program Card Heading markup and CSS to fix issue with AT
0.1.0-alpha.30 PR#3324 Fix Duration border on FireFox High Contrast Mode
0.1.0-alpha.29 PR#3318 Fix StartTime clock icon styling in Safari
0.1.0-alpha.28 PR#3321 Fix radio schedules duration markup
0.1.0-alpha.27 PR#3309 Fix Program Card styling
0.1.0-alpha.26 PR#3312 Fix ProgramCard border on Windows High Contrast Mode
0.1.0-alpha.25 PR#3302 Fix radio schedules duration formatting
0.1.0-alpha.24 PR#3291 Use withServicesKnob selectedService prop
0.1.0-alpha.23 PR#3297 Use LiveLabel, and pass in translations for next and live
0.1.0-alpha.22 PR#3274 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
0.1.0-alpha.21 PR#3272 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
0.1.0-alpha.20 PR#3242 Add padding bottom to program cards
0.1.0-alpha.19 PR#3197 Add data-e2e attribute to program card element to contain the state of the program
0.1.0-alpha.18 PR#3184 Change display of program cards in group3 & update stories to include 4 cards
0.1.0-alpha.17 PR#3160 Uniformise visually-hidden state label
0.1.0-alpha.16 PR#3179 Make summary not required for Program Card
0.1.0-alpha.15 PR#3181 Alias radio schedule parent grid to be a ul with grid items aliased as li
0.1.0-alpha.14 PR#3164 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
0.1.0-alpha.13 PR#3153 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
0.1.0-alpha.12 PR#3132 Render correct hidden startTime in RadioSchedule component
0.1.0-alpha.11 PR#3151 Talos - Bump Dependencies - @bbc/psammead-timestamp-container
0.1.0-alpha.10 PR#3079 Format duration time for the ProgramCard
0.1.0-alpha.9 PR#3135 Talos - Bump Dependencies - @bbc/gel-foundations
0.1.0-alpha.8 PR#3130 Apply program-card's link to start-time component
0.1.0-alpha.7 PR#3129 Talos - Bump Dependencies - @bbc/gel-foundations
0.1.0-alpha.6 PR#3050 Create a wrapper around start-time and program-card.
0.1.0-alpha.5 PR#3074 Format hidden start time in program card component.
0.1.0-alpha.4 PR#3082 Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-assets, @bbc/psammead-timestamp-container
0.1.0-alpha.3 PR#2988 Add start time of the radio program.
0.1.0-alpha.2 PR#2938 Add radio program card component.
0.1.0-alpha.1 PR#2979 Initial creation of package.