@laerdal/life-react-components 1.5.1-dev.15 → 1.5.1-dev.16
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/Card/Card.cjs +3 -3
- package/dist/Card/Card.cjs.map +1 -1
- package/dist/Card/Card.js +3 -3
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/CardBottomSection.cjs +10 -6
- package/dist/Card/CardBottomSection.cjs.map +1 -1
- package/dist/Card/CardBottomSection.js +11 -7
- package/dist/Card/CardBottomSection.js.map +1 -1
- package/dist/Card/CardMiddleSection.cjs +1 -1
- package/dist/Card/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/CardMiddleSection.js +1 -1
- package/dist/Card/CardMiddleSection.js.map +1 -1
- package/dist/Card/CardTopSection.cjs +4 -6
- package/dist/Card/CardTopSection.cjs.map +1 -1
- package/dist/Card/CardTopSection.js +4 -5
- package/dist/Card/CardTopSection.js.map +1 -1
- package/package.json +1 -1
package/dist/Card/Card.cjs
CHANGED
|
@@ -39,8 +39,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
39
39
|
|
|
40
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
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:
|
|
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:
|
|
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
44
|
});
|
|
45
45
|
|
|
46
46
|
exports.CardTopLevelContainer = CardTopLevelContainer;
|
|
@@ -75,7 +75,7 @@ var Card = function Card(_ref) {
|
|
|
75
75
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
|
|
76
76
|
disabled: disabled,
|
|
77
77
|
ref: rootRef,
|
|
78
|
-
tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
|
|
78
|
+
tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
|
|
79
79
|
interactionType: interactionType,
|
|
80
80
|
onClick: onCardClick,
|
|
81
81
|
children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
package/dist/Card/Card.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","
|
|
1
|
+
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,oSACZC,SAAOC,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border-width: 0px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border-width: 0px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border-width: 0px;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
|
package/dist/Card/Card.js
CHANGED
|
@@ -16,8 +16,8 @@ import CardBottomSection from './CardBottomSection';
|
|
|
16
16
|
import { COLORS } from '..';
|
|
17
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
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:
|
|
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:
|
|
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
21
|
});
|
|
22
22
|
export var InteractionType;
|
|
23
23
|
|
|
@@ -49,7 +49,7 @@ var Card = function Card(_ref) {
|
|
|
49
49
|
return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
|
|
50
50
|
disabled: disabled,
|
|
51
51
|
ref: rootRef,
|
|
52
|
-
tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
|
|
52
|
+
tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
|
|
53
53
|
interactionType: interactionType,
|
|
54
54
|
onClick: onCardClick,
|
|
55
55
|
children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
package/dist/Card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","
|
|
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"}
|
|
@@ -33,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
33
|
|
|
34
34
|
var ProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
|
|
35
35
|
|
|
36
|
-
var NotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 24px;\n margin-top: 24px;\n position: relative;\n"])));
|
|
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
37
|
|
|
38
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
39
|
return props.disabled ? "\n color: ".concat(_.COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
|
|
@@ -41,9 +41,9 @@ var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templa
|
|
|
41
41
|
|
|
42
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
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
|
|
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
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
|
|
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
47
|
|
|
48
48
|
var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 2;\n"])));
|
|
49
49
|
|
|
@@ -82,11 +82,15 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
82
82
|
})
|
|
83
83
|
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NotesContainer, {
|
|
84
84
|
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteLeft, {
|
|
85
|
-
children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
85
|
+
children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
|
|
86
|
+
color: _.COLORS.neutral_500,
|
|
87
|
+
textStyle: _.ComponentTextStyle.Bold,
|
|
86
88
|
children: noteLeft
|
|
87
89
|
})]
|
|
88
90
|
}), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteRight, {
|
|
89
|
-
children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
91
|
+
children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
|
|
92
|
+
color: _.COLORS.neutral_500,
|
|
93
|
+
textStyle: _.ComponentTextStyle.Bold,
|
|
90
94
|
children: noteRight
|
|
91
95
|
})]
|
|
92
96
|
})]
|
|
@@ -103,7 +107,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
103
107
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
104
108
|
disabled: disabled,
|
|
105
109
|
variant: "secondary",
|
|
106
|
-
shape: "
|
|
110
|
+
shape: "circular",
|
|
107
111
|
action: function action(e) {
|
|
108
112
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
109
113
|
x.onClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","AuthorContainer","props","disabled","
|
|
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"}
|
|
@@ -5,19 +5,19 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
5
5
|
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { COLORS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
|
|
8
|
+
import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
|
|
9
9
|
import { LaerdalLogo } from '../assets';
|
|
10
10
|
import { IconButton } from '../Button';
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
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"])));
|
|
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
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
16
|
return props.disabled ? "\n color: ".concat(COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
|
|
17
17
|
});
|
|
18
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
|
|
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
|
|
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
21
|
var AuthorName = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex-grow: 2;\n"])));
|
|
22
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
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) {
|
|
@@ -53,11 +53,15 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
53
53
|
})
|
|
54
54
|
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NotesContainer, {
|
|
55
55
|
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(NoteLeft, {
|
|
56
|
-
children: [noteLeftIcon, /*#__PURE__*/_jsx(
|
|
56
|
+
children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
|
|
57
|
+
color: COLORS.neutral_500,
|
|
58
|
+
textStyle: ComponentTextStyle.Bold,
|
|
57
59
|
children: noteLeft
|
|
58
60
|
})]
|
|
59
61
|
}), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(NoteRight, {
|
|
60
|
-
children: [noteRightIcon, /*#__PURE__*/_jsx(
|
|
62
|
+
children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
|
|
63
|
+
color: COLORS.neutral_500,
|
|
64
|
+
textStyle: ComponentTextStyle.Bold,
|
|
61
65
|
children: noteRight
|
|
62
66
|
})]
|
|
63
67
|
})]
|
|
@@ -74,7 +78,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
74
78
|
return /*#__PURE__*/_jsx(IconButton, {
|
|
75
79
|
disabled: disabled,
|
|
76
80
|
variant: "secondary",
|
|
77
|
-
shape: "
|
|
81
|
+
shape: "circular",
|
|
78
82
|
action: function action(e) {
|
|
79
83
|
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
80
84
|
x.onClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","InteractionType","LinearProgression","LinearProgressionType","LinearProgressionVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","
|
|
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"}
|
|
@@ -31,7 +31,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
|
|
|
31
31
|
return props.interactionType == _.InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
var ColorBand = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width:
|
|
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
35
|
return props.$color;
|
|
36
36
|
});
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -11,7 +11,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
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
12
|
return props.interactionType == InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
13
13
|
});
|
|
14
|
-
var ColorBand = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n width:
|
|
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
15
|
return props.$color;
|
|
16
16
|
});
|
|
17
17
|
var TagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n"])));
|
|
@@ -1 +1 @@
|
|
|
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":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA8DC,WAA9D,EAA2EC,eAA3E,QAAkG,IAAlG;;;AAaA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,8VAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBJ,eAAe,CAACK,SAAzC,2BAEUF,KAAK,CAACG,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;AAyBA,IAAMC,SAAS,GAAGb,MAAM,CAACQ,GAAV,
|
|
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"}
|
|
@@ -25,7 +25,7 @@ var _ = require("..");
|
|
|
25
25
|
|
|
26
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
27
|
|
|
28
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
28
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
29
29
|
|
|
30
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
31
|
|
|
@@ -35,7 +35,7 @@ var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0
|
|
|
35
35
|
|
|
36
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
37
|
|
|
38
|
-
var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width:
|
|
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
39
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.interactionType == _.InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
@@ -47,9 +47,7 @@ var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templa
|
|
|
47
47
|
return props.$color;
|
|
48
48
|
});
|
|
49
49
|
|
|
50
|
-
var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 14px;\n right: 14px;\n"])));
|
|
51
|
-
|
|
52
|
-
var WhiteOverlay = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n background-color: rgba(256, 256, 256, 0.5);\n position: absolute;\n top: 0px;\n left: 0px;\n"])));
|
|
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);
|
|
53
51
|
|
|
54
52
|
var CardTopSection = function CardTopSection(_ref) {
|
|
55
53
|
var interactionType = _ref.interactionType,
|
|
@@ -66,7 +64,7 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
66
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
67
65
|
disabled: disabled,
|
|
68
66
|
interactionType: interactionType,
|
|
69
|
-
children: [
|
|
67
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
|
|
70
68
|
src: image
|
|
71
69
|
}), (selected !== undefined || setSelected !== undefined) && interactionType == _.InteractionType.Selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
|
|
72
70
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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,7 +1,7 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
import _pt from "prop-types";
|
|
3
3
|
|
|
4
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
5
5
|
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import styled from 'styled-components';
|
|
@@ -12,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n"])));
|
|
14
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:
|
|
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
16
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
17
17
|
}, function (props) {
|
|
18
18
|
return props.interactionType == InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
@@ -22,8 +22,7 @@ var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _tagged
|
|
|
22
22
|
}, function (props) {
|
|
23
23
|
return props.$color;
|
|
24
24
|
});
|
|
25
|
-
var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 14px;\n right: 14px;\n"])));
|
|
26
|
-
var WhiteOverlay = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n background-color: rgba(256, 256, 256, 0.5);\n position: absolute;\n top: 0px;\n left: 0px;\n"])));
|
|
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);
|
|
27
26
|
|
|
28
27
|
var CardTopSection = function CardTopSection(_ref) {
|
|
29
28
|
var interactionType = _ref.interactionType,
|
|
@@ -40,7 +39,7 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
40
39
|
return /*#__PURE__*/_jsxs(Container, {
|
|
41
40
|
disabled: disabled,
|
|
42
41
|
interactionType: interactionType,
|
|
43
|
-
children: [
|
|
42
|
+
children: [/*#__PURE__*/_jsx(Img, {
|
|
44
43
|
src: image
|
|
45
44
|
}), (selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && /*#__PURE__*/_jsx(CheckboxContainer, {
|
|
46
45
|
children: /*#__PURE__*/_jsx(Checkbox, {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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"}
|