npm - @laerdal/life-react-components - Versions diffs - 5.1.1 → 5.3.0 - Mend

@laerdal/life-react-components 5.1.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/Card/VerticalCard/CardBottomSection.cjs +54 -16
package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
package/dist/Card/VerticalCard/CardBottomSection.d.ts +12 -1
package/dist/Card/VerticalCard/CardBottomSection.js +55 -17
package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
package/package.json +3 -2

package/dist/Card/VerticalCard/CardBottomSection.cjs CHANGED Viewed

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CardBottomSectionProgressStyles = exports.CardBottomSectionNotesStyles = exports.CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteLeftStyles = exports.CardBottomSectionDivider = exports.CardBottomSectionContainer = exports.CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionAuthorStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -12,17 +14,22 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _Button = require("../../Button");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const _excluded = ["buttonText", "onClick"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n"])));
 const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), props => _index.COLORS.getColor('neutral_500', props.theme));
 const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), props => props.$disabled ? "\n    color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '');
 const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), props => _index.COLORS.getColor('neutral_100', props.theme));
 const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => _index.COLORS.getColor('neutral_100', props.theme), props => _index.COLORS.getColor('neutral_600', props.theme));
+const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  .card-bottom-section-action-button {\n    z-index: 2000;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => _index.COLORS.getColor('neutral_100', props.theme), props => _index.COLORS.getColor('neutral_600', props.theme));
 const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+const LeftItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1\n"])));
+const RightItemContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"])), props => _index.COLORS.getColor('neutral_600', props.theme));
 const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
@@ -32,6 +39,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     noteLeftIcon,
     noteRight,
     noteRightIcon,
+    leftButton,
     authorName,
     logo,
     actions,
@@ -41,10 +49,30 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = (0, _styledComponents.useTheme)();
   const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(() => {
-    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
-  }, [length]);
+    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
+  }, [length, leftButton]);
   React.useImperativeHandle(ref, () => elRefs, [elRefs]);
-  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
+  const renderLeftButton = () => {
+    if (leftButton) {
+      const {
+          buttonText,
+          onClick
+        } = leftButton,
+        rest = (0, _objectWithoutProperties2.default)(leftButton, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+        className: "card-bottom-section-action-button",
+        ref: elRefs[0],
+        size: leftButton.size && [_index.Size.XSmall, _index.Size.XSmall, _index.Size.XXSmall].includes(leftButton.size) ? _index.Size.Small : leftButton.size == _index.Size.Large ? _index.Size.Large : _index.Size.Medium
+      }, rest), {}, {
+        onClick: e => {
+          e.stopPropagation();
+          onClick && onClick(e);
+        },
+        children: buttonText
+      }));
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionProgressStyles, {
@@ -75,17 +103,26 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName
       }), logo]
-    }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionButtonRowContainerStyles, {
-      children: actions.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-        ref: elRefs[index],
-        disabled: disabled,
-        variant: "secondary",
-        shape: "circular",
-        action: e => {
-          x.onClick();
-        },
-        children: x.icon
-      }, index))
+    }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionButtonRowContainerStyles, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
+        children: leftButton && renderLeftButton()
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
+        children: actions.map((x, index) => {
+          var _x$variant;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            ref: elRefs[index + (leftButton ? 1 : 0)],
+            className: "card-bottom-section-action-button",
+            "z-index": 2000,
+            disabled: disabled,
+            variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : "secondary",
+            shape: "circular",
+            action: e => {
+              x.onClick();
+            },
+            children: x.icon
+          }, index);
+        })
+      })]
     })]
   });
 });
@@ -98,6 +135,7 @@ CardBottomSection.propTypes = {
   noteRightIcon: _propTypes.default.node,
   authorName: _propTypes.default.string,
   actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    variant: _propTypes.default.oneOf(['primary', 'secondary']),
     icon: _propTypes.default.node.isRequired,
     onClick: _propTypes.default.func.isRequired
   })),

