React Rainbow Components

The Tree component supports visual enhancements through the icon and isChecked properties in the data objects.

• Icons: Pass any React element (e.g., <FileIcon />) to the icon property of a node.
• Checkboxes: Use the isChecked property. It supports true, false, and 'indeterminate' states. Use the onNodeCheck prop to handle user interactions and implement logic for parent/child selection synchronization.

const data = [
    { 
        label: 'Tree Item', 
        icon: <FileIcon />, 
        isChecked: false 
    },
    {
        label: 'Tree Branch',
        icon: <FolderCloseIcon />,
        children: [
            { label: 'Child Item', isChecked: true }
        ]
    }
];

You can customize the visual presentation of the Drawer using the slideFrom and size props.

Slide Direction

Use the slideFrom prop to specify the entry animation direction:

• slideFrom="right"
• slideFrom="left"

Drawer Sizes

Use the size prop to set the width of the drawer. Supported values are:

• small
• medium
• large
• full (covers the entire screen)

<Drawer
    header="This is a drawer"
    slideFrom="right"
    size="large"
    isOpen={state.isOpen}
    onRequestClose={() => setState({ isOpen : false })}
/>

The Lookup component supports grouping options into labeled sections. To do this, pass an array to options where some objects have a type: 'section' property. These section objects must contain a label for the section header and an options array containing the actual selectable items.

const data = [
    {
        type: 'section',
        label: 'European Cities',
        options: [
            { label: 'Paris', icon: <FontAwesomeIcon icon={faBuilding} /> },
            { label: 'Madrid', icon: <FontAwesomeIcon icon={faBuilding} /> },
        ],
    },
    {
        type: 'section',
        label: 'American Cities',
        options: [
            { label: 'New York', icon: <FontAwesomeIcon icon={faBuilding} /> },
        ],
    },
];

<Lookup
    options={data}
    // ...
/>

The Tabset component supports different visual styles and layout behaviors:

1. Full Width Layout: Use the fullWidth prop to make the tabs stretch across the container.
2. Line Variant: Use variant="line" to display the tab indicator as a line (often used for a more minimal look).
3. Dynamic Tabs: Since Tabset is a standard React component, you can conditionally render Tab children based on component state to add or remove tabs dynamically.

The Accordion component is a container for AccordionSection components. It allows users to expand or collapse sections of content. You can use it as a basic container or extend its functionality with props like multiple to allow several sections to be open at once, or activeSectionNames to control which sections are currently expanded.

import React from 'react';
import { Accordion, AccordionSection } from 'react-rainbow-components';

<Accordion id="accordion-1">
    <AccordionSection label="Section Label">
        Content goes here.
    </AccordionSection>
</Accordion>

The PathStep component cannot be used in isolation. It must be composed within a Path component. To identify a specific step within the path, you must provide a required name prop to each PathStep. The Path component uses the currentStepName prop to determine which step is currently active.

import React from 'react';
import { Path, PathStep } from 'react-rainbow-components';

const BasicPath = () => {
    return (
        <div className="rainbow-p-around_x-large rainbow-align-content_center">
            <Path currentStepName="arrived">
                <PathStep name="scheduled" label="Scheduled" />
                <PathStep name="in-progress" label="InProgress" />
                <PathStep name="arrived" label="Arrived" />
                <PathStep name="delivered" label="Delivered" />
            </Path>
        </div>
    );
};

The PageTabset page object allows you to interact with the Tabset component in automated tests (e.g., using WebdriverIO). You can instantiate it with the CSS selector of the Tabset component and use it to retrieve individual tab items for interaction.

Key methods include:

• getItem(index): Returns a representation of the tab item at the specified zero-based index.
• tabItem.click(): Selects the tab.
• tabItem.isSelected(): Returns a boolean indicating if the tab is currently selected.
• tabItem.hasFocus(): Returns a boolean indicating if the tab currently has focus.

const PageTabset = require('react-rainbow-components/components/Tabset/pageObject');

const TABSET = '#tabset-1';
const tabset = new PageTabset(TABSET);

// Get the first tab
const tabItem = tabset.getItem(0);

// Interact with the tab
tabItem.click();
console.log(tabItem.isSelected()); // true

The Textarea component from react-rainbow-components provides a multi-line text input field. It supports various configurations including labels, placeholders, rows, and different visual styles like shaded variants or specific border radii.

import React from 'react';
import { Textarea } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

<Textarea
    id="example-textarea-1"
    label="Textarea Label"
    rows={4}
    placeholder="Placeholder Text"
    style={containerStyles}
    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
/>

The PageDateTimePicker page object from react-rainbow-components provides a high-level API for interacting with and asserting the state of the DateTimePicker component during automated testing (e.g., using WebdriverIO).

To use it, import the page object and instantiate it with the CSS selector of your component instance. You can then use its methods to simulate user interactions like clicking the input, clicking the label, selecting dates, and interacting with the OK/Cancel buttons, as well as asserting whether the picker is open or retrieving its current value.