A-Z list component for the NICE Design System
Install Node, and then:
npm i @nice-digital/nds-a-z-list --save
Import the AZList
and AZListItem
components from the package and use within JSX:
import React from "react";
import { AZList, AZListItem } from "@nice-digital/nds-a-z-list";
const allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
<AZList alphabet={mockAlphabet}>
{allLetters.map(letter => (
<AZListItem key={letter} title={letter.toUpperCase()}>
<p className="test-class">{letter}: lorem ipsum dolor sit amet</p>
</AZListItem>
))}
</AZList>
Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
- Type
React.ReactNode
A component to render at the top of the list, allowing the user to jump to each letter within the index. Technically it can be any functional component, but we'd recommend the NDS Alphabet component.
- Type:
React.ReactNode
As the AZList component renders an ol
element, it must have at least one <li>
child. Each should be an instance of AZListItem
.
- Type:
string
If specified, this id will be applied to the list item's h2 element. If not, then the id will be auto-generated by removing spaces from the title and rendering it in lower case. We'd recommend supplying one (in most cases this will be the corresponding letter of the alphabet).
- Type:
string
(required)
The title of each item within the list
- Type:
React.ReactNode
This can be any content at all and will be displayed below the title.
If you're not using React, then import the SCSS directly into your application by:
@forward '@nice-digital/nds-a-z-list/scss/a-z-list';
If you're not using React, then include the SCSS as above and use the HTML:
<ol class="a-z-list">
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="a">A</h2>
<p class="test-class">a: lorem ipsum dolor sit amet</p>
</li>
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="b">B</h2>
<p class="test-class">b: lorem ipsum dolor sit amet</p>
</li>
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="c">C</h2>
<p class="test-class">c: lorem ipsum dolor sit amet</p>
</li>
...
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="x">X</h2>
<p class="test-class">x: lorem ipsum dolor sit amet</p>
</li>
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="y">Y</h2>
<p class="test-class">y: lorem ipsum dolor sit amet</p>
</li>
<li class="a-z-list__item">
<h2 class="a-z-list__item-heading" id="z">Z</h2>
<p class="test-class">z: lorem ipsum dolor sit amet</p>
</li>
</ol>