@synerise/ds-card-select 0.7.28 → 0.8.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.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.7.29...@synerise/ds-card-select@0.8.0) (2024-12-16)
+
+
+### Features
+
+* informational tooltip ([4af1bb4](https://github.com/Synerise/synerise-design/commit/4af1bb4efcc8c06046b62a6aa8aa65c63312f816))
+
+
+
+
+
+## [0.7.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.7.28...@synerise/ds-card-select@0.7.29) (2024-12-13)
+
+**Note:** Version bump only for package @synerise/ds-card-select
+
+
+
+
+
 ## [0.7.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.7.27...@synerise/ds-card-select@0.7.28) (2024-12-04)
 
 **Note:** Version bump only for package @synerise/ds-card-select

package/README.md

@@ -68,6 +68,7 @@ yarn add @synerise/ds-card-select
 
 | tagProps                   | Defines a ribbon-style tag                                           | `TagProps`         | -                                               |
 | tagTooltipProps            | Defines tooltip for the ribbon tag                                   | `TooltipProps`     | -                                               |
+| infoTooltipProps           | Defines a tooltip with information about the purpose of the card     | `TooltipProps`     | -                                               |
 
 
 ### TagProps

package/dist/CardSelect.d.ts

@@ -290,6 +290,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         dashed?: boolean | undefined;
     } | undefined;
     tagTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
+    infoTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
 } & {
     theme?: any;
 }>;

package/dist/CardSelect.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, useRef } from 'react';
 import { withTheme } from 'styled-components';
-import Icon, { Check3M } from '@synerise/ds-icon';
+import Icon, { Check3M, InfoFillS } from '@synerise/ds-icon';
 import { TagShape } from '@synerise/ds-tags';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import Tooltip from '@synerise/ds-tooltip';
@@ -29,7 +29,8 @@ var CardSelect = function CardSelect(_ref) {
     theme = _ref.theme,
     error = _ref.error,
     tagProps = _ref.tagProps,
-    tagTooltipProps = _ref.tagTooltipProps;
+    tagTooltipProps = _ref.tagTooltipProps,
+    infoTooltipProps = _ref.infoTooltipProps;
   var _useState = useState(false),
     isPressed = _useState[0],
     setIsPressed = _useState[1];
@@ -76,6 +77,8 @@ var CardSelect = function CardSelect(_ref) {
     stretchToFit: stretchToFit
   }, /*#__PURE__*/React.createElement(S.Aside, {
     size: size,
+    elementsPosition: elementsPosition,
+    tickVisible: tickVisible,
     tabIndex: disabled ? undefined : 0,
     ref: tickIconRef
   }, tickVisible && /*#__PURE__*/React.createElement(S.TickIcon, {
@@ -90,19 +93,22 @@ var CardSelect = function CardSelect(_ref) {
     component: /*#__PURE__*/React.createElement(Check3M, null)
   }) : /*#__PURE__*/React.createElement(S.RadioShape, {
     size: size
+  })), infoTooltipProps && /*#__PURE__*/React.createElement(Tooltip, infoTooltipProps, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(InfoFillS, null),
+    color: theme.palette['grey-400']
   }))), /*#__PURE__*/React.createElement(S.Main, null, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
     size: size
   }, /*#__PURE__*/React.createElement(Icon, {
     component: icon,
     size: realIconSize
-  })), title ? /*#__PURE__*/React.createElement(S.Title, {
+  })), title && /*#__PURE__*/React.createElement(S.Title, {
     size: size,
     hasIcon: !!icon
-  }, title) : null, description && size !== 'small' ? /*#__PURE__*/React.createElement(S.Description, {
+  }, title), description && size !== 'small' && /*#__PURE__*/React.createElement(S.Description, {
     size: size,
     hasTitle: !!title,
     hasIcon: !!icon
-  }, description) : null), /*#__PURE__*/React.createElement(S.Aside, {
+  }, description)), customTickVisible && customTickVisibleComponent && /*#__PURE__*/React.createElement(S.Aside, {
     size: size
   }, customTickVisible && customTickVisibleComponent)));
 };

