@synerise/ds-information-card 0.4.14 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.5.0...@synerise/ds-information-card@0.5.1) (2024-07-31)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.4.14...@synerise/ds-information-card@0.5.0) (2024-07-26)
+
+
+### Bug Fixes
+
+* **information-card:** change title and subtitle overflow ([82761e5](https://github.com/Synerise/synerise-design/commit/82761e5802dfefbc28b932b9250e825c4c96028e))
+
+
+### Features
+
+* **information-card:** added infocard tooltip subcomponent ([688ae57](https://github.com/Synerise/synerise-design/commit/688ae57b90460c943a814a8980efe1093cb4215d))
+
+
+
+
+
 ## [0.4.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.4.13...@synerise/ds-information-card@0.4.14) (2024-07-15)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/README.md

@@ -110,3 +110,13 @@ Displays a list of icons with value and optional tooltip
 | label        | Label to display               | `ReactNode`    | -       |
 | tooltip      | Tooltip text                   | `ReactNode`    | -       |
 | tooltipProps | Tooltip config, see ds-tooltip | `TooltipProps` | -       |
+
+### InformationCardTooltip
+
+Displays InformationCard as a tooltip with `children` node as trigger
+
+| Property             | Description                             | Type                                                               | Default |
+|----------------------|-----------------------------------------|--------------------------------------------------------------------|---------|
+| informationCardProps | Props for rendering the InformationCard | `InformationCardProps`                                             | -       |
+| triggerProps         | Trigger props. See rc-trigger           | `Partial<TriggerProps> & { ref?: React.LegacyRef<TriggerHandle> }` | -       |
+| children             | trigger element                         | `ReactNode`                                                        | -       |

package/dist/InformationCard.js

@@ -8,7 +8,6 @@ import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import { SegmentM } from '@synerise/ds-icon';
 import Card from '@synerise/ds-card';
 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 "rc-trigger/assets/index.css";
 import * as S from './InformationCard.styles';
@@ -61,7 +60,7 @@ var InformationCard = forwardRef(function (_ref, ref) {
         alignItems: 'center',
         textAlign: 'left'
       }
-    }, /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Copy, {
+    }, /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(S.Copyable, {
       copyValue: content,
       texts: {
         copyTooltip: copyTooltip != null ? copyTooltip : 'Copy to clipboard',

package/dist/InformationCard.styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, className, onMouseEnter, onMouseLeave }: import("@synerise/ds-description/dist/Row/Copy.types").CopyProps) => import("react").JSX.Element, any, {}, never>;
 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>;

package/dist/InformationCard.styles.js

@@ -4,6 +4,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import styled, { createGlobalStyle, css } from 'styled-components';
 import { CardStyles } from '@synerise/ds-card';
+import { DescriptionCopyable } from '@synerise/ds-description';
 import DSDivider from '@synerise/ds-divider';
 import { macro } from '@synerise/ds-typography';
 import * as S from '@synerise/ds-tooltip/dist/Tooltip.styles';
@@ -12,15 +13,19 @@ export var Flex = styled.div.withConfig({
   displayName: "InformationCardstyles__Flex",
   componentId: "zxu5qa-0"
 })(["display:flex;"]);
+export var Copyable = styled(DescriptionCopyable).withConfig({
+  displayName: "InformationCardstyles__Copyable",
+  componentId: "zxu5qa-1"
+})(["display:flex;align-items:center;height:20px;"]);
 export var Divider = styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__Divider",
-  componentId: "zxu5qa-1"
+  componentId: "zxu5qa-2"
 })(["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"
+  componentId: "zxu5qa-3"
 })(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {
@@ -28,11 +33,11 @@ export var FooterWrapper = styled(Flex).withConfig({
 });
 export var ActionsMenuItems = styled.div.withConfig({
   displayName: "InformationCardstyles__ActionsMenuItems",
-  componentId: "zxu5qa-3"
+  componentId: "zxu5qa-4"
 })([""]);
 export var FlexGrow = styled.div.withConfig({
   displayName: "InformationCardstyles__FlexGrow",
-  componentId: "zxu5qa-4"
+  componentId: "zxu5qa-5"
 })(["flex-grow:", ";"], function (_ref) {
   var _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? 1 : _ref$grow;
@@ -40,22 +45,22 @@ export var FlexGrow = styled.div.withConfig({
 });
 export var ActionButtonContainer = styled.div.withConfig({
   displayName: "InformationCardstyles__ActionButtonContainer",
-  componentId: "zxu5qa-5"
+  componentId: "zxu5qa-6"
 })([""]);
 export var InfoCardSlidesWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlidesWrapper",
-  componentId: "zxu5qa-6"
+  componentId: "zxu5qa-7"
 })([""]);
 export var InfoCardSlide = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlide",
-  componentId: "zxu5qa-7"
+  componentId: "zxu5qa-8"
 })(["", ""], function (props) {
   return props.height && "max-height: " + props.height + "px;";
 });
 export var InfoCardWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
-  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) {
+  componentId: "zxu5qa-9"
+})(["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;gap:2px;}", "{margin:0;}", "", "{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';
 }, INFOCARD_WIDTH, InfoCardSlidesWrapper, function (props) {
   return props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH;
@@ -65,18 +70,18 @@ export var InfoCardWrapper = styled.div.withConfig({
   return props.asTooltip ? 'unset' : '0 16px 32px 0 rgba(35, 41, 54, 0.1)';
 }, 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);
+}, CardStyles.Card.PaddingWrapper, CardStyles.Card.Header, CardStyles.Card.IconContainer, CardStyles.Card.HeaderContent, CardStyles.Card.TitleWrapper, CardStyles.Card.Title, CardStyles.Card.Title);
 export var AlertWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__AlertWrapper",
-  componentId: "zxu5qa-9"
+  componentId: "zxu5qa-10"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var NonEditableWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__NonEditableWrapper",
-  componentId: "zxu5qa-10"
+  componentId: "zxu5qa-11"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var DescriptionWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__DescriptionWrapper",
-  componentId: "zxu5qa-11"
+  componentId: "zxu5qa-12"
 })(["padding:0 16px;"]);
 /**
  * This component can be used to style container with popovers/tooltips to disable arrow.
@@ -84,7 +89,7 @@ export var DescriptionWrapper = styled.div.withConfig({
 
 export var HidePopoverArrowWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__HidePopoverArrowWrapper",
-  componentId: "zxu5qa-12"
+  componentId: "zxu5qa-13"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
 /**
  * Should be mounted in application where.
@@ -93,36 +98,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-13"
+  componentId: "zxu5qa-14"
 })(["margin-bottom:1px;"]);
 export var TooltipComponentClassName = S.TooltipComponent;
 export var InformationCardActionsWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardActionsWrapper",
-  componentId: "zxu5qa-14"
+  componentId: "zxu5qa-15"
 })(["padding:8px;"]);
 export var InformationCardPropertyListWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
-  componentId: "zxu5qa-15"
+  componentId: "zxu5qa-16"
 })(["display:flex;flex-direction:column;padding:0 16px 8px;"]);
 export var InformationCardPropertyItem = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItem",
-  componentId: "zxu5qa-16"
+  componentId: "zxu5qa-17"
 })(["display:flex;align-items:center;height:24px;gap:8px;"]);
 export var InformationCardPropertyItemLabel = styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
-  componentId: "zxu5qa-17"
+  componentId: "zxu5qa-18"
 })(["", ""], macro.small);
 export var InformationCardPropertyItemValue = styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemValue",
-  componentId: "zxu5qa-18"
+  componentId: "zxu5qa-19"
 })(["", " font-weight:500;"], macro.small);
 export var InformationCardSummaryWrapper = styled(Flex).withConfig({
   displayName: "InformationCardstyles__InformationCardSummaryWrapper",
-  componentId: "zxu5qa-19"
+  componentId: "zxu5qa-20"
 })(["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"
+  componentId: "zxu5qa-21"
 })(["font-weight:500;align-items:center;gap:4px;"]);

package/dist/InformationCardTooltip/InformationCard.constants.d.ts

@@ -0,0 +1,34 @@
+export declare const TRIGGER_PLACEMENTS: {
+    left: {
+        points: string[];
+        offset: number[];
+    };
+    right: {
+        points: string[];
+        offset: number[];
+    };
+    top: {
+        points: string[];
+        offset: number[];
+    };
+    bottom: {
+        points: string[];
+        offset: number[];
+    };
+    topLeft: {
+        points: string[];
+        offset: number[];
+    };
+    topRight: {
+        points: string[];
+        offset: number[];
+    };
+    bottomRight: {
+        points: string[];
+        offset: number[];
+    };
+    bottomLeft: {
+        points: string[];
+        offset: number[];
+    };
+};

package/dist/InformationCardTooltip/InformationCard.constants.js

@@ -0,0 +1,34 @@
+export var TRIGGER_PLACEMENTS = {
+  left: {
+    points: ['cr', 'cl'],
+    offset: [-8, 0]
+  },
+  right: {
+    points: ['cl', 'cr'],
+    offset: [0, 0]
+  },
+  top: {
+    points: ['bc', 'tc'],
+    offset: [0, -8]
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+    offset: [0, 8]
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+    offset: [0, -8]
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    offset: [0, -8]
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+    offset: [0, 8]
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    offset: [0, 8]
+  }
+};

package/dist/InformationCardTooltip/InformationCardTooltip.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationCardTooltipProps } from './InformationCardTooltip.types';
+export declare const InformationCardTooltip: ({ triggerProps, children, style, informationCardProps, ...rest }: InformationCardTooltipProps) => React.JSX.Element;

package/dist/InformationCardTooltip/InformationCardTooltip.js

@@ -0,0 +1,52 @@
+var _excluded = ["triggerProps", "children", "style", "informationCardProps"];
+
+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); }
+
+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, { useCallback, useMemo } from 'react';
+import Trigger from 'rc-trigger';
+import { useTheme } from '@synerise/ds-core';
+import InformationCard from '../InformationCard';
+import { TRIGGER_PLACEMENTS } from './InformationCard.constants';
+import * as S from './InformationCardTooltip.styles';
+export var InformationCardTooltip = function InformationCardTooltip(_ref) {
+  var _triggerProps$default;
+
+  var triggerProps = _ref.triggerProps,
+      children = _ref.children,
+      style = _ref.style,
+      informationCardProps = _ref.informationCardProps,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var dsTheme = useTheme();
+  var zIndex = parseInt(dsTheme.variables['zindex-tooltip'], 10);
+  var renderedInfocard = useMemo(function () {
+    return /*#__PURE__*/React.createElement(InformationCard, informationCardProps);
+  }, [informationCardProps]);
+  var cancelBubblingEvent = useCallback(function () {
+    return function (event) {
+      return event.stopPropagation();
+    };
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement(S.InformationCardTooltipWrapper, _extends({}, rest, {
+      onKeyDown: cancelBubblingEvent,
+      onClick: cancelBubblingEvent
+    }), /*#__PURE__*/React.createElement(Trigger, _extends({
+      builtinPlacements: TRIGGER_PLACEMENTS,
+      defaultPopupVisible: (_triggerProps$default = triggerProps == null ? void 0 : triggerProps.defaultPopupVisible) != null ? _triggerProps$default : false,
+      action: (triggerProps == null ? void 0 : triggerProps.action) || ['click', 'hover'],
+      popupPlacement: (triggerProps == null ? void 0 : triggerProps.popupPlacement) || 'right',
+      popup: renderedInfocard,
+      popupClassName: "ignore-click-outside ds-hide-arrow",
+      mouseEnterDelay: 0.2,
+      popupStyle: {
+        zIndex: zIndex
+      },
+      zIndex: zIndex
+    }, triggerProps), /*#__PURE__*/React.createElement(S.InformationCardTooltipTrigger, null, children)))
+  );
+};