package/dist/Card/VerticalCard/CardBottomSection.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","exports","styled","div","_taggedTemplateLiteral2","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. /\r\n progressLevel?: number;\r\n /* Optional. Maximum level of progress in the progress bar. /\r\n progressMax?: number;\r\n /* Optional. Type of the progress bar. /\r\n progressType?: LinearProgressType;\r\n\r\n /* Optional. Note text shown on the left side of the section. /\r\n noteLeft?: string;\r\n /* Optional. Note icon shown on the left side of the section. /\r\n noteLeftIcon?: React.ReactNode;\r\n /* Optional. Note text shown on the right side of the section. /\r\n noteRight?: string;\r\n /* Optional. Note icon shown on the right side of the section. /\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /* Author name shown at the bottom-left part of the section. /\r\n authorName?: string;\r\n /* Array of actions shown on the bottom-right corner of the section. /\r\n actions?: ActionItem[];\r\n /* Logo shown on the right side of the section, in front of AuthorName. /\r\n logo?: React.ReactNode;\r\n /* This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n }: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length \|\| 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length \|\| 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined \|\| noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon \|\| authorName;\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft \|\| noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight \|\| noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName \|\| logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {actions && <CardBottomSectionButtonRowContainerStyles>\r\n {actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","_taggedTemplateLiteral2","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties2","jsx","Button","className","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","stopPropagation","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","_x$variant","IconButton","shape","action","icon","propTypes","_propTypes","number","string","node","arrayOf","oneOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n /** Optional. Variant of the action button, defaults to 'secondary'. /\r\n variant?: 'primary' \| 'secondary';\r\n /* Icon to be used in the icon button. /\r\n icon: React.ReactNode;\r\n /* Click handler for the action button. /\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' \| 'variant' \| 'loading' \| 'icon' \| 'onClick' \| 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /* Optional. Current progress level shown in the progress bar. /\r\n progressLevel?: number;\r\n /* Optional. Maximum level of progress in the progress bar. /\r\n progressMax?: number;\r\n /* Optional. Type of the progress bar. /\r\n progressType?: LinearProgressType;\r\n\r\n /* Optional. Note text shown on the left side of the section. /\r\n noteLeft?: string;\r\n /* Optional. Note icon shown on the left side of the section. /\r\n noteLeftIcon?: React.ReactNode;\r\n /* Optional. Note text shown on the right side of the section. /\r\n noteRight?: string;\r\n /* Optional. Note icon shown on the right side of the section. /\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /* Optional. Note icon/Hyperlink/button shown on the left side of the section. /\r\n leftButton?: CardStandardButton;\r\n\r\n /* Author name shown at the bottom-left part of the section. /\r\n authorName?: string;\r\n /* Array of actions shown on the bottom-right corner of the section. /\r\n actions?: ActionItem[];\r\n /* Logo shown on the right side of the section, in front of AuthorName. /\r\n logo?: React.ReactNode;\r\n /* This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length \|\| 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array((length \|\| 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length, leftButton]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined \|\| noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon \|\| authorName \|\| leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, onClick, ...rest} = leftButton;\r\n return (<Button className=\"card-bottom-section-action-button\"\r\n ref={elRefs[0]}\r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick && onClick(e);\r\n }}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft \|\| noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight \|\| noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName \|\| logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions \|\| leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n className=\"card-bottom-section-action-button\"\r\n key={index}\r\n z-index={2000}\r\n disabled={disabled}\r\n variant={x.variant ?? \"secondary\"}\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.d.ts CHANGED Viewed

@@ -1,9 +1,18 @@
 import * as React from 'react';
-import { LinearProgressType } from '../../index';
+import { LinearProgressType, Size } from '../../index';
+import { ButtonProps } from '../../Button';
 export interface ActionItem {
+    /** Optional. Variant of the action button, defaults to 'secondary'. */
+    variant?: 'primary' | 'secondary';
+    /** Icon to be used in the icon button. */
     icon: React.ReactNode;
