Ericsson-edsw NPM

Ericsson EDSW

ericsson-edsw

ericsson-edsw includes styles to help create Ericsson styled components.

Quickstart

Install the library:

npm install ericsson-edsw
# or
yarn add ericsson-edsw

Import styles

You have two options to include styles from the ericsson-edsw package:

1. Import the minified CSS file

@import "ericsson-edsw/eds-components.css";

2. Import SCSS files into your build process

⚠️ Important: Ensure you have at least version 1.35.1 of Sass installed:

// Import all components from ericsson-edsw
@import "ericsson-edsw/eds-components.scss";

// Or just the components you need:
@import "ericsson-edsw/tooltip/tooltip";
@import "ericsson-edsw/pill/pill";

Import script files

Some components include JavaScript files. The library has TypeScript support and includes type definitions. Components currently with JavaScript support:

Accordion
Breadcrumb
Dropdown
Modal
Number spinner
Tabs
Tree

Documentation

This library includes predefined styles and javascript for the following components.

Accordion

Styles

@import "ericsson-edsw/styles/accordion/accordion"

Script

Minimum required script to initialize the component:

import {EdsAccordion} from "ericsson-edsw";

const edsAccordionHtmlElement = document.querySelector('.eds-accordion');
const edsAccordion = new EdsAccordion(edsAccordionHtmlElement);

HTML

<div class="eds-accordion">
    <div class="eds-accordion__item">
        <button class="eds-accordion__title">Accordion Collapsed</button>
        <div class="eds-accordion__details">
            <div>
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
    <div class="eds-accordion__item eds-accordion__item--open">
        <button class="eds-accordion__title">Accordion item with the modifier "--open"</button>
        <div class="eds-accordion__details">
            <div>
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
</div>

Public methods and properties

class EdsAccordion {
    /**
     * Creates a new Accordion component.
     * @param element The root HTML element for the accordion.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsAccordionOptions);

    /**
     * Toggles the open state of the specified accordion item.
     * @param accordionItem The accordion HTML item to toggle.
     */
    toggle(accordionItem: Element): void;

    /**
     * Opens the specified accordion item.
     * @param accordionItem The accordion HTML item to open.
     */
    open(accordionItem: Element): void;

    /**
     * Closes the specified accordion item.
     * @param accordionItem The accordion HTML item to close.
     */
    close(accordionItem: Element): void;

    /**
     * Adds an event listener for the open event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onOpen(callback: (event: Event) => void): void;

    /**
     * Adds an event listener for the close event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onClose(callback: (event: Event) => void): void;
}

Breadcrumb

Styles

@import "ericsson-edsw/styles/breadcrumb/breadcrumb"

Script

Minimum required script to initialize the component:

import {EdsBreadcrumb} from "ericsson-edsw";

const breadcrumbElement = document.getElementById("my-breadcrumb");
const edsBreadcrumb = new EdsBreadcrumb(breadcrumbElement);

HTML

<nav class="eds-breadcrumb">
    <a class="eds-breadcrumb__item"><span>Home</span></a>
    <a class="eds-breadcrumb__item"><span>Page one</span></a>
    <a class="eds-breadcrumb__item"><span>Page two</span></a>
    <a class="eds-breadcrumb__item"><span>Page three</span></a>
    <a class="eds-breadcrumb__item"><span>Page four</span></a>
    <span class="eds-breadcrumb__item">Current Page</span>
</nav>

Public methods and properties

class EdsBreadcrumb {
    /**
     * Creates a new Breadcrumb component.
     * @param element The root HTML element for the breadcrumb.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsBreadcrumbOptions);

    /**
     * Opens the collapsed items.
     */
    openCollapsedItems(): void;

    /**
     * Closes the collapsed items.
     */
    closeCollapsedItems(): void;

    /**
     * Toggles the collapsed items.
     */
    toggleCollapsedItems(): void;
}

Button

@import "ericsson-edsw/styles/button/button"

