DOCSEARCHbyAlgolia
Submit Docs

Lion Web Components

repository·master·Indexed 24 days ago

https://github.com/ing-bank/lion

A set of highly performant, flexible, and accessible (WCAG 2.2 AA) Web Components providing an unopinionated, white-label layer for custom design systems. The ecosystem includes @lion/ui for components, @lion/ajax for networking, and various utility packages like @lion/nodejs-helpers and providence-analytics.

Tokens
176.8K
Snippets
460
Records
1K
Agent score
34%

What's inside Lion

  1. Overview of @lion/nodejs-helpers

    master

    The @lion/nodejs-helpers package is a public utility library designed to share common code, tasks, and utilities between Lion and its extenders (such as ing-web).

    Key Characteristics:

    • Alpha Status: The package is intended to remain in an alpha version indefinitely.
    • Domain-Specific: It is not a general-purpose library. It contains helpers and utilities specific to Lion's use cases to promote the DRY (Don't Repeat Yourself) principle across the ecosystem.
    • Purpose: It serves as a bridge for shared logic between the core Lion project and projects that extend it.

  2. Overview of Lion packages

    master

    The Lion repository contains several specialized packages for UI components, networking, and documentation tooling:

    • @lion/ui: A set of UI components.
    • @lion/ajax: A small wrapper around the fetch API.
    • singleton-manager: Ensures that singleton instances loaded from multiple file locations remain singletons (useful when multiple major versions of a package are present).
    • babel-plugin-extend-docs: A Babel plugin that rewrites imports and templates based on configuration, allowing reuse of documentation from source packages.
    • providence-analytics: A tool that generates usage statistics by analyzing code to measure software impact and effectiveness.
    • publish-docs: A tool for copying and processing documentation within a monorepo for publishing.
    • remark-extend: A remark plugin that extends Markdown by allowing imports from source files.
    • rocket-preset-extend-lion-docs: A rocket preset for automatically maintaining documentation layers.

  3. What is Lion?

    master

    Lion is a white-label, open-source, framework-agnostic Web Component library. It is designed to serve as a functional foundation for building in-house Design Systems.

    Key characteristics include:

    • White Label: Components provide fundamental functionality with minimal styling, allowing you to easily apply your own branding or visual identity.
    • Framework Agnostic: Built using Web Component standards, making them compatible with any JavaScript framework (e.g., Angular, Vue, Svelte, React) or plain HTML.
    • Focus on Core Pillars: Designed specifically for high reusability, deep accessibility, and high performance.

  4. Overview of @lion/ajax

    master

    @lion/ajax is a lightweight wrapper around the native fetch API. It provides several enhanced features:

    • Interceptors: Globally register request and response interceptors to inspect or modify network traffic.
    • Error Handling: Automatically throws errors on 4xx and 5xx HTTP status codes (unlike native fetch).
    • Caching: Built-in support for caching responses to prevent unnecessary network requests.
    • JSON Convenience: ajax.fetchJson simplifies working with JSON by handling serialization, deserialization, and appropriate headers.
    • XSRF Protection: Automatically adds XSRF headers for mutable actions (POST/PUT/PATCH/DELETE) if the XSRF cookie is present and the origin is trusted.
    • Localization: Automatically adds the accept-language header based on the application language.

  6. Localize: Overview and Features

    master

    The Localize system is designed to translate text into multiple languages and handle locale-specific formatting.

    Key Features:

    • Text Translation: Translates text based on a namespace and key.
    • Number Formatting: Formats numbers and amounts according to the active locale.
    • Date Formatting: Formats dates according to the active locale.
    • ES Modules: Built using standard ES modules.

  7. Features of lion-form

    master

    The lion-form component provides several advanced capabilities for managing form state and user interaction:

    • Data synchronization: Automatically syncs data with models.
    • Easy data retrieval: Retrieve form data easily based on field names.
    • Advanced validation: Supports complex validation logic.
    • Interaction states: Enables advanced user interaction scenarios via interaction states.
    • Control registration: Includes a mechanism for registering form controls.
    • Accessibility: Accessible out of the box.

  8. Features of lion-button

    master

    The lion-button component provides several accessibility and usability features:

    • Expanded Clickable Area: The clickable area is larger than the visual size of the button.
    • Form Integration: Includes button-reset and button-submit variants designed to work with native forms and inputs.
    • Implicit Form Submission: The button-submit variant includes integration for implicit form submission, mimicking the behavior of native <form>, <input>, and <button> elements.

  9. Features of lion-input-datepicker

    master

    The lion-input-datepicker component provides an input field with an integrated datepicker. Key features include:

    • Calendar Integration: Uses the internal calendar component.
    • Date Handling: Uses formatDate for parsing and formatting.
    • Localization: Supports overwriting the locale to change formatting and parsing behavior.
    • Validation: Supports date-specific validators with multi-language error messages:
      • IsDate (default)
      • MinDate
      • MaxDate
      • MinMaxDate
      • IsDateDisabled

  10. Evolution of @lion/tooltip and related packages

    master

    The @lion/tooltip package has undergone significant architectural changes over its lifecycle. Key historical milestones include:

    • Accessibility: Added invoker relations for accessibility in 0.12.0.
    • Architecture: Abstracted tooltip arrow logic into a mixin in 0.15.0 to allow reuse in other overlays.
    • Lifecycle Management: In 0.13.0, the OverlayController was updated to handle synchronous constructor phases and lifecycle hooks (connectedCallback for setup and disconnectedCallback for teardown) to ensure proper Shadow DOM rendering and light DOM restoration.
    • Dependency Management: Version 0.10.0 introduced singleton-manager to support nested npm installations. Version 0.8.0 removed the dependency on lion-button.

  12. What is a Combobox

    master

    A lion-combobox is a widget composed of two distinct elements: a single-line textbox and an associated listbox overlay.

    Depending on the configuration and the value entered in the textbox, the combobox can:

    • Filter options in the listbox.
    • Check or focus options.
    • Autocomplete the textbox value.

    It can optionally include a graphical button adjacent to the textbox to indicate the availability of the pop-up menu.

    import { html } from '@mdjs/mdjs-preview';
import { listboxData } from '../listbox/src/listboxData.js';
import '@lion/ui/define/lion-combobox.js';
import '@lion/ui/define/lion-option.js';
import { lazyRender } from './src/lazyRender.js';

export const main = () => html`
  <lion-combobox name="combo" label="Default">
    ${lazyRender(
      listboxData.map(
        (entry, i) => html`
          <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
        `,
      ),
    )}
  </lion-combobox>
`;