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>
`;

import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';

// Summary tag with a status icon
const el = document.querySelector('pi-summary-tag');
el.icon = faCircleCheck;
// icon-style can be set as an attribute
el.setAttribute('icon-style', 'success');

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 | | icon | IconDefinition \| undefined | undefined | A FontAwesome IconDefinition displayed between the acronym and tag text (property only, not an HTML attribute) | | iconStyle | string | 'info' | Visual style of the icon background. One of 'info', 'warn', 'danger', 'success', or 'none'. Maps to the icon-style HTML attribute. |

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-icon | The icon 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