@synerise/ds-information-card 0.8.5 → 0.9.0

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.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.8.6...@synerise/ds-information-card@0.9.0) (2025-02-20)
+
+
+### Features
+
+* **information-card:** title and subtitle prop types ([8180cbb](https://github.com/Synerise/synerise-design/commit/8180cbb1820a76b737e83159e32375d546c8c64d))
+
+
+
+
+
+## [0.8.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.8.5...@synerise/ds-information-card@0.8.6) (2025-02-18)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
 ## [0.8.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.8.4...@synerise/ds-information-card@0.8.5) (2025-02-17)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/README.md

@@ -27,22 +27,28 @@ 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" />}
+import { InformationCardTooltip } from '@synerise/ds-information-card';
+
+<InformationCardTooltip
+  informationCardProps={{
+    title: 'Title',
+    subtitle: 'Subtitle',
+    icon: <SegmentM color="mars" />,
+    iconColor: 'mars',
+    avatarTooltipText: 'Tooltip Text',
+  }}
+  triggerProps={{
+    popupPlacement: 'top'
+  }}
 >
-  Entity short name
-</Popover>;
+  <button>Element to attach infocard to</button>
+</InformationCardTooltip>;
 ```
 
 Generally, components require being capable of rendering this and usually an additional effort is required to get them to support rendering.
 See text's menu item element `packages/components/menu/src/Elements/Item/Text/Text.tsx`.
 
-Note that `title` and `subtitle` are required props. For just a single line of text consider using just tooltip or popover.
+Note that `title` and `subtitle` are required props. For just a single line of text consider using @synerise/ds-tooltip.
 
 ### Usage with dropdown and other components relying on `rc-trigger` `getPopupContainer`
 

package/dist/InformationCard.d.ts

@@ -17,10 +17,10 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
     iconColor?: string | undefined;
     notice?: React.ReactNode;
     renderBadge?: Function | null | undefined;
-    subtitle?: string | undefined;
-    title: string;
+    subtitle?: React.ReactNode;
+    title: React.ReactNode;
     renderAdditionalDescription?: (() => React.ReactNode) | undefined;
     propertyListItems?: import(".").InformationCardPropertyItem[] | undefined;
     summaryItems?: import("./InformationCardSummary/InformationCardSummary.types").InformationCardSummaryItem[] | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "asTooltip" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "footerText" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & React.RefAttributes<HTMLDivElement>>;
 export default InformationCard;

package/dist/InformationCard.js

@@ -96,8 +96,8 @@ var InformationCard = forwardRef(function (_ref, ref) {
         avatarTooltipText: avatarTooltipText
       }));
     },
-    title: title ? copyableSlot(title) : /*#__PURE__*/React.createElement(React.Fragment, null),
-    description: subtitle ? copyableSlot(subtitle) : /*#__PURE__*/React.createElement(React.Fragment, null),
+    title: typeof title === 'string' ? copyableSlot(title) : title,
+    description: typeof subtitle === 'string' ? copyableSlot(subtitle) : subtitle,
     headerSideChildren: undefined,
     compactHeader: false,
     withoutPadding: true,

package/dist/InformationCard.styles.js

@@ -6,7 +6,7 @@ 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';
-var INFOCARD_WIDTH = 320;
+var INFOCARD_WIDTH = 350;
 export var Flex = styled.div.withConfig({
   displayName: "InformationCardstyles__Flex",
   componentId: "zxu5qa-0"
@@ -18,7 +18,7 @@ export var Copyable = styled(DescriptionCopyable).withConfig({
 export var Divider = styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__Divider",
   componentId: "zxu5qa-2"
-})(["border-color:", ";margin:8px 0;"], function (props) {
+})(["&&{border-color:", ";margin:8px 0;}"], function (props) {
   return props.theme.palette['grey-300'];
 });
 export var FooterWrapper = styled(Flex).withConfig({
@@ -58,7 +58,7 @@ export var InfoCardSlide = styled.div.withConfig({
 export var InfoCardWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
   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) {
+})(["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;}", "", "{font-size:11px;}.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;
@@ -68,7 +68,7 @@ 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.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, CardStyles.Card.Description, CardStyles.Card.Description);
 export var AlertWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__AlertWrapper",
   componentId: "zxu5qa-10"

package/dist/InformationCard.types.d.ts

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
 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';
@@ -14,7 +15,7 @@ export type BadgeData = {
     iconSize?: Size | string;
     avatarTooltipText?: string;
 };
-export type InformationCardProps = {
+export type InformationCardProps = WithHTMLAttributes<HTMLDivElement, {
     /**
      * custom jsx element for rendering in action button (bottom-right)
      */
@@ -79,17 +80,17 @@ export type InformationCardProps = {
      */
     renderBadge?: Function | null;
     /**
-     * Second line. Required prop. Can be copied.
+     * Second line. Required prop. If you pass a string it will be copyable on click, with a copy icon visible on hover.
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
-     * Title of the information-card. Can be copied.
+     * Title of the information-card. If you pass a string it will be copyable on click, with a copy icon visible on hover.
      */
-    title: string;
+    title: ReactNode;
     /**
      * list of object parameters to display
      */
     renderAdditionalDescription?: () => ReactNode;
     propertyListItems?: InformationCardPropertyListProps['items'];
     summaryItems?: InformationCardSummaryProps['items'];
-} & HTMLAttributes<HTMLDivElement>;
+}>;

package/dist/InformationCardTooltip/InformationCardTooltip.js

@@ -24,6 +24,14 @@ export var InformationCardTooltip = function InformationCardTooltip(_ref) {
       return event.stopPropagation();
     };
   }, []);
+  var _ref2 = triggerProps || {},
+    popupAlign = _ref2.popupAlign;
+  var triggerPopupAlign = _extends({
+    overflow: _extends({
+      adjustX: true,
+      adjustY: true
+    }, popupAlign == null ? void 0 : popupAlign.overflow)
+  }, popupAlign);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -41,7 +49,8 @@ export var InformationCardTooltip = function InformationCardTooltip(_ref) {
       popupStyle: {
         zIndex: zIndex
       },
-      zIndex: zIndex
+      zIndex: zIndex,
+      popupAlign: triggerPopupAlign
     }, triggerProps), /*#__PURE__*/React.createElement(S.InformationCardTooltipTrigger, null, children)))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,20 +35,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.9.4",
-    "@synerise/ds-avatar": "^0.18.4",
-    "@synerise/ds-badge": "^0.9.3",
+    "@synerise/ds-alert": "^0.9.6",
+    "@synerise/ds-avatar": "^0.18.6",
+    "@synerise/ds-badge": "^0.9.4",
     "@synerise/ds-button": "^0.23.1",
-    "@synerise/ds-card": "^0.20.4",
-    "@synerise/ds-description": "^0.5.3",
-    "@synerise/ds-divider": "^0.9.2",
-    "@synerise/ds-dropdown": "^0.19.4",
+    "@synerise/ds-card": "^0.20.6",
+    "@synerise/ds-description": "^0.5.4",
+    "@synerise/ds-divider": "^0.9.3",
+    "@synerise/ds-dropdown": "^0.19.6",
     "@synerise/ds-icon": "^0.71.1",
-    "@synerise/ds-menu": "^0.21.4",
-    "@synerise/ds-scrollbar": "^0.12.3",
-    "@synerise/ds-subtle-form": "^0.10.4",
-    "@synerise/ds-tooltip": "^0.15.3",
-    "@synerise/ds-typography": "^0.17.3",
+    "@synerise/ds-menu": "^0.21.6",
+    "@synerise/ds-scrollbar": "^0.12.4",
+    "@synerise/ds-subtle-form": "^0.10.6",
+    "@synerise/ds-tooltip": "^0.16.0",
+    "@synerise/ds-typography": "^0.17.4",
     "@synerise/ds-utils": "^0.32.1",
     "rc-trigger": "^5.3.4"
   },
@@ -58,5 +58,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "627d5249e79b471d6363e9d04642eb011a329d71"
+  "gitHead": "ff8f06f5408bac1f19bb81fdb2dc49dc650cd81e"
 }