psammead-bulleted-list -

Description

The BulletedList component is a styled bulleted (unordered) list that works for right-to-left and left-to-right languages.

Installation

npm install @bbc/psammead-bulleted-list --save

Props

| Argument | Type | Required | Default | Example | | ----------------- | ----------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | dir | string | No | 'ltr' | One of 'rtl' 'ltr' | | script | script | 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' | | bulletPointShape | 'round' or 'square' | No | N/A | 'round' | | bulletPointColour | CSS Colour | No | '#3F3F42' | '#ff0000' |

Usage

Use BulletedList in place of a ul element with required props and a BulletedListItem in place of an li.

import BulletedList, { BulletedListItem } from '@bbc/psammead-bulleted-list';

const props = {
  dir: 'ltr',
  script: latin,
  service: 'news',
  bulletPointShape: 'round', // or 'square'
};

<BulletedList {...props}>
  <BulletedListItem>A list item</BulletedListItem>
  <BulletedListItem>Another item</BulletedListItem>
</BulletedList>

When to use this component

BulletedLists can be used wherever you need a standard GEL unordered list.

When not to use this component

It's not ideal for when you need a custom bullet. Use the standard <ul> instead if you need to style your bullets.

Accessibility notes

• The bullets in psammead-bulleted-lists are not read by screen readers and are generated using pseudo-elements.

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

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.