psammead-bulletin -

Description

The Bulletin component can be used to render Radio or TVBulletin by passing in the type.

Installation

npm install @bbc/psammead-bulletin --save

Props

Bulletin

| Argument | Type | Required | Default | Example | | --------- | ---- | -------- | ------- | ------- | | 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 | 'pidgin' | | dir | string | no | 'ltr' | One of ['rtl', 'ltr'] | | image | node | no | null | <Image src={src} alt={alt} /> | | type | string | yes | N/A | One of ['audio', 'video'] | | ctaText | string | yes | N/A | Watch | | ctaLink | string | yes | N/A | 'http://link.to.resource' | | summary | string | no | null | 'Bulletin summary' | | headlineText | string | yes | N/A | 'Bulletin headline' | | isLive | boolean | no | false | true | | liveText | string | no | 'Live' | 'Localised Live' | | offScreenText | string | yes | N/A | 'Watch Live' | | lang | string | no | null | 'en-GB' |

Usage

import Bulletin from '@bbc/psammead-bulletin';
import { Image } from '@bbc/psammead-image';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => {
  const image = <Image src="/image.png" altText="alt text" />;

  return (
    <Bulletin
      script={latin}
      service="news"
      image={image}
      type="video"
      ctaLink="/cta"
      ctaText="Watch"
      summary="This is the summary"
      headlineText="This is the headline"
      isLive
      offScreenText="Watch LIVE"
    />
  );
};

When to use this component

The Bulletin component is designed to be used to link to a page on which the user can play the radio or TV content.

Accessibility notes

This component uses full semantic markup for the BulletinHeading, BulletinSummary, and BulletinHeadingLink, using h3, p and a respectively. Other accessibility factors such as image alt text and time elements are passed in as props and aren't explicitly set in this component.

The link is nested inside the h3 for better support with VoiceOver Mac and Safari. We use the faux block link pattern which makes the entire block clickable, whilst also enabling links nested within in that block to also be clickable.

The Call To Action is hidden from screen-readers to prevent the repetition from the title. The hidden text passed in as a prop is used before the headline to indicate to screen-reader users what type of content it is.

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.