Basic components for LiveAgent

Summary: The package contains 4 fundamental UI components - a universal button, an icon, an action banner for locked features, and a loading indicator for LiveAgent.

Components

1. Button

Description: A basic button component with support for custom CSS classes and click handler. Uses a slot for flexible button content.

Props:

• onClick - callback function called on click
• className - custom CSS classes

Usage:

<Button onClick={() => console.log('click')} className="primary">
    Click me
</Button>

2. Icon

Description: A component for displaying icons from the custom la-icon-font icon font. The icon is defined via a CSS class.

Props:

• iconLaClassName - icon CSS class (e.g., la-settings, la-user)
• className - additional CSS classes

Usage:

<Icon iconLaClassName="la-settings" className="large" />

3. ActionBanner

Description: An informational banner with a text message and action button. Primarily used to notify users about locked features with an option to take
action (e.g., upgrade).

Props:

• label - message text displayed in the banner
• actionLabel - button text
• onAction - callback function called on button click

Usage:

<ActionBanner                                                                                                                                                
    label="This feature requires a higher plan"
    actionLabel="Upgrade"
    onAction={() => navigateToUpgrade()}
/>

4. LoadingIndicator

Description: An animated circular loading indicator with smooth rotation and stroke animations. The color can be customized using a CSS variable.

Props:

• None

CSS Variables:

• --loading-indicator-color - sets the stroke color of the loading circle

Usage:

<style>
    .container {
        --loading-indicator-color: #3498db;
    }
</style>

<div class="container">
    <LoadingIndicator />
</div>