@synerise/ds-information-card 0.4.9 → 0.4.11

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.4.10...@synerise/ds-information-card@0.4.11) (2024-06-27)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+## [0.4.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.4.9...@synerise/ds-information-card@0.4.10) (2024-06-24)
+
+
+### Bug Fixes
+
+* **information-card:** updated ui and added actions and properties ([c30ed42](https://github.com/Synerise/synerise-design/commit/c30ed4203511f2c29aeea6d8bc17a6fd6170ffe5))
+
+
+
+
+
 ## [0.4.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.4.8...@synerise/ds-information-card@0.4.9) (2024-06-21)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/README.md

@@ -9,6 +9,7 @@ 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
@@ -24,15 +25,18 @@ yarn workspace @synerise/ds-information-card build
 ```
 
 ## Usage
+
 ```js
-import InformationCard from '@synerise/ds-information-card'
-import Popover from 'antd/popover'
+import InformationCard from '@synerise/ds-information-card';
+import Popover from 'antd/popover';
 
 <Popover
-    defaultVisible={false}
-    placement="right"
-    content={() => <InformationCard title="Entity full name" subtitle="entity.id"/>}
->Entity short name</Popover>
+  defaultVisible={false}
+  placement="right"
+  content={() => <InformationCard title="Entity full name" subtitle="entity.id" />}
+>
+  Entity short name
+</Popover>;
 ```
 
 Generally, components require being capable of rendering this and usually an additional effort is required to get them to support rendering.
@@ -49,9 +53,11 @@ By default class is `ignore-click-outside` (so looking for `domElement.closest('
 
 <iframe src="/storybook-static/iframe.html?id=components-information-card--default"></iframe>
 
-## API| Property                    | Description                                                                                                                                                                          | Type                                                | Default |
-|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------|---------|
-| actionButton                | custom jsx element for rendering in action button (bottom-right)                                                                                                                     | `boolean` &#124;  `(() => ReactNode)`               | -       |
+## API
+
+| Property                    | Description                                                                                                                                                                          | Type                                                | Default |     |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ------- | --- |
+| actionButton                | custom jsx element for rendering in action button (bottom-right)                                                                                                                     | `boolean` &#124; `(() => ReactNode)`                | -       |
 | actionButtonCallback        | default action button callback method                                                                                                                                                | `() => void`                                        | -       |
 | actionButtonTooltipText     | default action button tooltip                                                                                                                                                        | `string`                                            | -       |
 | asTooltip                   | adjusts the styles to be displayed as a tooltip                                                                                                                                      | `boolean`                                           | -       |
@@ -69,3 +75,38 @@ By default class is `ignore-click-outside` (so looking for `domElement.closest('
 | renderFooter                | render prop for rendering the bottom part of (by default section with a small text and an optional action button on the right)                                                       | `() => JSX.Element`                                 | -       |
 | subtitle                    | Second line. Required prop. Can be copied.                                                                                                                                           | `string`                                            | -       |
 | title                       | Title of the information-card. Can be copied.                                                                                                                                        | `string`                                            | -       |
+| actionsMenu                 | Config for displaying "quick actions" - a button in footer that reveals a menu with links                                                                                            | `ActionsMenuProps`                                  | -       |
+| propertyListItems           | an array of object properties to list, can also include dividers                                                                                                                     | `InformationCardPropertyListItem[]`                 | -       |
+| summaryItems                | An array of (label + icon + optional tooltip) summary items to display below properties                                                                                              | `InformationCardSummaryItem[]`                      | -       |
+
+### ActionsMenuProps
+
+Quick actions menu
+
+| Property        | Description                         | Type                 | Default         |
+| --------------- | ----------------------------------- | -------------------- | --------------- |
+| items           | Array of menu items. See ds-menu    | `MenuItemProps[]`    | -               |
+| menuProps       | Menu props. See ds-menu             | `Partial<MenuProps>` | -               |
+| buttonLabel     | footer button label that shows menu | `ReactNode`          | 'Quick actions' |
+| navigationLabel | Back to content navigation label    | `ReactNode`          | 'Quick actions' |
+
+### InformationCardPropertyListItem
+
+Displays a list of properties (label & value)
+
+| Property | Description                      | Type        | Default |
+| -------- | -------------------------------- | ----------- | ------- |
+| label    | label to display in the list     | `ReactNode` | -       |
+| value    | valur to display in the list     | `ReactNode` | -       |
+| type     | Back to content navigation label | `divider`   | -       |
+
+### InformationCardSummaryItem
+
+Displays a list of icons with value and optional tooltip
+
+| Property     | Description                    | Type           | Default |
+| ------------ | ------------------------------ | -------------- | ------- |
+| icon         | Icon to render                 | `ReactNode`    | -       |
+| label        | Label to display               | `ReactNode`    | -       |
+| tooltip      | Tooltip text                   | `ReactNode`    | -       |
+| tooltipProps | Tooltip config, see ds-tooltip | `TooltipProps` | -       |

package/dist/InformationCard.d.ts

@@ -1,26 +1,26 @@
-import React, { PropsWithChildren } from 'react';
-import { InlineAlertType } from '@synerise/ds-alert/dist/InlineAlert/InlineAlert.types';
-import { InformationCardProps, BadgeData } from './InformationCard.types';
+import React from 'react';
 import 'rc-trigger/assets/index.less';
-/**
- * Custom builder for badgeSlots with icon
- */
-export declare function buildIconBadge(data: BadgeData): React.JSX.Element;
-declare const InformationCard: React.ForwardRefExoticComponent<InformationCardProps & React.RefAttributes<HTMLDivElement>>;
-export declare function buildInitialsBadge(name: string): React.JSX.Element;
-/**
- * helper for wrapping a notice
- */
-export declare function buildExtraInfo(message: string, level?: InlineAlertType): React.JSX.Element;
-/**
- * Helper for returning initials. Handles cases such as John Smith, J. Smith, JS.
- */
-export declare function getInitials(name: string): string;
-type InitialsProps = PropsWithChildren<{
-    name?: string;
-}>;
-/**
- * Wrapper for obtaining an avatar based on initials
- */
-export declare function Initials({ name, children }: InitialsProps): React.JSX.Element;
+declare const InformationCard: React.ForwardRefExoticComponent<{
+    actionButton?: boolean | (() => React.ReactNode) | undefined;
+    actionButtonCallback?: (() => void) | undefined;
+    actionButtonTooltipText?: string | undefined;
+    actionsMenu?: Omit<import("./InformationCardActions/InformationCardActions.types").InformationCardActionsProps, "onHeaderClick" | "maxHeight"> | undefined;
+    asTooltip?: boolean | undefined;
+    avatarTooltipText?: string | undefined;
+    className?: string | undefined;
+    copyTooltip?: string | undefined;
+    copiedTooltip?: string | undefined;
+    descriptionConfig?: string | import("@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types").SubtleTextAreaProps | null | undefined;
+    renderFooter?: (() => JSX.Element) | undefined;
+    footerText?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconColor?: string | undefined;
+    notice?: React.ReactNode;
+    renderBadge?: Function | null | undefined;
+    subtitle?: string | undefined;
+    title: string;
+    renderAdditionalDescription?: (() => React.ReactNode) | undefined;
+    propertyListItems?: import(".").InformationCardPropertyItem[] | undefined;
+    summaryItems?: import("./InformationCardSummary/InformationCardSummary.types").InformationCardSummaryItem[] | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default InformationCard;

package/dist/InformationCard.js

@@ -1,50 +1,28 @@
-var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription"];
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "actionsMenu", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription", "propertyListItems", "summaryItems"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { forwardRef, useState } from 'react';
-import { Text } from '@synerise/ds-typography';
-import Button from '@synerise/ds-button';
-import Divider from '@synerise/ds-divider';
-import Icon, { ArrowRuCircleM, SegmentM } from '@synerise/ds-icon';
-import Avatar, { ObjectAvatar } from '@synerise/ds-avatar';
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { SegmentM } from '@synerise/ds-icon';
 import Card from '@synerise/ds-card';
-import SubtleForm from '@synerise/ds-subtle-form';
-import Tooltip from '@synerise/ds-tooltip';
+import { useResizeObserver } from '@synerise/ds-utils';
 import Copy from '@synerise/ds-description/dist/Row/Copy';
 import { RowWrapper } from '@synerise/ds-description/dist/Row/DescriptionRow.styles';
-import Badge from '@synerise/ds-badge';
-import Alert from '@synerise/ds-alert';
-import * as S from './InformationCard.styles';
 import "rc-trigger/assets/index.css";
-/**
- * Custom builder for badgeSlots with icon
- */
-
-export function buildIconBadge(data) {
-  var avatarExtra = {
-    object: {}
-  };
-
-  if (data.avatarTooltipText) {
-    avatarExtra.object = {
-      description: data.avatarTooltipText
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(ObjectAvatar, _extends({}, avatarExtra, {
-    color: data.iconColor,
-    iconComponent: /*#__PURE__*/React.createElement(Icon, {
-      component: data.iconElement
-    })
-  }));
-}
+import * as S from './InformationCard.styles';
+import { InformationCardFooter } from './InformationCardFooter/InformationCardFooter';
+import { buildIconBadge } from './InformationCard.utils';
+import { InformationCardActions } from './InformationCardActions/InformationCardActions';
+import { InformationCardDescription } from './InformationCardDescription/InformationCardDescription';
+import { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
+import { InformationCardSummary } from './InformationCardSummary/InformationCardSummary';
 var InformationCard = forwardRef(function (_ref, ref) {
   var actionButton = _ref.actionButton,
       actionButtonTooltipText = _ref.actionButtonTooltipText,
       actionButtonCallback = _ref.actionButtonCallback,
+      actionsMenu = _ref.actionsMenu,
       asTooltip = _ref.asTooltip,
       avatarTooltipText = _ref.avatarTooltipText,
       copyTooltip = _ref.copyTooltip,
@@ -61,8 +39,19 @@ var InformationCard = forwardRef(function (_ref, ref) {
       descriptionConfig = _ref.descriptionConfig,
       className = _ref.className,
       renderAdditionalDescription = _ref.renderAdditionalDescription,
+      propertyListItems = _ref.propertyListItems,
+      summaryItems = _ref.summaryItems,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var _useState = useState(false),
+      isActionsMenuVisible = _useState[0],
+      setIsActionsMenuVisible = _useState[1];
+
+  var mainSlideRef = useRef(null);
+
+  var _useResizeObserver = useResizeObserver(mainSlideRef),
+      height = _useResizeObserver.height;
+
   var copyableSlot = function copyableSlot(content) {
     return /*#__PURE__*/React.createElement(RowWrapper, {
       copyable: true
@@ -81,15 +70,29 @@ var InformationCard = forwardRef(function (_ref, ref) {
     })));
   };
 
-  return /*#__PURE__*/React.createElement(S.InfoCardWrapper, {
+  var hasFooter = !!(footerText || actionButton || actionsMenu); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(function () {
+    var _mainSlideRef$current;
+
+    if (!((_mainSlideRef$current = mainSlideRef.current) != null && _mainSlideRef$current.clientWidth)) {
+      setIsActionsMenuVisible(false);
+    }
+  });
+  return /*#__PURE__*/React.createElement(S.InfoCardWrapper, _extends({
     "data-testid": "information-card",
+    "data-popup-container": true,
     ref: ref,
     "aria-label": "information card",
     className: "ds-info-card " + className,
-    asTooltip: asTooltip
+    asTooltip: asTooltip,
+    isActionsMenuVisible: isActionsMenuVisible,
+    hasActionsMenu: !!actionsMenu,
+    hasFooter: !!(renderFooter || hasFooter)
+  }, props), /*#__PURE__*/React.createElement(S.InfoCardSlidesWrapper, null, /*#__PURE__*/React.createElement(S.InfoCardSlide, {
+    ref: mainSlideRef
   }, /*#__PURE__*/React.createElement(Card, {
-    background: "white" // @ts-ignore
-    ,
+    background: "white",
     renderBadge: function renderBadge() {
       var _renderBadge;
 
@@ -110,138 +113,29 @@ var InformationCard = forwardRef(function (_ref, ref) {
     withoutPadding: true,
     lively: false,
     withHeader: true
-  }, (descriptionConfig !== null || notice) && /*#__PURE__*/React.createElement(DescriptionField, {
+  }, (descriptionConfig !== null || notice) && /*#__PURE__*/React.createElement(InformationCardDescription, {
     extraInformation: notice || /*#__PURE__*/React.createElement(React.Fragment, null),
     descriptionConfig: descriptionConfig
-  }), renderAdditionalDescription && renderAdditionalDescription(), renderFooter && renderFooter() || (footerText || actionButton) && /*#__PURE__*/React.createElement(Footer, _extends({
-    text: footerText
-  }, props, {
+  }), renderAdditionalDescription && renderAdditionalDescription(), propertyListItems && /*#__PURE__*/React.createElement(InformationCardPropertyList, {
+    items: propertyListItems
+  }), summaryItems && /*#__PURE__*/React.createElement(InformationCardSummary, {
+    items: summaryItems
+  }), renderFooter && renderFooter() || hasFooter && /*#__PURE__*/React.createElement(InformationCardFooter, {
+    text: footerText,
     actionButton: actionButton,
     actionButtonCallback: actionButtonCallback,
-    actionButtonTooltipText: actionButtonTooltipText
-  }))));
-});
-export function buildInitialsBadge(name) {
-  return /*#__PURE__*/React.createElement(Initials, {
-    name: name
-  });
-}
-/**
- * helper for wrapping a notice
- */
-
-export function buildExtraInfo(message, level) {
-  return /*#__PURE__*/React.createElement(S.ExtraInfo, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
-    type: level || 'warning',
-    message: message
-  }));
-}
-/**
- * Helper for returning initials. Handles cases such as John Smith, J. Smith, JS.
- */
-
-export function getInitials(name) {
-  var hasTokens = name.indexOf(' ') !== -1;
-  return name.substring(0, hasTokens ? 1 : 2) + (hasTokens ? name.charAt(name.lastIndexOf(' ') + 1) : '');
-}
-
-/**
- * Wrapper for obtaining an avatar based on initials
- */
-export function Initials(_ref2) {
-  var name = _ref2.name,
-      children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(Avatar, {
-    size: "medium",
-    shape: "circle",
-    backgroundColor: "blue"
-  }, name && getInitials(name) || children));
-}
-
-/**
- * Returns default information card's description section.
- */
-function DescriptionField(_ref3) {
-  var _ref3$extraInformatio = _ref3.extraInformation,
-      extraInformation = _ref3$extraInformatio === void 0 ? undefined : _ref3$extraInformatio,
-      descriptionConfig = _ref3.descriptionConfig;
-
-  // note: if popover containing this information card will have
-  // `destroyTooltipOnHide` (or `keepParent`) set to false, then description state hook will be getting reset
-  var _useState = useState(''),
-      description = _useState[0],
-      setDescription = _useState[1];
-
-  var renderDescription = function renderDescription() {
-    if (descriptionConfig) {
-      return typeof descriptionConfig === 'string' ? /*#__PURE__*/React.createElement(S.NonEditableWrapper, null, descriptionConfig) : /*#__PURE__*/React.createElement(SubtleForm.TextArea, _extends({
-        minRows: 1,
-        value: description,
-        onChange: function onChange(value) {
-          descriptionConfig.onChange && descriptionConfig.onChange(value);
-          setDescription(value);
-        },
-        placeholder: "placeholder",
-        suffixTooltip: "Edit"
-      }, descriptionConfig, descriptionConfig.error ? {
-        error: descriptionConfig.error,
-        errorText: function errorText(isErr, text) {
-          return isErr ? text : '';
-        }
-      } : {}, {
-        disabled: descriptionConfig.disabled
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  };
-
-  return /*#__PURE__*/React.createElement(S.DescriptionWrapper, {
-    "data-testid": "information-card-description"
-  }, /*#__PURE__*/React.createElement(S.AlertWrapper, null, extraInformation), descriptionConfig && renderDescription());
-}
-/**
- * Tooltip helper for action button in footer
- */
-
-
-function withTooltip(Component, actionButtonTooltipText, props) {
-  // type is related to ds-tooltip's: shouldRenderDescription (it makes use of description prop only if tooltip type!=='default')
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    type: 'default',
-    title: actionButtonTooltipText
-  }, props), Component);
-}
-/**
- * Renders footer part including handling action button with an optional tooltip
- */
-
-
-function Footer(_ref4) {
-  var _ref4$actionButton = _ref4.actionButton,
-      actionButton = _ref4$actionButton === void 0 ? false : _ref4$actionButton,
-      actionButtonCallback = _ref4.actionButtonCallback,
-      _ref4$actionButtonToo = _ref4.actionButtonTooltipText,
-      actionButtonTooltipText = _ref4$actionButtonToo === void 0 ? '' : _ref4$actionButtonToo,
-      _ref4$text = _ref4.text,
-      text = _ref4$text === void 0 ? '' : _ref4$text;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    marginTop: 8,
-    marginBottom: 0,
-    dashed: true
-  }), /*#__PURE__*/React.createElement(S.Flex, {
-    "data-testid": "information-card-footer",
-    style: {
-      alignItems: 'center'
+    actionButtonTooltipText: actionButtonTooltipText,
+    actionsMenuButtonLabel: actionsMenu == null ? void 0 : actionsMenu.buttonLabel,
+    actionsMenuButtonOnClick: actionsMenu ? function () {
+      return setIsActionsMenuVisible(true);
+    } : undefined
+  }))), actionsMenu && /*#__PURE__*/React.createElement(S.InfoCardSlide, {
+    height: height
+  }, /*#__PURE__*/React.createElement(InformationCardActions, _extends({}, actionsMenu, {
+    maxHeight: height,
+    onHeaderClick: function onHeaderClick() {
+      return setIsActionsMenuVisible(false);
     }
-  }, /*#__PURE__*/React.createElement(S.FlexGrow, null, text && /*#__PURE__*/React.createElement(Text, {
-    size: "xsmall"
-  }, text)), /*#__PURE__*/React.createElement(S.ActionButtonContainer, null, actionButton && actionButton === true && withTooltip( /*#__PURE__*/React.createElement(Button, {
-    color: "grey",
-    type: "secondary",
-    mode: "single-icon",
-    onClick: actionButtonCallback
-  }, /*#__PURE__*/React.createElement(ArrowRuCircleM, null)), actionButtonTooltipText) || typeof actionButton === 'function' && actionButton())));
-}
-
+  })))));
+});
 export default InformationCard;

package/dist/InformationCard.styles.d.ts

@@ -1,12 +1,22 @@
 /// <reference types="react" />
 export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FlexGrow: import("styled-components").StyledComponent<"div", any, import("react").DetailedHTMLFactory<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+export declare const Divider: import("styled-components").StyledComponent<({ marginBottom, marginTop, style, labelAbove, labelBelow, ...antdDividerProps }: import("@synerise/ds-divider").DividerProps) => import("react").JSX.Element, any, {}, never>;
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsMenuItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexGrow: import("styled-components").StyledComponent<"div", any, {
     grow?: number | undefined;
 }, never>;
 export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoCardSlidesWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoCardSlide: import("styled-components").StyledComponent<"div", any, {
+    height?: number | undefined;
+}, never>;
 export declare const InfoCardWrapper: import("styled-components").StyledComponent<"div", any, {
     footerText?: string | undefined;
     asTooltip?: boolean | undefined;
+    hasActionsMenu?: boolean | undefined;
+    isActionsMenuVisible?: boolean | undefined;
+    hasFooter?: boolean | undefined;
 }, never>;
 export declare const AlertWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NonEditableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -23,3 +33,10 @@ export declare const ExtraInfo: import("styled-components").StyledComponent<"div
 export declare const TooltipComponentClassName: import("styled-components").StyledComponent<"div", any, Omit<import("@synerise/ds-tooltip/dist/Tooltip.types").default, "type"> & {
     tooltipType: import("@synerise/ds-tooltip").tooltipTypes;
 }, never>;
+export declare const InformationCardActionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InformationCardPropertyItemValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InformationCardSummaryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationCardSummaryItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InformationCard.styles.js

@@ -2,53 +2,89 @@ var _templateObject;
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-import styled, { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import { CardStyles } from '@synerise/ds-card';
+import DSDivider from '@synerise/ds-divider';
+import { macro } from '@synerise/ds-typography';
 import * as S from '@synerise/ds-tooltip/dist/Tooltip.styles';
-import { ButtonStyles } from '@synerise/ds-button';
+var INFOCARD_WIDTH = 320;
 export var Flex = styled.div.withConfig({
   displayName: "InformationCardstyles__Flex",
   componentId: "zxu5qa-0"
 })(["display:flex;"]);
+export var Divider = styled(DSDivider).withConfig({
+  displayName: "InformationCardstyles__Divider",
+  componentId: "zxu5qa-1"
+})(["border-color:", ";margin:8px 0;"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var FooterWrapper = styled(Flex).withConfig({
+  displayName: "InformationCardstyles__FooterWrapper",
+  componentId: "zxu5qa-2"
+})(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
+  return props.theme.palette['grey-050'];
+}, function (props) {
+  return props.theme.palette['grey-100'];
+});
+export var ActionsMenuItems = styled.div.withConfig({
+  displayName: "InformationCardstyles__ActionsMenuItems",
+  componentId: "zxu5qa-3"
+})([""]);
 export var FlexGrow = styled.div.withConfig({
   displayName: "InformationCardstyles__FlexGrow",
-  componentId: "zxu5qa-1"
-})(["flex-grow:", ";margin-top:16px;margin-bottom:8px;"], function (_ref) {
+  componentId: "zxu5qa-4"
+})(["flex-grow:", ";"], function (_ref) {
   var _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? 1 : _ref$grow;
   return grow;
 });
 export var ActionButtonContainer = styled.div.withConfig({
   displayName: "InformationCardstyles__ActionButtonContainer",
-  componentId: "zxu5qa-2"
-})(["margin:8px 0 8px 0;"]);
+  componentId: "zxu5qa-5"
+})([""]);
+export var InfoCardSlidesWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__InfoCardSlidesWrapper",
+  componentId: "zxu5qa-6"
+})([""]);
+export var InfoCardSlide = styled.div.withConfig({
+  displayName: "InformationCardstyles__InfoCardSlide",
+  componentId: "zxu5qa-7"
+})(["", ""], function (props) {
+  return props.height && "max-height: " + props.height + "px;";
+});
 export var InfoCardWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
-  componentId: "zxu5qa-3"
-})(["margin-left:", ";width:294px;overflow-wrap:anywhere;", "{background-color:white;margin-bottom:1px;font-weight:400;padding:16px 16px 8px 16px;border-radius:3px;box-shadow:", ";}", "{padding-top:0;}", "{padding:0 0 1px 0;margin-bottom:8px;}", "{align-self:center;margin-left:10px;margin-right:10px;}", "{margin:0;}", "", "{margin-bottom:0;font-size:14px;}", "{width:32px;height:32px;}.ds-button{background:transparent;}.btn-focus,.btn-focus:hover{box-shadow:unset;}"], function (props) {
+  componentId: "zxu5qa-8"
+})(["margin-left:", ";width:", "px;overflow:hidden;", "{width:", "px;display:flex;transition:left 0.3s;position:relative;left:", ";}", "{width:", "px;height:min-content;}overflow-wrap:anywhere;background-color:white;border-radius:3px;box-shadow:", ";", "{font-weight:400;", "}", "{padding-top:0;display:flex;flex-direction:column;gap:8px;}", "{padding:16px 16px 1px 16px;margin-bottom:16px;}", "{align-self:center;margin-left:10px;margin-right:10px;}", "{margin:0;}", "{margin:0;height:20px;}", "{height:16px;}", "", "{margin-bottom:0;font-size:14px;}.ds-button{background:transparent;}.btn-focus,.btn-focus:hover{box-shadow:unset;}"], function (props) {
   return props.asTooltip ? '0' : '8px';
-}, CardStyles.Card.Container, function (props) {
+}, INFOCARD_WIDTH, InfoCardSlidesWrapper, function (props) {
+  return props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH;
+}, function (props) {
+  return props.isActionsMenuVisible ? "-" + INFOCARD_WIDTH + "px" : '0';
+}, InfoCardSlide, INFOCARD_WIDTH, function (props) {
   return props.asTooltip ? 'unset' : '0 16px 32px 0 rgba(35, 41, 54, 0.1)';
-}, CardStyles.Card.PaddingWrapper, CardStyles.Card.Header, CardStyles.Card.IconContainer, CardStyles.Card.HeaderContent, CardStyles.Card.Title, CardStyles.Card.Title, ButtonStyles.Button.AntdButton);
+}, CardStyles.Card.Container, function (props) {
+  return !props.hasFooter && css(["padding-bottom:8px;margin-bottom:1px;"]);
+}, CardStyles.Card.PaddingWrapper, CardStyles.Card.Header, CardStyles.Card.IconContainer, CardStyles.Card.HeaderContent, CardStyles.Card.TitleWrapper, CardStyles.Card.Description, CardStyles.Card.Title, CardStyles.Card.Title);
 export var AlertWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__AlertWrapper",
-  componentId: "zxu5qa-4"
+  componentId: "zxu5qa-9"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var NonEditableWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__NonEditableWrapper",
-  componentId: "zxu5qa-5"
+  componentId: "zxu5qa-10"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var DescriptionWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__DescriptionWrapper",
-  componentId: "zxu5qa-6"
-})([""]);
+  componentId: "zxu5qa-11"
+})(["padding:0 16px;"]);
 /**
  * This component can be used to style container with popovers/tooltips to disable arrow.
  */
 
 export var HidePopoverArrowWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__HidePopoverArrowWrapper",
-  componentId: "zxu5qa-7"
+  componentId: "zxu5qa-12"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
 /**
  * Should be mounted in application where.
@@ -57,6 +93,36 @@ export var HidePopoverArrowWrapper = styled.div.withConfig({
 export var GlobalCSSHidePopoverArrow = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  .ant-popover-arrow-content,.ant-tooltip-arrow-content {\n    display: none;\n}"])));
 export var ExtraInfo = styled.div.withConfig({
   displayName: "InformationCardstyles__ExtraInfo",
-  componentId: "zxu5qa-8"
+  componentId: "zxu5qa-13"
 })(["margin-bottom:1px;"]);
-export var TooltipComponentClassName = S.TooltipComponent;
+export var TooltipComponentClassName = S.TooltipComponent;
+export var InformationCardActionsWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__InformationCardActionsWrapper",
+  componentId: "zxu5qa-14"
+})(["padding:8px;"]);
+export var InformationCardPropertyListWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
+  componentId: "zxu5qa-15"
+})(["display:flex;flex-direction:column;padding:0 16px 8px;"]);
+export var InformationCardPropertyItem = styled.div.withConfig({
+  displayName: "InformationCardstyles__InformationCardPropertyItem",
+  componentId: "zxu5qa-16"
+})(["display:flex;align-items:center;height:24px;gap:8px;"]);
+export var InformationCardPropertyItemLabel = styled.span.withConfig({
+  displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
+  componentId: "zxu5qa-17"
+})(["", ""], macro.small);
+export var InformationCardPropertyItemValue = styled.span.withConfig({
+  displayName: "InformationCardstyles__InformationCardPropertyItemValue",
+  componentId: "zxu5qa-18"
+})(["", " font-weight:500;"], macro.small);
+export var InformationCardSummaryWrapper = styled(Flex).withConfig({
+  displayName: "InformationCardstyles__InformationCardSummaryWrapper",
+  componentId: "zxu5qa-19"
+})(["margin:0 16px;border-top:dashed 1px ", ";padding-top:16px;padding-bottom:8px;gap:4px;flex-wrap:wrap;"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var InformationCardSummaryItem = styled(Flex).withConfig({
+  displayName: "InformationCardstyles__InformationCardSummaryItem",
+  componentId: "zxu5qa-20"
+})(["font-weight:500;align-items:center;gap:4px;"]);

package/dist/InformationCard.types.d.ts

@@ -1,7 +1,10 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
 import { Color, Size } from '@synerise/ds-avatar/dist/Avatar.types';
 import { IconProps } from '@synerise/ds-icon';
+import { InformationCardPropertyListProps } from './InformationCardPropertyList/InformationCardPropertyList.types';
+import { InformationCardActionsProps } from './InformationCardActions/InformationCardActions.types';
+import { InformationCardSummaryProps } from './InformationCardSummary/InformationCardSummary.types';
 export type BadgeData = {
     type?: string;
     title?: string;
@@ -24,6 +27,10 @@ export type InformationCardProps = {
      * default action button tooltip
      */
     actionButtonTooltipText?: string;
+    /**
+     * renders "Quick actions" button in footer that slides main content to reveal actionsMenu.items (menu)
+     */
+    actionsMenu?: Omit<InformationCardActionsProps, 'onHeaderClick' | 'maxHeight'>;
     /**
      * adjusts the styles to be displayed as a tooltip
      */
@@ -83,4 +90,6 @@ export type InformationCardProps = {
      * list of object parameters to display
      */
     renderAdditionalDescription?: () => ReactNode;
-};
+    propertyListItems?: InformationCardPropertyListProps['items'];
+    summaryItems?: InformationCardSummaryProps['items'];
+} & HTMLAttributes<HTMLDivElement>;

package/dist/InformationCard.utils.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import { InlineAlertType } from '@synerise/ds-alert/dist/InlineAlert/InlineAlert.types';
+import { BadgeData } from './InformationCard.types';
+export declare function buildInitialsBadge(name: string): React.JSX.Element;
+export declare function buildExtraInfo(message: string, level?: InlineAlertType): React.JSX.Element;
+export declare function getInitials(name: string): string;
+type InitialsProps = PropsWithChildren<{
+    name?: string;
+}>;
+export declare function Initials({ name, children }: InitialsProps): React.JSX.Element;
+export declare function buildIconBadge(data: BadgeData): React.JSX.Element;
+export {};

package/dist/InformationCard.utils.js

@@ -0,0 +1,50 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Alert from '@synerise/ds-alert';
+import Avatar, { ObjectAvatar } from '@synerise/ds-avatar';
+import Badge from '@synerise/ds-badge';
+import Icon from '@synerise/ds-icon';
+import * as S from './InformationCard.styles';
+export function buildInitialsBadge(name) {
+  return /*#__PURE__*/React.createElement(Initials, {
+    name: name
+  });
+}
+export function buildExtraInfo(message, level) {
+  return /*#__PURE__*/React.createElement(S.ExtraInfo, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
+    type: level || 'warning',
+    message: message
+  }));
+}
+export function getInitials(name) {
+  var hasTokens = name.indexOf(' ') !== -1;
+  return name.substring(0, hasTokens ? 1 : 2) + (hasTokens ? name.charAt(name.lastIndexOf(' ') + 1) : '');
+}
+export function Initials(_ref) {
+  var name = _ref.name,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "medium",
+    shape: "circle",
+    backgroundColor: "blue"
+  }, name && getInitials(name) || children));
+}
+export function buildIconBadge(data) {
+  var avatarExtra = {
+    object: {}
+  };
+
+  if (data.avatarTooltipText) {
+    avatarExtra.object = {
+      description: data.avatarTooltipText
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ObjectAvatar, _extends({}, avatarExtra, {
+    color: data.iconColor,
+    iconComponent: /*#__PURE__*/React.createElement(Icon, {
+      component: data.iconElement
+    })
+  }));
+}

package/dist/InformationCardActions/InformationCardActions.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationCardActionsProps } from './InformationCardActions.types';
+export declare const InformationCardActions: ({ onHeaderClick, navigationLabel, items, menuProps, maxHeight, }: InformationCardActionsProps) => React.JSX.Element;

package/dist/InformationCardActions/InformationCardActions.js

@@ -0,0 +1,27 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Dropdown from '@synerise/ds-dropdown';
+import Menu from '@synerise/ds-menu';
+import Scrollbar from '@synerise/ds-scrollbar';
+import * as S from '../InformationCard.styles';
+var NAV_HEIGHT = 61;
+export var InformationCardActions = function InformationCardActions(_ref) {
+  var onHeaderClick = _ref.onHeaderClick,
+      navigationLabel = _ref.navigationLabel,
+      items = _ref.items,
+      menuProps = _ref.menuProps,
+      maxHeight = _ref.maxHeight;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown.BackAction, {
+    label: navigationLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.INFORMATION-CARD.QUICK-ACTIONS",
+      defaultMessage: "Quick actions"
+    }),
+    onClick: onHeaderClick
+  }), /*#__PURE__*/React.createElement(S.InformationCardActionsWrapper, null, /*#__PURE__*/React.createElement(Scrollbar, {
+    maxHeight: maxHeight ? maxHeight - NAV_HEIGHT : undefined
+  }, /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
+    dataSource: items
+  })))));
+};

package/dist/InformationCardActions/InformationCardActions.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { MenuItemProps, AntdMenuProps } from '@synerise/ds-menu';
+export type InformationCardActionsProps = {
+    items: MenuItemProps[];
+    menuProps?: Partial<AntdMenuProps>;
+    buttonLabel?: ReactNode;
+    navigationLabel?: ReactNode;
+    onHeaderClick: () => void;
+    maxHeight?: number;
+};

package/dist/InformationCardActions/InformationCardActions.types.js

@@ -0,0 +1 @@
+export {};

package/dist/InformationCardDescription/InformationCardDescription.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
+type InformationCardDescriptionProps = {
+    extraInformation?: ReactNode;
+    descriptionConfig?: SubtleTextAreaProps | string | null;
+};
+export declare const InformationCardDescription: ({ extraInformation, descriptionConfig, }: InformationCardDescriptionProps) => React.JSX.Element;
+export {};

package/dist/InformationCardDescription/InformationCardDescription.js

@@ -0,0 +1,42 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import SubtleForm from '@synerise/ds-subtle-form';
+import * as S from '../InformationCard.styles';
+export var InformationCardDescription = function InformationCardDescription(_ref) {
+  var _ref$extraInformation = _ref.extraInformation,
+      extraInformation = _ref$extraInformation === void 0 ? undefined : _ref$extraInformation,
+      descriptionConfig = _ref.descriptionConfig;
+
+  var _useState = useState(''),
+      description = _useState[0],
+      setDescription = _useState[1];
+
+  var renderDescription = function renderDescription() {
+    if (descriptionConfig) {
+      return typeof descriptionConfig === 'string' ? /*#__PURE__*/React.createElement(S.NonEditableWrapper, null, descriptionConfig) : /*#__PURE__*/React.createElement(SubtleForm.TextArea, _extends({
+        minRows: 1,
+        value: description,
+        onChange: function onChange(value) {
+          descriptionConfig.onChange && descriptionConfig.onChange(value);
+          setDescription(value);
+        },
+        placeholder: "placeholder",
+        suffixTooltip: "Edit"
+      }, descriptionConfig, descriptionConfig.error ? {
+        error: descriptionConfig.error,
+        errorText: function errorText(isError, text) {
+          return isError ? text : '';
+        }
+      } : {}, {
+        disabled: descriptionConfig.disabled
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  };
+
+  return /*#__PURE__*/React.createElement(S.DescriptionWrapper, {
+    "data-testid": "information-card-description"
+  }, /*#__PURE__*/React.createElement(S.AlertWrapper, null, extraInformation), descriptionConfig && renderDescription());
+};

package/dist/InformationCardFooter/InformationCardFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationCardFooterProps } from './InformationCardFooter.types';
+export declare const InformationCardFooter: ({ actionButton, actionButtonCallback, actionsMenuButtonLabel, actionsMenuButtonOnClick, actionButtonTooltipText, text, }: InformationCardFooterProps) => React.JSX.Element;

package/dist/InformationCardFooter/InformationCardFooter.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Icon, { AngleRightS, ArrowRuCircleM } from '@synerise/ds-icon';
+import Tooltip from '@synerise/ds-tooltip';
+import { Text } from '@synerise/ds-typography';
+import Button from '@synerise/ds-button';
+import * as S from '../InformationCard.styles';
+export var InformationCardFooter = function InformationCardFooter(_ref) {
+  var _ref$actionButton = _ref.actionButton,
+      actionButton = _ref$actionButton === void 0 ? false : _ref$actionButton,
+      actionButtonCallback = _ref.actionButtonCallback,
+      actionsMenuButtonLabel = _ref.actionsMenuButtonLabel,
+      actionsMenuButtonOnClick = _ref.actionsMenuButtonOnClick,
+      _ref$actionButtonTool = _ref.actionButtonTooltipText,
+      actionButtonTooltipText = _ref$actionButtonTool === void 0 ? '' : _ref$actionButtonTool,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text;
+  return /*#__PURE__*/React.createElement(S.FooterWrapper, {
+    "data-testid": "information-card-footer",
+    style: {
+      alignItems: 'center'
+    }
+  }, actionsMenuButtonOnClick && /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "label-icon",
+    onClick: actionsMenuButtonOnClick
+  }, actionsMenuButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "DS.INFORMATION-CARD.QUICK-ACTIONS",
+    defaultMessage: "Quick actions"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleRightS, null)
+  })), /*#__PURE__*/React.createElement(S.FlexGrow, null, text && /*#__PURE__*/React.createElement(Text, {
+    size: "xsmall"
+  }, text)), /*#__PURE__*/React.createElement(S.ActionButtonContainer, null, actionButton && actionButton === true && /*#__PURE__*/React.createElement(Tooltip, {
+    type: "default",
+    title: actionButtonTooltipText
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "single-icon",
+    onClick: actionButtonCallback
+  }, /*#__PURE__*/React.createElement(ArrowRuCircleM, null))) || typeof actionButton === 'function' && actionButton()));
+};

package/dist/InformationCardFooter/InformationCardFooter.types.d.ts

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+import { InformationCardActionsProps } from '../InformationCardActions/InformationCardActions.types';
+import { InformationCardProps } from '../InformationCard.types';
+export type InformationCardFooterProps = {
+    text: InformationCardProps['footerText'];
+    actionsMenuButtonLabel?: InformationCardActionsProps['buttonLabel'];
+    actionsMenuButtonOnClick?: (event: MouseEvent) => void;
+} & Pick<InformationCardProps, 'actionButton' | 'actionButtonTooltipText' | 'actionButtonTooltipText' | 'actionButtonCallback'>;

package/dist/InformationCardFooter/InformationCardFooter.types.js

@@ -0,0 +1 @@
+export {};

package/dist/InformationCardPropertyList/InformationCardPropertyList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationCardPropertyListProps } from './InformationCardPropertyList.types';
+export declare const InformationCardPropertyList: ({ items }: InformationCardPropertyListProps) => React.JSX.Element;

package/dist/InformationCardPropertyList/InformationCardPropertyList.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as S from '../InformationCard.styles';
+export var InformationCardPropertyList = function InformationCardPropertyList(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement(S.InformationCardPropertyListWrapper, {
+    "data-testid": "information-card-property-list"
+  }, items == null ? void 0 : items.map(function (_ref2) {
+    var type = _ref2.type,
+        label = _ref2.label,
+        value = _ref2.value;
+
+    if (type === 'divider') {
+      return /*#__PURE__*/React.createElement(S.Divider, {
+        dashed: true
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(S.InformationCardPropertyItem, {
+      key: ""
+    }, label && /*#__PURE__*/React.createElement(S.InformationCardPropertyItemLabel, null, label, ":"), /*#__PURE__*/React.createElement(S.InformationCardPropertyItemValue, null, value));
+  }));
+};

package/dist/InformationCardPropertyList/InformationCardPropertyList.types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type InformationCardPropertyItemTypes = 'divider';
+export type InformationCardPropertyItem = {
+    label: ReactNode;
+    value?: ReactNode;
+    type?: InformationCardPropertyItemTypes;
+};
+export type InformationCardPropertyListProps = {
+    items?: InformationCardPropertyItem[];
+    summaryItems?: InformationCardPropertyItem[];
+};

package/dist/InformationCardPropertyList/InformationCardPropertyList.types.js

@@ -0,0 +1 @@
+export {};

package/dist/InformationCardSummary/InformationCardSummary.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationCardSummaryProps } from './InformationCardSummary.types';
+export declare const InformationCardSummary: ({ items }: InformationCardSummaryProps) => React.JSX.Element;

package/dist/InformationCardSummary/InformationCardSummary.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
+import * as S from '../InformationCard.styles';
+export var InformationCardSummary = function InformationCardSummary(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement(S.InformationCardSummaryWrapper, {
+    "data-testid": "information-card-summary"
+  }, items == null ? void 0 : items.map(function (_ref2) {
+    var icon = _ref2.icon,
+        label = _ref2.label,
+        tooltip = _ref2.tooltip,
+        tooltipProps = _ref2.tooltipProps;
+    var item = /*#__PURE__*/React.createElement(S.InformationCardSummaryItem, null, icon && /*#__PURE__*/React.createElement("div", null, icon), label && /*#__PURE__*/React.createElement("div", null, label));
+    return tooltip ? /*#__PURE__*/React.createElement(Tooltip, _extends({
+      title: tooltip
+    }, tooltipProps), item) : item;
+  }));
+};

package/dist/InformationCardSummary/InformationCardSummary.types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+export type InformationCardSummaryItem = {
+    label: ReactNode;
+    icon: ReactNode;
+    tooltip?: ReactNode;
+    tooltipProps?: TooltipProps;
+};
+export type InformationCardSummaryProps = {
+    items?: InformationCardSummaryItem[];
+};

package/dist/InformationCardSummary/InformationCardSummary.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-export { default, buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard';
+export { default } from './InformationCard';
+export { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
+export type { InformationCardPropertyItem, InformationCardPropertyItemTypes, InformationCardPropertyListProps, } from './InformationCardPropertyList/InformationCardPropertyList.types';
+export { buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard.utils';
 export type { InformationCardProps } from './InformationCard.types';

package/dist/index.js

@@ -1 +1,3 @@
-export { default, buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard';
+export { default } from './InformationCard';
+export { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
+export { buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard.utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,20 +34,22 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.15",
-    "@synerise/ds-avatar": "^0.16.4",
+    "@synerise/ds-alert": "^0.8.16",
+    "@synerise/ds-avatar": "^0.16.5",
     "@synerise/ds-badge": "^0.7.1",
-    "@synerise/ds-button": "^0.21.0",
-    "@synerise/ds-card": "^0.17.0",
-    "@synerise/ds-description": "^0.3.107",
+    "@synerise/ds-button": "^0.21.1",
+    "@synerise/ds-card": "^0.18.0",
+    "@synerise/ds-description": "^0.3.108",
     "@synerise/ds-divider": "^0.7.0",
-    "@synerise/ds-dropdown": "^0.18.1",
-    "@synerise/ds-icon": "^0.62.1",
-    "@synerise/ds-menu": "^0.19.2",
-    "@synerise/ds-subtle-form": "^0.9.112",
-    "@synerise/ds-tooltip": "^0.14.30",
+    "@synerise/ds-dropdown": "^0.18.2",
+    "@synerise/ds-icon": "^0.63.0",
+    "@synerise/ds-menu": "^0.19.3",
+    "@synerise/ds-scrollbar": "^0.11.2",
+    "@synerise/ds-subtle-form": "^0.9.113",
+    "@synerise/ds-tooltip": "^0.14.31",
     "@synerise/ds-typography": "^0.15.0",
-    "rc-trigger": "5.2.5"
+    "rc-trigger": "5.2.5",
+    "react-intl": "3.12.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -55,9 +57,10 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "6.5.16",
     "@synerise/ds-utils": "^0.27.0",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
+  "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
 }