@laerdal/life-react-components 1.9.8-dev.8.full → 1.9.9-dev.2

package/dist/Card/{Card.cjs → VerticalCard/Card.cjs}

@@ -11,6 +11,10 @@ exports.default = exports.Wrapper = exports.CardTopLevelContainer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,7 +29,7 @@ var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
 
 var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
 
-var _ = require("..");
+var _index = require("../../index");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -39,11 +43,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n"])), _.COLORS.white);
+var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
 
 exports.CardTopLevelContainer = CardTopLevelContainer;
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ", " {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ", ";\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ", ";\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), _.focusStyles, CardTopLevelContainer, _.COLORS.neutral_200, _.COLORS.neutral_200);
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2);
 
 exports.Wrapper = Wrapper;
 
@@ -52,24 +56,43 @@ var Card = function Card(_ref) {
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled;
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
+      disabled = _ref.disabled,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'outline' : _ref$variant;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      actionsRefs = _React$useState2[0],
+      setActionsRefs = _React$useState2[1];
+
+  var checkBoxRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  (0, _index.useActionWithin)(containerRef, [].concat((0, _toConsumableArray2.default)(actionsRefs), [checkBoxRef]));
+  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    ref: containerRef,
     className: cls,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onMouseDown: _.defaultOnMouseDownHandler,
+    onMouseDown: _index.defaultOnMouseDownHandler,
     onKeyDown: function onKeyDown(a) {
       return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked();
     },
     onClick: function onClick(e) {
       return !disabled && onCardClicked && onCardClicked();
     },
+    "data-testid": 'card-wrapper',
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({
+        ref: checkBoxRef
+      }, topSectionProps), {}, {
         disabled: disabled
       })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
         disabled: disabled
-      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({
+        ref: function ref(instance) {
+          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
+        }
+      }, bottomSectionProps), {}, {
         disabled: disabled
       }))]
     })
@@ -78,7 +101,8 @@ var Card = function Card(_ref) {
 
 Card.propTypes = {
   onCardClicked: _propTypes.default.func,
-  disabled: _propTypes.default.bool.isRequired
+  disabled: _propTypes.default.bool,
+  variant: _propTypes.default.oneOf(['outline', 'elevated'])
 };
 var _default = Card;
 exports.default = _default;

package/dist/Card/VerticalCard/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/{Card.d.ts → VerticalCard/Card.d.ts}

@@ -6,10 +6,11 @@ export declare const CardTopLevelContainer: import("styled-components").StyledCo
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface CardProps {
     onCardClicked?: () => {};
-    disabled: boolean;
+    disabled?: boolean;
     topSectionProps?: CardTopSectionProps;
     middleSectionProps?: CardMiddleSectionProps;
     bottomSectionProps?: CardBottomSectionProps;
+    variant?: 'outline' | 'elevated';
 }
 declare const Card: React.FunctionComponent<CardProps>;
 export default Card;

package/dist/Card/{Card.js → VerticalCard/Card.js}

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
@@ -13,20 +15,32 @@ import styled from 'styled-components';
 import CardTopSection from './CardTopSection';
 import CardMiddleSection from './CardMiddleSection';
 import CardBottomSection from './CardBottomSection';
-import { COLORS, defaultOnMouseDownHandler, focusStyles } from '..';
+import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n"])), COLORS.white);
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ", " {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ", ";\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ", ";\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.neutral_200, COLORS.neutral_200);
+export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2);
 
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled;
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
+      disabled = _ref.disabled,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'outline' : _ref$variant;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      actionsRefs = _React$useState2[0],
+      setActionsRefs = _React$useState2[1];
+
+  var checkBoxRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  useActionWithin(containerRef, [].concat(_toConsumableArray(actionsRefs), [checkBoxRef]));
+  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant);
   return /*#__PURE__*/_jsx(Wrapper, {
+    ref: containerRef,
     className: cls,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
     onMouseDown: defaultOnMouseDownHandler,
@@ -36,12 +50,19 @@ var Card = function Card(_ref) {
     onClick: function onClick(e) {
       return !disabled && onCardClicked && onCardClicked();
     },
+    "data-testid": 'card-wrapper',
     children: /*#__PURE__*/_jsxs(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
+        ref: checkBoxRef
+      }, topSectionProps), {}, {
         disabled: disabled
       })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
         disabled: disabled
-      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({
+        ref: function ref(instance) {
+          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
+        }
+      }, bottomSectionProps), {}, {
         disabled: disabled
       }))]
     })