package/dist/InformationCardTooltip/InformationCardTooltip.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const InformationCardTooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationCardTooltipTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InformationCardTooltip/InformationCardTooltip.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export var InformationCardTooltipWrapper = styled.div.withConfig({
+  displayName: "InformationCardTooltipstyles__InformationCardTooltipWrapper",
+  componentId: "sc-1q11fca-0"
+})([""]);
+export var InformationCardTooltipTrigger = styled.div.withConfig({
+  displayName: "InformationCardTooltipstyles__InformationCardTooltipTrigger",
+  componentId: "sc-1q11fca-1"
+})([""]);

package/dist/InformationCardTooltip/InformationCardTooltip.types.d.ts

@@ -0,0 +1,13 @@
+import type { Component, HTMLAttributes, ReactNode } from 'react';
+import type { TriggerProps } from 'rc-trigger';
+import type { InformationCardProps } from '../InformationCard.types';
+export type TriggerHandle = Component<TriggerProps> & {
+    getPopupDomNode: () => HTMLElement;
+};
+export type InformationCardTooltipProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown'> & {
+    informationCardProps: InformationCardProps;
+    children: ReactNode;
+    triggerProps?: Partial<TriggerProps> & {
+        ref?: React.LegacyRef<TriggerHandle>;
+    };
+};