+    /** Click handler for the action button. */
     onClick: () => void;
 }
+export type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+    buttonText: string;
+    size?: Size.Small | Size.Medium | Size.Large;
+};
 export interface CardBottomSectionProps {
     /** Optional. Current progress level shown in the progress bar. */
     progressLevel?: number;
@@ -19,6 +28,8 @@ export interface CardBottomSectionProps {
     noteRight?: string;
     /** Optional. Note icon shown on the right side of the section. */
     noteRightIcon?: React.ReactNode;
+    /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
+    leftButton?: CardStandardButton;
     /** Author name shown at the bottom-left part of the section.  */
     authorName?: string;
     /** Array of actions shown on the bottom-right corner of the section. */

package/dist/Card/VerticalCard/CardBottomSection.js CHANGED Viewed

@@ -1,10 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const _excluded = ["buttonText", "onClick"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
-import { IconButton } from '../../Button';
+import { Button, IconButton } from '../../Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
 export const CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), props => COLORS.getColor('neutral_500', props.theme));
@@ -12,8 +17,10 @@ export const CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_te
 export const CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), props => COLORS.getColor('neutral_100', props.theme));
 export const CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 export const CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
+export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  .card-bottom-section-action-button {\n    z-index: 2000;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
 export const CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+const LeftItemContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex: 1\n"])));
+const RightItemContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"])), props => COLORS.getColor('neutral_600', props.theme));
 const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
@@ -23,6 +30,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     noteLeftIcon,
     noteRight,
     noteRightIcon,
+    leftButton,
     authorName,
     logo,
     actions,
@@ -32,10 +40,30 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = useTheme();
   const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(() => {
-    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
-  }, [length]);
+    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
+  }, [length, leftButton]);
   React.useImperativeHandle(ref, () => elRefs, [elRefs]);
-  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
+  const renderLeftButton = () => {
+    if (leftButton) {
+      const {
+          buttonText,
+          onClick
+        } = leftButton,
+        rest = _objectWithoutProperties(leftButton, _excluded);
+      return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        className: "card-bottom-section-action-button",
+        ref: elRefs[0],
+        size: leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small : leftButton.size == Size.Large ? Size.Large : Size.Medium
+      }, rest), {}, {
+        onClick: e => {
+          e.stopPropagation();
+          onClick && onClick(e);
+        },
+        children: buttonText
+      }));
+    }
+  };
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
@@ -66,17 +94,26 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), logo]
-    }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
-      children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
-        ref: elRefs[index],
-        disabled: disabled,
-        variant: "secondary",
-        shape: "circular",
-        action: e => {
-          x.onClick();
-        },
-        children: x.icon
-      }, index))
+    }), (actions || leftButton) && /*#__PURE__*/_jsxs(CardBottomSectionButtonRowContainerStyles, {
+      children: [/*#__PURE__*/_jsx(LeftItemContainer, {
+        children: leftButton && renderLeftButton()
+      }), actions && /*#__PURE__*/_jsx(RightItemContainer, {
+        children: actions.map((x, index) => {
+          var _x$variant;
+          return /*#__PURE__*/_jsx(IconButton, {
+            ref: elRefs[index + (leftButton ? 1 : 0)],
+            className: "card-bottom-section-action-button",
+            "z-index": 2000,
+            disabled: disabled,
+            variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : "secondary",
+            shape: "circular",
+            action: e => {
+              x.onClick();
+            },
+            children: x.icon
+          }, index);
+        })
+      })]
     })]
   });
 });