package/dist/CardSelect.styles.d.ts

@@ -18,6 +18,8 @@ export declare const IconWrapper: import("styled-components").StyledComponent<"d
 }, never>;
 export declare const Aside: import("styled-components").StyledComponent<"div", any, {
     size?: CardSelectSizeType | undefined;
+    elementsPosition?: CardSelectAlignType | undefined;
+    tickVisible?: Boolean | undefined;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;

package/dist/CardSelect.styles.js

@@ -66,13 +66,17 @@ export var IconWrapper = styled.div.withConfig({
 export var Aside = styled.div.withConfig({
   displayName: "CardSelectstyles__Aside",
   componentId: "tfmgtj-4"
-})(["display:flex;padding:0;justify-content:center;position:absolute;top:", ";"], function (props) {
+})(["width:100%;justify-content:", ";top:0;left:0;display:flex;flex-direction:", ";position:absolute;padding:", ";"], function (props) {
+  return props.tickVisible ? 'space-between' : 'flex-end';
+}, function (props) {
+  return props.elementsPosition === 'left' ? 'row-reverse' : 'row';
+}, function (props) {
   return sizeCondition('4px', '14px', props);
 });
 export var Container = styled.div.withConfig({
   displayName: "CardSelectstyles__Container",
   componentId: "tfmgtj-5"
-})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{", ":", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), TRANSITION, getVar('white'), function (props) {
+})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), TRANSITION, getVar('white'), function (props) {
   return props.theme.variable('@border-radius-base');
 }, is('error')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     &&, &&:hover {\n     box-shadow:  0px 0px 0px 2px ", ";\n     }\n  "])), getVar('red-500')), function (props) {
   return MAP_ELEMENTS_POSITION[props.elementsPosition];
@@ -80,10 +84,6 @@ export var Container = styled.div.withConfig({
   return props.size === 'small' ? '16px' : '24px';
 }, getVar('blue-600'), isNot('pressed') && isNot('value')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["box-shadow:  0px 0px 0px 1px ", ";"])), getVar('grey-300')), is('value')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  box-shadow:  0px 0px 0px 2px ", ";\n  "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([" box-shadow:  0px 0px 0px 2px ", ";"])), getVar('blue-600')), is('value') && is('raised')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  box-shadow:  0px 0px 0px 2px ", ";\n  "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([" box-shadow:  0px 0px 0px 2px ", ";"])), getVar('blue-600')), Title, Description, IconWrapper, function (props) {
   return props.elementsPosition;
-}, Aside, function (props) {
-  return props.elementsPosition === 'left' ? 'right' : 'left';
-}, function (props) {
-  return sizeCondition('4px', '14px', props);
 }, IconWrapper, function (props) {
   return props.elementsPosition === 'left' ? '-18px' : '0px';
 }, function (props) {

package/dist/CardSelect.types.d.ts

@@ -22,6 +22,7 @@ export type CardSelectProps = {
     customTickVisibleComponent?: ReactNode;
     tagProps?: CardSelectTagProps;
     tagTooltipProps?: TooltipProps;
+    infoTooltipProps?: TooltipProps;
     theme: {
         [k: string]: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-select",
-  "version": "0.7.28",
+  "version": "0.8.0",
   "description": "Card-Select UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.68.0",
-    "@synerise/ds-tags": "^0.10.21",
-    "@synerise/ds-tooltip": "^0.14.52",
+    "@synerise/ds-icon": "^0.69.0",
+    "@synerise/ds-tags": "^0.10.23",
+    "@synerise/ds-tooltip": "^0.14.53",
     "@synerise/ds-utils": "^0.31.2",
     "styled-is": "^1.3.0"
   },
@@ -46,5 +46,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "03c0625fb7b5baaa35f6633a425fb803469b6a20"
+  "gitHead": "d1f15a1187417faf8e625758d6b3aa4db58c0ecf"
 }