psammead-topic-tags -

Description

The TopicTags component is a styled <ul> or <div>, depending on the number of TopicTag components it contains. If there is only a single TopicTag component with the TopicTags component, then the TopicTags component is a styled <div>, otherwise it's a styled <ul>.

Installation

npm install @bbc/psammead-topic-tags --save

Props

| Argument | Type | Required | Default | Example | | ------------------- | ------ | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | script | string | Yes | N/A | 'news' | | service | 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' | One of 'ltr' or 'rtl' | | tagBackgroundColour | string | No | The GEL variable C_LUNAR | Any valid CSS color |

Usage

import { TopicTags, TopicTag } from '@bbc/psammead-topic-tags';
import { latin } from '@bbc/gel-foundations/scripts';

const Wrapper = () => (
  <TopicTags script={latin} service="news" dir="ltr">
    <TopicTag topicName="Retailing" topicLink="/url/to/topic" />
    <TopicTag topicName="Business" topicLink="/url/to/topic" />
    <TopicTag topicName="Viruses" topicLink="/url/to/topic" />
  </TopicTags>
);

When to use this component

The TopicTag component should only be used inside of a TopicTags component, and a TopicTags component should only be used to contain TopicTag components.

Accessibility notes

The TopicTags component is fundamentally a <ul> when there is more than 1 TopicTag, and the <ul> uses the ARIA role="list" attribute. This reinstates the list semantics on VoiceOver which removes them due to the use of list-style-type: none; in the CSS.

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.