@synerise/ds-information-card 0.1.7

package/CHANGELOG.md

@@ -0,0 +1,60 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.1.4...@synerise/ds-information-card@0.1.5) (2022-07-17)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+## [0.1.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.1.3...@synerise/ds-information-card@0.1.4) (2022-07-08)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+## [0.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.1.2...@synerise/ds-information-card@0.1.3) (2022-07-06)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+## [0.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.1.1...@synerise/ds-information-card@0.1.2) (2022-06-23)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+## [0.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.1.0...@synerise/ds-information-card@0.1.1) (2022-06-17)
+
+
+### Bug Fixes
+
+* **information-card:** bump ds-card version ([fa87d6b](https://github.com/Synerise/synerise-design/commit/fa87d6b9985212b0e40ccdbda564d8cab4d9c914))
+
+
+
+
+
+# 0.1.0 (2022-06-15)
+
+
+### Bug Fixes
+
+* **filter:** fixes closing info-card when clicking on it ([91eed3b](https://github.com/Synerise/synerise-design/commit/91eed3b7a5392c04ed618c9f7265608d6c39655e))
+
+
+### Features
+
+* **information-card:** create information-card component ([ee3ad8b](https://github.com/Synerise/synerise-design/commit/ee3ad8bdc8ec793250415d1e25b78ed3504e33d4))
+* **information-card:** info-card component, stories, initial tests ([f5ff3f0](https://github.com/Synerise/synerise-design/commit/f5ff3f0c4435da14aba0db96a33b11f50146e6a3))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+---
+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
+
+```zsh
+# lerna bootstrap # install all required reused shared lerna packages
+yarn workspace @synerise/ds-information-card lint
+yarn workspace @synerise/ds-information-card build
+```
+
+## Usage
+```js
+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>
+```
+
+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 just tooltip or popover.
+
+### 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
+
+<iframe src="/storybook-static/iframe.html?id=components-information-card--default"></iframe>
+
+## API
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |

package/dist/InformationCard.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { IconProps } from '@synerise/ds-icon/dist/cjs';
+import { InlineAlertType } from '@synerise/ds-alert/dist/InlineAlert/InlineAlert.types';
+import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
+import { Color, Size } from '@synerise/ds-avatar/dist/Avatar.types';
+import 'rc-trigger/assets/index.less';
+export declare type BadgeData = {
+    type?: string;
+    title?: string;
+    name?: string;
+    iconColor?: Color | IconProps['color'];
+    iconElement?: InformationCardProps['icon'];
+    iconSize?: Size | string;
+    avatarTooltipText?: string;
+};
+/**
+ * Custom builder for badgeSlots with icon
+ */
+export declare function buildIconBadge(data: BadgeData): JSX.Element;
+export declare type InformationCardProps = {
+    /**
+     * custom jsx element for rendering in action button (bottom-right)
+     */
+    actionButton?: boolean | (() => React.ReactNode);
+    /**
+     * default action button callback methodd
+     */
+    actionButtonCallback?: () => void;
+    /**
+     * default action button tooltip
+     */
+    actionButtonTooltipText?: string;
+    /**
+     * description in a tooltip shown when user (note renderBadge has to be provided)
+     */
+    avatarTooltipText?: string;
+    /**
+     * content of the tooltip, it defaults to `SubtleForm.TextArea`
+     */
+    children?: React.ReactNode | ((props?: SubtleTextAreaProps | null) => React.ReactNode);
+    /**
+     * subtitle's value to be copied when clicking on the copy button
+     */
+    copyTooltip?: string;
+    /**
+     * feedback to the user once information card's subtitle has been copied
+     */
+    copiedTooltip?: string;
+    /**
+     * when information-card's `children` prop is not provided,
+     * `defaultTextAreaProps` can be used to parametrize default textarea
+     */
+    descriptionConfig?: SubtleTextAreaProps | null | undefined;
+    /**
+     * render prop for rendering the bottom part of (by default section with a small text and an optional action button on the right)
+     */
+    renderFooter?: () => JSX.Element;
+    /**
+     * additional feedback info to the user, when set to null - footer is hidden
+     */
+    footerText?: string | React.ReactNode | null;
+    /**
+     * icon (note this needs to be pure SVG icon, it relies on `buildBadgeIcon` helper)
+     */
+    icon?: React.ReactNode;
+    /**
+     * icon color to be applied to `icon` element
+     */
+    iconColor?: string;
+    /**
+     * additional information shown between subtitle and description section.
+     * Can be used for warnings, errors, destructive actions, notices. See `buildExtraInfo` and alert `level` there.
+     */
+    notice?: string | React.ReactNode;
+    /**
+     * Custom render prop for displaying. If set to `null` - badge won't be shown.
+     */
+    renderBadge?: Function | null;
+    /**
+     * Second line. Required prop. Can be copied.
+     */
+    subtitle: string;
+    /**
+     * Title of the information-card. Can be copied.
+     */
+    title: string;
+};
+declare const InformationCard: React.ForwardRefExoticComponent<InformationCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare function buildInitialsBadge(name: string): JSX.Element;
+/**
+ * helper for wrapping a notice
+ */
+export declare function buildExtraInfo(message: string, level?: InlineAlertType): JSX.Element;
+/**
+ * Helper for returning initials. Handles cases such as John Smith, J. Smith, JS.
+ */
+export declare function getInitials(name: string): string;
+declare type InitialsProps = React.PropsWithChildren<{
+    name?: string;
+}>;
+/**
+ * Wrapper for obtaining an avatar based on initials
+ */
+export declare function Initials({ name, children }: InitialsProps): JSX.Element;
+export default InformationCard;

package/dist/InformationCard.js

@@ -0,0 +1,252 @@
+var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "avatarTooltipText", "children", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig"];
+
+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; }
+
+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 * as React 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/dist/cjs';
+import Avatar, { ObjectAvatar } from '@synerise/ds-avatar';
+import Card from '@synerise/ds-card';
+import SubtleForm from '@synerise/ds-subtle-form';
+import Tooltip from '@synerise/ds-tooltip';
+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
+    })
+  }));
+}
+
+function renderChildren(renderChild, descriptionConfig) {
+  if (typeof renderChild === 'function') {
+    return renderChild(descriptionConfig);
+  }
+
+  return renderChild;
+}
+
+var InformationCard = React.forwardRef(function (_ref, ref) {
+  var actionButton = _ref.actionButton,
+      actionButtonTooltipText = _ref.actionButtonTooltipText,
+      actionButtonCallback = _ref.actionButtonCallback,
+      avatarTooltipText = _ref.avatarTooltipText,
+      children = _ref.children,
+      copyTooltip = _ref.copyTooltip,
+      copiedTooltip = _ref.copiedTooltip,
+      renderFooter = _ref.renderFooter,
+      _renderBadge = _ref.renderBadge,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      notice = _ref.notice,
+      footerText = _ref.footerText,
+      _ref$icon = _ref.icon,
+      iconElement = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(SegmentM, null) : _ref$icon,
+      iconColor = _ref.iconColor,
+      descriptionConfig = _ref.descriptionConfig,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var copyableSlot = function copyableSlot(content) {
+    return /*#__PURE__*/React.createElement(RowWrapper, {
+      copyable: true
+    }, /*#__PURE__*/React.createElement(S.Flex, {
+      style: {
+        backgroundColor: '',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Copy, {
+      copyValue: content,
+      texts: {
+        copyTooltip: copyTooltip != null ? copyTooltip : 'Copy to clipboard',
+        copiedTooltip: copiedTooltip != null ? copiedTooltip : 'Copied'
+      }
+    })));
+  };
+
+  var cachedChildren = React.useMemo(function () {
+    return renderChildren(children, descriptionConfig);
+  }, [children, descriptionConfig]);
+  return /*#__PURE__*/React.createElement(S.InfoCardWrapper, {
+    ref: ref,
+    "aria-label": "information card",
+    className: "ds-info-card"
+  }, /*#__PURE__*/React.createElement(Card, {
+    background: "white" // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    ,
+    renderBadge: function renderBadge() {
+      var _renderBadge$call;
+
+      return _renderBadge !== null && /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginRight: '16px'
+        }
+      }, (_renderBadge$call = _renderBadge == null ? void 0 : _renderBadge.call(null)) != null ? _renderBadge$call : buildIconBadge({
+        iconElement: iconElement,
+        iconColor: iconColor,
+        avatarTooltipText: avatarTooltipText
+      }));
+    },
+    title: title ? copyableSlot(title) : /*#__PURE__*/React.createElement(React.Fragment, null),
+    description: subtitle ? copyableSlot(subtitle) : /*#__PURE__*/React.createElement(React.Fragment, null),
+    headerSideChildren: undefined,
+    compactHeader: false,
+    withoutPadding: true,
+    lively: false,
+    withHeader: true,
+    className: cachedChildren ? 'custom-description' : ''
+  }, (cachedChildren || descriptionConfig !== null || notice) && /*#__PURE__*/React.createElement(DescriptionField, {
+    extraInformation: notice || /*#__PURE__*/React.createElement(React.Fragment, null),
+    descriptionConfig: descriptionConfig
+  }), renderFooter && renderFooter() || (footerText || actionButton) && /*#__PURE__*/React.createElement(Footer, _extends({
+    text: footerText
+  }, props, {
+    actionButton: actionButton,
+    actionButtonCallback: actionButtonCallback,
+    actionButtonTooltipText: actionButtonTooltipText,
+    isCustomDescription: cachedChildren !== undefined
+  }))));
+});
+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 _React$useState = React.useState(''),
+      description = _React$useState[0],
+      setDescription = _React$useState[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "information-card-description"
+  }, extraInformation, descriptionConfig && /*#__PURE__*/React.createElement(SubtleForm.TextArea, _extends({
+    minRows: 1,
+    value: description // hideLabel
+    ,
+    onChange: function onChange(v) {
+      descriptionConfig.onChange && descriptionConfig.onChange(v);
+      setDescription(v);
+    },
+    placeholder: "placeholer",
+    label: "Label",
+    labelTooltip: "label tooltip",
+    suffixTooltip: "Edit"
+  }, descriptionConfig, descriptionConfig.error ? {
+    error: descriptionConfig.error,
+    errorText: function errorText(isErr, text) {
+      return isErr ? text : '';
+    }
+  } : {}, {
+    disabled: descriptionConfig.disabled
+  })));
+}
+/**
+ * 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,
+      isCustomDescription = _ref4.isCustomDescription;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    marginTop: isCustomDescription ? 16 : 8,
+    marginBottom: 0,
+    dashed: true
+  }), /*#__PURE__*/React.createElement(S.Flex, {
+    style: {
+      alignItems: 'center'
+    }
+  }, /*#__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

@@ -0,0 +1,21 @@
+/// <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> & {
+    grow?: number | undefined;
+}, never>;
+export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoCardWrapper: import("styled-components").StyledComponent<"div", any, {
+    footerText?: string | undefined;
+}, never>;
+/**
+ * This component can be used to style container with popovers/tooltips to disable arrow.
+ */
+export declare const HidePopoverArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Should be mounted in application where.
+ */
+export declare const GlobalCSSHidePopoverArrow: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const ExtraInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipComponentClassName: import("styled-components").StyledComponent<"div", any, Pick<import("@synerise/ds-tooltip/dist/Tooltip.types").default, "button" | "title" | "offset" | "description" | "icon" | "status" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed" | "timeToHideAfterClick"> & {
+    tooltipType: import("@synerise/ds-tooltip/dist/Tooltip.types").tooltipTypes;
+}, never>;