<button class="eds-btn">Primary</button>
<button class="eds-btn eds-btn--primary-on-blue">Primary</button>
<button class="eds-btn eds-btn--secondary">Secondary</button>
<button class="eds-btn eds-btn--secondary-inverse">Secondary Inverse</button>

Checkbox

@import "ericsson-edsw/styles/checkbox/checkbox"

<label class="eds-checkbox">
    <input type="checkbox">
    <span>Lorem ipsum</span>
</label>

Datepicker

@import "ericsson-edsw/styles/datepicker/datepicker"

<div class="eds-datepicker">
    <div class="eds-datepicker__date-input">
        <div class="eds-datepicker__select-container">
            <input class="eds-input" type="text" placeholder="YYYY-MM-DD">
            <i class="eds-icon-calendar"></i>
        </div>
    </div>
    <div class="eds-calendar eds-datepicker--show">
        <div class="eds-datepicker__controls">
            <div class="eds-datepicker__control-month">
                <button class="eds-icon-chevron-left"></button>
                <span class="eds-calendar__month">March</span>
                <button class="eds-icon-chevron-right"></button>
            </div>
            <div class="eds-datepicker__control-year">
                <button class="eds-icon-chevron-left"></button>
                <span class="eds-calendar__year">2021</span>
                <button class="eds-icon-chevron-right"></button>
            </div>
        </div>
        <table class="calendar-body">
            <thead>
            <tr>
                <th>Mo</th>
                ...
                <th>Su</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <button>1</button>
                </td>
                ...
                <td>
                    <button>7</button>
                </td>
            </tr>
            ...
            <tr>
                <td>
                    <button>29</button>
                </td>
                ...
                <td>
                    <button>31</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Dropdown

@import "ericsson-edsw/styles/dropdown";

Script

import {EdsDropdown} from "ericsson-edsw";


const edsDropdownEl = document.getElementById('my-dropdown');
const edsDropdown = new EdsDropdown(edsDropdownEl);

The two main components of the dropdown are the toggable content container (a.k.a. the dropdown) and the trigger that toggles it. The content is often a menu or a select list, and the trigger is often a button or a select input.

<div class="eds-dropdown" id="my-dropdown">
    <button class="eds-dropdown__trigger">Show</button>
    <div class="eds-dropdown__content">I'm in a dropdown!</div>
</div>

Create a standard dropdown menu by wrapping .eds-dropdown__button and .eds-dropdown__menu inside the trigger and the content:

<div class="eds-dropdown" id="my-dropdown">
    <button class="eds-dropdown__trigger">
        <span class="eds-dropdown__button">Show button</span>
    </button>
    <div class="eds-dropdown__content">
        <ul class="eds-dropdown__menu">
            <li><a href="URL">Dropdown link 1</a></li>
            <li><a href="URL">Dropdown link 2</a></li>
        </ul>
    </div>
</div>

Please note that you can also set the eds-dropdown__button class on the button element as well, but the .eds-dropdown__trigger must exist for the click event:

<button class="eds-dropdown__trigger eds-dropdown__button">
    Show button
</button>

Select (single)

The Select component is built on top of the Dropdown component, and adds a selectable behavior where the chosen option will replace the default input placeholder.

Styles

@import "ericsson-edsw/styles/dropdown";
@import "ericsson-edsw/styles/select";

Script

import {EdsSelect} from "ericsson-edsw";

const edsSelectEl = document.getElementById('my-select');
const edsSelect = new EdsDropdown(edsSelectEl);

Markup-wise, you wrap the .eds-select-button and .eds-select-menu sub components in the trigger and content, and make sure to define your options with below structure:

<div class="eds-dropdown" id="my-select">
    <button class="eds-dropdown__trigger">
        <span class="eds-select-button">Make your choice</span>
    </button>
    <div class="eds-dropdown__content">
        <ul class="eds-select-menu">
            <li>
                <label>
                    <input type="radio" name="my_select" value="Choice 1">
                    <span>Choice 1</span>
                </label>
            </li>
            <li><
                <label>
                    <input type="radio" name="my_select" value="Choice 2">
                    <span>Choice 2</span>
                </label></li>
        </ul>
    </div>
