@laerdal/life-react-components 1.5.1-dev.2.full → 1.5.1-dev.20

package/dist/Card/Card.cjs

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+
+var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+
+var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), _.COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }" : "";
+});
+
+exports.CardTopLevelContainer = CardTopLevelContainer;
+var InteractionType;
+exports.InteractionType = InteractionType;
+
+(function (InteractionType) {
+  InteractionType[InteractionType["None"] = 0] = "None";
+  InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
+  InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
+})(InteractionType || (exports.InteractionType = InteractionType = {}));
+
+var Card = function Card(_ref) {
+  var _ref$interactionType = _ref.interactionType,
+      interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
+      onCardClicked = _ref.onCardClicked,
+      topSectionProps = _ref.topSectionProps,
+      middleSectionProps = _ref.middleSectionProps,
+      bottomSectionProps = _ref.bottomSectionProps,
+      disabled = _ref.disabled;
+  var rootRef = React.useRef(null);
+
+  var onCardClick = function onCardClick() {
+    if (interactionType == InteractionType.Clickable) {
+      var _rootRef$current;
+
+      if (onCardClicked) onCardClicked();
+      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
+    disabled: disabled,
+    ref: rootRef,
+    tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
+    interactionType: interactionType,
+    onClick: onCardClick,
+    children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    }))]
+  });
+};
+
+Card.propTypes = {
+  interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool.isRequired
+};
+var _default = Card;
+exports.default = _default;
+//# sourceMappingURL=Card.cjs.map

package/dist/Card/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,oSACZC,SAAOC,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,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 { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/Card.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CardTopSectionProps } from './CardTopSection';
+import { CardMiddleSectionProps } from './CardMiddleSection';
+import { CardBottomSectionProps } from './CardBottomSection';
+export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
+    interactionType: InteractionType;
+    disabled: boolean;
+}, never>;
+export declare enum InteractionType {
+    None = 0,
+    Clickable = 1,
+    Selectable = 2
+}
+export interface CardProps {
+    interactionType: InteractionType;
+    onCardClicked: () => {};
+    disabled: boolean;
+    topSectionProps?: CardTopSectionProps;
+    middleSectionProps?: CardMiddleSectionProps;
+    bottomSectionProps?: CardBottomSectionProps;
+}
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

