Polarity Integration Component Library

Summary Tag Component

Displays an integration summary with a colored acronym badge and tag text.

Installation

npm install @polarityio/pi-summary-tag

Peer Dependencies

• lit ^3.0.0

Usage

import '@polarityio/pi-summary-tag';

<!-- Basic summary tag -->
<pi-summary-tag acronym="VT" tag="VirusTotal"></pi-summary-tag>

import { html } from 'lit';

// Summary tag with custom colors
html`
  <pi-summary-tag
    acronym="PA"
    tag="Palo Alto"
    .color=${{ background: '#2c5282', text: '#ffffff', textBold: 'rgba(255, 255, 255, 0.8)' }}
  ></pi-summary-tag>
`;

API Reference

Properties

| Property | Type | Default | Description | | --------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------- | | acronym | string | '' | The acronym text displayed in the colored badge | | tag | string | '' | The tag/label text displayed next to the acronym | | color | IPiTagColors \| undefined | undefined | Custom color configuration object with background, text, and textBold properties |

The IPiTagColors interface:

interface IPiTagColors {
  background: string; // Background color of the tag
  text: string; // Text color for the tag text
  textBold: string; // Text color for the acronym
}

CSS Custom Properties

| Property | Default | Description | | -------------------------------- | ----------------------------------------- | ---------------------------------------------- | | --pi-summary-tag-padding | 0.25em 0.4em 0.25em 0.25em | Padding for the summary tag container | | --pi-integration-color | var(--pi-integration-bg-green, #6aa543) | Background color when no color prop is set | | --pi-integration-text-color | #ffffff | Text color when no color prop is set | | --pi-integration-acronym-color | rgba(255, 255, 255, 0.8) | Acronym text color when no color prop is set |

CSS Parts

| Part Name | Description | | ------------------------- | -------------------------- | | px-summary-tag | The main container element | | px-summary-tag-acronym | The acronym text area | | px-summary-tag-tag-text | The tag/label text area |

Theming

Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.

Pre-built integration theme classes are available: pi-integration-teal, pi-integration-purple, pi-integration-blue, pi-integration-red, pi-integration-green, and pi-integration-orange.

License

MIT