</div>

Multi select

Styles

@import "ericsson-edsw/styles/dropdown";
@import "ericsson-edsw/styles/select";

Scripts

The Multiselect component is built on top of the Dropdown component, and adds a multiselectable behavior where the chosen options can be represented as a counter, inline counter pill, or pills below the input.

import {EdsMultiselect} from "ericsson-edsw";

const edsMultiselectEl = document.getElementById('my-multiselect');
const edsMultiselect = new EdsDropdown(edsMultiselectEl);
// With pills underneath
const edsMultiselectWithPills = new EdsDropdown(edsMultiselectEl, {
    withPills: true
});

Markup-wise, you wrap the .eds-multiselect-button and .eds-multiselect-menu sub components in the trigger and content, and make sure to define your options with below structure:

<div class="eds-dropdown" id="my-multiselect">
    <button class="eds-dropdown__trigger">
        <span class="eds-multiselect-button">Make some choices</span>
    </button>
    <div class="eds-dropdown__content">
        <ul class="eds-multiselect-menu">
            <li>
                <label>
                    <input type="checkbox" name="my_multiselect" value="Choice 1">
                    <span>Choice 1</span>
                </label>
            </li>
            <li><
                <label>
                    <input type="checkbox" name="my_multiselect" value="Choice 2">
                    <span>Choice 2</span>
                </label></li>
        </ul>
    </div>
</div>

For inline pills, you need to set your button like this:

<span class="eds-multiselect-button">
    <span class="eds-multiselect-button__count"></span>
    <span
            class="eds-multiselect-button__placeholder"
            data-selected-label="item | items"
    >
      Multiple with counter
    </span>
</span>

Notice the data-selected-attribute in the placeholder, this is where you set the singular and plural form of the count word, e.g. "1 item" and "4 items". Set the singular form first followed by plural, separated by a pipe (|) character.

Icons

@import "ericsson-edsw/styles/icons/icons"

<span class="eds-icon-alarm-level1"></span>
...
<span class="eds-icon-avatar"></span>

Input

@import "ericsson-edsw/styles/input/input"

<input class="eds-input" type="text" placeholder="Placeholder"/>

<input class="eds-input validate" type="number" placeholder="Number"/>
<span class="eds-validation-error">This field is required</span>

Link

@import "ericsson-edsw/styles/link/link"

<a class="eds-link">Standard link</a>
<a class="eds-link eds-link--subtle">Subtle link</a>
<a class="eds-link eds-link--muted">Muted link</a>

<a class="eds-link">
    This is an external link<i class="eds-icon-launch"></i>
</a>
<a class="eds-link eds-link--subtle">
    This is a subtle external link<i class="eds-icon-launch"></i>
</a>
<a class="eds-link eds-link--muted">
    This is a muted external link<i class="eds-icon-launch"></i>
</a>

List

Possible variations of the eds-list can be controlled with a class modifier: eds-list--compact eds-list--comfy eds-list--numbered - Can be combined with any of the other modifiers

@import "ericsson-edsw/styles/list/list"

<ul class="eds-list">
    <li>Plants</li>
    <li>Animals</li>
</ul>

<ol class="eds-list eds-list--numbered">
    <li>Plants</li>
    <li>Animals</li>
</ol>

<ul class="eds-list eds-list--compact">
    <li>Context aware customer journeys</li>
    <li>Enhanced CSR toolbox web portal</li>
</ul>

<ul class="eds-list eds-list--comfy">
    <li>Context aware customer journeys</li>
    <li>Enhanced CSR toolbox web portal</li>
</ul>

Loader

@import "ericsson-edsw/styles/loader/loader"

<div class="eds-loader eds-loader--small"></div>
<div class="eds-loader"></div>
<div class="eds-loader eds-loader--large"></div>
<button class="eds-loader eds-btn"></button>
<button class="eds-loader eds-btn">Loading</button>