package/dist/Card/Card.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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) { _defineProperty(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; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import CardTopSection from './CardTopSection';
+import CardMiddleSection from './CardMiddleSection';
+import CardBottomSection from './CardBottomSection';
+import { COLORS } from '..';
+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-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }" : "";
+});
+export var InteractionType;
+
+(function (InteractionType) {
+  InteractionType[InteractionType["None"] = 0] = "None";
+  InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
+  InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
+})(InteractionType || (InteractionType = {}));
+
+var Card = function Card(_ref) {
+  var _ref$interactionType = _ref.interactionType,
+      interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
+      onCardClicked = _ref.onCardClicked,
+      topSectionProps = _ref.topSectionProps,
+      middleSectionProps = _ref.middleSectionProps,
+      bottomSectionProps = _ref.bottomSectionProps,
+      disabled = _ref.disabled;
+  var rootRef = React.useRef(null);
+
+  var onCardClick = function onCardClick() {
+    if (interactionType == InteractionType.Clickable) {
+      var _rootRef$current;
+
+      if (onCardClicked) onCardClicked();
+      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
+    disabled: disabled,
+    ref: rootRef,
+    tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
+    interactionType: interactionType,
+    onClick: onCardClick,
+    children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    }))]
+  });
+};
+
+Card.propTypes = {
+  interactionType: _pt.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _pt.func.isRequired,
+  disabled: _pt.bool.isRequired
+};
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,sRACZF,MAAM,CAACG,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;AAmCP,WAAYF,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIZ,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEX,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEY,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;AAgCF,eAAeC,IAAf","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 { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/CardBottomSection.cjs

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _assets = require("../assets");
+
+var _Button = require("../Button");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+var NotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ", ";\n"])), _.COLORS.neutral_500);
+
+var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+});
+
+var Divider = _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  height: 1px;\n  margin-bottom: 9px;\n"])), _.COLORS.neutral_100);
+
+var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+
+var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+
+var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 2;\n"])));
+
+var ButtonRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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 Container = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, ButtonRowContainer, function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
+});
+
+var CardBottomSection = function CardBottomSection(_ref) {
+  var interactionType = _ref.interactionType,
+      progressLevel = _ref.progressLevel,
+      progressMax = _ref.progressMax,
+      _ref$progressType = _ref.progressType,
+      progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
+      noteLeft = _ref.noteLeft,
+      noteLeftIcon = _ref.noteLeftIcon,
+      noteRight = _ref.noteRight,
+      noteRightIcon = _ref.noteRightIcon,
+      authorName = _ref.authorName,
+      actions = _ref.actions,
+      disabled = _ref.disabled;
+  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
+        size: _.Size.Small,
+        type: progressType,
+        variant: _.LinearProgressionVariant.Normal,
+        value: progressLevel,
+        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+      })
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NotesContainer, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteLeft, {
+        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+          color: _.COLORS.neutral_500,
+          textStyle: _.ComponentTextStyle.Bold,
+          children: noteLeft
+        })]
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteRight, {
+        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+          color: _.COLORS.neutral_500,
+          textStyle: _.ComponentTextStyle.Bold,
+          children: noteRight
+        })]
+      })]
+    }), authorName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
+      disabled: disabled,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorName, {
+        children: authorName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
+        width: "80px",
+        height: "43px"
+      })]
+    }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonRowContainer, {
+      children: actions.map(function (x) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          disabled: disabled,
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            x.onClick();
+          },
+          children: x.icon
+        });
+      })
+    })]
+  });
+};
+
+CardBottomSection.propTypes = {
+  progressLevel: _propTypes.default.number,
+  progressMax: _propTypes.default.number,
+  noteLeft: _propTypes.default.string,
+  noteLeftIcon: _propTypes.default.node,
+  noteRight: _propTypes.default.string,
+  noteRightIcon: _propTypes.default.node,
+  authorName: _propTypes.default.string,
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    icon: _propTypes.default.node.isRequired,
+    onClick: _propTypes.default.func.isRequired
+  })),
+  logoSrc: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool.isRequired
+};
+var _default = CardBottomSection;
+exports.default = _default;
+//# sourceMappingURL=CardBottomSection.cjs.map

