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',
};
<BulletedList {...props}>
<BulletedListItem>A list item</BulletedListItem>
<BulletedListItem>Another item</BulletedListItem>
</BulletedList>
When to use this component
BulletedList
s 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.
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.