Modal

Modals have different modifier classes that can be used to limit responsive behavior to breakpoint or lower: --xs, --sm, --md, --lg

@import "ericsson-edsw/styles/modal/modal"

Script

Minimum required script to initialize the component:

import {Modal} from "ericsson-edsw";

const htmlElement = document.querySelector('.eds-modal');
const edsModal = new EdsModal(htmlElement);

<div class="eds-modal">
    <div class="eds-modal__content">
        <button class="eds-modal__close-btn eds-icon-cross"></button>
        <h4 class="eds-modal__title">Large Modal (default)</h4>
        <div class="eds-modal__body">
            <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit. Integer pretium id erat et
                pharetra ipsum. Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="eds-modal__actions">
            <button class="eds-btn eds-btn--secondary">Cancel</button>
            <button class="eds-btn">Add</button>
        </div>
    </div>
</div>

Settings

Optional settings to pass to the constructor:

type EdsModalOptions = {
    size?: EdsModalSize;
    layout?: EdsModalLayout;
    mobileLayout?: EdsModalMobileLayout;
    position?: EdsModalPositionStandard | EdsModalPositionSidebar;
    dismissible?: boolean;
    overlay?: boolean;
};

type EdsModalSize = "xs" | "sm" | "md" | "lg";
type EdsModalLayout = "standard" | "sidebar" | "fullscreen";
type EdsModalMobileLayout = "mobile-drawer" | "mobile-center" | "mobile-fullscreen";
type EdsModalPositionStandard = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
type EdsModalPositionSidebar = "left" | "right";

Modal public methods and properties

class EdsModal {
    /**
     * Creates a new Modal component.
     * @param element The root HTML element for the modal.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsModalOptions);

    /**
     * Set the modal size.
     * @param size
     */
    setSize(size: EdsModalSize | undefined): void;

    /**
     * Set the modal layout.
     * @param layout
     */
    setLayout(layout: EdsModalLayout | undefined): void;

    /**
     * Set the modal mobile layout.
     * @param layout
     */
    setMobileLayout(layout: EdsModalMobileLayout | undefined): void;

    /**
     * Set the modal overlay visibility.
     * @param visible
     */
    setOverlay(visible: boolean | undefined): void;

    /**
     * Set the modal position.
     * @param position
     */
    setPosition(position: EdsModalPositionStandard | EdsModalPositionSidebar | undefined): void;

    /**
     * Set the modal dismissible state.
     * @param dismissible
     */
    setDismissible(dismissible: boolean): void;

    /**
     * Opens the modal.
     */
    open(): void;

    /**
     * Closes the modal.
     */
    close(): void;

    /**
     * Adds an event listener for the open event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onOpen(callback: (event: Event) => void): EdsModal;

    /**
     * Adds an event listener for the close event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onClose(callback: (event: Event) => void): EdsModal;
}

Number spinner

Styles

@import "ericsson-edsw/styles/number-spinner/number-spinner"

Script

Minimum required script to initialize the component:

import {EdsNumberSpinner} from "ericsson-edsw";

const edsNumberSpinnerHtmlElement = document.getElementById('my-number-spinner');
const edsNumberSpinner = new EdsNumberSpinner(edsNumberSpinnerHtmlElement);

HTML

<div class="eds-number-spinner">
    <input class="eds-input" type="number" required value="5" min="1" max="10"/>
    <button class="eds-number-spinner__increase eds-btn eds-btn--secondary eds-btn--addon eds-icon-chevron-up"></button>
    <button class="eds-number-spinner__decrease eds-btn eds-btn--secondary eds-btn--addon eds-icon-chevron-down"></button>
    <div class="eds-validation-error">
        <span class="eds-validation-error__required">This field is required</span>
        <span class="eds-validation-error__range">This field is out of range</span>
    </div>
</div>

Public methods and properties

class EdsNumberSpinner extends EdsBaseComponent<EdsNumberSpinnerOptions> {
    /**
     * Creates a new Eds Number Spinner component.
     * @param element The root HTML element for the number spinner.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsNumberSpinnerOptions);

    /**
     * Adds an event listener for the change event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onChange(callback: (event: EdsComponentEvent<{
        value: number;
    }>) => void): EdsNumberSpinner;

    /**
     * Decrements the value of the number spinner.
     */
    stepDown(): void;

