psammead-story-promo-list -

Description

The @bbc/psammead-story-promo-list package is a set of three components, StoryPromoUl, StoryPromoLi and StoryPromoLiBase. They use ul and li HTML elements respectively. The StoryPromoLi and StoryPromoLiBase components are both li elements and can be used interchangeably as they have similar props the only difference is that the StoryPromoLiBase ships with no padding presets thereby making it much more configurable to any set of padding/margin rules set on child elements.

Installation

npm install @bbc/psammead-story-promo-list

Props

| Argument | Type | Required | Default | Example | | -------- | ---- | -------- | ------- | -------------- | | children | node | yes | N/A | <StoryPromoLi><StoryPromo image={Image} info={Info} /></StoryPromoLi> | | border | bool | no | true | false |

Usage

Commonly used alongside psammead-story-promo.

import React, { Fragment } from 'react';
import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo';
import { StoryPromoLi, StoryPromoUl } from '@bbc/psammead-story-promo-list';
import { latin } from '@bbc/gel-foundations/scripts';

const Image = (
  <img src="https://foobar.com/image.jpg" />
);

const Info = (
  <Fragment>
    <Headline script={latin}>
      <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
   </Headline>
    <Summary script={latin}>The summary of the promo</Summary>
    <time>12 March 2019</time>
  </Fragment>
);

<StoryPromo
  image={Image}
  info={Info}
/>

<StoryPromoUl>
  <StoryPromoLi>
    <StoryPromo image={Image} info={Info} />;
  </StoryPromoLi>
  <StoryPromoLi>
    <StoryPromo image={Image} info={Info} />;
  </StoryPromoLi>
</StoryPromoUl>

When to use this component

This component is designed to be used with story promos on 'index' pages.

Accessibility notes

We have added the role list and listitem to the corresponding list items due to a VoiceOver bug to reinstate the list semantics.

We haven't yet thoroughly looked at cross device browser AT testing yet, this is in-progress. We will update with a11y notes when carrying out a proper release.

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 respository.

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.