BumblebeeBumblebee

List

Contents

Live demoDesignCode

Live demo

Default

  • LabelText Example
  • Label with is rather rather rather rather rather rather rather rather rather rather rather rather rather rather longText Example with is rather rather rather rather rather rather rather rather rather rather rather rather rather rather long
  • LabelText Example

Display

  • Monzo Bank
    LabelText Example
  • Label which is rather rather rather rather rather rather rather rather longText Example which is rather rather rather rather long
  • Document title

Uploader

  • uploadingfilename.jpg
  • filename.jpg

Timeline

  • You need to wrap text explicitly in the timeline variant

  • You need to wrap text explicitly

    in the timeline variant because you can add as much text or styling as you like

  • Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details. Item 3 Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details.
  • You could for example add a link
  • labelThere is also a label prop like other list items

Design

Usage

Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details.

Anatomy

The anatomy depends of the list item variant. There are 3 variants: default, display and timeline.

Placement

This component sits in the review page on the onboarding flow and also as a way of displaying content inside the drawers.

Accessibility

The ‘Text’ style colour used on entered text in the field, is comfortably within the AAA contrast ratio for legibility.

Code

import { List } from '@shieldpay/bumblebee/list';
import { Text } from '@shieldpay/bumblebee/text';


<Heading>Unordered Default List</Heading>

<List size="small">
  <List.Item
    label="First"
    LeftIcon={<EmptyCheckIcon />}
  >
    Unordered List item
  </List.Item>
  <List.Item
    label="Second"
    RightIcon={<ChevronRightIcon />}
  >
    Unordered List item
  </List.Item>
</List>


<Heading>Ordered Timeline List</Heading>

<List ordered>
  <List.Item
    variant="timeline"
    LeftIcon={<EmptyCheckIcon />}
  >
    <Text>First</Text>
    <Text>Ordered List item</Text>
  </List.Item>
  <List.Item variant="timeline">
    <Text>Ordered List item<Text>
  </List.Item>
</List>
/