    /**
     * Increments the value of the number spinner.
     */
    stepUp(): void;

    /**
     * Sets the value of the number spinner.
     */
    setValue(value: number): void;
}

Pagination

Styles

@import "ericsson-edsw/styles/pagination/pagination"

Script

Minimum required script to initialize the component:

import {EdsPagination} from "ericsson-edsw";

const edsPaginationHtmlElement = document.getElementById('my-pagination');
const edsPagination = new EdsPagination(edsPaginationHtmlElement);

HTML

<!-- Standard pagination -->
<ul class="eds-pagination">
    <li class="eds-pagination__item eds-pagination__item--previous">
        <a>
            <span><i class="eds-icon-arrow-left"></i></span>
        </a>
    </li>
    <li class="eds-pagination__item">
        <a><span>1</span></a>
    </li>
    ...
    <li class="eds-pagination__item">
        <a><span>5</span></a>
    </li>
    <li class="eds-pagination__item eds-pagination__item--next">
        <a>
            <span><i class="eds-icon-arrow-right"></i></span>
        </a>
    </li>
</ul>
</div>

<!--For large datasets-->
<div class="eds-pagination">
    <label>
        Page
        <input class="eds-input" type="text" value="1" min="1" max="2000" />
    </label>
    <button class="eds-btn eds-btn--secondary eds-icon-arrow-right"></button>
        of 2000
    <span class="eds-pagination__item eds-pagination__item--previous">
          <a>
            <span><i class="eds-icon-chevron-left"></i></span>
          </a>
        </span>
    <span class="eds-pagination__item eds-pagination__item--next">
          <a>
            <span><i class="eds-icon-chevron-right"></i></span>
          </a>
    </span>
</div>

Public methods and properties

class EdsPagination extends EdsBaseComponent<EdsPaginationOptions> {
    /**
     * Creates a new Pagination component.
     * @param element The root HTML element for the pagination.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsPaginationOptions);
    
    /**
     * Set the active item by index.
     * @param index
     */
    setActiveIndex(index: number): void;
    /**
     * Close any open dropdowns in the pagination.
     */
    closeCollapsedDropdowns(): void;
    /**
     * Check if the items fit in the container and set the appropriate classes to activate the overflow menu.
     */
    updateOverflowState(): void;
    /**
     * Add an event listener for when the items visibility changes.
     * @param callback
     */
    onItemsVisibilityChanged(callback: (event: EdsComponentEvent<PaginationCollapseResult>) => void): EdsPagination;
    /**
     * Add an event listener for when the active item changes.
     * @param callback
     */
    onActiveItemChange(callback: (event: EdsComponentEvent<number>) => void): EdsPagination;
}

Pill

Please note that it is important that you use <a> or <button> tags for interactive pills to ensure both accessibility and that the styles are applied correctly. The exception is the "Actionable" variant, where the button is inside the pill.

@import "ericsson-edsw/styles/pill/pill"

<!-- Standard pill -->
<span class="eds-pill">Pill</span>

<!-- Linked pill -->
<a class="eds-pill eds-pill--linked" href="URL">Pill default</a>

<!-- Actionable pill -->
<div class="eds-pill eds-pill--actionable">
    Pill actionable
    <button class="eds-pill__delete"></button>
</div>

<!-- Legend pill -->
<button class="eds-pill eds-pill--legend">
    <span></span>Pill legend default
</button>

<!-- Wrap pills in eds-pill-group to get automatic spacing -->
<div class="eds-pill-group">
    <span class="eds-pill">Pill</span>
    <span class="eds-pill">Pill</span>
    <span class="eds-pill">Pill</span>
