@laerdal/life-react-components 1.9.4-dev.11 → 1.9.4-dev.13.full

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.
@@ -41,7 +41,7 @@ var CardTagsContainer = _styledComponents.default.div(_templateObject3 || (_temp
41
41
 
42
42
  exports.CardTagsContainer = CardTagsContainer;
43
43
 
44
- var CardCategoryContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n \n svg {\n color: ", ";\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), _.COLORS.neutral_500);
44
+ var CardCategoryContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ", ";\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), _.COLORS.neutral_500);
45
45
 
46
46
  exports.CardCategoryContainer = CardCategoryContainer;
47
47
 
@@ -75,22 +75,22 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
75
75
  color: _.COLORS.neutral_600,
76
76
  children: description
77
77
  }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
78
- children: tags.map(function (x) {
78
+ children: tags.map(function (x, index) {
79
79
  var _x$variant;
80
80
 
81
81
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
82
82
  label: x.label,
83
83
  variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
84
- });
84
+ }, "".concat(x.label, "_").concat(index));
85
85
  })
86
86
  }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
87
- children: row2Tags.map(function (x) {
87
+ children: row2Tags.map(function (x, index) {
88
88
  var _x$variant2;
89
89
 
90
90
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
91
91
  label: x.label,
92
92
  variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
93
- });
93
+ }, "".concat(x.label, "_").concat(index));
94
94
  })
95
95
  })]
96
96
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CAND,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,qQAQrBM,SAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEQ,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,SAAOC,WAAV,GAAwBD,SAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAAAC,CAAC;AAAA;;AAAA,4BACT,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,gBAAED,CAAC,CAACE,OAAJ,mDAAe;AAA3C,UADS;AAAA,OAAV;AADH,MAjBJ,EAuBGV,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAAAC,CAAC;AAAA;;AAAA,4BACb,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,iBAAED,CAAC,CAACE,OAAJ,qDAAe;AAA3C,UADa;AAAA,OAAd;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEhB,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAU,IAAAA,K;;AALAT,EAAAA,Q;AAKAS,IAAAA,K;;AAJAR,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n \n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer>\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\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 <CardTagsContainer>\n {tags.map(x => (\n <Tag label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map(x => (\n <Tag label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}
1
+ {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,SAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEQ,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,SAAOC,WAAV,GAAwBD,SAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer>\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\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 <CardTagsContainer>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}
@@ -13,7 +13,7 @@ export var CardColorBand = styled.div(_templateObject2 || (_templateObject2 = _t
13
13
  return props.$color;
14
14
  });
15
15
  export var CardTagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n"])));
16
- export var CardCategoryContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n \n svg {\n color: ", ";\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), COLORS.neutral_500);
16
+ export var CardCategoryContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ", ";\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), COLORS.neutral_500);
17
17
 
18
18
  var CardMiddleSection = function CardMiddleSection(_ref) {
19
19
  var colorBandColor = _ref.colorBandColor,
@@ -45,22 +45,22 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
45
45
  color: COLORS.neutral_600,
46
46
  children: description
47
47
  }), tags && /*#__PURE__*/_jsx(CardTagsContainer, {
48
- children: tags.map(function (x) {
48
+ children: tags.map(function (x, index) {
49
49
  var _x$variant;
50
50
 
51
51
  return /*#__PURE__*/_jsx(Tag, {
52
52
  label: x.label,
53
53
  variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
54
- });
54
+ }, "".concat(x.label, "_").concat(index));
55
55
  })
56
56
  }), row2Tags && /*#__PURE__*/_jsx(CardTagsContainer, {
57
- children: row2Tags.map(function (x) {
57
+ children: row2Tags.map(function (x, index) {
58
58
  var _x$variant2;
59
59
 
60
60
  return /*#__PURE__*/_jsx(Tag, {
61
61
  label: x.label,
62
62
  variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
63
- });
63
+ }, "".concat(x.label, "_").concat(index));
64
64
  })
65
65
  })]
66
66
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","label","variant"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA+DC,GAA/D,QAAuF,IAAvF;;;AAkBA,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAV,wTAAhC;AAkBP,OAAO,IAAMC,aAAa,GAAGR,MAAM,CAACO,GAAV,uLAMJ,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CAND,CAAnB;AASP,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACO,GAAV,uKAAvB;AAQP,OAAO,IAAMK,qBAAqB,GAAGZ,MAAM,CAACO,GAAV,uPAQrBN,MAAM,CAACY,WARc,CAA3B;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,KAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,MAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEb,kBAAkB,CAACqB,IAA1C;AAAgD,QAAA,KAAK,EAAEvB,MAAM,CAACY,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEd,kBAAkB,CAACqB,IAAlE;AAAwE,MAAA,KAAK,EAAEF,QAAQ,GAAGrB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACwB,KAAtH;AAAA,gBACGP;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAElB,MAAM,CAACyB,WAAvD;AAAA,gBACGP;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,iBAAD;AAAA,gBACGA,IAAI,CAACO,GAAL,CAAS,UAAAC,CAAC;AAAA;;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,gBAAED,CAAC,CAACE,OAAJ,mDAAe;AAA3C,UADS;AAAA,OAAV;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,KAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACM,GAAT,CAAa,UAAAC,CAAC;AAAA;;AAAA,4BACb,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,iBAAED,CAAC,CAACE,OAAJ,qDAAe;AAA3C,UADa;AAAA,OAAd;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAS,IAAAA,K;;AALAR,EAAAA,Q;AAKAQ,IAAAA,K;;AAJAP,EAAAA,Q;;AAsGF,eAAeR,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n \n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer>\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\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 <CardTagsContainer>\n {tags.map(x => (\n <Tag label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map(x => (\n <Tag label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
1
+ {"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer>\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\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 <CardTagsContainer>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.4-dev.11",
3
+ "version": "1.9.4-dev.13.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [
@@ -57,19 +57,19 @@
57
57
  },
58
58
  "dependencies": {
59
59
  "@babel/runtime": "^7.16.5",
60
+ "@laerdal/figma-svg": "^2.9.6",
60
61
  "@types/node": "^12.0.0",
61
62
  "@types/react": "^16.9.0",
62
63
  "animated-scroll-to": "^2.2.0",
63
64
  "cypress": "^9.5.0",
64
65
  "moment": "^2.29.1",
65
66
  "react-datepicker": "^3.7.0",
67
+ "react-inlinesvg": "^2.3.0",
66
68
  "react-modal": "^3.11.2",
67
69
  "react-responsive": "^9.0.0-beta.6",
68
70
  "rooks": "^5.11.0",
69
71
  "styled-components": "^5.1.1",
70
- "typescript": "~4.3.5",
71
- "react-inlinesvg": "^2.3.0",
72
- "@laerdal/figma-svg": "^2.9.2"
72
+ "typescript": "~4.3.5"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@babel/cli": "^7.16.0",