package/dist/InformationCard.styles.js

@@ -0,0 +1,46 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { createGlobalStyle } from 'styled-components';
+import { IconContainer, Container as CardContainer, PaddingWrapper, ChildrenContainer, HeaderContent, Header, Title } from '@synerise/ds-card/dist/Card/Card.styles';
+import * as S from '@synerise/ds-tooltip/dist/Tooltip.styles';
+import { AntdButton } from '@synerise/ds-button/dist/Button.styles';
+export var Flex = styled.div.withConfig({
+  displayName: "InformationCardstyles__Flex",
+  componentId: "zxu5qa-0"
+})(["display:flex;"]);
+export var FlexGrow = styled.div.withConfig({
+  displayName: "InformationCardstyles__FlexGrow",
+  componentId: "zxu5qa-1"
+})(["flex-grow:", ";margin-top:16px;margin-bottom:8px;"], 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;"]);
+export var InfoCardWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__InfoCardWrapper",
+  componentId: "zxu5qa-3"
+})(["margin-left:8px;", "{background-color:white;margin-bottom:1px;font-weight:400;min-width:250px;&.custom-description ", "{margin-top:8px;}padding:16px 16px 8px 16px;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}", "{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;}"], CardContainer, ChildrenContainer, PaddingWrapper, Header, IconContainer, HeaderContent, Title, Title, AntdButton);
+/**
+ * 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-4"
+})([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
+/**
+ * Should be mounted in application where.
+ */
+
+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-5"
+})(["margin-bottom:1px;"]);
+export var TooltipComponentClassName = S.TooltipComponent;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default, buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard';
+export type { InformationCardProps } from './InformationCard';

package/dist/index.js

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

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@synerise/ds-information-card",
+  "version": "0.1.7",
+  "description": "InformationCard UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "lint": "eslint . --ext .ts --ext .tsx --max-warnings 0 --ignore-pattern dist",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-alert": "^0.4.4",
+    "@synerise/ds-avatar": "^0.14.21",
+    "@synerise/ds-card": "^0.12.0",
+    "@synerise/ds-description": "^0.3.21",
+    "@synerise/ds-subtle-form": "^0.9.4",
+    "@synerise/ds-typography": "^0.12.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "^0.31.2",
+    "react": ">=16.9.0 < 17.0.0"
+  },
+  "gitHead": "41a4ccb4e6222516622347a45cb6c65faec250d9"
+}