@@ -50,7 +71,8 @@ var Card = function Card(_ref) {
 
 Card.propTypes = {
   onCardClicked: _pt.func,
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool,
+  variant: _pt.oneOf(['outline', 'elevated'])
 };
 export default Card;
 //# sourceMappingURL=Card.js.map

package/dist/Card/VerticalCard/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/{CardBottomSection.cjs → VerticalCard/CardBottomSection.cjs}

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.CardProgressContainer = exports.CardNotesContainer = exports.CardNoteRight = exports.CardNoteLeft = exports.CardButtonRowContainer = exports.CardBottomSectionContainer = exports.CardBottomDivider = exports.CardAuthorContainer = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,9 +19,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ = require("..");
+var _index = require("../../index");
 
-var _Button = require("../Button");
+var _Button = require("../../Button");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -33,17 +35,17 @@ var CardProgressContainer = _styledComponents.default.div(_templateObject || (_t
 
 exports.CardProgressContainer = CardProgressContainer;
 
-var CardNotesContainer = _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"])), _.COLORS.neutral_500);
+var CardNotesContainer = _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"])), _index.COLORS.neutral_500);
 
 exports.CardNotesContainer = CardNotesContainer;
 
 var CardAuthorContainer = _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"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.disabled ? "\n    color: ".concat(_index.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 
 exports.CardAuthorContainer = CardAuthorContainer;
 
-var CardBottomDivider = _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"])), _.COLORS.neutral_100);
+var CardBottomDivider = _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"])), _index.COLORS.neutral_100);
 
 exports.CardBottomDivider = CardBottomDivider;
 
@@ -55,19 +57,18 @@ var CardNoteRight = _styledComponents.default.div(_templateObject6 || (_template
 
 exports.CardNoteRight = CardNoteRight;
 
-var CardButtonRowContainer = _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"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
+var CardButtonRowContainer = _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"])), _index.COLORS.neutral_100, _index.COLORS.neutral_600);
 
 exports.CardButtonRowContainer = CardButtonRowContainer;
 
 var CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
 
 exports.CardBottomSectionContainer = CardBottomSectionContainer;
-
-var CardBottomSection = function CardBottomSection(_ref) {
+var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
+      progressType = _ref$progressType === void 0 ? _index.LinearProgressType.Line : _ref$progressType,
       noteLeft = _ref.noteLeft,
       noteLeftIcon = _ref.noteLeftIcon,
       noteRight = _ref.noteRight,
@@ -76,52 +77,68 @@ var CardBottomSection = function CardBottomSection(_ref) {
       logo = _ref.logo,
       actions = _ref.actions,
       disabled = _ref.disabled;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      elRefs = _React$useState2[0],
+      setElRefs = _React$useState2[1];
+
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
+    "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardProgressContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
-        size: _.Size.Small,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LinearProgress, {
+        size: _index.Size.Small,
         type: progressType,
-        variant: _.LinearProgressVariant.Normal,
+        variant: _index.LinearProgressVariant.Normal,
         value: progressLevel,
         max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
       })
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNotesContainer, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteLeft, {
-        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
-          color: _.COLORS.neutral_500,
-          textStyle: _.ComponentTextStyle.Bold,
+        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
+          color: _index.COLORS.neutral_500,
+          textStyle: _index.ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteRight, {
-        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
-          color: _.COLORS.neutral_500,
-          textStyle: _.ComponentTextStyle.Bold,
+        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
+          color: _index.COLORS.neutral_500,
+          textStyle: _index.ComponentTextStyle.Bold,
           children: noteRight
         })]
       })]
     }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardAuthorContainer, {
       disabled: disabled,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+      "data-testid": 'card-bottomSection-author',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardButtonRowContainer, {
-      children: actions.map(function (x) {
+      children: actions.map(function (x, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          ref: elRefs[index],
           disabled: disabled,
           variant: "secondary",
           shape: "circular",
           action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
             x.onClick();
           },
           children: x.icon
-        });
+        }, index);
       })
     })]
   });