</div>

Radio button

@import "ericsson-edsw/styles/radiobutton/radiobutton"

<label class="eds-radiobutton">
    <input type="radio" name="radio">
    First
</label>
<label class="eds-radiobutton">
    <input type="radio" name="radio">
    Second
</label>

Switch

Possible variation of eds-switch element can be controlled with class modifier: eds-switch--large - Large variant eds-switch--align-right - Aligns the switch to the right side of the container

@import "ericsson-edsw/styles/switch/switch"

<label class="eds-switch">
    <input type="checkbox">
    <span>
        <span class="eds-switch__slider"></span>
        <span class="eds-switch__action-text eds-switch__action-text--on">On</span>
        <span class="eds-switch__action-text eds-switch__action-text--off">Off</span>
    </span>
</label>

Table

Possible variations of the default eds-table element can be controlled with a class modifier: eds-table--striped - Alternating row color eds-table--row-header - First column on each row will get the same style as table headers eds-table--collapsed-by-rows - Alternative responsive behavior.

@import "ericsson-edsw/styles/table/table"

<div class="eds-table eds-table--striped">
    <table>
        <thead>
        <tr>
            <th>Generation</th>
            <th>Year</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2G</td>
            <td>1993</td>
        </tr>
        <tr>
            <td>3G</td>
            <td>2001</td>
        </tr>
        </tbody>
    </table>
</div>

Tabs

Styles

@import "ericsson-edsw/styles/tabs/tabs"

Script

Minimum required script to initialize the component:

import {EdsTabs} from "ericsson-edsw";

const htmlElement = document.getElementById('my-tabs');
const edsTabs = new EdsTabs(htmlElement);

// Set the scrollOnOverflow setting to true if you want the tabs to scroll when overflowing instead of collapsing.
new EdsTabs(edsTabsElement, {scrollOnOverflow: true})

HTML

<div class="eds-tabs eds-tabs--overflow-menu">
    <div class="eds-tabs__scroll-container">
        <button class="eds-tabs__tab eds-tabs__tab--selected">New York</button>
        <button class="eds-tabs__tab">Paris</button>
        <button class="eds-tabs__tab">Istanbul</button>
        <button class="eds-tabs__tab">Stockholm</button>
        <button class="eds-tabs__tab">Singapore</button>
        <button class="eds-tabs__tab">London</button>
    </div>
</div>

Settings

Optional settings to pass to the constructor:

class EdsTabsOptions {
    /**
     * If true, the tabs will scroll horizontally when the content overflows.
     * @default false
     */
    scrollOnOverflow?: boolean;
    /**
     * Title of the overflow tab.
     * @default "More"
     */
    overflowTabTitle?: string;
}

Public methods and properties

class EdsTabs {
    /**
     * Creates a new Tabs component.
     * @param element The root HTML element for the accordion.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsTabsOptions);

    /**
     * Add event listeners to the active tab change event
     * @param callback
     */
    onActiveTabChanged(callback: (event: EdsComponentEvent<{
        element: HTMLElement;
        index: number;
    }>) => void): EdsTabs;

    /**
     * Add event listeners to the overflow menu expandable state change event
     * @param callback
     */
    onExpandableStateChanged(callback: (event: EdsComponentEvent<{
        expanded: boolean;
    }>) => void): EdsTabs;

    /**
     * Add event listeners to the tab visibility change event
     * @param callback
     */
    onTabVisibilityChanged(callback: (event: EdsComponentEvent<{
        count: number;
    }>) => void): EdsTabs;

    /**
     * Scroll the active tab into view if it is not fully visible in horizontal scroll.
     */
    scrollActiveTabIntoView(): void;

    /**
     * Scroll the tab into view if it is not fully visible in horizontal scroll.
     * @param tabElement
     * @private
     */
    scrollTabIntoView(tabElement: HTMLElement): void;
}

Tooltip

Control tooltip direction in component settings or by adding the specific modifier directly in your HTML. --bottom, --top, --right or --left.

