@synerise/ds-information-card v1.0.15

id: information-card

title: InformationCard

InformationCard UI Component

Information card shows details of an object or entity. It should be used as an additional information (details) provider when user is selecting something using menu or dropdown.

Installation

npm i @synerise/ds-information-card
or
yarn add @synerise/ds-information-card

Development

# lerna bootstrap # install all required reused shared lerna packages
yarn workspace @synerise/ds-information-card lint
yarn workspace @synerise/ds-information-card build

Usage

import { InformationCardTooltip } from '@synerise/ds-information-card';

<InformationCardTooltip
  informationCardProps={{
    title: 'Title',
    subtitle: 'Subtitle',
    icon: <SegmentM color="mars" />,
    iconColor: 'mars',
    avatarTooltipText: 'Tooltip Text',
  }}
  triggerProps={{
    popupPlacement: 'top'
  }}
>
  <button>Element to attach infocard to</button>
</InformationCardTooltip>;

Generally, components require being capable of rendering this and usually an additional effort is required to get them to support rendering. See text's menu item element packages/components/menu/src/Elements/Item/Text/Text.tsx.

Note that title and subtitle are required props. For just a single line of text consider using @synerise/ds-tooltip.

Usage with dropdown and other components relying on rc-trigger getPopupContainer

Some components render elements via portal, in such a case if tthey are listening for global events like click (for e.g. closing the dropdown) - developer using this component is responsible for proper handling of such a clicks. One of ways is making use of overlayInnerClass popover's class property to later. By default class is ignore-click-outside (so looking for domElement.closest('.ignore-click-outside') to determine whether handler should be skipped should be fine).

Demo

API

ActionsMenuProps

Quick actions menu

InformationCardPropertyListItem

Displays a list of properties (label & value)

InformationCardSummaryItem

Displays a list of icons with value and optional tooltip

InformationCardTooltip

Displays InformationCard as a tooltip with children node as trigger