@laerdal/life-react-components 1.5.1-dev.16 → 1.5.1-dev.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -445,17 +445,4 @@ Object.keys(_SegmentControl).forEach(function (key) {
445
445
  }
446
446
  });
447
447
  });
448
-
449
- var _Card = require("./Card");
450
-
451
- Object.keys(_Card).forEach(function (key) {
452
- if (key === "default" || key === "__esModule") return;
453
- if (key in exports && exports[key] === _Card[key]) return;
454
- Object.defineProperty(exports, key, {
455
- enumerable: true,
456
- get: function get() {
457
- return _Card[key];
458
- }
459
- });
460
- });
461
448
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -32,4 +32,3 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
- export * from './Card';
package/dist/index.js CHANGED
@@ -32,5 +32,4 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
- export * from './Card';
36
35
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.5.1-dev.16",
3
+ "version": "1.5.1-dev.17",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [
@@ -1,101 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var React = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireDefault(require("styled-components"));
21
-
22
- var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
23
-
24
- var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
25
-
26
- var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
27
-
28
- var _ = require("..");
29
-
30
- var _jsxRuntime = require("react/jsx-runtime");
31
-
32
- var _templateObject;
33
-
34
- 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); }
35
-
36
- 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; }
37
-
38
- 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; }
39
-
40
- 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; }
41
-
42
- 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) {
43
- 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 }" : "";
44
- });
45
-
46
- exports.CardTopLevelContainer = CardTopLevelContainer;
47
- var InteractionType;
48
- exports.InteractionType = InteractionType;
49
-
50
- (function (InteractionType) {
51
- InteractionType[InteractionType["None"] = 0] = "None";
52
- InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
53
- InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
54
- })(InteractionType || (exports.InteractionType = InteractionType = {}));
55
-
56
- var Card = function Card(_ref) {
57
- var _ref$interactionType = _ref.interactionType,
58
- interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
59
- onCardClicked = _ref.onCardClicked,
60
- topSectionProps = _ref.topSectionProps,
61
- middleSectionProps = _ref.middleSectionProps,
62
- bottomSectionProps = _ref.bottomSectionProps,
63
- disabled = _ref.disabled;
64
- var rootRef = React.useRef(null);
65
-
66
- var onCardClick = function onCardClick() {
67
- if (interactionType == InteractionType.Clickable) {
68
- var _rootRef$current;
69
-
70
- if (onCardClicked) onCardClicked();
71
- (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
72
- }
73
- };
74
-
75
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
76
- disabled: disabled,
77
- ref: rootRef,
78
- tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
79
- interactionType: interactionType,
80
- onClick: onCardClick,
81
- children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
82
- disabled: disabled,
83
- interactionType: interactionType
84
- })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
85
- disabled: disabled,
86
- interactionType: interactionType
87
- })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
88
- disabled: disabled,
89
- interactionType: interactionType
90
- }))]
91
- });
92
- };
93
-
94
- Card.propTypes = {
95
- interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
96
- onCardClicked: _propTypes.default.func.isRequired,
97
- disabled: _propTypes.default.bool.isRequired
98
- };
99
- var _default = Card;
100
- exports.default = _default;
101
- //# sourceMappingURL=Card.cjs.map
@@ -1 +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"}
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import { CardTopSectionProps } from './CardTopSection';
3
- import { CardMiddleSectionProps } from './CardMiddleSection';
4
- import { CardBottomSectionProps } from './CardBottomSection';
5
- export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
6
- interactionType: InteractionType;
7
- disabled: boolean;
8
- }, never>;
9
- export declare enum InteractionType {
10
- None = 0,
11
- Clickable = 1,
12
- Selectable = 2
13
- }
14
- export interface CardProps {
15
- interactionType: InteractionType;
16
- onCardClicked: () => {};
17
- disabled: boolean;
18
- topSectionProps?: CardTopSectionProps;
19
- middleSectionProps?: CardMiddleSectionProps;
20
- bottomSectionProps?: CardBottomSectionProps;
21
- }
22
- declare const Card: React.FunctionComponent<CardProps>;
23
- export default Card;
package/dist/Card/Card.js DELETED
@@ -1,74 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
- import _pt from "prop-types";
4
-
5
- var _templateObject;
6
-
7
- 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; }
8
-
9
- 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; }
10
-
11
- import * as React from 'react';
12
- import styled from 'styled-components';
13
- import CardTopSection from './CardTopSection';
14
- import CardMiddleSection from './CardMiddleSection';
15
- import CardBottomSection from './CardBottomSection';
16
- import { COLORS } from '..';
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- 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) {
20
- 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 }" : "";
21
- });
22
- export var InteractionType;
23
-
24
- (function (InteractionType) {
25
- InteractionType[InteractionType["None"] = 0] = "None";
26
- InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
27
- InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
28
- })(InteractionType || (InteractionType = {}));
29
-
30
- var Card = function Card(_ref) {
31
- var _ref$interactionType = _ref.interactionType,
32
- interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
33
- onCardClicked = _ref.onCardClicked,
34
- topSectionProps = _ref.topSectionProps,
35
- middleSectionProps = _ref.middleSectionProps,
36
- bottomSectionProps = _ref.bottomSectionProps,
37
- disabled = _ref.disabled;
38
- var rootRef = React.useRef(null);
39
-
40
- var onCardClick = function onCardClick() {
41
- if (interactionType == InteractionType.Clickable) {
42
- var _rootRef$current;
43
-
44
- if (onCardClicked) onCardClicked();
45
- (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
46
- }
47
- };
48
-
49
- return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
50
- disabled: disabled,
51
- ref: rootRef,
52
- tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
53
- interactionType: interactionType,
54
- onClick: onCardClick,
55
- children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
56
- disabled: disabled,
57
- interactionType: interactionType
58
- })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
59
- disabled: disabled,
60
- interactionType: interactionType
61
- })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
62
- disabled: disabled,
63
- interactionType: interactionType
64
- }))]
65
- });
66
- };
67
-
68
- Card.propTypes = {
69
- interactionType: _pt.oneOf([0, 1, 2]).isRequired,
70
- onCardClicked: _pt.func.isRequired,
71
- disabled: _pt.bool.isRequired
72
- };
73
- export default Card;
74
- //# sourceMappingURL=Card.js.map
@@ -1 +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"}
@@ -1,139 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var React = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _ = require("..");
21
-
22
- var _assets = require("../assets");
23
-
24
- var _Button = require("../Button");
25
-
26
- var _jsxRuntime = require("react/jsx-runtime");
27
-
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
29
-
30
- 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); }
31
-
32
- 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; }
33
-
34
- var ProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
35
-
36
- 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);
37
-
38
- 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) {
39
- return props.disabled ? "\n color: ".concat(_.COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
40
- });
41
-
42
- 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);
43
-
44
- 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"])));
45
-
46
- 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"])));
47
-
48
- var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 2;\n"])));
49
-
50
- 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);
51
-
52
- 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) {
53
- return props.disabled ? 'not-allowed' : 'pointer';
54
- }, ButtonRowContainer, function (props) {
55
- return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
56
- });
57
-
58
- var CardBottomSection = function CardBottomSection(_ref) {
59
- var interactionType = _ref.interactionType,
60
- progressLevel = _ref.progressLevel,
61
- progressMax = _ref.progressMax,
62
- _ref$progressType = _ref.progressType,
63
- progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
64
- noteLeft = _ref.noteLeft,
65
- noteLeftIcon = _ref.noteLeftIcon,
66
- noteRight = _ref.noteRight,
67
- noteRightIcon = _ref.noteRightIcon,
68
- authorName = _ref.authorName,
69
- actions = _ref.actions,
70
- disabled = _ref.disabled;
71
- var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
72
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
73
- disabled: disabled,
74
- interactionType: interactionType,
75
- children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
76
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
77
- size: _.Size.Small,
78
- type: progressType,
79
- variant: _.LinearProgressionVariant.Normal,
80
- value: progressLevel,
81
- max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
82
- })
83
- }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NotesContainer, {
84
- children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteLeft, {
85
- children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
86
- color: _.COLORS.neutral_500,
87
- textStyle: _.ComponentTextStyle.Bold,
88
- children: noteLeft
89
- })]
90
- }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteRight, {
91
- children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
92
- color: _.COLORS.neutral_500,
93
- textStyle: _.ComponentTextStyle.Bold,
94
- children: noteRight
95
- })]
96
- })]
97
- }), authorName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
98
- disabled: disabled,
99
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorName, {
100
- children: authorName
101
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
102
- width: "80px",
103
- height: "43px"
104
- })]
105
- }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonRowContainer, {
106
- children: actions.map(function (x) {
107
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
108
- disabled: disabled,
109
- variant: "secondary",
110
- shape: "circular",
111
- action: function action(e) {
112
- e === null || e === void 0 ? void 0 : e.stopPropagation();
113
- x.onClick();
114
- },
115
- children: x.icon
116
- });
117
- })
118
- })]
119
- });
120
- };
121
-
122
- CardBottomSection.propTypes = {
123
- progressLevel: _propTypes.default.number,
124
- progressMax: _propTypes.default.number,
125
- noteLeft: _propTypes.default.string,
126
- noteLeftIcon: _propTypes.default.node,
127
- noteRight: _propTypes.default.string,
128
- noteRightIcon: _propTypes.default.node,
129
- authorName: _propTypes.default.string,
130
- actions: _propTypes.default.arrayOf(_propTypes.default.shape({
131
- icon: _propTypes.default.node.isRequired,
132
- onClick: _propTypes.default.func.isRequired
133
- })),
134
- logoSrc: _propTypes.default.string.isRequired,
135
- disabled: _propTypes.default.bool.isRequired
136
- };
137
- var _default = CardBottomSection;
138
- exports.default = _default;
139
- //# sourceMappingURL=CardBottomSection.cjs.map
@@ -1 +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":"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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.cjs"}
@@ -1,22 +0,0 @@
1
- import * as React from 'react';
2
- import { InteractionType, LinearProgressionType } from '..';
3
- export interface ActionItem {
4
- icon: React.ReactNode;
5
- onClick: () => void;
6
- }
7
- export interface CardBottomSectionProps {
8
- interactionType: InteractionType;
9
- progressLevel?: number;
10
- progressMax?: number;
11
- progressType?: LinearProgressionType;
12
- noteLeft?: string;
13
- noteLeftIcon?: React.ReactNode;
14
- noteRight?: string;
15
- noteRightIcon?: React.ReactNode;
16
- authorName?: string;
17
- actions?: ActionItem[];
18
- logoSrc: string;
19
- disabled: boolean;
20
- }
21
- declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
22
- export default CardBottomSection;
@@ -1,109 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- import _pt from "prop-types";
3
-
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
5
-
6
- import * as React from 'react';
7
- import styled from 'styled-components';
8
- import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
9
- import { LaerdalLogo } from '../assets';
10
- import { IconButton } from '../Button';
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
- import { jsxs as _jsxs } from "react/jsx-runtime";
13
- var ProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
14
- var NotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 24px;\n margin-top: 24px;\n position: relative;\n color: ", ";\n"])), COLORS.neutral_500);
15
- 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) {
16
- return props.disabled ? "\n color: ".concat(COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
17
- });
18
- 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);
19
- 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"])));
20
- 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"])));
21
- var AuthorName = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex-grow: 2;\n"])));
22
- 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);
23
- 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) {
24
- return props.disabled ? 'not-allowed' : 'pointer';
25
- }, ButtonRowContainer, function (props) {
26
- return props.interactionType == InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
27
- });
28
-
29
- var CardBottomSection = function CardBottomSection(_ref) {
30
- var interactionType = _ref.interactionType,
31
- progressLevel = _ref.progressLevel,
32
- progressMax = _ref.progressMax,
33
- _ref$progressType = _ref.progressType,
34
- progressType = _ref$progressType === void 0 ? LinearProgressionType.Line : _ref$progressType,
35
- noteLeft = _ref.noteLeft,
36
- noteLeftIcon = _ref.noteLeftIcon,
37
- noteRight = _ref.noteRight,
38
- noteRightIcon = _ref.noteRightIcon,
39
- authorName = _ref.authorName,
40
- actions = _ref.actions,
41
- disabled = _ref.disabled;
42
- var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
43
- return /*#__PURE__*/_jsxs(Container, {
44
- disabled: disabled,
45
- interactionType: interactionType,
46
- children: [haveAtLeastSomething && /*#__PURE__*/_jsx(Divider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(ProgressContainer, {
47
- children: /*#__PURE__*/_jsx(LinearProgression, {
48
- size: Size.Small,
49
- type: progressType,
50
- variant: LinearProgressionVariant.Normal,
51
- value: progressLevel,
52
- max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
53
- })
54
- }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NotesContainer, {
55
- children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(NoteLeft, {
56
- children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
57
- color: COLORS.neutral_500,
58
- textStyle: ComponentTextStyle.Bold,
59
- children: noteLeft
60
- })]
61
- }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NoteRight, {
62
- children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
63
- color: COLORS.neutral_500,
64
- textStyle: ComponentTextStyle.Bold,
65
- children: noteRight
66
- })]
67
- })]
68
- }), authorName && /*#__PURE__*/_jsxs(AuthorContainer, {
69
- disabled: disabled,
70
- children: [/*#__PURE__*/_jsx(AuthorName, {
71
- children: authorName
72
- }), /*#__PURE__*/_jsx(LaerdalLogo, {
73
- width: "80px",
74
- height: "43px"
75
- })]
76
- }), actions && /*#__PURE__*/_jsx(ButtonRowContainer, {
77
- children: actions.map(function (x) {
78
- return /*#__PURE__*/_jsx(IconButton, {
79
- disabled: disabled,
80
- variant: "secondary",
81
- shape: "circular",
82
- action: function action(e) {
83
- e === null || e === void 0 ? void 0 : e.stopPropagation();
84
- x.onClick();
85
- },
86
- children: x.icon
87
- });
88
- })
89
- })]
90
- });
91
- };
92
-
93
- CardBottomSection.propTypes = {
94
- progressLevel: _pt.number,
95
- progressMax: _pt.number,
96
- noteLeft: _pt.string,
97
- noteLeftIcon: _pt.node,
98
- noteRight: _pt.string,
99
- noteRightIcon: _pt.node,
100
- authorName: _pt.string,
101
- actions: _pt.arrayOf(_pt.shape({
102
- icon: _pt.node.isRequired,
103
- onClick: _pt.func.isRequired
104
- })),
105
- logoSrc: _pt.string.isRequired,
106
- disabled: _pt.bool.isRequired
107
- };
108
- export default CardBottomSection;
109
- //# sourceMappingURL=CardBottomSection.js.map
@@ -1 +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"}
@@ -1,104 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var React = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _ = require("..");
21
-
22
- var _jsxRuntime = require("react/jsx-runtime");
23
-
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
25
-
26
- 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); }
27
-
28
- 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; }
29
-
30
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-grow: 1;\n width: calc(100% - 16px);\n position: relative;\n flex-direction: column;\n padding-left: 16px;\n padding-bottom: 20px;\n\n .descriptionBlock {\n margin-bottom: 14px;\n }\n\n .titleBlock {\n margin-bottom: 12px;\n }\n\n ", "\n"])), function (props) {
31
- return props.interactionType == _.InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
32
- });
33
-
34
- var ColorBand = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ", ";\n"])), function (props) {
35
- return props.$color;
36
- });
37
-
38
- var TagsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n"])));
39
-
40
- var Tag = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 4px 8px 4px 8px;\n background-color: ", ";\n margin-right: 4px;\n border-radius: 2px;\n"])), _.COLORS.neutral_100);
41
-
42
- var CategoryContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: ", ";\n margin-bottom: ", ";\n\n svg {\n margin-right: 6px;\n color: ", ";\n }\n"])), function (props) {
43
- return props.extraTopMargin ? '30px' : '22px';
44
- }, function (props) {
45
- return props.bottomMargin ? '10px' : '0px';
46
- }, _.COLORS.neutral_500);
47
-
48
- var CardMiddleSection = function CardMiddleSection(_ref) {
49
- var interactionType = _ref.interactionType,
50
- colorBandColor = _ref.colorBandColor,
51
- categoryIcon = _ref.categoryIcon,
52
- categoryLabel = _ref.categoryLabel,
53
- title = _ref.title,
54
- description = _ref.description,
55
- tags = _ref.tags,
56
- disabled = _ref.disabled;
57
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
58
- disabled: disabled,
59
- interactionType: interactionType,
60
- children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorBand, {
61
- $color: colorBandColor
62
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CategoryContainer, {
63
- extraTopMargin: Boolean(colorBandColor),
64
- bottomMargin: Boolean(categoryIcon || categoryLabel),
65
- children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
66
- textStyle: _.ComponentTextStyle.Bold,
67
- color: _.COLORS.neutral_500,
68
- children: categoryLabel
69
- })]
70
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXL, {
71
- className: "titleBlock",
72
- textStyle: _.ComponentTextStyle.Bold,
73
- color: disabled ? _.COLORS.neutral_500 : _.COLORS.black,
74
- children: title
75
- }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
76
- className: "descriptionBlock",
77
- color: _.COLORS.neutral_600,
78
- children: description
79
- }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
80
- children: tags.map(function (x) {
81
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
82
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXS, {
83
- textStyle: _.ComponentTextStyle.Bold,
84
- color: _.COLORS.neutral_600,
85
- children: x
86
- })
87
- });
88
- })
89
- })]
90
- });
91
- };
92
-
93
- CardMiddleSection.propTypes = {
94
- colorBandColor: _propTypes.default.string,
95
- categoryIcon: _propTypes.default.node,
96
- categoryLabel: _propTypes.default.string,
97
- title: _propTypes.default.string.isRequired,
98
- description: _propTypes.default.string,
99
- tags: _propTypes.default.arrayOf(_propTypes.default.string),
100
- disabled: _propTypes.default.bool.isRequired
101
- };
102
- var _default = CardMiddleSection;
103
- exports.default = _default;
104
- //# sourceMappingURL=CardMiddleSection.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["Container","styled","div","props","interactionType","InteractionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","COLORS","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAaA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4WAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,kBAAgBC,SAAzC,2BAEUH,KAAK,CAACI,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;;AAyBA,IAAMC,SAAS,GAAGP,0BAAOC,GAAV,qMAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACM,MAAV;AAAA,CANZ,CAAf;;AASA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,iIAAnB;;AAKA,IAAMS,GAAG,GAAGV,0BAAOC,GAAV,6LAEaU,SAAOC,WAFpB,CAAT;;AAOA,IAAMC,iBAAiB,GAAGb,0BAAOC,GAAV,iQAIP,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACY,cAAN,GAAuB,MAAvB,GAAgC,MAArC;AAAA,CAJE,EAKJ,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACa,YAAN,GAAqB,MAArB,GAA8B,KAAnC;AAAA,CALD,EASVJ,SAAOK,WATG,CAAvB;;AAaA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5Bd,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5Be,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BjB,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEH,eAAhD;AAAA,eACGe,cAAc,iBAAI,qBAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,sBAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEM,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEf,SAAOK,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEK,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEpB,QAAQ,GAAGK,SAAOK,WAAV,GAAwBL,SAAOgB,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEX,SAAOiB,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,qBAAC,GAAD;AAAA,iCACE,qBAAC,aAAD;AAAa,YAAA,SAAS,EAAEL,qBAAmBC,IAA3C;AAAiD,YAAA,KAAK,EAAEf,SAAOiB,WAA/D;AAAA,sBACGE;AADH;AADF,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA8BD,CAxCD;;;AArEEZ,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAjB,EAAAA,Q;;eAwGaW,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n interactionType: InteractionType;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: string[];\n disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 16px);\n position: relative;\n flex-direction: column;\n padding-left: 16px;\n padding-bottom: 20px;\n\n .descriptionBlock {\n margin-bottom: 14px;\n }\n\n .titleBlock {\n margin-bottom: 12px;\n }\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Tag = styled.div`\n padding: 4px 8px 4px 8px;\n background-color: ${COLORS.neutral_100};\n margin-right: 4px;\n border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: ${props => (props.extraTopMargin ? '30px' : '22px')};\n margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n svg {\n margin-right: 6px;\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n interactionType,\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n disabled\n}: CardMiddleSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {colorBandColor && <ColorBand $color={colorBandColor} />}\n <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CategoryContainer>\n <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n {title}\n </ComponentXL>\n {description && (\n <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n {description}\n </ComponentS>\n )}\n {tags && (\n <TagsContainer>\n {tags.map(x => (\n <Tag>\n <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n {x}\n </ComponentXS>\n </Tag>\n ))}\n </TagsContainer>\n )}\n </Container>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- import { InteractionType } from '..';
3
- export interface CardMiddleSectionProps {
4
- colorBandColor?: string;
5
- interactionType: InteractionType;
6
- categoryIcon?: React.ReactNode;
7
- categoryLabel?: string;
8
- title: string;
9
- description?: string;
10
- tags?: string[];
11
- disabled: boolean;
12
- }
13
- declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
14
- export default CardMiddleSection;
@@ -1,80 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- import _pt from "prop-types";
3
-
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
5
-
6
- import * as React from 'react';
7
- import styled from 'styled-components';
8
- import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';
9
- import { jsx as _jsx } from "react/jsx-runtime";
10
- import { jsxs as _jsxs } from "react/jsx-runtime";
11
- var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-grow: 1;\n width: calc(100% - 16px);\n position: relative;\n flex-direction: column;\n padding-left: 16px;\n padding-bottom: 20px;\n\n .descriptionBlock {\n margin-bottom: 14px;\n }\n\n .titleBlock {\n margin-bottom: 12px;\n }\n\n ", "\n"])), function (props) {
12
- return props.interactionType == InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
13
- });
14
- var ColorBand = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ", ";\n"])), function (props) {
15
- return props.$color;
16
- });
17
- var TagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n"])));
18
- var Tag = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 4px 8px 4px 8px;\n background-color: ", ";\n margin-right: 4px;\n border-radius: 2px;\n"])), COLORS.neutral_100);
19
- var CategoryContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: ", ";\n margin-bottom: ", ";\n\n svg {\n margin-right: 6px;\n color: ", ";\n }\n"])), function (props) {
20
- return props.extraTopMargin ? '30px' : '22px';
21
- }, function (props) {
22
- return props.bottomMargin ? '10px' : '0px';
23
- }, COLORS.neutral_500);
24
-
25
- var CardMiddleSection = function CardMiddleSection(_ref) {
26
- var interactionType = _ref.interactionType,
27
- colorBandColor = _ref.colorBandColor,
28
- categoryIcon = _ref.categoryIcon,
29
- categoryLabel = _ref.categoryLabel,
30
- title = _ref.title,
31
- description = _ref.description,
32
- tags = _ref.tags,
33
- disabled = _ref.disabled;
34
- return /*#__PURE__*/_jsxs(Container, {
35
- disabled: disabled,
36
- interactionType: interactionType,
37
- children: [colorBandColor && /*#__PURE__*/_jsx(ColorBand, {
38
- $color: colorBandColor
39
- }), /*#__PURE__*/_jsxs(CategoryContainer, {
40
- extraTopMargin: Boolean(colorBandColor),
41
- bottomMargin: Boolean(categoryIcon || categoryLabel),
42
- children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
43
- textStyle: ComponentTextStyle.Bold,
44
- color: COLORS.neutral_500,
45
- children: categoryLabel
46
- })]
47
- }), /*#__PURE__*/_jsx(ComponentXL, {
48
- className: "titleBlock",
49
- textStyle: ComponentTextStyle.Bold,
50
- color: disabled ? COLORS.neutral_500 : COLORS.black,
51
- children: title
52
- }), description && /*#__PURE__*/_jsx(ComponentS, {
53
- className: "descriptionBlock",
54
- color: COLORS.neutral_600,
55
- children: description
56
- }), tags && /*#__PURE__*/_jsx(TagsContainer, {
57
- children: tags.map(function (x) {
58
- return /*#__PURE__*/_jsx(Tag, {
59
- children: /*#__PURE__*/_jsx(ComponentXS, {
60
- textStyle: ComponentTextStyle.Bold,
61
- color: COLORS.neutral_600,
62
- children: x
63
- })
64
- });
65
- })
66
- })]
67
- });
68
- };
69
-
70
- CardMiddleSection.propTypes = {
71
- colorBandColor: _pt.string,
72
- categoryIcon: _pt.node,
73
- categoryLabel: _pt.string,
74
- title: _pt.string.isRequired,
75
- description: _pt.string,
76
- tags: _pt.arrayOf(_pt.string),
77
- disabled: _pt.bool.isRequired
78
- };
79
- export default CardMiddleSection;
80
- //# sourceMappingURL=CardMiddleSection.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","InteractionType","Container","div","props","interactionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","Bold","black","neutral_600","map","x"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n interactionType: InteractionType;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: string[];\n disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 16px);\n position: relative;\n flex-direction: column;\n padding-left: 16px;\n padding-bottom: 20px;\n\n .descriptionBlock {\n margin-bottom: 14px;\n }\n\n .titleBlock {\n margin-bottom: 12px;\n }\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Tag = styled.div`\n padding: 4px 8px 4px 8px;\n background-color: ${COLORS.neutral_100};\n margin-right: 4px;\n border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: ${props => (props.extraTopMargin ? '30px' : '22px')};\n margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n svg {\n margin-right: 6px;\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n interactionType,\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n disabled\n}: CardMiddleSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {colorBandColor && <ColorBand $color={colorBandColor} />}\n <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CategoryContainer>\n <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n {title}\n </ComponentXL>\n {description && (\n <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n {description}\n </ComponentS>\n )}\n {tags && (\n <TagsContainer>\n {tags.map(x => (\n <Tag>\n <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n {x}\n </ComponentXS>\n </Tag>\n ))}\n </TagsContainer>\n )}\n </Container>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
@@ -1,106 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var React = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _typography = require("../styles/typography");
21
-
22
- var _Checkbox = _interopRequireDefault(require("../InputFields/Checkbox"));
23
-
24
- var _ = require("..");
25
-
26
- var _jsxRuntime = require("react/jsx-runtime");
27
-
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
29
-
30
- 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); }
31
-
32
- 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; }
33
-
34
- var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n"])));
35
-
36
- var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n color: white;\n border-radius: 2px;\n padding: 4px;\n display: flex;\n position: absolute;\n flex-direction: row;\n align-items: center;\n top: 16px;\n left: 16px;\n\n svg {\n color: white;\n margin-right: 4px;\n }\n"])), _.COLORS.correct_500);
37
-
38
- var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: hidden;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n\n ", "\n\n ", "\n"])), function (props) {
39
- return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
40
- }, function (props) {
41
- return props.interactionType == _.InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
42
- });
43
-
44
- var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ", ";\n margin-right: 9px;\n }\n"])), function (props) {
45
- return props.$backgroundColor;
46
- }, function (props) {
47
- return props.$color;
48
- });
49
-
50
- var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 14px;\n right: 14px;\n\n .checkbox-icon {\n background-color: ", ";\n }\n"])), _.COLORS.white);
51
-
52
- var CardTopSection = function CardTopSection(_ref) {
53
- var interactionType = _ref.interactionType,
54
- selected = _ref.selected,
55
- setSelected = _ref.setSelected,
56
- image = _ref.image,
57
- tagLabel = _ref.tagLabel,
58
- tagIcon = _ref.tagIcon,
59
- highlightRibbonIcon = _ref.highlightRibbonIcon,
60
- highlightRibbonText = _ref.highlightRibbonText,
61
- highlightRibbonContentColor = _ref.highlightRibbonContentColor,
62
- highlightRibbonBgColor = _ref.highlightRibbonBgColor,
63
- disabled = _ref.disabled;
64
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
65
- disabled: disabled,
66
- interactionType: interactionType,
67
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
68
- src: image
69
- }), (selected !== undefined || setSelected !== undefined) && interactionType == _.InteractionType.Selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
70
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
71
- select: function select(selected) {
72
- return setSelected(selected);
73
- },
74
- selected: selected
75
- })
76
- }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagContainer, {
77
- children: [tagIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
78
- children: tagLabel
79
- })]
80
- }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonContainer, {
81
- $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
82
- $backgroundColor: disabled ? _.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
83
- children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
84
- color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
85
- textStyle: _typography.ComponentTextStyle.Regular,
86
- children: highlightRibbonText
87
- })]
88
- })]
89
- });
90
- };
91
-
92
- CardTopSection.propTypes = {
93
- selected: _propTypes.default.bool.isRequired,
94
- setSelected: _propTypes.default.func.isRequired,
95
- tagLabel: _propTypes.default.string,
96
- tagIcon: _propTypes.default.node,
97
- highlightRibbonText: _propTypes.default.string,
98
- highlightRibbonIcon: _propTypes.default.string,
99
- highlightRibbonContentColor: _propTypes.default.string,
100
- highlightRibbonBgColor: _propTypes.default.string,
101
- image: _propTypes.default.string,
102
- disabled: _propTypes.default.bool.isRequired
103
- };
104
- var _default = CardTopSection;
105
- exports.default = _default;
106
- //# sourceMappingURL=CardTopSection.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","COLORS","correct_500","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n interactionType: InteractionType;\n selected: boolean;\n setSelected: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nconst Img = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n`;\n\nconst TagContainer = styled.div`\n background-color: ${COLORS.correct_500};\n color: white;\n border-radius: 2px;\n padding: 4px;\n display: flex;\n position: absolute;\n flex-direction: row;\n align-items: center;\n top: 16px;\n left: 16px;\n\n svg {\n color: white;\n margin-right: 4px;\n }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: hidden;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n height: calc(40px - 16px);\n background-color: ${props => props.$backgroundColor};\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${props => props.$color};\n margin-right: 9px;\n }\n`;\n\nconst CheckboxContainer = styled.div`\n position: absolute;\n top: 14px;\n right: 14px;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n interactionType,\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n}: CardTopSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n <Img src={image} />\n {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n <CheckboxContainer>\n <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n </CheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <TagContainer>\n {tagIcon}\n <div>{tagLabel}</div>\n </TagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </RibbonContainer>\n )}\n </Container>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- import { InteractionType } from '..';
3
- export interface CardTopSectionProps {
4
- interactionType: InteractionType;
5
- selected: boolean;
6
- setSelected: (arg0: boolean) => void;
7
- tagLabel?: string;
8
- tagIcon?: React.ReactNode;
9
- highlightRibbonText?: string;
10
- highlightRibbonIcon?: string;
11
- highlightRibbonContentColor?: string;
12
- highlightRibbonBgColor?: string;
13
- image?: string;
14
- disabled: boolean;
15
- }
16
- declare const CardTopSection: React.FunctionComponent<CardTopSectionProps>;
17
- export default CardTopSection;
@@ -1,80 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- import _pt from "prop-types";
3
-
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
5
-
6
- import * as React from 'react';
7
- import styled from 'styled-components';
8
- import { ComponentS, ComponentTextStyle } from '../styles/typography';
9
- import Checkbox from '../InputFields/Checkbox';
10
- import { COLORS, InteractionType } from '..';
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
- import { jsxs as _jsxs } from "react/jsx-runtime";
13
- var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n"])));
14
- var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n color: white;\n border-radius: 2px;\n padding: 4px;\n display: flex;\n position: absolute;\n flex-direction: row;\n align-items: center;\n top: 16px;\n left: 16px;\n\n svg {\n color: white;\n margin-right: 4px;\n }\n"])), COLORS.correct_500);
15
- var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: hidden;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n\n ", "\n\n ", "\n"])), function (props) {
16
- return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
17
- }, function (props) {
18
- return props.interactionType == InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
19
- });
20
- var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ", ";\n margin-right: 9px;\n }\n"])), function (props) {
21
- return props.$backgroundColor;
22
- }, function (props) {
23
- return props.$color;
24
- });
25
- var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 14px;\n right: 14px;\n\n .checkbox-icon {\n background-color: ", ";\n }\n"])), COLORS.white);
26
-
27
- var CardTopSection = function CardTopSection(_ref) {
28
- var interactionType = _ref.interactionType,
29
- selected = _ref.selected,
30
- setSelected = _ref.setSelected,
31
- image = _ref.image,
32
- tagLabel = _ref.tagLabel,
33
- tagIcon = _ref.tagIcon,
34
- highlightRibbonIcon = _ref.highlightRibbonIcon,
35
- highlightRibbonText = _ref.highlightRibbonText,
36
- highlightRibbonContentColor = _ref.highlightRibbonContentColor,
37
- highlightRibbonBgColor = _ref.highlightRibbonBgColor,
38
- disabled = _ref.disabled;
39
- return /*#__PURE__*/_jsxs(Container, {
40
- disabled: disabled,
41
- interactionType: interactionType,
42
- children: [/*#__PURE__*/_jsx(Img, {
43
- src: image
44
- }), (selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && /*#__PURE__*/_jsx(CheckboxContainer, {
45
- children: /*#__PURE__*/_jsx(Checkbox, {
46
- select: function select(selected) {
47
- return setSelected(selected);
48
- },
49
- selected: selected
50
- })
51
- }), (tagLabel || tagIcon) && /*#__PURE__*/_jsxs(TagContainer, {
52
- children: [tagIcon, /*#__PURE__*/_jsx("div", {
53
- children: tagLabel
54
- })]
55
- }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(RibbonContainer, {
56
- $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
57
- $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
58
- children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
59
- color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
60
- textStyle: ComponentTextStyle.Regular,
61
- children: highlightRibbonText
62
- })]
63
- })]
64
- });
65
- };
66
-
67
- CardTopSection.propTypes = {
68
- selected: _pt.bool.isRequired,
69
- setSelected: _pt.func.isRequired,
70
- tagLabel: _pt.string,
71
- tagIcon: _pt.node,
72
- highlightRibbonText: _pt.string,
73
- highlightRibbonIcon: _pt.string,
74
- highlightRibbonContentColor: _pt.string,
75
- highlightRibbonBgColor: _pt.string,
76
- image: _pt.string,
77
- disabled: _pt.bool.isRequired
78
- };
79
- export default CardTopSection;
80
- //# sourceMappingURL=CardTopSection.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","COLORS","InteractionType","Img","img","TagContainer","div","correct_500","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n interactionType: InteractionType;\n selected: boolean;\n setSelected: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nconst Img = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n`;\n\nconst TagContainer = styled.div`\n background-color: ${COLORS.correct_500};\n color: white;\n border-radius: 2px;\n padding: 4px;\n display: flex;\n position: absolute;\n flex-direction: row;\n align-items: center;\n top: 16px;\n left: 16px;\n\n svg {\n color: white;\n margin-right: 4px;\n }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: hidden;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n height: calc(40px - 16px);\n background-color: ${props => props.$backgroundColor};\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${props => props.$color};\n margin-right: 9px;\n }\n`;\n\nconst CheckboxContainer = styled.div`\n position: absolute;\n top: 14px;\n right: 14px;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n interactionType,\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n}: CardTopSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n <Img src={image} />\n {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n <CheckboxContainer>\n <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n </CheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <TagContainer>\n {tagIcon}\n <div>{tagLabel}</div>\n </TagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </RibbonContainer>\n )}\n </Container>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}
@@ -1,52 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- Object.defineProperty(exports, "Card", {
11
- enumerable: true,
12
- get: function get() {
13
- return _Card.default;
14
- }
15
- });
16
- Object.defineProperty(exports, "CardBottomSection", {
17
- enumerable: true,
18
- get: function get() {
19
- return _CardBottomSection.default;
20
- }
21
- });
22
- Object.defineProperty(exports, "CardMiddleSection", {
23
- enumerable: true,
24
- get: function get() {
25
- return _CardMiddleSection.default;
26
- }
27
- });
28
- Object.defineProperty(exports, "CardTopSection", {
29
- enumerable: true,
30
- get: function get() {
31
- return _CardTopSection.default;
32
- }
33
- });
34
- Object.defineProperty(exports, "InteractionType", {
35
- enumerable: true,
36
- get: function get() {
37
- return _Card.InteractionType;
38
- }
39
- });
40
-
41
- var _Card = _interopRequireWildcard(require("./Card"));
42
-
43
- var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
44
-
45
- var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
46
-
47
- var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
48
-
49
- 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); }
50
-
51
- 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; }
52
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export {default as Card} from './Card';\nexport {default as CardBottomSection} from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport {InteractionType} from './Card';"],"file":"index.cjs"}
@@ -1,5 +0,0 @@
1
- export { default as Card } from './Card';
2
- export { default as CardBottomSection } from './CardBottomSection';
3
- export { default as CardMiddleSection } from './CardMiddleSection';
4
- export { default as CardTopSection } from './CardTopSection';
5
- export { InteractionType } from './Card';
@@ -1,6 +0,0 @@
1
- export { default as Card } from './Card';
2
- export { default as CardBottomSection } from './CardBottomSection';
3
- export { default as CardMiddleSection } from './CardMiddleSection';
4
- export { default as CardTopSection } from './CardTopSection';
5
- export { InteractionType } from './Card';
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection","InteractionType"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AACA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,SAAQC,eAAR,QAA8B,QAA9B","sourcesContent":["export {default as Card} from './Card';\nexport {default as CardBottomSection} from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport {InteractionType} from './Card';"],"file":"index.js"}