Styles

@import "ericsson-edsw/styles/tooltip/tooltip"

Script

Minimum required script to initialize the component:

import {EdsTooltip} from "ericsson-edsw";

const edsTooltipElement = document.getElementById('my-tooltip');
const edsTooltip = new EdsTooltip(edsTooltipElement);

HTML

Simple tooltip

<span class="eds-tooltip eds-tooltip--bottom">
    Tooltip text
    <span class="eds-tooltip__arrow"></span>
</span>

Interactive tooltip

<div class="eds-tooltip eds-tooltip--bottom eds-tooltip--interactive">
    This is an interactive tooltip.
    <div class="eds-tooltip__actions">
        <button class="eds-btn">Action</button>
        <a class="eds-link eds-link--inverse">Linked text</a>
    </div>
    <span class="eds-tooltip__arrow"></span>
</div>

Settings

Optional settings to pass to the constructor:

class EdsTooltipOptions {
    /**
     * The element that opens the tooltip on click.
     */
    clickTriggerElement?: HTMLElement;
    /**
     * If true, the tooltip will be repositioned if it overflows the viewport.
     */
    autoPosition?: boolean;
    /**
     * The placement of the tooltip.
     */
    placement?: EdsTooltipPlacement;
}

Public methods and properties

class EdsTooltip {
    /**
     * Creates a new Eds Tooltip component.
     * @param element The root HTML element for the tree.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsTooltipOptions);

    /**
     * Opens the tooltip.
     */
    open(): void;

    /**
     * Closes the tooltip.
     */
    close(): void;

    /**
     * Adds an event listener for the open event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onOpen(callback: (event: Event) => void): EdsTooltip;

    /**
     * Adds an event listener for the close event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onClose(callback: (event: Event) => void): EdsTooltip;
}

Tree

Styles

@import "ericsson-edsw/styles/tree/tree"

Script

Minimum required script to initialize the component:

import {EdsTree} from "ericsson-edsw";

const edsTreeHtmlElement = document.querySelector('.eds-tree');
const edsTree = new EdsTree(edsTreeHtmlElement);

HTML

<ul class="eds-tree">
    <li class="eds-tree__expandable">
        <button>Parent</button>
        <div>
            <ul>
                <li><span>Item 2.1</span></li>
                ...
            </ul>
        </div>
    </li>
    <li class="eds-tree__expanded">
        <button>Parent</button>
        <ul>
            <li class="eds-tree__expanded">
                <button>Child</button>
                <div>
                    <ul>
                        <li class="eds-tree__expanded">
                            <button>Grandchild</button>
                            <ul>
                                <li>Flat</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
            ...
        </ul>
    </li>
</ul>

Public methods and properties

class EdsTree {
    /**
     * Creates a new Eds Tree component.
     * @param element The root HTML element for the tree.
     * @param options
     */
    constructor(element: HTMLElement, options?: EdsTreeOptions);

    /**
     * Toggles the open state of the specified tree item.
     * @param expandableItem The tree HTML item to toggle.
     */
    toggle(expandableItem: HTMLElement): void;

    /**
     * Opens the specified tree item.
     * @param treeItem The tree HTML item to open.
     */
    open(treeItem: HTMLElement): void;

    /**
     * Closes the specified tree item.
     * @param treeItem The tree HTML item to close.
     */
    close(treeItem: HTMLElement): void;

    /**
     * Adds an event listener for the open event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onOpen(callback: (event: Event) => void): EdsTree;

    /**
     * Adds an event listener for the close event.
     * @param callback The callback function to invoke when the event is triggered.
     */
    onClose(callback: (event: Event) => void): EdsTree;
}

Typography

@import "ericsson-edsw/styles/typography/typography"

You can activate the EDS Web typography by using provided mixin:

body {
  @include eds-typography
}

Or add the css class to any wrapping html element:

<body class="eds-typography">

@everything-registry/sub-chunk-1594

2 months ago

7 months ago

11 months ago

1 year ago

1 year ago