@synerise/ds-information-card 0.3.10 → 0.3.12

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.3.11...@synerise/ds-information-card@0.3.12) (2023-04-19)
+
+
+### Bug Fixes
+
+* **information-card:** adds support for plain text descriptions ([ebeb57f](https://github.com/Synerise/synerise-design/commit/ebeb57f8c6fafa035fdd664744a85f16aaa64304))
+* **information-card:** removed children from props ([4451b88](https://github.com/Synerise/synerise-design/commit/4451b883364b89c4a9fb94aaf630e18f70f80505))
+
+
+### BREAKING CHANGES
+
+* **information-card:** children prop no longer supported in information-card
+* **information-card:** children prop no longer supported
+
+
+
+
+
+## [0.3.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.3.10...@synerise/ds-information-card@0.3.11) (2023-04-17)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+
+
+
+
 ## [0.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.3.9...@synerise/ds-information-card@0.3.10) (2023-04-14)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/dist/InformationCard.d.ts

@@ -1,94 +1,11 @@
 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 { InformationCardProps, BadgeData } from './InformationCard.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;
-    /**
-     * adjusts the styles to be displayed as a tooltip
-     */
-    asTooltip?: boolean;
-    /**
-     * 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;
 /**

package/dist/InformationCard.js

@@ -1,4 +1,4 @@
-var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "asTooltip", "avatarTooltipText", "children", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig"];
+var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "asTooltip", "avatarTooltipText", "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; }
 
@@ -19,10 +19,10 @@ 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: {}
@@ -41,22 +41,12 @@ export function buildIconBadge(data) {
     })
   }));
 }
-
-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,
       asTooltip = _ref.asTooltip,
       avatarTooltipText = _ref.avatarTooltipText,
-      children = _ref.children,
       copyTooltip = _ref.copyTooltip,
       copiedTooltip = _ref.copiedTooltip,
       renderFooter = _ref.renderFooter,
@@ -89,9 +79,6 @@ var InformationCard = React.forwardRef(function (_ref, ref) {
     })));
   };
 
-  var cachedChildren = React.useMemo(function () {
-    return renderChildren(children, descriptionConfig);
-  }, [children, descriptionConfig]);
   return /*#__PURE__*/React.createElement(S.InfoCardWrapper, {
     ref: ref,
     "aria-label": "information card",
@@ -120,9 +107,8 @@ var InformationCard = React.forwardRef(function (_ref, ref) {
     compactHeader: false,
     withoutPadding: true,
     lively: false,
-    withHeader: true,
-    className: cachedChildren ? 'custom-description' : ''
-  }, (cachedChildren || descriptionConfig !== null || notice) && /*#__PURE__*/React.createElement(DescriptionField, {
+    withHeader: true
+  }, (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({
@@ -130,8 +116,7 @@ var InformationCard = React.forwardRef(function (_ref, ref) {
   }, props, {
     actionButton: actionButton,
     actionButtonCallback: actionButtonCallback,
-    actionButtonTooltipText: actionButtonTooltipText,
-    isCustomDescription: cachedChildren !== undefined
+    actionButtonTooltipText: actionButtonTooltipText
   }))));
 });
 export function buildInitialsBadge(name) {
@@ -185,28 +170,31 @@ function DescriptionField(_ref3) {
       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 : '';
+  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(v) {
+          descriptionConfig.onChange && descriptionConfig.onChange(v);
+          setDescription(v);
+        },
+        placeholder: "placeholder",
+        suffixTooltip: "Edit"
+      }, descriptionConfig, descriptionConfig.error ? {
+        error: descriptionConfig.error,
+        errorText: function errorText(isErr, text) {
+          return isErr ? text : '';
+        }
+      } : {}, {
+        disabled: descriptionConfig.disabled
+      }));
     }
-  } : {}, {
-    disabled: descriptionConfig.disabled
-  })));
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  };
+
+  return /*#__PURE__*/React.createElement(S.DescriptionWrapper, null, /*#__PURE__*/React.createElement(S.AlertWrapper, null, extraInformation), descriptionConfig && renderDescription());
 }
 /**
  * Tooltip helper for action button in footer
@@ -232,10 +220,9 @@ function Footer(_ref4) {
       _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;
+      text = _ref4$text === void 0 ? '' : _ref4$text;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    marginTop: isCustomDescription ? 16 : 8,
+    marginTop: 8,
     marginBottom: 0,
     dashed: true
   }), /*#__PURE__*/React.createElement(S.Flex, {

package/dist/InformationCard.styles.d.ts

@@ -8,6 +8,9 @@ export declare const InfoCardWrapper: import("styled-components").StyledComponen
     footerText?: string | undefined;
     asTooltip?: 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>;
+export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 /**
  * This component can be used to style container with popovers/tooltips to disable arrow.
  */

package/dist/InformationCard.styles.js

@@ -3,7 +3,7 @@ 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 { IconContainer, Container as CardContainer, PaddingWrapper, 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({
@@ -25,18 +25,30 @@ export var ActionButtonContainer = styled.div.withConfig({
 export var InfoCardWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
   componentId: "zxu5qa-3"
-})(["margin-left:", ";", "{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:", ";}", "{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) {
+})(["margin-left:", ";", "{background-color:white;margin-bottom:1px;font-weight:400;min-width:250px;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) {
   return props.asTooltip ? '0' : '8px';
-}, CardContainer, ChildrenContainer, function (props) {
+}, CardContainer, function (props) {
   return props.asTooltip ? 'unset' : '0 16px 32px 0 rgba(35, 41, 54, 0.1)';
 }, PaddingWrapper, Header, IconContainer, HeaderContent, Title, Title, AntdButton);
+export var AlertWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__AlertWrapper",
+  componentId: "zxu5qa-4"
+})(["padding-bottom:8px;:empty{display:none;}"]);
+export var NonEditableWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__NonEditableWrapper",
+  componentId: "zxu5qa-5"
+})(["padding-bottom:8px;:empty{display:none;}"]);
+export var DescriptionWrapper = styled.div.withConfig({
+  displayName: "InformationCardstyles__DescriptionWrapper",
+  componentId: "zxu5qa-6"
+})([""]);
 /**
  * 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"
+  componentId: "zxu5qa-7"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
 /**
  * Should be mounted in application where.
@@ -45,6 +57,6 @@ 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-5"
+  componentId: "zxu5qa-8"
 })(["margin-bottom:1px;"]);
 export var TooltipComponentClassName = S.TooltipComponent;

package/dist/InformationCard.types.d.ts

@@ -0,0 +1,81 @@
+import * as React 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/dist/cjs';
+export declare type BadgeData = {
+    type?: string;
+    title?: string;
+    name?: string;
+    iconColor?: Color | IconProps['color'];
+    iconElement?: InformationCardProps['icon'];
+    iconSize?: Size | string;
+    avatarTooltipText?: string;
+};
+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;
+    /**
+     * adjusts the styles to be displayed as a tooltip
+     */
+    asTooltip?: boolean;
+    /**
+     * description in a tooltip shown when user (note renderBadge has to be provided)
+     */
+    avatarTooltipText?: string;
+    /**
+     * 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 | string | 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;
+};

package/dist/InformationCard.types.js

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

package/dist/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,15 +34,15 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-alert": "^0.4.4",
-    "@synerise/ds-avatar": "^0.14.62",
-    "@synerise/ds-card": "^0.14.1",
-    "@synerise/ds-description": "^0.3.62",
-    "@synerise/ds-subtle-form": "^0.9.50",
+    "@synerise/ds-avatar": "^0.14.63",
+    "@synerise/ds-card": "^0.14.2",
+    "@synerise/ds-description": "^0.3.63",
+    "@synerise/ds-subtle-form": "^0.9.52",
     "@synerise/ds-typography": "^0.12.7"
   },
   "peerDependencies": {
     "@synerise/ds-core": "^0.31.2",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "a81aad1ee5bb7249f069115cab0ec06b66ab12b0"
+  "gitHead": "3b8c3b1437ecbdda775a790ac3c27d6b1b6cbf26"
 }