@laerdal/life-react-components 1.5.1-dev.4 → 1.5.1-dev.40

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: 1px solid transparent;\n  background-clip: padding-box;\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 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(_.COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #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","neutral_200","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,iVACZC,SAAOC,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBN,SAAOO,WAL7B,yJAYsBP,SAAOO,WAZ7B,sKAkBsBP,SAAOO,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;;;IAuCKH,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAId,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEb,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEc,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;eAgCaE,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: 1px solid transparent;\n  background-clip: padding-box;\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 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #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: 1px solid transparent;\n  background-clip: padding-box;\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 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #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","neutral_200","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,mUACZF,MAAM,CAACG,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBR,MAAM,CAACS,WAL7B,yJAYsBT,MAAM,CAACS,WAZ7B,sKAkBsBT,MAAM,CAACS,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;AAuCP,WAAYH,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;AAgCF,eAAeE,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: 1px solid transparent;\n  background-clip: padding-box;\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 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #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,133 @@
+"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 _Button = require("../Button");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+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)(["\n  padding: 8px 0;\n"])));
+
+var NotesContainer = _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 AuthorContainer = _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  }\n\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\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"])), _.COLORS.neutral_100);
+
+var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+
+var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+
+var ButtonRowContainer = _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 Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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 ? _.LinearProgressType.Line : _ref$progressType,
+      noteLeft = _ref.noteLeft,
+      noteLeftIcon = _ref.noteLeftIcon,
+      noteRight = _ref.noteRight,
+      noteRightIcon = _ref.noteRightIcon,
+      authorName = _ref.authorName,
+      logo = _ref.logo,
+      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)(_.LinearProgress, {
+        size: _.Size.Small,
+        type: progressType,
+        variant: _.LinearProgressVariant.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 || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
+      disabled: disabled,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+        children: authorName
+      }), logo]
+    }), 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
+  })),
+  logo: _propTypes.default.node,
+  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","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, 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?: 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\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = 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\nconst AuthorContainer = 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  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\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`;\n\nconst NoteLeft = 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  }\n`;\n\nconst NoteRight = 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  }\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 = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\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        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.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 || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\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, LinearProgressType } from '..';
+export interface ActionItem {
+    icon: React.ReactNode;
+    onClick: () => void;
+}
+export interface CardBottomSectionProps {
+    interactionType: InteractionType;
+    progressLevel?: number;
+    progressMax?: number;
+    progressType?: LinearProgressType;
+    noteLeft?: string;
+    noteLeftIcon?: React.ReactNode;
+    noteRight?: string;
+    noteRightIcon?: React.ReactNode;
+    authorName?: string;
+    actions?: ActionItem[];
+    logo?: React.ReactNode;
+    disabled: boolean;
+}
+declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
+export default CardBottomSection;

package/dist/Card/CardBottomSection.js

@@ -0,0 +1,105 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
+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(["\n  padding: 8px 0;\n"])));
+var NotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), COLORS.neutral_500);
+var AuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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  }\n\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\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"])), COLORS.neutral_100);
+var NoteLeft = 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  }\n"])));
+var NoteRight = 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  }\n"])));
+var ButtonRowContainer = 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);
+var Container = styled.div(_templateObject8 || (_templateObject8 = _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 ? LinearProgressType.Line : _ref$progressType,
+      noteLeft = _ref.noteLeft,
+      noteLeftIcon = _ref.noteLeftIcon,
+      noteRight = _ref.noteRight,
+      noteRightIcon = _ref.noteRightIcon,
+      authorName = _ref.authorName,
+      logo = _ref.logo,
+      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(LinearProgress, {
+        size: Size.Small,
+        type: progressType,
+        variant: LinearProgressVariant.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 || logo) && /*#__PURE__*/_jsxs(AuthorContainer, {
+      disabled: disabled,
+      children: [/*#__PURE__*/_jsx(ComponentXXS, {
+        children: authorName
+      }), logo]
+    }), 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
+  })),
+  logo: _pt.node,
+  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","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, 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?: 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\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = 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\nconst AuthorContainer = 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  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\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`;\n\nconst NoteLeft = 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  }\n`;\n\nconst NoteRight = 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  }\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 = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\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        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.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 || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\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"}