package/dist/Card/CardBottomSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressionType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressionVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAyBA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,mFAAvB;;AAEA,IAAMC,cAAc,GAAGF,0BAAOC,GAAV,qKAITE,SAAOC,WAJE,CAApB;;AAOA,IAAMC,eAAe,GAAGL,0BAAOC,GAAV,8MAMjB,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAJ,SAAOK,WADP,4EAOP,EAPG;AAAA,CANY,CAArB;;AAgBA,IAAMC,OAAO,GAAGT,0BAAOC,GAAV,0NAESE,SAAOO,WAFhB,CAAb;;AASA,IAAMC,QAAQ,GAAGX,0BAAOC,GAAV,mPAAd;;AAYA,IAAMW,SAAS,GAAGZ,0BAAOC,GAAV,oPAAf;;AAaA,IAAMY,UAAU,GAAGb,0BAAOC,GAAV,wGAAhB;;AAIA,IAAMa,kBAAkB,GAAGd,0BAAOC,GAAV,kaAMFE,SAAOO,WANL,EAkBXP,SAAOY,WAlBI,CAAxB;;AAsBA,IAAMC,SAAS,GAAGhB,0BAAOC,GAAV,gMAGH,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAArC;AAAA,CAHF,EAKXO,kBALW,EAMT,UAAAR,KAAK;AAAA,SAAIA,KAAK,CAACW,eAAN,IAAyBC,kBAAgBC,SAAzC,qBACEb,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,MADnC,SAC+C,EADnD;AAAA,CANI,CAAf;;AAWA,IAAMa,iBAAkE,GAAG,SAArEA,iBAAqE,OAY7C;AAAA,MAX5BH,eAW4B,QAX5BA,eAW4B;AAAA,MAV5BI,aAU4B,QAV5BA,aAU4B;AAAA,MAT5BC,WAS4B,QAT5BA,WAS4B;AAAA,+BAR5BC,YAQ4B;AAAA,MAR5BA,YAQ4B,kCARbC,wBAAsBC,IAQT;AAAA,MAP5BC,QAO4B,QAP5BA,QAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,SAK4B,QAL5BA,SAK4B;AAAA,MAJ5BC,aAI4B,QAJ5BA,aAI4B;AAAA,MAH5BC,UAG4B,QAH5BA,UAG4B;AAAA,MAF5BC,OAE4B,QAF5BA,OAE4B;AAAA,MAD5BxB,QAC4B,QAD5BA,QAC4B;AAE5B,MAAMyB,oBAAoB,GAAGX,aAAa,IAAIY,SAAjB,IAA8BP,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AACA,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEvB,QAArB;AAA+B,IAAA,eAAe,EAAEU,eAAhD;AAAA,eACGe,oBAAoB,iBAAI,qBAAC,OAAD,KAD3B,EAEGX,aAAa,IAAIY,SAAjB,iBAA8B,qBAAC,iBAAD;AAAA,6BAC7B,qBAAC,mBAAD;AAAqB,QAAA,IAAI,EAAEC,OAAKC,KAAhC;AACE,QAAA,IAAI,EAAEZ,YADR;AAEE,QAAA,OAAO,EAAEa,2BAAyBC,MAFpC;AAGE,QAAA,KAAK,EAAEhB,aAHT;AAIE,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJtB;AAD6B,MAFjC,EAUG,CAACK,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,sBAAC,cAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,sBAAC,QAAD;AAAA,mBACGA,YADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAExB,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEkC,qBAAmBC,IAAvE;AAAA,oBAA8Eb;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,sBAAC,SAAD;AAAA,mBACGA,aADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAE1B,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEkC,qBAAmBC,IAAvE;AAAA,oBAA8EX;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBGE,UAAU,iBAAI,sBAAC,eAAD;AAAiB,MAAA,QAAQ,EAAEvB,QAA3B;AAAA,8BACb,qBAAC,UAAD;AAAA,kBAAauB;AAAb,QADa,eAEb,qBAAC,mBAAD;AAAa,QAAA,KAAK,EAAC,MAAnB;AAA0B,QAAA,MAAM,EAAC;AAAjC,QAFa;AAAA,MAzBjB,EA8BGC,OAAO,iBAAI,qBAAC,kBAAD;AAAA,gBACTA,OAAO,CAACS,GAAR,CAAY,UAAAC,CAAC;AAAA,4BACZ,qBAAC,kBAAD;AAAY,UAAA,QAAQ,EAAElC,QAAtB;AAAgC,UAAA,OAAO,EAAC,WAAxC;AAAoD,UAAA,KAAK,EAAC,UAA1D;AAAqE,UAAA,MAAM,EAAE,gBAACmC,CAAD,EAAO;AAACA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,eAAH;AAAsBF,YAAAA,CAAC,CAACG,OAAF;AAAa,WAAxH;AAAA,oBACGH,CAAC,CAACI;AADL,UADY;AAAA,OAAb;AADS,MA9Bd;AAAA,IADF;AAwCD,CAvDD;;;AAhHExB,EAAAA,a;AACAC,EAAAA,W;AAGAI,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAC,EAAAA,O;AAhBAc,IAAAA,I;AACAD,IAAAA,O;;AAgBAE,EAAAA,O;AACAvC,EAAAA,Q;;eA6Jaa,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressionType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = 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\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressionType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgression   size={Size.Small}\n          type={progressType}\n          variant={LinearProgressionVariant.Normal}\n          value={progressLevel} \n          max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { InteractionType, LinearProgressionType } from '..';
+export interface ActionItem {
+    icon: React.ReactNode;
+    onClick: () => void;
+}
+export interface CardBottomSectionProps {
+    interactionType: InteractionType;
+    progressLevel?: number;
+    progressMax?: number;
+    progressType?: LinearProgressionType;
+    noteLeft?: string;
+    noteLeftIcon?: React.ReactNode;
+    noteRight?: string;
+    noteRightIcon?: React.ReactNode;
+    authorName?: string;
+    actions?: ActionItem[];
+    logoSrc: string;
+    disabled: boolean;
+}
+declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
+export default CardBottomSection;

