Components

List

Storybook

The List component is a customizable React component that allows you to create ordered or unordered lists with various styling options. It also provides two sub-components, List.Item and List.Icon, to enhance the functionality and appearance of the list items.

Imports

1import { List } from 'dd360-ds'

1import List from 'dd360-ds/List'

Usage

The List component in React allows you to create and customize lists with ease. Whether you need an ordered or unordered list, you can easily specify the type and customize the appearance using various props. Adjust the gap between items, style the icons, and add labels to enhance the list's visual appeal. You can even include custom icons for each list item using the List.Icon component. Simply populate the list by using the List.Item component as children. The List component offers a straightforward and flexible way to create functional and visually appealing lists in your React applications.

Here's an example of how you can use the List component to create a simple unordered list:

The code snippet below shows how to use the List component:

1import { List } from 'dd360-ds''
2
3<List>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

Ordered list

The ordered list allows you to create a numbered list with a specified order. The List component provides props to customize the appearance of the list items, the numbering format, and the suffix and prefix label.

To create an ordered list, set the "ordered" property of the component to true. By default, this property is set to false.

1import { List } from 'dd360-ds''
2
3<List ordered>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

In ordered lists, you can use the properties "prefixLabel" and "suffixLabel" to add a label before and after the numeric list, respectively. The default value for "prefixLabel" is an empty string (''), and the default value for "suffixLabel" is a period ('.').

1import { List } from 'dd360-ds''
2
3<List ordered prefixLabel='°' suffixLabel=')'>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

Unordered list

You can obtain a simple unordered list using the List component without any props. To customize an unordered list, you can use the properties "icon", "iconSize", "iconLineHeight", and "iconColor". By default, a bullet point is used as the icon, but you can change it to a string, emoji, or even a custom icon.

1import { List } from 'dd360-ds''
2
3<List iconColor='#46A9CB'>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

1import { List } from 'dd360-ds''
2
3<List icon='🎸' iconSize={15} iconLineHeight={20}>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

Space between items

You can manipulate the spacing between items using the "gap" prop, which takes the number of pixels that will separate the items. On the other hand, the "gapItem" prop receives the number of pixels that will separate the icon or numeric list from the content of the item. The default values for "gap" and "gapItem" are 5px and 0px, respectively.

1import { List } from 'dd360-ds''
2
3<List gap={15} gapItem={15}>
4    <List.Item>First item</List.Item>
5    <List.Item>Second item</List.Item>
6    <List.Item>Third item</List.Item>
7</List>
8

Custom items

You can customize each item separately by adding props to the List.Item component and overriding those that are inherited from the List component.

1import { List } from 'dd360-ds''
2
3<List iconColor='#46A9CB'>
4    <List.Item iconSize={15} iconColor='#E765C4'>First item</List.Item>
5    <List.Item iconColor='#A2E533'>Second item</List.Item>
6    <List.Item iconSize={40}>Third item</List.Item>
7</List>
8

If you want to add a custom icon, you can use the List.Icon component within the List.Item component and place it before the content of the item.

1import { List, Text } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<List iconColor='#46A9CB' gapItem={10}>
5    <List.Item>
6      <List.Icon>
7        <DynamicHeroIcon icon="PhoneIcon" className="w-5 h-5" />
8      </List.Icon>
9      <Text textMuted500>555-825-14-55</Text>
10    </List.Item>
11    <List.Item>
12      <List.Icon>
13        <DynamicHeroIcon icon="MailIcon" className="w-5 h-5" />
14      </List.Icon>
15      <Text textMuted500>admin@dd360.mx</Text>
16    </List.Item>
17    <List.Item>
18      <List.Icon>
19        <DynamicHeroIcon icon="LocationMarkerIcon" className="w-5 h-5" />
20      </List.Icon>
21      <Text textMuted500>Av. Insurgentes Sur 762</Text>
22    </List.Item>
23  </List>
24

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.