@@ -89,6 +126,7 @@ CardBottomSection.propTypes = {
   noteRightIcon: _pt.node,
   authorName: _pt.string,
   actions: _pt.arrayOf(_pt.shape({
+    variant: _pt.oneOf(['primary', 'secondary']),
     icon: _pt.node.isRequired,
     onClick: _pt.func.isRequired
   })),

package/dist/Card/VerticalCard/CardBottomSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. /\r\n progressLevel?: number;\r\n /* Optional. Maximum level of progress in the progress bar. /\r\n progressMax?: number;\r\n /* Optional. Type of the progress bar. /\r\n progressType?: LinearProgressType;\r\n\r\n /* Optional. Note text shown on the left side of the section. /\r\n noteLeft?: string;\r\n /* Optional. Note icon shown on the left side of the section. /\r\n noteLeftIcon?: React.ReactNode;\r\n /* Optional. Note text shown on the right side of the section. /\r\n noteRight?: string;\r\n /* Optional. Note icon shown on the right side of the section. /\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /* Author name shown at the bottom-left part of the section. /\r\n authorName?: string;\r\n /* Array of actions shown on the bottom-right corner of the section. /\r\n actions?: ActionItem[];\r\n /* Logo shown on the right side of the section, in front of AuthorName. /\r\n logo?: React.ReactNode;\r\n /* This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n }: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length \|\| 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length \|\| 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined \|\| noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon \|\| authorName;\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft \|\| noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight \|\| noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName \|\| logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {actions && <CardBottomSectionButtonRowContainerStyles>\r\n {actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","LeftItemContainer","_templateObject9","RightItemContainer","_templateObject10","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties","_excluded","_objectSpread","className","size","XSmall","XXSmall","includes","Small","Large","Medium","e","stopPropagation","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","_x$variant","shape","action","icon","propTypes","_pt","number","string","node","arrayOf","oneOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n /** Optional. Variant of the action button, defaults to 'secondary'. /\r\n variant?: 'primary' \| 'secondary';\r\n /* Icon to be used in the icon button. /\r\n icon: React.ReactNode;\r\n /* Click handler for the action button. /\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' \| 'variant' \| 'loading' \| 'icon' \| 'onClick' \| 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /* Optional. Current progress level shown in the progress bar. /\r\n progressLevel?: number;\r\n /* Optional. Maximum level of progress in the progress bar. /\r\n progressMax?: number;\r\n /* Optional. Type of the progress bar. /\r\n progressType?: LinearProgressType;\r\n\r\n /* Optional. Note text shown on the left side of the section. /\r\n noteLeft?: string;\r\n /* Optional. Note icon shown on the left side of the section. /\r\n noteLeftIcon?: React.ReactNode;\r\n /* Optional. Note text shown on the right side of the section. /\r\n noteRight?: string;\r\n /* Optional. Note icon shown on the right side of the section. /\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /* Optional. Note icon/Hyperlink/button shown on the left side of the section. /\r\n leftButton?: CardStandardButton;\r\n\r\n /* Author name shown at the bottom-left part of the section. /\r\n authorName?: string;\r\n /* Array of actions shown on the bottom-right corner of the section. /\r\n actions?: ActionItem[];\r\n /* Logo shown on the right side of the section, in front of AuthorName. /\r\n logo?: React.ReactNode;\r\n /* This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length \|\| 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array((length \|\| 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length, leftButton]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined \|\| noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon \|\| authorName \|\| leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, onClick, ...rest} = leftButton;\r\n return (<Button className=\"card-bottom-section-action-button\"\r\n ref={elRefs[0]}\r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick && onClick(e);\r\n }}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft \|\| noteLeftIcon \|\| noteRight \|\| noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft \|\| noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight \|\| noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName \|\| logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions \|\| leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n className=\"card-bottom-section-action-button\"\r\n key={index}\r\n z-index={2000}\r\n disabled={disabled}\r\n variant={x.variant ?? \"secondary\"}\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],
@@ -128,7 +128,8 @@
     "react-share": "^5.1.0",
     "regenerator-runtime": "^0.13.9",
     "storybook": "^8.1.3",
-    "ts-jest": "^29.2.5"
+    "ts-jest": "^29.2.5",
+    "@laerdal/life-react-components": "5.1.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",