@nice-digital/nds-a-z-list

A-Z list component for the NICE Design System

Installation

Install Node, and then:

npm i @nice-digital/nds-a-z-list --save

Usage

React

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.

Props (AZList)

alphabet

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

children

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

Props (AZListItem)

id

• 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).

title

• Type: string (required)

The title of each item within the list

children (required)

• Type: React.ReactNode

This can be any content at all and will be displayed below the title.

SCSS

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';

HTML

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>