-};
-
+});
 CardBottomSection.propTypes = {
   progressLevel: _propTypes.default.number,
   progressMax: _propTypes.default.number,
@@ -135,7 +152,7 @@ CardBottomSection.propTypes = {
     onClick: _propTypes.default.func.isRequired
   })),
   logo: _propTypes.default.node,
-  disabled: _propTypes.default.bool.isRequired
+  disabled: _propTypes.default.bool
 };
 var _default = CardBottomSection;
 exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\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`;\n\nexport const CardNoteRight = styled.div`\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`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/{CardBottomSection.d.ts → VerticalCard/CardBottomSection.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LinearProgressType } from '..';
+import { LinearProgressType } from '../../index';
 export interface ActionItem {
     icon: React.ReactNode;
     onClick: () => void;
@@ -15,17 +15,17 @@ export interface CardBottomSectionProps {
     authorName?: string;
     actions?: ActionItem[];
     logo?: React.ReactNode;
-    disabled: boolean;
+    disabled?: boolean;
 }
 export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled: boolean;
+    disabled?: boolean | undefined;
 }, never>;
 export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
+declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
 export default CardBottomSection;

package/dist/Card/{CardBottomSection.js → VerticalCard/CardBottomSection.js}

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
@@ -5,8 +6,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
-import { IconButton } from '../Button';
+import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
+import { IconButton } from '../../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
@@ -17,10 +18,9 @@ export var CardAuthorContainer = styled.div(_templateObject3 || (_templateObject
 export var CardBottomDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
 export var CardNoteLeft = 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 var CardNoteRight = 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 var CardButtonRowContainer = 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"])), COLORS.neutral_100, COLORS.neutral_600);
+export var CardButtonRowContainer = 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"])), COLORS.neutral_100, COLORS.neutral_600);
 export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-
-var CardBottomSection = function CardBottomSection(_ref) {
+var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
@@ -33,8 +33,24 @@ var CardBottomSection = function CardBottomSection(_ref) {
       logo = _ref.logo,
       actions = _ref.actions,
       disabled = _ref.disabled;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      elRefs = _React$useState2[0],
+      setElRefs = _React$useState2[1];
+
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
+    "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardProgressContainer, {
       children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,
@@ -59,26 +75,26 @@ var CardBottomSection = function CardBottomSection(_ref) {
       })]
     }), (authorName || logo) && /*#__PURE__*/_jsxs(CardAuthorContainer, {
       disabled: disabled,
+      "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/_jsx(CardButtonRowContainer, {
-      children: actions.map(function (x) {
+      children: actions.map(function (x, index) {
         return /*#__PURE__*/_jsx(IconButton, {
+          ref: elRefs[index],
           disabled: disabled,
           variant: "secondary",
           shape: "circular",
           action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
             x.onClick();
           },
           children: x.icon
-        });
+        }, index);
       })
     })]
   });
-};
-
+});
 CardBottomSection.propTypes = {
   progressLevel: _pt.number,
   progressMax: _pt.number,
@@ -92,7 +108,7 @@ CardBottomSection.propTypes = {
     onClick: _pt.func.isRequired
   })),
   logo: _pt.node,
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardBottomSection;
 //# sourceMappingURL=CardBottomSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\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`;\n\nexport const CardNoteRight = styled.div`\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`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}