package/dist/InformationCardTooltip/InformationCardTooltip.types.js

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

package/dist/index.d.ts

@@ -3,3 +3,6 @@ export { InformationCardPropertyList } from './InformationCardPropertyList/Infor
 export type { InformationCardPropertyItem, InformationCardPropertyItemTypes, InformationCardPropertyListProps, } from './InformationCardPropertyList/InformationCardPropertyList.types';
 export { buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard.utils';
 export type { InformationCardProps } from './InformationCard.types';
+export { InformationCardTooltip } from './InformationCardTooltip/InformationCardTooltip';
+export { TRIGGER_PLACEMENTS } from './InformationCardTooltip/InformationCard.constants';
+export type { InformationCardTooltipProps } from './InformationCardTooltip/InformationCardTooltip.types';

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "0.4.14",
+  "version": "0.5.1",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,19 +34,19 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.19",
-    "@synerise/ds-avatar": "^0.17.1",
-    "@synerise/ds-badge": "^0.8.1",
-    "@synerise/ds-button": "^0.21.3",
-    "@synerise/ds-card": "^0.18.3",
-    "@synerise/ds-description": "^0.3.110",
+    "@synerise/ds-alert": "^0.8.21",
+    "@synerise/ds-avatar": "^0.17.3",
+    "@synerise/ds-badge": "^0.8.2",
+    "@synerise/ds-button": "^0.21.4",
+    "@synerise/ds-card": "^0.18.5",
+    "@synerise/ds-description": "^0.3.111",
     "@synerise/ds-divider": "^0.7.1",
-    "@synerise/ds-dropdown": "^0.18.5",
+    "@synerise/ds-dropdown": "^0.18.7",
     "@synerise/ds-icon": "^0.64.1",
-    "@synerise/ds-menu": "^0.19.5",
+    "@synerise/ds-menu": "^0.19.7",
     "@synerise/ds-scrollbar": "^0.11.4",
-    "@synerise/ds-subtle-form": "^0.9.116",
-    "@synerise/ds-tooltip": "^0.14.33",
+    "@synerise/ds-subtle-form": "^0.9.118",
+    "@synerise/ds-tooltip": "^0.14.34",
     "@synerise/ds-typography": "^0.15.1",
     "rc-trigger": "5.2.5",
     "react-intl": "3.12.0"
@@ -56,5 +56,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "6f4996380356c1e5cb9a9d8b553069ad9cea7c27"
+  "gitHead": "9780605713f2ee1cb62d79a8ab027058117c4e4a"
 }