package/dist/Card/CardBottomSection.js

@@ -0,0 +1,109 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
+import { LaerdalLogo } from '../assets';
+import { IconButton } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var NotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ", ";\n"])), COLORS.neutral_500);
+var AuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+});
+var Divider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n"])), COLORS.neutral_100);
+var NoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var NoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var AuthorName = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-grow: 2;\n"])));
+var ButtonRowContainer = styled.div(_templateObject8 || (_templateObject8 = _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);
+var Container = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, ButtonRowContainer, function (props) {
+  return props.interactionType == InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
+});
+
+var CardBottomSection = function CardBottomSection(_ref) {
+  var interactionType = _ref.interactionType,
+      progressLevel = _ref.progressLevel,
+      progressMax = _ref.progressMax,
+      _ref$progressType = _ref.progressType,
+      progressType = _ref$progressType === void 0 ? LinearProgressionType.Line : _ref$progressType,
+      noteLeft = _ref.noteLeft,
+      noteLeftIcon = _ref.noteLeftIcon,
+      noteRight = _ref.noteRight,
+      noteRightIcon = _ref.noteRightIcon,
+      authorName = _ref.authorName,
+      actions = _ref.actions,
+      disabled = _ref.disabled;
+  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(Divider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(ProgressContainer, {
+      children: /*#__PURE__*/_jsx(LinearProgression, {
+        size: Size.Small,
+        type: progressType,
+        variant: LinearProgressionVariant.Normal,
+        value: progressLevel,
+        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+      })
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NotesContainer, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(NoteLeft, {
+        children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
+          color: COLORS.neutral_500,
+          textStyle: ComponentTextStyle.Bold,
+          children: noteLeft
+        })]
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NoteRight, {
+        children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
+          color: COLORS.neutral_500,
+          textStyle: ComponentTextStyle.Bold,
+          children: noteRight
+        })]
+      })]
+    }), authorName && /*#__PURE__*/_jsxs(AuthorContainer, {
+      disabled: disabled,
+      children: [/*#__PURE__*/_jsx(AuthorName, {
+        children: authorName
+      }), /*#__PURE__*/_jsx(LaerdalLogo, {
+        width: "80px",
+        height: "43px"
+      })]
+    }), actions && /*#__PURE__*/_jsx(ButtonRowContainer, {
+      children: actions.map(function (x) {
+        return /*#__PURE__*/_jsx(IconButton, {
+          disabled: disabled,
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            x.onClick();
+          },
+          children: x.icon
+        });
+      })
+    })]
+  });
+};
+
+CardBottomSection.propTypes = {
+  progressLevel: _pt.number,
+  progressMax: _pt.number,
+  noteLeft: _pt.string,
+  noteLeftIcon: _pt.node,
+  noteRight: _pt.string,
+  noteRightIcon: _pt.node,
+  authorName: _pt.string,
+  actions: _pt.arrayOf(_pt.shape({
+    icon: _pt.node.isRequired,
+    onClick: _pt.func.isRequired
+  })),
+  logoSrc: _pt.string.isRequired,
+  disabled: _pt.bool.isRequired
+};
+export default CardBottomSection;
+//# sourceMappingURL=CardBottomSection.js.map

package/dist/Card/CardBottomSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgression","LinearProgressionType","LinearProgressionVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressionType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = 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\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressionType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgression   size={Size.Small}\n          type={progressType}\n          variant={LinearProgressionVariant.Normal}\n          value={progressLevel} \n          max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}